1. html: structure & content CSS: presentation & style A CSS Primer chapter 4

2. Slide 4-2 Deprecated elements Once deprecated, tags may well become obsolete

3. Slide 4-3 CSS terms style rule selector {property:value} examples h2 {color: red} h3 {color: #FF0000; text-align:center} p {color: navy; font-style:italic} h1,h2,h3,h4,h5,h6 { color: green }  Misc Resources folder/ 110 web resources110 web resources/css

4. Slide 4-4 Styles are stored in Style Sheets external: separate file internal: element in head section inline/local: style property in tag

5. Slide 4-5 internal style sheet body {background-color: ivory; color: navy} hr {color: sienna} p {font-family:”Verdana”}

6. Slide 4-6 Inline styles (a.k.a. local styles) Local Styles x-ray yankee zulu

7. Slide 4-7 External Style Sheet 1. Style rules stored in separate file (eg) /110/css/110.css 2. Connected to a client file using a link element

8. Slide 4-8 External Style Sheet: /110/css/110.css external style sheets may contain only 1. css style rules 2. css comments (for documentation) 3.  no HTML allowed  omit element hr {color: sienna} p {color: sienna; text-align:center} body {background-image: url(“../images/back40.gif")}

9. Slide 4-9 Client File /110/about/contact.html clients connect to the style sheet using the tag. The tag goes inside the head section:

10. Slide 4-10 External Style Sheets CSS is a breakthrough in Web designCSS is a breakthrough in Web design:  separates structure (html) from presentation (css)  control the style of multiple Web pages all at once  Define styles in an external style sheet and apply them to as many Web pages as you want  To make a global change, simply change the style: all elements in the site are updated automatically

11. Slide 4-11 Cascading Style Sheets Multiple Styles Cascade Into One Styles can be specified o inline o local o external Even multiple external style sheets can be referenced inside a single HTML document

12. Slide 4-12 Cascading Order What style will be used when there is more than one style specified for an HTML element? Styles will "cascade" by the following rules (number 1 has the highest priority): 1. Inline style 2. Internal style sheet ( element in the ) 3. External style sheet 4. Browser default So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the tag, in an external style sheet, or in a browser (a default value).

13. Slide 4-13 selectors: 1. simple. 2. class. 3. id 1. simple:p {font-family:”Verdana”} 2. class: p.right {text-align: right}.center {text-align: center}  This paragraph will be right-aligned.  This paragraph will be center-aligned.  Zut Alors!

14. Slide 4-14 Selectors (cont.) 3. id selector: h2#kermit {color: green} #alert {color: red}  Bein’ Green!  Caveat Lector!

15. Slide 4-15 Descendant selectors Problem: specify a CSS rule that “applies to EM elements that are contained by an H1 element" Example: h1 { color: red } em { color: red }

16. Slide 4-16 4. Descendant selectors h1 { color: red } em { color: red } Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as: This headline is very important

17. Slide 4-17 4. Descendant selectors Add a rule that sets the text color to blue whenever an em occurs anywhere within an h1 h1 { color: red } em { color: red } h1 em { color: blue }

18. Slide 4-18 Descendant selectors Problem: specify a CSS rule that “applies to EM elements that are contained by an H1 element" Example: h1 { color: red } em { color: red }

19. Slide 4-19 Classification of Elements: Block-level, Inline, List-item Block-Level Elements: Displayed on a line by itself p, h1, div, table, ol, ul,... Can only be contained by other block-level elements (with restrictions): — p can be in a div — p can not be in a p

20. Slide 4-20 Classification of Elements: Block-level, Inline, List-item Inline Elements: Do not begin on a new line a, em, span, img, … Can be children of any other element List-item Elements: appear in lists

21. Slide 4-21 CSS Display Property display values: block | inline | list-item | none applies to: all elements div#links a {display: block;} return to proj12

22. Slide 4-22 CSS Box Model > CSS assumes that every element is contained in an element boxelement box > E-M-B-P-C = Edge-Margin-Border-Padding-Content > The width of an element is the distance from the left side of the content to the right side of the content:

23. Slide 4-23 Example using a class selector div.duckBox { background-color:yellow; color:green; border-style:double; border-color: green; padding: 10px; /* text-align applies only to the inline content of a block-level element. To center the div itself, use the following three properties */ margin-left:auto; margin-right:auto; width:50%; }

24. Slide 4-24 CSS Resources W3Schools.com Video: Beginner’s Guide to CSSBeginner’s Guide to CSS Quick Tutorials from WestCiv Eric Meyer: CSS Author of CSS: The Definitive Guide Eric Meyer: CSS