Post on 01-Jan-2016
Cascading Style Sheets
Class 2, Lecture 2
Rachel A Ober
rober@ccs.neu.edu
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;}
<p>…</p> Don’t need to specify anything special! It will affect all
paragraphs in the document. p.header{background-image: url (“splat.gif”)}
<p class=“header”>…</p> Only paragraphs with the class “header” will get affected.
p#first{font-style: italic;} <p id=“first”>…</p> 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 <head> <link href=“example.css" rel="stylesheet" type="text/css">
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 <head> Internal Style Sheer in <head> 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: <p style=“color: #000000; font-size: 5pt;”>…</p>
What do we get?
Example 1
http://cpu.rachelober.com/lecture2/example1.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
http://cpu.rachelober.com/lab2 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: http://cpu.rachelober.com/stock