Rule = Selector + Properties
Friday, February 24, 2012
Slide 8
Slide 8 text
SELECTORS
Friday, February 24, 2012
Slide 9
Slide 9 text
Selecting By Tag
• p { ... } - All
tags in the document
• body { ... } - The document’s
tag
• h2 { ... } - All
tags in the document
• em { ... } - All the tag
• ul { ... } - All the
tags
Friday, February 24, 2012
Slide 10
Slide 10 text
Selecting By Id
• #funny - Selects the one element in the
document with an id=”funny”
• p#neat - Selects
• h3#uber - Selects
Friday, February 24, 2012
Slide 11
Slide 11 text
Selecting by Class
• .cool - Selects all elements that have the
class “cool”
• em.red - Selects only tags that have
the class “red”
• p.lawyer-talk - Selects only
tags
that have the class “lawyer-talk”
Friday, February 24, 2012
Slide 12
Slide 12 text
Selecting Many Things
em, p.important, #super
•
•
•
Friday, February 24, 2012
Slide 13
Slide 13 text
Friday, February 24, 2012
Slide 14
Slide 14 text
Selecting Nested Things!
div#header p em.red
OMGWOW
This is so cool.
Well, I think so...
Friday, February 24, 2012
Slide 15
Slide 15 text
All together now...
strong.blue,
p em,
div#yes h2 em.blue
Friday, February 24, 2012
Slide 16
Slide 16 text
PROPERTIES
Friday, February 24, 2012
Slide 17
Slide 17 text
Property Anatomy
font-family: Helvetica;
Name Value
Friday, February 24, 2012
Slide 18
Slide 18 text
Property Anatomy
font-size: 20px;
Name Value
Friday, February 24, 2012
Slide 19
Slide 19 text
Values
• 20px
• bold
• url(“images/tyler_hair.jpg”)
• “Lucida Grande”
Friday, February 24, 2012
Slide 20
Slide 20 text
Tons of Properties
• Online documentation is really good
• IMPOSSIMPIBLE TO EXPLAIN THEM ALL
• But we can at least give some practical
examples...
Friday, February 24, 2012
Slide 21
Slide 21 text
Change text color
.red { color: red; }
.blue { color: #0000aa; }
.green { color: rgba(0, 200, 0); }
Friday, February 24, 2012
Slide 22
Slide 22 text
Change Font Size
font-size: 20px;
font-size: 120%;
font-size: 2em;
Friday, February 24, 2012
Slide 23
Slide 23 text
Padding!
padding-top: 20px;
padding-right: 40px;
padding-bottom: 6px;
padding-left: 2px;
padding: 20px 40px 6px 2px;
OR
Friday, February 24, 2012
Slide 24
Slide 24 text
Background
background-color: blue;
background-image: url(tyler_hair.jpg);
background-position: top left;
background-repeat: no-repeat;
background: blue url(tyler_hair.jpg)
top left no-repeat;
OR
Friday, February 24, 2012