Hierarchy of cascade system CSS for instructions

Cascade system is a regulation to avoid conflicts between different style sheets, offering hierarchy depending on its provenance.

Hierarchy of cascade system CSS for instructions | Learn CSS | Cascade system is a regulation to avoid conflicts between different style sheets, offering hierarchy depending on its provenance

Style instructions from different sources are saved according to a hierarchy.

Since the style instructions can be linked and combined in many different ways, it is necessary to determine the procedure to follow in the event of contradictory or conflicting instructions. For example, if we have several instructions assigning different values to the same property, which instruction should we give priority to?

Cascada (cascade)

Cascade refers to the hierarchical system that gives style instructions of greater or lesser importance depending on their origin. It is a regulation system to avoid inconsistencies between different style sheets.

  • Each browser has its own standard style sheet (Browser-Style) which is used to represent HTML pages. The typeface, the background color and the font color, the color of the links, the size of the titles, etc., are formatted by the browser.
  • Modern browsers allow the user to create their own style sheets (custom stylesheets, userstyles). The user can, therefore, configure their preferences in the browser and overwrite with them the settings of the browser style sheet.
  • The style sheets created by us, as a rule, overwrite different instructions from both the browser and the user (if they exist); style sheets are combined. If you link several author style sheets to your page, in case of conflict, the instructions of the last style sheet referenced will always be those that have preference. Your personalized style sheet, that is, the author's style sheet, cannot be overwritten by the user's, since the author's style sheet has higher priority. This hierarchical priority can only be changed using the! Important rule
  • On the other hand, defined (embedded) style instructions can be included in the <head> area of the document. Embedded instructions overwrite external or imported instructions, but only in the current document (that is, the document in which the instructions are embedded).
  • And the but not least, the HTML tag could also appear directly (inline) style instructions. These instructions then have priority over all other instructions, although only in the current instance (that is, in the HTML tag in which the instructions have been written)

Did you like it or was it useful?

Help us share it in Social Networks

Professor at the University of Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Professional in Web Development and SEO Positioning for more than 10 continuous years.
We have more than 200 certificates and recognitions in the Academic and Professional trajectory, including diploma certificates certified by Google.

IT ALSO DESERVES TO PAY TO VISIT:

Not finding what you need?

Use our internal search to discover more information
Sponsored content:
 

Leave your Comment

SPONSOR

Your business can also appear here. More information