1. Cascading Style Sheets Class 1, Lecture 1 Rachel A Ober rober@ccs.neu.edu

2. What is “CSS”? CSS stands for “Cascading Style Sheet” It is used to define how HTML is displayed. Styles can be stored in external style sheet documents and in the document itself. Style Sheets were implemented in HTML 4.0 to fix the problems caused by Netscape and Internet Explorer who were coming up with different tags to display content. CSS is a standard developed by the W3C to separate content from display.

3. Why is CSS Important in Design? HTML was originally developed so that different sections of the document were divided up with different tags. The two major browsers, IE and Netscape, constantly added new tags that they supported, such as. This caused a problem where design in the document could not be separated from the content. What if I have over 100 pages, and now I need to change one design element that’s hard-coded into each document?

4. Let’s Compare… We can accomplish the same design by using HTML tags, OR we can separate the content from design by setting up a style sheet. What if I have 50 documents and want to change the color of the word “different”?

5. The HTML… uh, eww? Untitled Document This is a Header This is a paragraph with some text. Hey, I have a link ! What about some bold and some different colors. OOh, what about a table?

6. New HTML… Untitled Document This is a Header This is a paragraph with some text. Hey, I have a link ! What about some bold and some different colors. OOh, what about a table?

7. Our Style Sheet a { color: #663333; } a:visited{ color: #FF00FF; } a:active{ color: #999933; } body { color: #000000; background-color: #999999; margin: 3px; } b { font-weight: bold; color: #FF0000; } h1 { font-style: italic; color: #9933CC; } table { padding: 10px; margin: 10px; width: 75%; border: 10pt solid; }.center { text-align: center; }.purple { color: #990099; }.bigandblue { font-size: 40px; color: #0000CC; } All we need to change!

8. Side by Side Comparison…

9. How to Include CSS… In a separate, linked file included in the header Within the file header <!-- body {font-family: "Times New Roman", Times, serif;} --> Inline This is a paragraph with some text.

10. What Can I Manipulate? Pre-Defined Tags,,, etc… Pseudo-Classes a:visited{color: #FF00FF;} Pseudo-Elements p:first-letter {color: #0000CC;} Your Own Classes and IDs The “:visited” part is considered a “pseudo-class” The “:first-letter” part defines the first letter of the paragraph. All paragraphs in the doc will have the first letter blue.

11. Classes Vs. IDs There are two ways to identify your own created style in a document. Classes are used for a site-wide style. Perhaps I want a class called “header” that I use on all of my pages. IDs are used for very specific content. Perhaps I want the second paragraph in “index.html” to have a certain style.

12. How to Use Them Classes Denoted with a “.” p.center {text-align: center;} … IDs Denoted with a “#” p#blue {color: #0000CC;} … Note: Do not start Classes or IDs with a number! It won’t work in FireFox

13. Lab #1: Recreating Styles http://cpu.rachelober.com/lab1 Objective: Get familiar with styles and how to use them. Look at the HTML and try to find a way to convert it into a style sheet. The customer wants a style, how do you go about designing it? Stock Images for use: http://cpu.rachelober.com/stock