Click to skip over navigation
 

lecture 2: cascading and inheritance

<< previous slide

return to lesson 2 index

next slide >>


You are not obliged to define every possible property of every tag you use in the style sheet. Browsers always get style information from somewhere. If no other information is provided, the browser "falls back" upon what are known as its default settings

This paragraph, for instance, should (with the exception of the background colour) be rendered in your browser's default font, colour and size.

You can see the difference (and notice also the loss of the small left-hand margin, which you can also define with styles - we will talk about this in lecture 4).

There is an "order of precedence" with styles. This is known as the cascade (hence the full name of the technique: CSS for Cascading Style Sheets). It is worth becoming aware of the cascade as it can help suggest to you why your style is not looking as you expected.

The browser will apply its default settings...

If the user has changed the default settings then these will be applied

If there is style information in an external style sheet then this will override the defaults

If there is style information in the document header (see the style sheets reference page) then this will override an external sheet

If there is a style attribute in a tag then this will be applied in all cases.

right arrow
right arrow
right arrow

Bear in mind that certain tags inherit styles off other tags higher up in the hierarchy. You can see this with the examples. In each case the background-color property is only defined once, in the <body> tag. It is not necessary to define this for the other tags as each of them "inherits" the property from the <body> tag. The rules are not hard-and-fast but in general tags nested within other tags will inherit properties from them, unless you specify otherwise.

This idea will hopefully become easier once we've discussed block-level and inline tags: and that is the subject of the next slide.




<< previous slide

return to lesson 2 index

next slide >>