Basics of CSS3 Style Inheritance - dummies

Basics of CSS3 Style Inheritance

By John Paul Mueller

The cascading part of Cascading Style Sheet (CSS3) tells it all. A style at the uppermost part of the page hierarchy will cascade down into the lower parts of the page. By defining a style at the right level of the hierarchy, you reduce the work required to implement that style in all the places that the style is needed.

For example, a style that is defined with the <body> tag will flow down into the <div> tag that is a child of the <body> tag. If you defined the style at the <div> level, you would need to define it for each <div> that requires the style. By defining it at the <body> level, you employ a shortcut in the form of a cascading style.

The use of a cascading architecture means that you define styles that affect the page as a whole at a higher level than the specific styles used to define particular elements.

For example, if your page relies mainly on a single font, then you should define that font at the <body> tag. Even though the Document Object Model (DOM) hierarchy starts with the document, moves toward the root (the <html> tag), and only then splits into the <head> and <body> tags, the <body> tag is the first displayable element.

Inheritance also comes in another form. You can define styles in three different places. The location of that definition modifies the priority of that style. Here are the three style locations and their priorities:

  • Inline (top priority): An inline style appears specifically with a particular object. It modifies only that object and no other object in the document or in any other document. Locating and changing an inline style is time-consuming and error-prone, so you should avoid them whenever possible.

  • Internal: An internal style appears as part of the <style> tag in the <head> of the document. It affects all of the objects in the document, but no other document on the site.

    Using internal styles can help you provide special pizzazz to a particular page, but you should use an internal style only when the style is unique to that page, and you never intend to use that style anywhere else. Given that you normally can’t make such a guarantee, it’s best to avoid internal styles whenever possible, but even so, they’re preferable to inline styles.

  • External (lowest priority): An external style appears in an external .CSS file. You must create a reference to this file by using a <link> tag in the <head> of a document. The styles affect every document linked to the .CSS file.

    Using this approach makes updates easier and gives your site a uniform appearance overall. In addition, using external styles makes it easy for people with special needs to supply an alternative style sheet that better meets their needs.

    You can associate as many external style sheets as needed with a page by using multiple <link> tags. This approach lets you use styles from diverse sources so that you can format your page with the least amount of effort.

    External style sheets are processed in the order in which they appear. If two .CSS files contain the same style name that modify the same properties, the style processed last is the style that has precedence.

The final level of inheritance to consider is the selector itself. You can create selectors that act only on objects contained within other objects or that meet special criteria. A specific selector will always override the settings provided by a generic selector, so you should only use this technique when necessary (imagine trying to find all of those specific changes in all the files on your site).

The more specific the selector, the greater its priority becomes. However, you need to consider the effects of the selector’s level within the document — and the manner in which the style is defined — as part of the overall picture.