css in all its glory
DESCRIPTION
A basic overview for people interested in getting started with CSS.TRANSCRIPT
![Page 1: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/1.jpg)
1
![Page 2: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/2.jpg)
2
![Page 3: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/3.jpg)
3
![Page 4: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/4.jpg)
4
![Page 5: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/5.jpg)
5
![Page 6: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/6.jpg)
6
![Page 7: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/7.jpg)
=6 + 1 holy crap
7
![Page 8: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/8.jpg)
8
![Page 9: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/9.jpg)
9
![Page 10: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/10.jpg)
10
![Page 11: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/11.jpg)
11
![Page 12: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/12.jpg)
12
![Page 13: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/13.jpg)
13
![Page 14: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/14.jpg)
14
![Page 15: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/15.jpg)
15
![Page 16: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/16.jpg)
I hope you know HTML
16
![Page 17: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/17.jpg)
The most important thing you need to
know...
17
![Page 18: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/18.jpg)
18
![Page 19: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/19.jpg)
Padding
200 x 80
10
10
1010
Border 5
5
55
Margin 10
10
1010
The Box Model
19
![Page 20: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/20.jpg)
widthpadding-left
padding-rightborder-left
border-right+
Calculated Width
20
![Page 21: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/21.jpg)
Padding
200 x 80
10
10
1010
Border 5
5
55
Margin 10
10
1010
Width = 250px
21
![Page 22: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/22.jpg)
heightpadding-top
padding-bottomborder-top
border-bottom+
Calculated Height
22
![Page 23: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/23.jpg)
Padding
200 x 80
10
10
1010
Border 5
5
55
Margin 10
10
1010
Height = 130px
23
![Page 24: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/24.jpg)
Block Level ElementsParent Element
width:auto
If no width declared all block level elements within the parent
element will be set to 100%.
24
![Page 25: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/25.jpg)
Block Level ElementsParent Element
width:200px
If you declare a width...well your block level element will
have that width, regardless of the parent element
25
![Page 26: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/26.jpg)
Absolute ElementsParent Element
well hello there
If you don’t specify a width, the box will expand with the
content. It will expand until 100% of the parent, then wrap.
well hello there...the box expands
26
![Page 27: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/27.jpg)
Floated ElementsParent Element
well hello there
Mimics the behavior of positioned elements.
Doesn’t depend on relative positioning
well hello there...the box expands
27
![Page 28: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/28.jpg)
Rule of Thumb
Specify the width on:
• floated elements • positioned elements either fixed or absolute
28
![Page 29: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/29.jpg)
Inline ElementsParent Element
well hello there
Just really long, skinny boxes
well hello there...the box expands
well hello there
well hello there...the box expands
29
![Page 30: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/30.jpg)
CSS Rule Set
30
![Page 31: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/31.jpg)
CSS Rule SetTells a browser how to render HTML boxes
Selector Declaration Block
body { }
Declaration
Property Value
color black: ;
Declaration
Property Value
padding 1em: ;
31
![Page 32: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/32.jpg)
CSS Rule SetTells a browser how to render HTML elements
Selector Declaration Block
body { }
Declaration
Property Value
color black: ;
Declaration
Property Value
padding 1em: ;
32
![Page 33: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/33.jpg)
Selector Declaration Block
body { }
Declaration
Property Value
color black: ;
Declaration
Property Value
padding 1em: ;
Selector: “selects” an HTML element that should be affected by a rule set
33
![Page 34: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/34.jpg)
Selector Declaration Block
body { }
Declaration
Property Value
color black: ;
Declaration
Property Value
padding 1em: ;
Declaration Block: anything between the curly brackets
34
![Page 35: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/35.jpg)
Selector Declaration Block
body { }
Declaration
Property Value
color black: ;
Declaration
Property Value
padding 1em: ;
Declaration: Tells the browser how to draw any element on a page that is selected
35
![Page 36: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/36.jpg)
Selector Declaration Block
body { }
Declaration
Property Value
color black: ;
Declaration
Property Value
padding 1em: ;
Property: The aspects of the HTML element that you are choosing to style.
36
![Page 37: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/37.jpg)
Selector Declaration Block
body { }
Declaration
Property Value
color black: ;
Declaration
Property Value
padding 1em: ;
Value: The exact style you want to set for the property
37
![Page 38: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/38.jpg)
All together now
p{ margin: 10px; padding: 20px;}
Declarations can be grouped.
38
![Page 39: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/39.jpg)
All together now
h1, h2, h3 { padding:10px;}
Selectors can be grouped.
39
![Page 40: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/40.jpg)
CSS Shorthand
40
![Page 41: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/41.jpg)
Font
h1{ font-family: Arial; font-size: 100%; font-style: normal; font-variant: small-caps; font-weight: bold; line-height:120%;}
41
![Page 42: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/42.jpg)
Font
h1{ font: bold small-caps 100%/120% Arial;}
42
![Page 43: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/43.jpg)
Font
style
font: bold
variant
small-caps
size
100%
line-height
120%
font-family
Arial ;
43
![Page 44: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/44.jpg)
Margin/Paddingp{ margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px; padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px;}
44
![Page 45: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/45.jpg)
Margin/Padding
margin: 1px 2px 3px 4px;padding: 1px 2px 3px 4px;
T
R
B
L
45
![Page 46: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/46.jpg)
Margin/Padding
margin: 1px 2px 3px 4px;padding: 1px 2px 3px 4px;
T R B L
46
![Page 47: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/47.jpg)
Margin/Padding
margin: 1px 2px 3px 2px;padding: 1px 2px 3px 2px;
T R/L B
margin: 1px 2px 1px 2px;padding: 1px 2px 1px 2px;
T/B R/L
47
![Page 48: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/48.jpg)
Margin/Padding
margin: 1px 1px 1px 1px;padding: 1px 1px 1px 1px;
T/R/B/L
48
![Page 49: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/49.jpg)
Comments
/* Comment */
margin: 1px 2px 3px 4px;
/*padding: 1px 2px 3px 4px;*/
49
![Page 50: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/50.jpg)
Document Tree
50
![Page 51: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/51.jpg)
<body> <div id="container"> <h1>This is the document tree</h1> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum <strong>dolor</strong> sit amet</p> </div> <div id="nav"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div></body>
51
![Page 52: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/52.jpg)
body
div div
ph1 p
em
ul
lili li
52
![Page 53: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/53.jpg)
body
div div
ph1 p
em
ul
lili li
AncestorAny element that’s connected but further
up the document tree, no matter how many level higher.
53
![Page 54: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/54.jpg)
body
div div
ph1 p
em
ul
lili li
DescendantAny element that’s connected but lower down the document tree, no matter how
many levels lower.
54
![Page 55: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/55.jpg)
body
div div
ph1 p
em
ul
lili li
ParentElement that is directly above and connected
to an element in the document tree
Parent
Child
55
![Page 56: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/56.jpg)
body
div div
ph1 p
em
ul
lili li
ChildElement that is directly below and connected
to an element in the document tree
Parent
Child
56
![Page 57: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/57.jpg)
body
div div
ph1 p
em
ul
lili li
SiblingsAn element that shares the same parent with
another element
57
![Page 58: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/58.jpg)
SpecificityDetermines which CSS rule is applied to an
element by a browser
58
![Page 59: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/59.jpg)
Basic Specificity
Inline Style > #ID > .Class > Element
59
![Page 60: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/60.jpg)
Selectors
60
![Page 61: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/61.jpg)
Type Selectors
li{color: red;}
body
div div
ph1 p
em
ul
lili li
61
![Page 62: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/62.jpg)
Class Selectors
.red{color: red;}
body
div div
ph1 p.red
em
ul
lili li.red
62
![Page 63: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/63.jpg)
Class + Type Selectors
p.red{color: red;}
body
div div
ph1 p.red
em
ul
lili li.red
63
![Page 64: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/64.jpg)
Rule of Thumb
<div class="heading">Main Heading</div>
.heading{ font-weight: bold; font-size: 140%;}
Don’t use classes to style HTML elements to look like other elements
64
![Page 65: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/65.jpg)
Rule of Thumb
<h1>Main Heading</h1>
h1{ font-size: 140%;}
Do HTML elements that already exist
65
![Page 66: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/66.jpg)
Think before you class
1. Is there an existing HTML element that I can use instead?
2. Is there a class or ID further up the document tree that can be used?
66
![Page 67: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/67.jpg)
ID Selectors
#nav{color: red;}
body
div div
ph1 p.red
em
ul nav
lili li.red
#
67
![Page 68: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/68.jpg)
ID vs .classID’s
• They are unique • Each element can only have one ID • Each page can only have one element with the same ID • ID’s have special browser functionality • Javascript loves ID’s
<div id="nav header"></div>
68
![Page 69: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/69.jpg)
ID vs .class
Classes
• They aren’t unique • The same class can be used on multiple elements • You can use multiple classes on the same element
<div class="nav header"></div>
69
![Page 70: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/70.jpg)
Descendant Selectors
p em{color: red;}
body
div div
ph1 p.red
em
ul nav
lili li.red
#
70
![Page 71: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/71.jpg)
Universal Selectors
* {color: red;}
body
div div
ph1 p.red
em
ul nav
lili li.red
#
71
![Page 72: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/72.jpg)
Child Selectors
div > em {color: red;}
body
div div
ph1 p.red
em
ul nav
lili li.red
#em
72
![Page 73: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/73.jpg)
Adjacent Sibling Selectors
h1 + p {color: red;}
body
div div
ph1 p.red
em
ul nav
lili li.red
#em
73
![Page 74: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/74.jpg)
Attribute Selectors4 Types
74
![Page 75: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/75.jpg)
Attribute SelectorsSelect based on the attribute
<img src="image.png" width="100" height="100" title="Main Image" alt="Main Image"/>
img[title] { border: 1px solid #000; }img[width] { border: 1px solid #000; }img[alt] { border: 1px solid #000; }
75
![Page 76: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/76.jpg)
Attribute SelectorsSelect based on the attribute’s value
<img src="image.png" width="100" height="100" title="Main Image" alt="Main Image"/>
img[src="image.png"] { border: 1px solid #000; }
76
![Page 77: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/77.jpg)
Attribute SelectorsSelect based on the space separated
instances of a value
<img src="image.png" width="100" height="100" title="Main Image" alt="Main Image"/>
img[alt~="Main"] { border: 1px solid #000;}
77
![Page 78: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/78.jpg)
Attribute SelectorsSelect based on the hyphen separated
instances of a value
<img src="image.png" width="100" height="100" title="Main Image" alt="Main Image"/>
img[alt|="Main"] { border: 1px solid #000;}
78
![Page 79: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/79.jpg)
:Pseudo Classes
79
![Page 80: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/80.jpg)
Most Common
:link:visited:hover:active
80
![Page 81: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/81.jpg)
:first-child
li:first-child {color: red;}
body
div div
ph1 p.red
em
ul nav
lili li.red
#em
81
![Page 82: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/82.jpg)
:first-line
p:first-line {color: red;}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum purus non risus porttitor convallis. In vitae nulla id felis.
82
![Page 83: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/83.jpg)
:before and :after
p:before {content: “ extra stuff”}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum purus non risus porttitor convallis. In vitae nulla id felis. extra stuff
83
![Page 84: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/84.jpg)
CSS3 Selectors
84
![Page 85: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/85.jpg)
Most Common
:link:visited:hover:active
85
![Page 86: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/86.jpg)
:first-child
li:first-child {color: red;}
body
div div
ph1 p.red
em
ul nav
lili li.red
#em
86
![Page 87: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/87.jpg)
:first-line
p:first-line {color: red;}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum purus non risus porttitor convallis. In vitae nulla id felis.
87
![Page 88: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/88.jpg)
:before and :after
p:before {content: “ extra stuff”}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum purus non risus porttitor convallis. In vitae nulla id felis. extra stuff
88
![Page 89: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/89.jpg)
CSS 3I shall now cheat...I’m also lazy
http://www.css3.info/
89
![Page 90: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/90.jpg)
CSS Tricks
90
![Page 91: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/91.jpg)
• Absolute Positioning (z-index)
• Multi-Column Layouts with floats
• .clearfix
• Image Sprites
• Image Replacement
• Center align elements
• display:none vs visibility:hidden
• Multiple background images
91
![Page 92: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/92.jpg)
A Clean Stylesheet
92
![Page 93: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/93.jpg)
?http://twitter.com/killermoo
http://bermonpainter.com
http://facebook.com/bermon
93
![Page 94: CSS in all its Glory](https://reader030.vdocuments.net/reader030/viewer/2022012922/545b3c6baf795998788b5f2b/html5/thumbnails/94.jpg)
Books
Designing withWeb StandardsJeffry Zeldman
Transcending CSSAndy Clarke
CSS MasteryAndy Budd
94