How Styles Interact
The Cascade
33
The Cascade: How Styles Interact
CSS
The “Cascade” in CSS refers to how conflicting rules are handled.
The downward movement of water down a cascade is meant to be analogous to how a given style rule will continue to take precedence with child elements
CSS uses the following cascade principles to help it deal with conflicts:
• inheritance,
• specificity, and • location
34
The Cascade: How Styles Interact
Inheritance
Many (but not all) CSS properties affect not only themselves but their descendants as well.
Are inheritable: • Font,
• color,
• list, and
• text properties
Not inheritable: • layout,
• sizing,
• border,
• background, and
• spacing properties
35
The Cascade: How Styles Interact
Inheritance
body {
font-family: Arial; color: red;
border: 8pt solid green; margin: 60px;
}
Inherited
Inherited Not inherited Not inherited
-
-
36
The Cascade: How Styles Interact
Inheritance
div {
font-weight: bold;
margin: 50px;
border: 1pt solid green; }
-
-
Inherited Not inherited Not inherited
37
The Cascade: How Styles Interact
Specificity
body {
font-weight: bold; color: red;
}
div {
font-weight: normal; color: magenta;
}
p {
color: green;
}
.last {
color: blue;
}
#verylast {
color: orange; font-size: 16pt;
}
This text is not within a p element.
Reviews
By Ricardo on 2016-05-23
Easy on the HDR buddy.
This text is not within a p element.
By Susan on 2016-11-18
I love Central Park.
By Dave on 2016-11-24
Thanks for posting.
38
The Cascade
Specificity Value
0001
0002
0010
0100
0101
Specificity Algorithm
1
overrides
element selector
descendant selector (elements only)
2 overrides
class and attribute selectors
overrides 3
id selector 4 overrides
id + additional selectors
overrides 5
A higher specificity value overrides lower specificity values.
div {
color: green;
}
div form { color: orange;
}
.example { color: blue;
}
a[href$=”.pdf”] {
color: blue; }
#firstExample { color: magenta;
}
div #firstExample { color: grey;
}
inline style attribute
1000
39
The Cascade: How Styles Interact
Location
overrides 2 overrides 4
1 overrides
Browser’s default style settings
user-styles.css
#example { color: green;
}
sample text
5 overrides
#example { color: blue;
}
6 overrides
40
The Box Model
41
The Box Model
Overview
margin
border
padding
background-color/background-image of element
Every CSS rule begins with a selector. The selector identifies
width
which element or elements in the HTML document will be
affected by the declarations in the rule. Another way of thinking of selectors is that they are a pattern which is used
element content area
by the browser to select the HMTL elements that will receive
height
background-color/background-image of element’s parent
Every CSS rule begins with a selector. The selector identifies which element or elements in the HTML document will be
42
affected by the declarations in the rule. Another way of thinking of selectors is that they are a pattern that is used
The Box Model
Background
• Background
• Background-attachment • Background-color
• Background-image
• Background-position
• Background-repeat
• Background-size
43
The Box Model
Background
44
The Box Model
Collapsing Margins
45
The Box Model
CSS TRBL Shortcut
border-top-color: red; /* sets just the top side */ border-right-color: green; /* sets just the right side */ border-bottom-color: yellow; /* sets just the bottom side */ border-left-color: blue; /* sets just the left side */
Alternately, we can set all four sides at once: border-color: red; /* sets all four sides to red */ border-color: red green orange blue; /* sets 4 colors */
46
The Box Model
Box Dimensions
47
The Box Model
Limitations of Height Property
48
The Box Model
Overflow Property
49
CSS Text Styling
50
CSS Text Styling
Font Family
Property Description
font A combined shorthand property that allows you to set the family, style, size, variant, and weight in one
property.
style weight variant size font-family
font-family Specifies the typeface/font to use. More than one can be specified.
font-size The size of the font in one of the measurement units
font-style Specifies whether italic, oblique, or normal
font-variant Specifies either small-caps text or none
font-weight Specifies either normal, bold, bolder, lighter, or a value between 100 and 900 in multiples of 100,
where larger number represents weightier (i.e., bolder) text.
51
CSS Text Styling
Specifying the Font Family
1 Use this font as 3 If it isn’t available, the first choice. then use this one.
p { font-family: Cambria, Georgia, “Times New Roman”, serif; }
2 But if it is not available, 4 And if it is not available then use this one. either, then use the
default generic serif font.
52
CSS Text Styling
Different Font Families
53
CSS Text Styling
Font Sizes
/* using 16px scale */
body { font-size: 100%; }
p { font-size: 1em; }
h3 { font-size: 1.125em; } /* 1.25 x 16 = 18 */ h2 { font-size: 1.5em; } /* 1.5 x 16 = 24 */ h1 { font-size: 2em; } /* 2 x 16 = 32 */
Browser’s default text size is usually 16 pixels
100% or 1em is 16 pixels
125% or 1.125em is 18 pixels
150% or 1.5em is 24 pixels
200% or 2em is 32 pixels
/* 1.0 x 16 = 16 */
54
CSS Text Styling
Paragraph Properties
Just as there are properties that affect the font in CSS, there are also a range of CSS properties that affect text independently of the font.
• letter-spacing
• line-height
• text-align
• text-decoration • text-direction
• text-shadow •…
55
Normal Flow
56
Normal Flow
To understand CSS positioning and layout, it is essential that we understand this distinction as well as the idea of normal flow:
how the browser will normally display block-level elements and inline elements from left to right and from top to bottom
57
Normal Flow
• Block-level elements such as
,
,
,
, and
are each contained on their own line.
• Inline elements do not form their own blocks but instead are displayed within lines.
58
Normal Flow
Block-Level Elements
Browser
…
…
Each block exists on its own line and is displayed in normal flow from the browser window’s top to its bottom.
By default each block-level element fills up the entire width of its parent (in this case, it is the
, which is equivalent to the width of the browser window).
You can use CSS box model properties to customize, for instance, the width of the box and the margin space between other block-level elements.
59
Normal Flow
Inline Elements
This photo of Conservatory Pond in Central Park New York City
was taken on October 22, 2015 with a Canon EOS 30D camera.
Inline content is laid out horizontally left to right within its container.
Once a line is filled with content, the next line will receive the remaining content, and so on.
Here the content of this
element is displayed on two lines.
If the browser window resizes, then inline content will be “reflowed” based on the new width.
Here the content of this
element is now displayed on three lines.
Browser
text
text
text
text
Browser
text
text
Normal Flow
Block and Inline Elements
Browser
text
text
text
text
text text
text
text
text
- …
- …
A document consists of block-level elements stacked from top to bottom.
Within a block, inline content is horizontally placed left to right.
Some block-level elements can contain other block-level elements (in this example, a
can contain other blocks).
In such a case, the block-level content inside the parent is stacked from top to bottom within the container (
).
61
Positioning Elements
62
Positioning Elements
• absolute The element is removed from normal flow and positioned in relation to its nearest positioned ancestor.
• fixed The element is fixed in a specific position in the window even when the document is scrolled.
• relative The element is moved relative to where it would be in the normal flow.
• static The element is positioned according to the normal flow. This is the default.
63
Positioning Elements
Relative Positioning
64
Positioning Elements
Absolute Positioning
65
Positioning Elements
Absolute Positioning is relative to nearest positioned ancestor
66
Positioning Elements
Z-Index
figure {
position: absolute;
top: 150px;
left: 200px;
}
figcaption {
position: absolute;
top: 90px;
left: 140px;
}
figure { …
67
z-index: 5;
}
figcaption {
…
}
Note that this did not move the
-
36
The Cascade: How Styles Interact
Inheritance
div {
font-weight: bold;
margin: 50px;
border: 1pt solid green; }
-
Inherited Not inherited Not inherited
37
The Cascade: How Styles Interact
Specificity
body {
font-weight: bold; color: red;
}
div {
font-weight: normal; color: magenta;
}
p {
color: green;
}
.last {
color: blue;
}
#verylast {
color: orange; font-size: 16pt;
}
This text is not within a p element.Reviews
By Ricardo on
2016-05-23 Easy on the HDR buddy.
This text is not within a p element.
By Susan on
2016-11-18 I love Central Park.
By Dave on
2016-11-24 Thanks for posting.
38The Cascade
Specificity Value
0001
0002
0010
0100
0101
Specificity Algorithm
1
overrides
element selector
descendant selector (elements only)
2 overrides
class and attribute selectors
overrides 3
id selector 4 overrides
id + additional selectors
overrides 5
A higher specificity value overrides lower specificity values.
div {
color: green;
}
div form { color: orange;
}
.example { color: blue;
}
a[href$=”.pdf”] {
color: blue; }
#firstExample { color: magenta;
}
div #firstExample { color: grey;
}
inline style attribute1000
39
The Cascade: How Styles Interact
Location
overrides 2 overrides 4
1 overrides
Browser’s default style settings
user-styles.css
#example { color: green;
}
sample text
5 overrides
#example { color: blue;
}
6 overrides
40The Box Model
41
The Box Model
Overview
margin
border
padding
background-color/background-image of element
Every CSS rule begins with a selector. The selector identifies
width
which element or elements in the HTML document will be
affected by the declarations in the rule. Another way of thinking of selectors is that they are a pattern which is used
element content area
by the browser to select the HMTL elements that will receive
height
background-color/background-image of element’s parent
Every CSS rule begins with a selector. The selector identifies which element or elements in the HTML document will be
42
affected by the declarations in the rule. Another way of thinking of selectors is that they are a pattern that is usedThe Box Model
Background
• Background
• Background-attachment • Background-color
• Background-image
• Background-position
• Background-repeat
• Background-size
43
The Box Model
Background
44The Box Model
Collapsing Margins
45
The Box Model
CSS TRBL Shortcut
border-top-color: red; /* sets just the top side */ border-right-color: green; /* sets just the right side */ border-bottom-color: yellow; /* sets just the bottom side */ border-left-color: blue; /* sets just the left side */
Alternately, we can set all four sides at once: border-color: red; /* sets all four sides to red */ border-color: red green orange blue; /* sets 4 colors */
46The Box Model
Box Dimensions
47
The Box Model
Limitations of Height Property
48The Box Model
Overflow Property
49
CSS Text Styling
50CSS Text Styling
Font Family
Property Description
font A combined shorthand property that allows you to set the family, style, size, variant, and weight in one
property.
style weight variant size font-family
font-family Specifies the typeface/font to use. More than one can be specified.
font-size The size of the font in one of the measurement units
font-style Specifies whether italic, oblique, or normal
font-variant Specifies either small-caps text or none
font-weight Specifies either normal, bold, bolder, lighter, or a value between 100 and 900 in multiples of 100,
where larger number represents weightier (i.e., bolder) text.
51
CSS Text Styling
Specifying the Font Family
1 Use this font as 3 If it isn’t available, the first choice. then use this one.
p { font-family: Cambria, Georgia, “Times New Roman”, serif; }
2 But if it is not available, 4 And if it is not available then use this one. either, then use the
default generic serif font.
52CSS Text Styling
Different Font Families
53
CSS Text Styling
Font Sizes
/* using 16px scale */
body { font-size: 100%; }
p { font-size: 1em; }
h3 { font-size: 1.125em; } /* 1.25 x 16 = 18 */ h2 { font-size: 1.5em; } /* 1.5 x 16 = 24 */ h1 { font-size: 2em; } /* 2 x 16 = 32 */
Browser’s default text size is usually 16 pixels100% or 1em is 16 pixels
125% or 1.125em is 18 pixels
150% or 1.5em is 24 pixels
200% or 2em is 32 pixels
/* 1.0 x 16 = 16 */
54CSS Text Styling
Paragraph Properties
Just as there are properties that affect the font in CSS, there are also a range of CSS properties that affect text independently of the font.
• letter-spacing
• line-height
• text-align
• text-decoration • text-direction
• text-shadow •…
55
Normal Flow
56Normal Flow
To understand CSS positioning and layout, it is essential that we understand this distinction as well as the idea of normal flow:
how the browser will normally display block-level elements and inline elements from left to right and from top to bottom
57
Normal Flow
• Block-level elements such as,
,,
- , and
- …
- …
are each contained on their own line.
• Inline elements do not form their own blocks but instead are displayed within lines.
58Normal Flow
Block-Level Elements
Browser…
…
Each block exists on its own line and is displayed in normal flow from the browser window’s top to its bottom.
, which is equivalent to the width of the browser window).
By default each block-level element fills up the entire width of its parent (in this case, it is the
You can use CSS box model properties to customize, for instance, the width of the box and the margin space between other block-level elements.
59
Normal Flow
Inline ElementsThis photo of Conservatory Pond in Central Park New York City
was taken on October 22, 2015 with a Canon EOS 30D camera.Inline content is laid out horizontally left to right within its container.
Once a line is filled with content, the next line will receive the remaining content, and so on.
Here the content of thiselement is displayed on two lines.
If the browser window resizes, then inline content will be “reflowed” based on the new width.
Here the content of thiselement is now displayed on three lines.
Browsertext
text
text
text
Browsertext
textNormal Flow
Block and Inline Elements
Browsertext
text
texttext
text text
text
text
textA document consists of block-level elements stacked from top to bottom.
Within a block, inline content is horizontally placed left to right.
Some block-level elements can contain other block-level elements (in this example, acan contain other blocks).
In such a case, the block-level content inside the parent is stacked from top to bottom within the container ().
61
Positioning Elements
62Positioning Elements
• absolute The element is removed from normal flow and positioned in relation to its nearest positioned ancestor.
• fixed The element is fixed in a specific position in the window even when the document is scrolled.
• relative The element is moved relative to where it would be in the normal flow.
• static The element is positioned according to the normal flow. This is the default.
63
Positioning Elements
Relative Positioning
64Positioning Elements
Absolute Positioning
65
Positioning Elements
Absolute Positioning is relative to nearest positioned ancestor
66Positioning Elements
Z-Index
figure {
position: absolute;
top: 150px;
left: 200px;
}
figcaption {
position: absolute;
top: 90px;
left: 140px;
}
figure { …
67
z-index: 5;
}
figcaption {
…
}
Note that this did not move the