CSS inheritance | PracticalSeries: Web Development

5.6 CSS inheritance

It is possible to define a global rule for all text in an HTML document using the inheritance characteristics of CSS.

In an HTML document, all the text that appears on a web page is listed in the <body> section of the document. By defining a style for <body>, all elements within the body section will adopt that body style as the basis for its own style; thus:

style.css

body {
    font-family: helvetica Neue, arial;
    font-size: 18px;
}
h1 {
    color: green;
    font-size: 40px;
}
h2 {
    color: red;
    font-size: 40px;
}
p {
    text-align:justify;
}

Code 5.11 style.css (body style)

a

Here, by defining the font family and basic font size in the body selector, all text that appears in the <body> section of the document will have this font family and size (in this case Arial and 18 pixels). It is now only necessary to change the bits that need to be changed for each style: for the heading <h1> and <h2> elements, this is the colour and the font size; for paragraph text the alignment is changed to justify.

This gives:

Figure 5.19 - Global styles — Figure 5.19 Global styles

This looks very similar to the previous picture, and so it should all we’ve done is consolidate the styles we already had. The only difference is the links to Google and the picture of Henry are now in Arial and are 18 pixels (the style defined for <body>).

This is an important concept, it’s called inheritance, and it means that all ‘child’ elements inherit the properties of their ‘parent’ element unless subsequently overwritten.

It is very useful to be able to do this; effectively we are setting a default set of properties for everything on the web page.

5.6.1 Inheritance, cascading and specificity

Inheritance

Inheritance is what we have just discussed, if we define a property for an HTML element, all subsequent elements contained within that original elements will inherit the properties of the first element.

In the previous example, the font-family was declared for the <body> element. So any other element within the <body> element (i.e. between the <body> and </body> tags) inherits this property; that is why in the previous example the <h1>, <h2>, <a> and <p> elements (all contained within <body>...</body>) all have the same font-family — they inherited it from their parent element. A bit like my grey hair, I got it from my Dad, it’s the Gledhill curse.

Cascading

Cascading (the thing style sheets are named for) is what happens when conflicts arise within the styles.

In the previous example, the <body> element has its font size set to 18 px. This applies to all subsequent (child) elements via inheritance. However, the h1 element has the font-size set to 40 px, contradicting the 18 px imposed by inheritance. Clearly, the h1 size take precedence since the h1 text is larger than 18 px.

This is the rather obvious rule of cascading: properties assigned further down the chain override earlier properties.

Broadly the rules for cascading are:

Later properties override earlier properties
Where more than one property is applied, the last in the list will take precedence (a more specific version of 1)
More specific selectors override less specific selectors
Specified properties override inherited properties

Specificity

In the above list, when I say one selector is more specific than another I’m talking about specificity (horrible word I know). This determines how important the selector type is.

The rule for how important a selector is depends on what it is and where if falls in the hierarchy:

Hierarchy	Selector type	Value
Highest	!important exception	10,000
	Style attribute (e.g. inline)	1,000
	ID	100
	Class/pseudo class	10
Lowest	Element (e.g. <p>)	1
Table 5.2 Specificity table

I know we haven’t covered these terms (class, style attributes, ID, !important &c.) but we will and when we do I will return to specificity.

For the time being just accept that some things we do have more importance than others as far as a browsers is concerned, and where a conflict occurs the most important one will take precedence.

5.6.2 The <body>, <html> and * (asterisk) selectors

At the start of section 5.6 we saw that by setting the body style, we could set the default style for all elements on the page (all visible elements are contained within the <body>...</body> element).

It is possible to do this at the higher level of the <html> element. At first sight this might not seem sensible (since as I’ve just said, all visible elements are contained within the <body>...</body> element); however, defining global settings at the html level has certain advantages. In section 3.2.6 I talked about a cascading problem when using percentages and ems to set the font-size. I actually said the problem with percentages is that they cascade (and they cascade like a bastard).

This is because these modifiers simply change the inherited properties so if we define the base font to be 25 pixels, and we then derive a second style from this and give it a font size of 80%, it will be 20 pixels high; if we now define a third style based on this second style and give this a font size of 80% too, it will give text that is 16 pixels high — it takes 80% of the 80%.

This can be a problem (it can lead to very small or very large text for a start). To get round this a new modifier (rems) was introduced. Now rems do not cascade, they are always applied relative to a default value and that default value is whatever properties are set for the <html> element.

Finally, there is the asterisk selector (*), sometimes referred to as the universal selector; this can be used to select absolutely every element on a page and set its properties.

It differs from the <body> and <html> selectors in that it selects every element including child elements, the <body> and <html> selectors select the base elements (parent elements) and then rely on inheritance to pass the properties down to child element, the asterisk element forces the specified properties on to the child elements unless they are purposefully overwritten in the style for that element.

Thus setting:

 * { color: red;}

Will force all the text on the web page to be red unless there is a specific style for a particular element that changes the colour value for that element.

If an element were to derive its text colour via inheritance, (the parent was green so the child will also be green) then the asterisk selector would override this inheritance, it would be as if the child had the color: red; declaration applied to it.

I use all three of these selectors in the web site. I use them as follows and in this order:

Asterisk (*) selector

I use this to set some very basic properties, mainly the default margins and padding settings for all the elements (there are some other things to do with the box model and I discus these in section 6.2.1).

<html> selector

I use this to set the background colour of the edges of the website (i.e. those bits that are outside the body area).

I also define the default font-size (to which the rem measure will apply) and the default font-family and its colour.

<body> selector

I use the <body> selector to set the maximum and minimum page widths for the body section of the website (the bit that holds the content).