CSS Tutorial
- 2. Parts of a CSS rule h2 { color: #000000; }
- 3. Parts of a CSS rule h2 { color: #000000; } SELECTOR
- 4. Parts of a CSS rule h2 { color: #000000; } CURLY BRACKETS
- 5. Parts of a CSS rule h2 { color: #000000; } PROPERTY
- 6. Parts of a CSS rule h2 { color: #000000; } VALUE
- 7. Parts of a CSS rule h2 { color: #000000; } START WITH SELECTOR
- 8. Three Kinds of Selectors TYPE SELECTORS CLASS SELECTORS ID SELECTORS div .headlines #container p .paragraphs #first-‐article h2 .bylines #footer strong .summary #sidebar
- 9. Type Selectors <body> h2 { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-style: bold; <p class=“byline”>By Jeremy Rue.</p> } <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> p{ <div id=“sidebar”> <h2>Side Bar Story</h2> <p class=“byline”>By John Doe.</p> font-family: Helvetica; <p>This is a related story.</p> </div> } </div> </body>
- 10. Type Selectors <body> h2 { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-style: bold; <p class=“byline”>By Jeremy Rue.</p> } <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> p{ <div id=“sidebar”> <h2>Side Bar Story</h2> <p class=“byline”>By John Doe.</p> font-family: Helvetica; <p>This is a related story.</p> </div> } </div> </body>
- 11. Class Selectors <body> .headline { <div id=“container”> <h2 class=“headline”>Hello World</h2> text-decoration: underline; <p class=“byline”>By Jeremy Rue.</p> } <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> .byline { <div id=“sidebar”> <h2>Side Bar Story</h2> <p class=“byline”>By John Doe.</p> font-size: 8px; <p>This is a related story.</p> </div> } </div> </body>
- 12. Class Selectors <body> .headline { <div id=“container”> <h2 class=“headline”>Hello World</h2> text-decoration: underline; <p class=“byline”>By Jeremy Rue.</p> } <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> .byline { <div id=“sidebar”> <h2>Side Bar Story</h2> <p class=“byline”>By John Doe.</p> font-size: 8px; <p>This is a related story.</p> </div> } </div> </body>
- 13. ID Selectors <body> #container { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-size: 30px; <p class=“byline”>By Jeremy Rue.</p> } <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> #sidebar { <div id=“sidebar”> <h2>Side Bar Story</h2> <p class=“byline”>By John Doe.</p> font-size: 8px; <p>This is a related story.</p> </div> } </div> </body>
- 14. ID Selectors <body> #container { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-size: 30px; <p class=“byline”>By Jeremy Rue.</p> } <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> #sidebar { <div id=“sidebar”> <h2>Side Bar Story</h2> <p class=“byline”>By John Doe.</p> font-size: 8px; <p>This is a related story.</p> </div> } </div> </body>
- 15. More ways to use selectors
- 16. More Selector Options <body> .headline{ <div id=“container”> <h2 class=“headline”>Hello World</h2> font-size: 30px; <p class=“byline”>By Jeremy Rue.</p> } <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> <div id=“sidebar”> <h3 class=“headline”>Side Bar Story</h3> <p class=“byline”>By John Doe.</p> <p>This is a related story.</p> </div> </div> </body>
- 17. More Selector Options <body> h2.headline { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-size: 30px; <p class=“byline”>By Jeremy Rue.</p> } <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> <div id=“sidebar”> <h3 class=“headline”>Side Bar Story</h3> <p class=“byline”>By John Doe.</p> <p>This is a related story.</p> </div> </div> </body>
- 18. More Selector Options <body> #sidebar p { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-size: 30px; <p class=“byline”>By Jeremy Rue.</p> } <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> A space means <div id=“sidebar”> descendant. <h3 class=“headline”>Side Bar Story</h3> <p class=“byline”>By John Doe.</p> <p>This is a related story.</p> </div> </div> </body>
- 19. More Selector Options <body> #container #sidebar h3 { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-size: 30px; <p class=“byline”>By Jeremy Rue.</p> } <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> <div id=“sidebar”> <h3 class=“headline”>Side Bar Story</h3> <p class=“byline”>By John Doe.</p> <p>This is a related story.</p> </div> </div> </body>
- 20. More Selector Options <body> #container #sidebar h3 { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-size: 30px; <p class=“byline”>By Jeremy Rue.</p> } <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> <div id=“sidebar”> <h3 class=“headline”>Side Bar Story</h3> <p class=“byline”>By John Doe.</p> <p>This is a related story.</p> </div> </div> </body>
- 21. More Selector Options <body> #container #sidebar h3 { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-size: 30px; <p class=“byline”>By Jeremy Rue.</p> } <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> <div id=“sidebar”> <h3 class=“headline”>Side Bar Story</h3> <p class=“byline”>By John Doe.</p> <p>This is a related story.</p> </div> </div> </body>
- 22. More Selector Options <body> #container #sidebar h3 { <div id=“container”> <h2 class=“headline”>Hello World</h2> font-size: 30px; <p class=“byline”>By Jeremy Rue.</p> } <p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p> <div id=“sidebar”> <h3 class=“headline”>Side Bar Story</h3> <p class=“byline”>By John Doe.</p> <p>This is a related story.</p> </div> </div> </body>
- 23. NOT to be confused with...
- 24. HTML vs CSS HTML CSS <div class=“headline lead-story article”> .headline p { } These spaces give multiple classes This space means a <p> tag inside another tag with class .headline
- 25. Example from Richmond Site <div id="post-38661" class="hentry p1 post publish author-lexi- pandell category-education category-featured category-front tag-big-brother-big-sister tag-mentoring tag-nonprofit tag- youth y2012 m02 d07 h13">
- 26. A few others <div id=“container”> h3, p { color:orange; } <h3>Here is one headline</h3> <div> <h3>Another</h3> <p>Some text here</p> </div> <p>Another paragraph.</p> <h3>Last graph.</h3> </div>
- 27. A few others <div id=“container”> #container > h3 { color:orange; } <h3>Here is one headline</h3> <div> <h3>Another</h3> <p>Some text here</p> </div> <p>Another paragraph.</p> <h3>Last graph.</h3> </div>
- 28. A few others <div id=“container”> h3 + p { color:orange; } <h3>Here is one headline</h3> <div> <h3>Another</h3> <p>Some text here</p> </div> <p>Another paragraph.</p> <h3>Last graph.</h3> </div>
- 29. A few others <div id=“container”> h3:first-child { color:orange; } <h3>Here is one headline</h3> <div> <h3>Another</h3> <p>Some text here</p> </div> <p>Another paragraph.</p> <h3>Last graph.</h3> </div>
- 30. The Cascade
- 31. What happens if there is a conflict? External Style Sheet Embedded Style Sheet Inline Styles <head> <style> .headlines { <div style= “color:black;”> color:black; } </style> </head> The more specific rules take precedence.
- 32. Which rule wins out? #container { <div id="container"> font-size: 30px; <div id="headline"> } <p>My headline</p> #headline { </div> font-size: 10px; </div> }
- 33. Which rule wins out? #container { <div id="container"> font-size: 30px; <div id="headline"> } <p>My headline</p> #container { </div> font-size: 10px; </div> } Because it comes last
- 34. Cascade Recap Stylesheet Order Last Rule Inheritance 1. External Rules that come last Specificity 2. Embedded (<head>) 3. Inline
- 35. Properties
- 36. Text Color color: #ee3e80; COLOR NAMES RGB VALUES Hexadecimal 147 predefined Values for red, Six or three digit names green and blue alpha-numeral. DarkCyan rgb(100,100,90); #FFFFFF; Purple rgb(255,255,255); #000000; Black rgb(0,0,0); #000; Red rgb(30,44,200); #AF0;
- 37. Backgrounds background-‐color: #ee3e80; background-‐image:url(‘image.jpg’); background-‐position:0px 50%; background-‐repeat:repeat; Short code background: url(‘path_to_image.jpg’) no-‐repeat 0px 0px;
- 38. Font Family font-‐family: Helvetica, Arial, san-‐serif; FALL BACK QUOTES END WITH GENERIC A comma Use quotes when separated list of a font is multiple End with a fonts to use if the words, like generic font, like system doesnʼt “Times New serif or san-serif. have the font Roman.” This way the installed. browser will pick for you.
- 39. Font Size font-‐size: 12px; PIXELS PERCENTAGES EM Pixels are Percentages are EM is another considered a relative from the way of doing fixed font size. default size of the relative Fonts will appear text. 100% measurement. at this size means the default Varies only relative to the size. slightly from %. screen size.
- 40. Others font-‐weight: normal; line-‐height: 1em; font-‐weight: bold; line-‐height: 1.4em; font-‐style: normal; letter-‐spacing: 1em; font-‐style: italic; word-‐spacing: 1em; font-‐style: oblique; text-‐decoration:none; text-‐transform: uppercase; text-‐align: left; text-‐transform: lowercase; text-‐align: right; text-‐transform: capitalize; text-‐aling: center
- 41. Links a:link a:link a:visited a:visited Before a user After a user clicks a:hover clicks on a link. on a link. a:active a:hover a:active When a user When the user hovers over a clicks down on a link. link.
- 42. Border, Margin and Padding margin-‐top:10px; margin-‐right:10px; margin-‐bottom:10px; margin-‐left:10px; hello Margin Border Padding margin:5px 10px 6px 5px; Width
- 43. borders border-‐color border-‐width Single sides border-‐top-‐color:#ffffff; border-‐style border-‐left-‐width: 20px; solid dotted Combined dashed border:1px solid #000000; groove ...
- 44. Inline vs Block Inline block Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad <img> List of the best pies <p> minim veniam, quis nostrud exercitation ullamco laboris <span> • Apple <div> nisi ut aliquip ex ea commodo consequat. Duis aute • Cherry irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur <strong> • Pumpkin <li> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <em> <h1>
- 45. Inline vs Block display:inline; display:block; display:none; display:block; display:inline; • Apple • Cherry • Apple • Cherry • Pumpkin • Pumpkin
- 46. Visibility visibility:visible; visibility:hidden; Hi Mom!
- 47. CSS Reset
- 48. CSS Reset html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-‐size: 100%; font: inherit; vertical-‐align: baseline; }