Cascading Style Sheets

What is CSS? Short for Cascading Style Sheets, a new feature being added to HTML that gives more control over how pages are displayed. With CSS, you can create style sheets that define how different elements, such as headers and links, appear. These style sheets can then be applied to any Web page. –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

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

Basic HTML Page My Page Here’s my page.

A Style Sheet A style sheet is a simple concept: it's a page of style definitions or specifications that tell the browser how to display the various elements on a page. You can build our style sheet into the head element of your web page: My Page media=“all”> <!-- -- >

External Style Sheet You can also use an external style file by placing the following in the head element of your page: “basicstyle” is a text file with a.css extension located in the same directory as your html document. My Page <link rel="stylesheet" type="text/css" href=“basicstyle.css" media=“screen”/>

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

Syntax <!-- body { background-color: #e8eae8; color: #5d665b; margin: 50px; font-family: Verdana, Geneva, Arial, sans-serif; font-size: small; line-height: 180% } -->

Syntax Every CSS 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.

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

Why Shouldn’t Your bgcolor=“ffffff”?

Download a Web Page Create a working directory ( playpen ) Download ( Right click the link/ Save target as ) the starting web page to the playpen directory.starting web page

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

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.

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

Note Stop when you finish Section 10. your.css and.html to me: Copy yourself.