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
on top of the as one
Positioning Elements
Z-Index
might expect. This is due to the nesting of the caption within the figure.
figure { …
z-index: 1;
}
figcaption {
…
z-index: -1;
}
Instead the z-index must be set below 0. The
z-index
z-index: 1;
could be any value equal to or above 0.
If the
z-index is given a value less than 0, then any of its positioned descendants change as well. Thus both the
and move underneath the body text.
figure { …
z-index: -1;
}
figcaption {
…
z-index: 1;
}
68
gure is fixed regardless of the page
ed.
Positioning Elements
Fixed Position
figure { …
position: fixed;
top: 0;
left: 0; }
69
Notice that fi in its position of what part is being view
Floating Elements
70
Floating Elements
It is possible to displace an element out of its position in the normal flow via the CSS float property
• •
An element can be floated to the left or floated to the right .
it is moved all the way to the far left or far right of its containing block and the rest of the content is “reflowed” around the floated element
71
Floating Elements
Float example
A wonderful serenity has taken …

British Museum
When, while the lovely valley …
Notice that a floated block-level element should have a width specified.
figure {
border: 1pt solid #A8A8A8; background-color: #EDEDDD; margin: 0;
padding: 5px;
width: 150px;
}
figure { …
width: 150px;
float: left;
}
figure { …
width: 150px; float: right; margin: 10px;
}
72
Floating Elements
Floating Multiple Items Side by Side

Westminister

Emirates Stadium

Albert Hall

British Museum

Wellington Monument

Lewes Castle
When, while the lovely valley teems ..
As the window resizes, the content in the containing block (the
element),
will try to fill the space that is available to the right of the floated elements.
figure { …
width: 150px;
float: left;
}
73
Floating Elements
Floating Multiple Items Side by Side
Stop elements from flowing around a floated element by using the clear property

Westminister

Emirates Stadium

Albert Hall

British Museum

Wellington Monument

Lewes Castle
When, while the lovely …
.first { clear: left; }
74
Floating Elements
Clear property
• left The left-hand edge of the element cannot be adjacent to another element.
• right The right-hand edge of the element cannot be adjacent to another element.
• both Both the left-hand and right-hand edges of the element cannot be adjacent to another element.
• none The element can be adjacent to other elements.
75
Floating Elements
Containing Floats
Another problem that can occur with floats is when an element is floated within a containing block that contains only floated content. In such a case, the containing block essentially disappears

British Museum
When, while the lovely valley …
figure img { width: 170px; margin: 0 5px; float: left;
}
figure figcaption {
width: 100px;
float: left;
}
figure {
border: 1pt solid #262626; background-color: #c1c1c1; padding: 5px;
width: 400px;
margin: 10px; }
.first { clear: left; }
Notice that the
element’s content area has shrunk down to zero (it now just has padding space and borders).
76
Floating Elements
Overlaying and Hiding Element
figure {
border: 1pt solid #262626; background-color: #c1c1c1; padding: 10px;
width: 200px;
margin: 10px;
}
figcaption { background-color: black; color: white;
opacity: 0.6;
width: 140px;
height: 20px;
padding: 5px;
130px
}
figure { …
position: relative;
}
figcaption {
…
position: absolute;
top: 130px;
left: 10px;
}
This creates the positioning context.
This does the actual move.
77
Floating Elements
Using display

British Museum 
.overlayed {
position: absolute; top: 10px;
left: 10px;
}
new-banner.png
Transparent area
.overlayed {
position: absolute; top: 10px;
left: 10px; display: none;
}
.hide {
display: none;
This hides the overlayed image.
}
This is the preferred way to hide: by adding this additional class to the element. This makes it clear in the markup that
the element is not visible.
78
NEW
Floating Elements
Comparing visibility with display
figure { …
display: auto;
}
figure { …
display: none;
}
figure { …
visibility: hidden;
}
79
Floating Elements
Using Hover with display

The library in the British Museum in London
When the page is displayed, the larger version of the image, which is within the element, is hidden.
figcaption.popup { padding: 10px; background: #e1e1e1; position: absolute;
/* add a drop shadow to the frame */
box-shadow: 0 0 15px #A9A9A9;
/* hide it until there is a hover */
visibility: hidden;
}
figure.thumbnail:hover figcaption.popup { position: absolute;
top: 0;
left: 100px;
/* display image upon hover */
visibility: visible;
}
When the user moves/hovers the mouse over the thumbnail image, the visibility property of the element is set to visible.
80
Styling Tables
81
Styling Tables
Table Borders
table {
border: solid 1pt black;
}
table {
border: solid 1pt black;
}
td {
border: solid 1pt black; }
table {
border: solid 1pt black; border-collapse: collapse;
}
td {
border: solid 1pt black; }
table {
border: solid 1pt black; border-collapse: collapse;
}
td {
82
border: solid 1pt black;
padding: 10pt; }
Styling Tables
Table Borders
table {
border: solid 1pt black; border-collapse: collapse;
}
td {
border: solid 1pt black; }
table {
border: solid 1pt black; border-collapse: collapse;
}
td {
border: solid 1pt black;
padding: 10pt; }
table {
border: solid 1pt black; border-spacing: 10pt;
}
td {
border: solid 1pt black; }
83
Styling Tables
Boxes
caption {
font-weight: bold;
padding: 0.25em 0 0.25em 0;
text-align: left;
text-transform: uppercase;
border-top: 1px solid #DCA806;
}
table {
font-size: 0.8em;
font-family: Arial, sans-serif;
border-collapse: collapse;
border-top: 4px solid #DCA806;
border-bottom: 1px solid white;
text-align: left;
}
thead tr {
background-color: #CACACA;
} 84 th {
padding: 0.75em;
}
padding: 0.25em 0 0.25em 0;
text-align: left;
text-transform: uppercase;
Styling Tables
Boxes
border-top: 1px solid #DCA806;
}
table {
font-size: 0.8em;
font-family: Arial, sans-serif;
border-collapse: collapse;
border-top: 4px solid #DCA806;
border-bottom: 1px solid white;
text-align: left;
}
thead tr {
background-color: #CACACA;
}
th {
} font-weight: bold;
padding: 0.25em 0 0.25em 0; text-align: left; text-transform: uppercase; border-top: 1px solid #DCA806;
}
table {
font-size: 0.8em;
padding: 0.75em; caption {
font-family: Arial, sans-serif;
tbody tr {
border-collapse: collapse;
background-color: #F1F1F1; border-top: 4px solid #DCA806;
border-bottom: 1px solid white; border-bottom: 1px solid white;
color: #6E6E6E;
} text-align: left;
}
85
tbody td {
padding: 0.75em;
}
Styling Tables
Boxes
thead tr {
background-color: #CACACA;
}
th {
padding: 0.75em;
}
tbody tr {
background-color: #F1F1F1;
border-bottom: 1px solid white;
color: #6E6E6E;
}
tbody td {
padding: 0.75em;
}
86
Styling Tables
Hover & Zebras
tbody tr:hover {
background-color: #9e9e9e;
color: black;
}
tbody tr:nth-child(even) {
background-color: lightgray;
}
87
CSS Frameworks
88
CSS Frameworks and Preprocessors
Grid in print design
Most page design begins with a grid. In this case, a seven-column grid is being used to layout page elements in Adobe InDesign.
Without the gridlines visible, the elements on the page do not look random, but planned and harmonious.
89
CSS Frameworks and Preprocessors
Using Bootstrap
left column
main content
right column
90
CSS Frameworks and Preprocessors
CSS Preprocessors
$colorSchemeA: #796d6d; $colorSchemeB: #9c9c9c; $paddingCommon: 0.25em;
footer {
background-color: $colorSchemeA; padding: $paddingCommon * 2;
}
@mixin rectangle($colorBack, $colorBorder) { border: solid 1pt $colorBorder;
margin: 3px;
background-color: $colorBack;
}
fieldset {
@include rectangle($colorSchemeB, $colorSchemeA);
}
.box {
@include rectangle($colorSchemeA, $colorSchemeB); padding: $paddingCommon;
}
Sass source file, e.g., source.scss
This example uses Sass (Syntactically Awesome Stylesheets). Here three variables are defined.
You can reference variables elsewhere. Sass also supports math operators on its variables.
A mixin is like a function and can take parameters. You can use mixins to encapsulate common styling.
A mixin can be referenced/called and passed parameters.
The processor is some type of tool that the developer would run.
The output from the processor is a normal CSS file that would then be referenced in the HTML source file.
Sass Processor
footer {
padding: 0.50em; background-color: #796d6d;
}
fieldset {
border: solid 1pt #796d6d; margin: 3px; background-color: #9c9c9c;
}
.box {
border: solid 1pt #9c9c9c; margin: 3px; background-color: #796d6d; padding: 0.25em;
}
Generated CSS file, e.g., styles.css
91
-
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 theon top of the as one
Positioning Elements
Z-Index
might expect. This is due to the nesting of the caption within the figure.
figure { …
z-index: 1;
}
figcaption {
…
z-index: -1;
}
Instead thez-index must be set below 0. The z-index
z-index: 1;
could be any value equal to or above 0.
If thez-index is given a value less than 0, then any of its positioned descendants change as well. Thus both the and move underneath the body text.
figure { …
z-index: -1;
}
figcaption {
…
z-index: 1;
}
68gure is fixed regardless of the page
ed.
Positioning Elements
Fixed Position
figure { …
position: fixed;
top: 0;
left: 0; }
69
Notice that fi in its position of what part is being view
Floating Elements
70Floating Elements
It is possible to displace an element out of its position in the normal flow via the CSS float property
• •
An element can be floated to the left or floated to the right .
it is moved all the way to the far left or far right of its containing block and the rest of the content is “reflowed” around the floated element
71
Floating ElementsFloat example
A wonderful serenity has taken …
British Museum When, while the lovely valley …
Notice that a floated block-level element should have a width specified.
figure {
border: 1pt solid #A8A8A8; background-color: #EDEDDD; margin: 0;
padding: 5px;
width: 150px;
}
figure { …
width: 150px;
float: left;
}
figure { …
width: 150px; float: right; margin: 10px;
}
72Floating Elements
Floating Multiple Items Side by SideWestminister Emirates Stadium Albert Hall British Museum Wellington Monument Lewes Castle When, while the lovely valley teems ..
As the window resizes, the content in the containing block (the
element),
will try to fill the space that is available to the right of the floated elements.
figure { …
width: 150px;
float: left;
}
73
Floating Elements
Floating Multiple Items Side by Side
Stop elements from flowing around a floated element by using the clear propertyWestminister Emirates Stadium Albert Hall British Museum Wellington Monument Lewes Castle When, while the lovely …
.first { clear: left; }
74Floating Elements
Clear property
• left The left-hand edge of the element cannot be adjacent to another element.
• right The right-hand edge of the element cannot be adjacent to another element.
• both Both the left-hand and right-hand edges of the element cannot be adjacent to another element.
• none The element can be adjacent to other elements.
75
Floating Elements
Containing Floats
Another problem that can occur with floats is when an element is floated within a containing block that contains only floated content. In such a case, the containing block essentially disappearsBritish Museum When, while the lovely valley …
figure img { width: 170px; margin: 0 5px; float: left;
}
figure figcaption {
width: 100px;
float: left;
}
figure {
border: 1pt solid #262626; background-color: #c1c1c1; padding: 5px;
width: 400px;
margin: 10px; }
.first { clear: left; }
Notice that theelement’s content area has shrunk down to zero (it now just has padding space and borders).
76Floating Elements
Overlaying and Hiding Element
figure {
border: 1pt solid #262626; background-color: #c1c1c1; padding: 10px;
width: 200px;
margin: 10px;
}
figcaption { background-color: black; color: white;
opacity: 0.6;
width: 140px;
height: 20px;
padding: 5px;
130px
}
figure { …
position: relative;
}
figcaption {
…
position: absolute;
top: 130px;
left: 10px;
}
This creates the positioning context.
This does the actual move.
77
Floating Elements
Using displayBritish Museum
.overlayed {
position: absolute; top: 10px;
left: 10px;
}
new-banner.png
Transparent area
.overlayed {
position: absolute; top: 10px;
left: 10px; display: none;
}
.hide {
display: none;
This hides the overlayed image.
}
This is the preferred way to hide: by adding this additional class to the element. This makes it clear in the markup that
the element is not visible.
78
NEWFloating Elements
Comparing visibility with display
figure { …
display: auto;
}
figure { …
display: none;
}
figure { …
visibility: hidden;
}
79
Floating Elements
Using Hover with displayThe library in the British Museum in London
When the page is displayed, the larger version of the image, which is within the
element, is hidden.
figcaption.popup { padding: 10px; background: #e1e1e1; position: absolute;
/* add a drop shadow to the frame */
box-shadow: 0 0 15px #A9A9A9;
/* hide it until there is a hover */
visibility: hidden;
}
figure.thumbnail:hover figcaption.popup { position: absolute;
top: 0;
left: 100px;
/* display image upon hover */
visibility: visible;
}
When the user moves/hovers the mouse over the thumbnail image, the visibility property of theelement is set to visible.
80Styling Tables
81
Styling Tables
Table Borders
table {
border: solid 1pt black;
}
table {
border: solid 1pt black;
}
td {
border: solid 1pt black; }
table {
border: solid 1pt black; border-collapse: collapse;
}
td {
border: solid 1pt black; }
table {
border: solid 1pt black; border-collapse: collapse;
}
td {
82
border: solid 1pt black;
padding: 10pt; }Styling Tables
Table Borders
table {
border: solid 1pt black; border-collapse: collapse;
}
td {
border: solid 1pt black; }
table {
border: solid 1pt black; border-collapse: collapse;
}
td {
border: solid 1pt black;
padding: 10pt; }
table {
border: solid 1pt black; border-spacing: 10pt;
}
td {
border: solid 1pt black; }
83
Styling Tables
Boxes
caption {
font-weight: bold;
padding: 0.25em 0 0.25em 0;
text-align: left;
text-transform: uppercase;
border-top: 1px solid #DCA806;
}
table {
font-size: 0.8em;
font-family: Arial, sans-serif;
border-collapse: collapse;
border-top: 4px solid #DCA806;
border-bottom: 1px solid white;
text-align: left;
}
thead tr {
background-color: #CACACA;
} 84 th {
padding: 0.75em;
}padding: 0.25em 0 0.25em 0;
text-align: left;
text-transform: uppercase;
Styling Tables
Boxes
border-top: 1px solid #DCA806;
}
table {
font-size: 0.8em;
font-family: Arial, sans-serif;
border-collapse: collapse;
border-top: 4px solid #DCA806;
border-bottom: 1px solid white;
text-align: left;
}
thead tr {
background-color: #CACACA;
}
th {
} font-weight: bold;
padding: 0.25em 0 0.25em 0; text-align: left; text-transform: uppercase; border-top: 1px solid #DCA806;
}
table {
font-size: 0.8em;
padding: 0.75em; caption {
font-family: Arial, sans-serif;
tbody tr {
border-collapse: collapse;
background-color: #F1F1F1; border-top: 4px solid #DCA806;
border-bottom: 1px solid white; border-bottom: 1px solid white;
color: #6E6E6E;
} text-align: left;
}
85
tbody td {
padding: 0.75em;
}
Styling Tables
Boxes
thead tr {
background-color: #CACACA;
}
th {
padding: 0.75em;
}
tbody tr {
background-color: #F1F1F1;
border-bottom: 1px solid white;
color: #6E6E6E;
}
tbody td {
padding: 0.75em;
}
86Styling Tables
Hover & Zebras
tbody tr:hover {
background-color: #9e9e9e;
color: black;
}
tbody tr:nth-child(even) {
background-color: lightgray;
}
87
CSS Frameworks
88CSS Frameworks and Preprocessors
Grid in print design
Most page design begins with a grid. In this case, a seven-column grid is being used to layout page elements in Adobe InDesign.
Without the gridlines visible, the elements on the page do not look random, but planned and harmonious.
89
CSS Frameworks and Preprocessors
Using Bootstrap
left columnmain contentright column
90CSS Frameworks and Preprocessors
CSS Preprocessors
$colorSchemeA: #796d6d; $colorSchemeB: #9c9c9c; $paddingCommon: 0.25em;
footer {
background-color: $colorSchemeA; padding: $paddingCommon * 2;
}
@mixin rectangle($colorBack, $colorBorder) { border: solid 1pt $colorBorder;
margin: 3px;
background-color: $colorBack;
}
fieldset {
@include rectangle($colorSchemeB, $colorSchemeA);
}
.box {
@include rectangle($colorSchemeA, $colorSchemeB); padding: $paddingCommon;
}
Sass source file, e.g., source.scss
This example uses Sass (Syntactically Awesome Stylesheets). Here three variables are defined.
You can reference variables elsewhere. Sass also supports math operators on its variables.
A mixin is like a function and can take parameters. You can use mixins to encapsulate common styling.
A mixin can be referenced/called and passed parameters.
The processor is some type of tool that the developer would run.
The output from the processor is a normal CSS file that would then be referenced in the HTML source file.
Sass Processor
footer {
padding: 0.50em; background-color: #796d6d;
}
fieldset {
border: solid 1pt #796d6d; margin: 3px; background-color: #9c9c9c;
}
.box {
border: solid 1pt #9c9c9c; margin: 3px; background-color: #796d6d; padding: 0.25em;
}
Generated CSS file, e.g., styles.css
91