1. Style Sheets: the right way to specify rendering

2. Structure versus Rendering HTML specifications of documents should contain only information about how a document is structured into logical units such as paragraphs, pictures, lists, etc. HTML specifications should not contain rendering information And yet: –we often want to specify how we want a document rendered

3. Question: How can we specify our own style of rendering without mixing rendering rules inside a document’s logical specification?

4. Answer: We should use Style sheets

5. Style sheets A style sheet contains a set of rendering specifications We can apply a style sheet to a HTML document specification in order to change the appearance of the document when it is rendered by a browser

6. A simple style sheet This style sheet specifies that all items in any document to which the style sheet is applied should be printed in red H1 { COLOR : red}

7. Storing style sheets: We can store style sheets in files with the extension “.css” For example, the style sheet H1 { COLOR : red} could be stored in a file called style1.css

8. Applying style sheets We apply a style sheet in a.css file to a document in a.htm file by calling the.css file in the part of the.htm file: … <LINK REL=STYLESHEET TYPE=“text/css” HREF=“style1.css” > Wars of the 20th Century

10. Multiple usage of a style sheet: We can apply a style sheet which is stored in a.css file to many documents This HTML spec uses style1.css as well: … <link rel=“stylesheet” type=“text/css” href=“style1.css” > Tourist Attractions of the World

12. A more sophisticated style sheet Specifying styles for items as well as items

13. style2.css h1 {color : red} p {color : blue}

14. wars.htm … Wars of the 20th Century The century just coming to an end was one of the bloodiest on record...

16. Several H1 style attributes h1 {color : red; font-size : 50} p {color : blue}

18. Another H1 style attribute H1 {COLOR : red; FONT-SIZE : 50 ; FONT-FAMILY : arial} P {COLOR : blue}

20. We can, of course, specify styles for all levels of headings Consider a document which has H2 as well as H1 headings

21. wars2.htm

22. style2.css This first style-sheet does not specify anything for the H2 headings: H1 {COLOR : red ; FONT-SIZE : 20 ; FONT-FAMILY : arial} P {COLOR : blue} So, as we see on the next slide, H2 headings have the default style

23. Applying style2.css to wars2.htm

24. style3.css H1 {COLOR : red ; FONT-SIZE : 20 ; FONT-FAMILY : arial} H2 {COLOR : green} P {COLOR : blue}

25. Applying style3.css to wars2.htm