Advertisement
CSS in all its Glory
Report
Bermon PainterFollow
Designer, Developer, Creator, Problem SolverJul. 24, 2009•0 likes•997 views
14 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
CSS in all its Glory
Jul. 24, 2009•0 likes•997 views
14 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Design
Technology
Education
A basic overview for people interested in getting started with CSS.
Bermon PainterFollow
Designer, Developer, Creator, Problem SolverAdvertisement
CSS in all its Glory
- 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
- The Box Model Margin 10 Border 5 Padding 10 10 5 10 200 x 80 10 5 10 10 5 10 19
- width padding-left padding-right border-left + border-right Calculated Width 20
- Width = 250px Margin 10 Border 5 Padding 10 10 5 10 200 x 80 10 5 10 10 5 10 21
- height padding-top padding-bottom border-top + border-bottom Calculated Height 22
- Height = 130px Margin 10 Border 5 Padding 10 10 5 10 200 x 80 10 5 10 10 5 10 23
- Block Level Elements Parent Element width:auto If no width declared all block level elements within the parent element will be set to 100%. 24
- Block Level Elements Parent Element width:200px If you declare a width...well your block level element will have that width, regardless of the parent element 25
- Absolute Elements Parent Element well hello there well hello there...the box expands If you don’t specify a width, the box will expand with the content. It will expand until 100% of the parent, then wrap. 26
- Floated Elements Parent Element well hello there well hello there...the box expands Mimics the behavior of positioned elements. Doesn’t depend on relative positioning 27
- Rule of Thumb Specify the width on: • floated elements • positioned elements either fixed or absolute 28
- Inline Elements Parent Element well hello there well hello there...the box expands well hello there well hello there...the box expands Just really long, skinny boxes 29
- CSS Rule Set 30
- CSS Rule Set Tells a browser how to render HTML boxes Selector Declaration Block Declaration Declaration Property Value Property Value body { color :black ; padding:1em ; } 31
- CSS Rule Set Tells a browser how to render HTML elements Selector Declaration Block Declaration Declaration Property Value Property Value body { color :black ; padding:1em ; } 32
- Selector Declaration Block Declaration Declaration Property Value Property Value body { color :black ; padding:1em ; } Selector: “selects” an HTML element that should be affected by a rule set 33
- Selector Declaration Block Declaration Declaration Property Value Property Value body { color :black ; padding:1em ; } Declaration Block: anything between the curly brackets 34
- Selector Declaration Block Declaration Declaration Property Value Property Value body { color :black ; padding:1em ; } Declaration: Tells the browser how to draw any element on a page that is selected 35
- Selector Declaration Block Declaration Declaration Property Value Property Value body { color :black ; padding:1em ; } Property: The aspects of the HTML element that you are choosing to style. 36
- Selector Declaration Block Declaration Declaration Property Value Property Value body { color :black ; padding:1em ; } Value: The exact style you want to set for the property 37
- All together now Declarations can be grouped. p{ margin: 10px; padding: 20px; } 38
- All together now Selectors can be grouped. h1, h2, h3 { padding:10px; } 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 variant size line-height font-family font: bold small-caps 100% 120% Arial ; 43
- Margin/Padding p{ 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 T L R B margin: 1px 2px 3px 4px; padding: 1px 2px 3px 4px; 45
- Margin/Padding T R B L margin: 1px 2px 3px 4px; padding: 1px 2px 3px 4px; 46
- Margin/Padding T R/L B margin: 1px 2px 3px 2px; padding: 1px 2px 3px 2px; T/B R/L margin: 1px 2px 1px 2px; padding: 1px 2px 1px 2px; 47
- Margin/Padding T/R/B/L margin: 1px 1px 1px 1px; padding: 1px 1px 1px 1px; 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 h1 p p ul em li li li 52
- body div div h1 p p ul em li li li Ancestor Any element that’s connected but further up the document tree, no matter how many level higher. 53
- body div div h1 p p ul em li li li Descendant Any element that’s connected but lower down the document tree, no matter how many levels lower. 54
- body div div Parent h1 p p ul Child em li li li Parent Element that is directly above and connected to an element in the document tree 55
- body div div Parent h1 p p ul Child em li li li Child Element that is directly below and connected to an element in the document tree 56
- body div div h1 p p ul em li li li Siblings An element that shares the same parent with another element 57
- Specificity Determines 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 h1 p p ul em li li li 61
- Class Selectors .red{color: red;} body div div h1 p p.red ul em li li li.red 62
- Class + Type Selectors p.red{color: red;} body div div h1 p p.red ul em li li li.red 63
- Rule of Thumb Don’t use classes to style HTML elements to look like other elements <div class="heading">Main Heading</div> .heading{ font-weight: bold; font-size: 140%; } 64
- Rule of Thumb Do HTML elements that already exist <h1>Main Heading</h1> h1{ font-size: 140%; } 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 h1 p p.red ul nav # em li li li.red 67
- ID vs .class ID’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 h1 p p.red ul nav # em li li li.red 70
- Universal Selectors * {color: red;} body div div h1 p p.red ul nav # em li li li.red 71
- Child Selectors div > em {color: red;} body div div h1 p p.red ul nav em # em li li li.red 72
- Adjacent Sibling Selectors h1 + p {color: red;} body div div h1 p p.red ul nav em # em li li li.red 73
- Attribute Selectors 4 Types 74
- Attribute Selectors Select 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 Selectors Select 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 Selectors Select 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 Selectors Select 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 h1 p p.red ul nav em # em li li li.red 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 h1 p p.red ul nav em # em li li li.red 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 3 I 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 with Transcending CSS CSS Mastery Web Standards Andy Clarke Andy Budd Jeffry Zeldman 94
Advertisement