1

2

3

4

5

6

=6 + 1 holy crap

7

8

9

10

11

12

13

14

15

I hope you know HTML

16

The most important thing you need to

know...

17

18

Padding

200 x 80

10

10

1010

Border 5

5

55

Margin 10

10

1010

The Box Model

19

widthpadding-left

padding-rightborder-left

border-right+

Calculated Width

20

Padding

200 x 80

10

10

1010

Border 5

5

55

Margin 10

10

1010

Width = 250px

21

heightpadding-top

padding-bottomborder-top

border-bottom+

Calculated Height

22

Padding

200 x 80

10

10

1010

Border 5

5

55

Margin 10

10

1010

Height = 130px

23

Block Level ElementsParent Element

width:auto

If no width declared all block level elements within the parent

element will be set to 100%.

24

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

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

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

Rule of Thumb

Specify the width on:

• floated elements • positioned elements either fixed or absolute

28

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

CSS Rule Set

30

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

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

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

Selector Declaration Block

body { }

Declaration

Property Value

color black: ;

Declaration

Property Value

padding 1em: ;

Declaration Block: anything between the curly brackets

34

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

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

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

All together now

p{ margin: 10px; padding: 20px;}

Declarations can be grouped.

38

All together now

h1, h2, h3 { padding:10px;}

Selectors can be grouped.

39

CSS Shorthand

40

Font

h1{ font-family: Arial; font-size: 100%; font-style: normal; font-variant: small-caps; font-weight: bold; line-height:120%;}

41

Font

h1{ font: bold small-caps 100%/120% Arial;}

42

Font

style

font: bold

variant

small-caps

size

100%

line-height

120%

font-family

Arial ;

43

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

Margin/Padding

margin: 1px 2px 3px 4px;padding: 1px 2px 3px 4px;

T

R

B

L

45

Margin/Padding

margin: 1px 2px 3px 4px;padding: 1px 2px 3px 4px;

T R B L

46

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

Margin/Padding

margin: 1px 1px 1px 1px;padding: 1px 1px 1px 1px;

T/R/B/L

48

Comments

/* Comment */

margin: 1px 2px 3px 4px;

/*padding: 1px 2px 3px 4px;*/

49

Document Tree

50

<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

body

div div

ph1 p

em

ul

lili li

52

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

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

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

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

body

div div

ph1 p

em

ul

lili li

SiblingsAn element that shares the same parent with

another element

57

SpecificityDetermines which CSS rule is applied to an

element by a browser

58

Basic Specificity

Inline Style > #ID > .Class > Element

59

Selectors

60

Type Selectors

li{color: red;}

body

div div

ph1 p

em

ul

lili li

61

Class Selectors

.red{color: red;}

body

div div

ph1 p.red

em

ul

lili li.red

62

Class + Type Selectors

p.red{color: red;}

body

div div

ph1 p.red

em

ul

lili li.red

63

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

Rule of Thumb

<h1>Main Heading</h1>

h1{ font-size: 140%;}

Do HTML elements that already exist

65

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

ID Selectors

#nav{color: red;}

body

div div

ph1 p.red

em

ul nav

lili li.red

#

67

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

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

Descendant Selectors

p em{color: red;}

body

div div

ph1 p.red

em

ul nav

lili li.red

#

70

Universal Selectors

* {color: red;}

body

div div

ph1 p.red

em

ul nav

lili li.red

#

71

Child Selectors

div > em {color: red;}

body

div div

ph1 p.red

em

ul nav

lili li.red

#em

72

Adjacent Sibling Selectors

h1 + p {color: red;}

body

div div

ph1 p.red

em

ul nav

lili li.red

#em

73

Attribute Selectors4 Types

74

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

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

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

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

:Pseudo Classes

79

Most Common

:link:visited:hover:active

80

:first-child

li:first-child {color: red;}

body

div div

ph1 p.red

em

ul nav

lili li.red

#em

81

: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

: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

CSS3 Selectors

84

Most Common

:link:visited:hover:active

85

:first-child

li:first-child {color: red;}

body

div div

ph1 p.red

em

ul nav

lili li.red

#em

86

: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

: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

CSS 3I shall now cheat...I’m also lazy

http://www.css3.info/

89

CSS Tricks

90

• 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

A Clean Stylesheet

92

?http://twitter.com/killermoo

http://bermonpainter.com

http://facebook.com/bermon

93

Books

Designing withWeb StandardsJeffry Zeldman

Transcending CSSAndy Clarke

CSS MasteryAndy Budd

94