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 elementp { } div { } span { } By idp#container { } div#header { } By classli.Items { } div.footer { } Nesteddiv div#container { } div#footer p#first { }

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

6. In other words: HTML 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 Hello Hello Hello REFERNECED IN CSS: div.container h1 { font-size: 12px; } Which of the h1s will have a font-size of 12px? div#topbox h1 { font-size: 16px; } 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? div.container div#topbox h1{ } Hello CSSHTML

9. 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 POSITION float clear position padding margin border display width height etc Examples of CSS Properties About Us Products Services Research Contact Us 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; } CSS

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

11. div#container { width: 700px; height: 700px; margin: 0 auto; background-color: #ff0099; } 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.

12. div#bluebox { width: 500px; height: 300px; background-color: #33cccc; padding: 20px; word-spacing: 15px; } 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. 15px P.S. text-align and word-spacing are examples of “inherited” styling attributes. 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: margin border padding If padding has 0 width, padding edge same as div edge If border has 0 width, border edge same as padding edge If margin has 0 width, margin edge same as border edge The width & height dimensions refer to the inner most box width height

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 http://www.w3.org/TR/CSS2/propidx.html