1. Web Authoring
Topic 15 –
Basic CSS Layout
Part 2

2. Objectives
Students should able to:
1 Explain Cascading Style Sheet rule
construction
2. Cascading Style Sheet theories.

3. CSS Construction
This sample rules demonstrate some typical
constructions used in selectors and
declarations.

4. CSS Theory
Four CSS theories:
- Cascade theory
- Inheritance theory
- Dependant theory
- Specificity theory

5. Cascade Theory
Cascade theory
The cascade theory describes how the order
and placement of rules in the style sheet or
on the page affects the application of styling.
For example, both the following rules
change the colour of the <h1> element
h1 { color: blue; }
h1 { color: red; }
Which one is honoured by the browser?

6. Inheritance Theory
Inheritance theory
The inheritance theory describes how one
rule can be affected by one or more
previously declared rules.
Example:- Take a look at these rules:
h1 { color: blue; font-family: Verdana; }
div h1 { color: red; }
Which one is honoured by the browser?

7. Inheritance Theory
Inheritance theory
In this situation, all <h1> elements will be
formatted as: blue, Verdana. However, <h1>
elements contained, or nested, within a
<div> element will inherit the Verdana font
but be displayed in red.

8. Descendant Theory
Descendant theory
The descendant theory describes how
formatting can target a particular element
based on its position in relationship to other
elements
Example: Interpret the following rules correctly:
h1 { font-family: Verdana; color: blue; }
div h1 { font-family: Impact; color: red; }
div.product h1 { font-family: Times; color: green;
}

9. Descendant Theory
Descendant theory
The first rule formats all <h1> elements
everywhere in the page as blue, Verdana.

10. Descendant Theory
Descendant theory
The second rule resets the font and colour to
red, Impact for <h1> elements, but only when
they appear within a <div> element.
The third rule further narrows the target to <h1>
elements within <div> elements that are
formatted with a class of product, resetting the
font and colour again, this time to green, Times.

11. Specificity Theory
Specificity theory
Specificity describes the concept of how
browsers determine what formatting to
apply when rules conflict.
Example:
h1 { font-family: Verdana; color: blue; }
div h1 { font-family: Impact; color: red; }
div.product h1 { font-family: Times; color: green; }
:

12. Which Rules?
Browsers typically use the following order of
hierarchy, with 4 being the highest:
1 Browser defaults
2 External style sheet
3 Internal style sheet (in the head section)
4 Inline style (inside an HTML element)
: