Cascading Style Sheets Class 2, Lecture 2 Rachel A Ober

Lab #1 Questions? How far did you get? What are some problems you saw with the browser you used? Internet Explorer? FireFox? Netscape? Other questions?

Style Sheet Syntax When defining in the style sheet: element {attribute: value; attribute2: value2;} Ex. p {color: #00000; background-color: #FFFFFF;} To use defined classes element.class{attribute: value;} Ex. p.header{background-image: url (“splat.gif”)} To use an ID element#id{attribute: value;} Ex. p#first{font-style: italic;}

Using the Style in HTML p {color: #00000; background-color: #FFFFFF;} … Don’t need to specify anything special! It will affect all paragraphs in the document. p.header{background-image: url (“splat.gif”)} … Only paragraphs with the class “header” will get affected. p#first{font-style: italic;} … Only the paragraph listed as id “first” will be affected. It is a good design decision to only assign that id to one element.

Moving Styles to a Separate Document Include in the Your document doesn’t have anything special in it, just list each style on separate lines like you did within the document head. body {font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; background-color: #FFFFFF;} h1 {font-family: Georgia, "Times New Roman", Times, serif;} h2 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 14pt; font-style: italic; font-weight: bold;} Commenting: /* You can comment your styles like this */

Combining Lines Some styles can be grouped on one line instead of mutiple lines. For instance this: p {font-family: Georgia, "Times New Roman", Times, serif; font-size: 14pt; font-style: italic; font-weight: bold;} Can be changed to this: p {font: Georgia, "Times New Roman", Times, serif; 14pt; italic; bold;}

What do we mean when we say “Cascading”? CSS gets its name because styles can be inherited in order of hierarchy. Hierarchy: Browser Default External Style Sheet linked in Internal Style Sheer in In line styles

So What Happens? If we specify in our external style sheet: p {color: #000000; font-size: 12pt; margin: 10em;} Then specify in the document: p {color: #CC0033;} And then inline: … What do we get?

Example 1 html html

What Happened? We essentially get a style like this for the first paragraph: p {color: #000000; font-size: 5pt; margin: 10em;} And the rest of the document: p {color: # CC0033; font-size: 12pt; margin: 10em;}

Lab #2: Moving Styles to an External Document Objective: Move the samples from Lab #1 to an external style sheet. Name each new style sheet sample#.css where # is the number of the sample problem. Stock Images for use: