Ryan Sandor Richards - CSS WOW

CSS Cascading Style Sheets Friday, February 24, 2012

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

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

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

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

Properties span.important { font-weight: bold; font-style: italic; font-size: 48px; }

Rule = Selector + Properties Friday, February 24, 2012

SELECTORS Friday, February 24, 2012

Selecting By Tag • p { ... } - All
<p> tags in the document • body { ... } - The document’s <body> tag • h2 { ... } - All <h2> tags in the document • em { ... } - All the <em> tag • ul { ... } - All the <ul> tags Friday, February 24, 2012

Selecting By Id • #funny - Selects the one element
in the document with an id=”funny” • p#neat - Selects <p id=”neat”> • h3#uber - Selects <h3 id=”uber”> Friday, February 24, 2012

Selecting by Class • .cool - Selects all elements that
have the class “cool” • em.red - Selects only <em> tags that have the class “red” • p.lawyer-talk - Selects only <p> tags that have the class “lawyer-talk” Friday, February 24, 2012

Selecting Many Things em, p.important, #super • <em> • <p
class=”important”> • <div id=”super”> Friday, February 24, 2012

Selecting Nested Things! div#header p em.red <div id=”header”> <em>OMGWOW</em> <p>
This is <em>so</em> cool. </p> <p> Well, <em>I</em> think so... </p> </div> Friday, February 24, 2012

All together now... strong.blue, p em, div#yes h2 em.blue Friday,
February 24, 2012

PROPERTIES Friday, February 24, 2012

Property Anatomy font-family: Helvetica; Name Value Friday, February 24, 2012

Property Anatomy font-size: 20px; Name Value Friday, February 24, 2012

Values • 20px • bold • url(“images/tyler_hair.jpg”) • “Lucida Grande”

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

Change text color .red { color: red; } .blue {
color: #0000aa; } .green { color: rgba(0, 200, 0); } Friday, February 24, 2012

Change Font Size font-size: 20px; font-size: 120%; font-size: 2em; Friday,
February 24, 2012

Padding! padding-top: 20px; padding-right: 40px; padding-bottom: 6px; padding-left: 2px; padding:
20px 40px 6px 2px; OR Friday, February 24, 2012

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

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

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

(Breath) Friday, February 24, 2012

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

Special HTML Examples <div id=”header”> <h1>This is my page</h1> </div>
<p> This is <span class=”important”>MY</span> page. </p> Friday, February 24, 2012

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

Ryan Sandor Richards - CSS WOW

Ryan Sandor Richards - CSS WOW

Steven! Ragnarök

More Decks by Steven! Ragnarök

Other Decks in Programming

Featured

Transcript

CSS Cascading Style Sheets Friday, February 24, 2012

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

How does CSS work? • Set of Rules, that •

A Rule span.important { font-weight: bold; font-style: italic; font-size: 48px;

Selector span.important { font-weight: bold; font-style: italic; font-size: 48px; }

Properties span.important { font-weight: bold; font-style: italic; font-size: 48px; }

Rule = Selector + Properties Friday, February 24, 2012

SELECTORS Friday, February 24, 2012

Selecting By Tag • p { ... } - All

Selecting By Id • #funny - Selects the one element

Selecting by Class • .cool - Selects all elements that

Selecting Many Things em, p.important, #super • <em> • <p

Friday, February 24, 2012

Selecting Nested Things! div#header p em.red <div id=”header”> <em>OMGWOW</em> <p>

All together now... strong.blue, p em, div#yes h2 em.blue Friday,

PROPERTIES Friday, February 24, 2012

Property Anatomy font-family: Helvetica; Name Value Friday, February 24, 2012

Property Anatomy font-size: 20px; Name Value Friday, February 24, 2012

Values • 20px • bold • url(“images/tyler_hair.jpg”) • “Lucida Grande”

Tons of Properties • Online documentation is really good •

Change text color .red { color: red; } .blue {

Change Font Size font-size: 20px; font-size: 120%; font-size: 2em; Friday,

Padding! padding-top: 20px; padding-right: 40px; padding-bottom: 6px; padding-left: 2px; padding:

Background background-color: blue; background-image: url(tyler_hair.jpg); background-position: top left; background-repeat: no-repeat;

Borders border-top: 1px solid green; border-right: 5px dotted blue; border-bottom:

And so much moar! • Think about what you want

(Breath) Friday, February 24, 2012

Special HTML • <div> - For sectioning off the document

Special HTML Examples <div id=”header”> <h1>This is my page</h1> </div>

Conclusion • Makes HTML pretty • CSS is a set

Friday, February 24, 2012