Slide 1

Slide 1 text

CSS Cascading Style Sheets Friday, February 24, 2012

Slide 2

Slide 2 text

What does CSS do? (extreme makeover CSS edition) Friday, February 24, 2012

Slide 3

Slide 3 text

How does CSS work? • Set of Rules, that • Select elements in a document, and • Change their visual Properties Friday, February 24, 2012

Slide 4

Slide 4 text

A Rule span.important { font-weight: bold; font-style: italic; font-size: 48px; } Friday, February 24, 2012

Slide 5

Slide 5 text

Selector span.important { font-weight: bold; font-style: italic; font-size: 48px; } Friday, February 24, 2012

Slide 6

Slide 6 text

Properties span.important { font-weight: bold; font-style: italic; font-size: 48px; } Friday, February 24, 2012

Slide 7

Slide 7 text

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

Slide 25

Slide 25 text

Borders border-top: 1px solid green; border-right: 5px dotted blue; border-bottom: 3px dashed rgba(0, 0, 0, 0.5); border-left: 20px solid black; Friday, February 24, 2012

Slide 26

Slide 26 text

And so much moar! • Think about what you want • Shapes, sizes, colors, orientations, etc. • http://www.csszengarden.com/ Friday, February 24, 2012

Slide 27

Slide 27 text

(Breath) Friday, February 24, 2012

Slide 28

Slide 28 text

Special HTML •
- For sectioning off the document • - For separating sections of text Friday, February 24, 2012

Slide 29

Slide 29 text

Special HTML Examples

This is my page

This is MY page.

Friday, February 24, 2012

Slide 30

Slide 30 text

Conclusion • Makes HTML pretty • CSS is a set of rules • Rule = Selector + Properties • Complicated but not impossimpible Friday, February 24, 2012

Slide 31

Slide 31 text

Friday, February 24, 2012