1. Cascading Style Sheets August 25-26, 2004

2. What is CSS? a means for web authors to separate the appearance of web pages from the content of web pages is a recommendation of the World Wide Web Consortium (the W3C).World Wide Web Consortium

3. History of CSS CSS 1 became a recommendation in late 1996 CSS 2 became a recommendation in May of 1998. CSS 2, revision 1 was released in January 2003

4. CSS Mobile Profile a scaled down version of CSS 2.1 specification, appropriate to mobile, or wireless devices

5. Style Sheet A text file with a.css extension SS may be in a embedded in a web page or, preferably, in a separate file with the.css extension.

6. Embedded vs Linked SS Embedded Linked

7. Rules Correspond to elements in an HTML document. Elements are, … Rules correspond to HTML elements. A Rule which selects the body is called a body selector or body An example p {font-family: verdana; color: red}

8. Syntax body { font-family: Verdana, “Times New Roman", Helvetica, sans- serif; font-size: 1em; text-align: justify; }

9. Syntax Every statement must have a selector and a declaration. The declaration is one or more properties separated by semicolons. Each property has a property name followed by a colon and then the value for that property. Sometimes a property can take a number of values. The values in the list should be separated by a comma and a space. White space can be used to make your style sheet easier to read and write.

10. Comments /* This is a style sheet comment */ What is the syntax of an HTML comment?

11. Why Shouldn’t Your bgcolor=“ffffff”?

12. Download a Web Page Create a working directory ( playpen ) Download ( Right click the link/ Save target as ) the Bill of Rights web page from the class schedule to the playpen directory.

13. Link To An External CSS Using Notepad to edit BillOfRights.html, insert the following line in the head section (between and tags) of the html document. Select File / Save to save the change to BillOfRights.html

14. Create CSS Create a new file with Notepad. Save it as basicss.css in your playpen directory Verify that the.css extension is correct in Windows Explorer.

15. Work Tutorial Display the BillOfRights in a browser on your desktop. Open a new browser window and select the hyperlink at the beginning of the webpage to the CSS tutorial. Use basicss.css and BillOfRights.html to experiment with CSS as you read through the tutorial, CSS From the Ground Up.CSS From the Ground Up

16. Note When you reach Section 7 on tags you will want to add an embedded style sheet section into your BillOfRights.html document. Stop when you finish Section 10. Email us your.css and.html. Copy yourself.

17. Homework Develop a web page named index.html for use in our class. Have at least one link on the page to your BillOfRights page. Bring your formatted BillOfRights.html with its basicss.css and your web page, index.html to our next class.