Lesson 03 // Cascading Style Sheets

1. Lesson 03 // Cascading Style Sheets

2. CSS Stands for Cascading Style Sheets. We’ll be using a combination of Html and CSS to create websites. CSS is a markup language that lets you control how your web page looks.

4. How to access elements in CSS? By element p { } div { } span { } By class li.Items { } div.footer { } By id p#container { } div#header { } Nested div div#container { } div#footer p#first { }

5. In other words: HTML REFERNECED IN CSS: <li class=“container”></li> li.container { } li = element . = dot (references elements by class) container = class name <li id=“container”></li> li#container { } li = element # = pound (references elements by id) container = id name

6. In other words: HTML <li class=“container”><a href=“http://www.msu.edu/”></a></li> REFERNECED IN CSS: li.container a{ } li = element . = dot container = class name = space (refers to nested elements) a = element (nested inside the li element)

7. HTML <div class=“container” id=“topbox”> <h1>Hello</h1> </div> <div class=“container” id=“middlebox”> <h1>Hello</h1> </div> <div class=“container” id=“bottombox”> <h1>Hello</h1> </div> REFERNECED IN CSS: div.container h1 { font-size: 12px; } div#topbox h1 { font-size: 16px; } Which of the h1s will have a font-size of 12px? Which of the h1s will have a font-size of 16px?

8. REPRESENT THE FOLLOWING CSS IN HTML div.container span#topbox { } IS THIS HOW THE BELOW CSS IS WRITTEN IN HTML? CSS HTML div.container div#topbox h1{ } <div class=“container” id=“topbox”> <h1>Hello</h1> </div>

9. Examples of CSS Properties POSITION float clear position padding margin border display width height etc VISUALS font-size font-weight font-family font-style color background-color text-decoration border-color border-style border-left border-right list-style-type list-style text-align etc CSS HTML li.stylinglist { float: left; padding: 5px 0; width: 120px; background-color: #990066; border-left: 1px dotted #ffffff; list-style-type: none; text-align: center; } <ul> <li class="stylinglist">About Us</li> <li class="stylinglist">Products</li> <li class="stylinglist">Services</li> <li class="stylinglist">Research</li> <li class="stylinglist">Contact Us</li> </ul>

10. Centering inline and block-level elements: In the previous example we used text-align to center each word within the 120px list width: li.stylinglist { float: left; list-style-type: none; width: 120px; background-color: #990066; padding: 5px 0; border-left: 1px dotted #ffffff; text-align: center; } text-align applies on block containers containing inline-level content. Here the block container islito which we applied text-align:center to center text (inline-level content) within the block li. • text-align could also apply on: • a div (block) containing img (inline) • p (block) containing text (inline) • th (block) containing words (inline) etc Other text-align values besides center: left, right, justify

11. Block-level elements however, don’t understand text-align. In order to center them we use margin: 0 auto; on block element itself, not on its parent. div#container { width: 700px; height: 700px; margin: 0 auto; background-color: #ff0099; }

12. What about word-spacing? It is applied on ALL elements (block and inline) and specifies spacing behavior between words and other inline-level content, such as images. div#bluebox { width: 500px; height: 300px; background-color: #33cccc; padding: 20px; word-spacing: 15px; } P.S. text-align and word-spacing are examples of “inherited” styling attributes. 15px Ex, If a p with word-spacing nests a span without, the span inherits the word-spacing styling attribute of p.

13. Examples of properties that can come in shorthand: font: body { font: bold italic 12px Arial, Helvetica, sans-serif; } body { font-weight: bold; font-style: italic; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }

14. Examples of properties that can come in shorthand: background: body { background: #000000 url(images/smile.jpg) no-repeat; } body { background-color: #000000; background-image: url(images/smile.jpg); background-repeat: no-repeat; }

15. Examples of properties that can come in shorthand: border: div#container { border: 3px solid green; } div#container { border-width: 3px; border-style: solid; border-color: green; }

16. Examples of properties that can come in shorthand: list-style: li.stylinglist { list-style: circle outside; } li.stlylinglist { list-style-type: circle; list-style-position: outside; }

17. The a element in CSS: a { font-size: 12px; } a:link { color: red; } a:visited { color: green; } a:hover { color: blue; } a:active { color: maroon; } a:link = unvisited link a:visited = visited link a:hover = mouse over link a:active = selected link

18. Different formats for margin/padding representation: margin: 5px; Applies to all 4 edges margin: 5px 10px; Applies to top & bottom left & right margin: 5px 20px 7px; Applies to top left & right bottom margin: 5px 15px 0 12px; Applies to top right bottom left P.S. Same for padding. You can choose to be more specific: margin-top: 5px; margin-right: 10px; padding-left: 7px; etc

19. The Box Model: • If padding has 0 width, padding edge same as div edge border • If border has 0 width, border edge same as padding edge width • If margin has 0 width, margin edge same as border edge height • The width & height dimensions refer to the inner most box padding margin

20. Inheritance: Under Firefox/Preferences/Content and Safari/Preferences/Appearance are the default font and size that the browser is using. If font and size not specified in CSS, the text in your webpage inherits those specified in the browser’s default. In the case of nested elements, the child sometimes inherits properties from its parent, like font, font-size, color, and so forth, unless its own are specified in CSS. Check W3C for a list of all the properties, including their inheritance http://www.w3.org/TR/CSS2/propidx.html