Cascading Style Sheets (CSS)

CSE 190 M (Web Programming), Spring 2007

University of Washington

Reading: Sebesta Ch. 3 sections 3.1 - 3.6.6, 3.8 - 3.9, 3.12

Except where otherwise noted, the contents of this presentation are © Copyright 2007 Marty Stepp and are licensed under the Creative Commons Attribution 2.5 License.

Valid XHTML 1.0 Strict Valid CSS!

The bad way to produce styles

<p><font face="Arial">Welcome to Greasy Joe's.  You will
<b>never, <i>ever, <u>EVER</u></i></b> beat <font
size="+1" color="red">OUR</font> prices!</font></p>

Welcome to Greasy Joe's. You will never, ever, EVER beat OUR prices!

Cascading Style Sheets (CSS)

Basic CSS rule syntax

selector {
    property: value;
    property: value;
    ...
    property: value;
}

p {
    font-family: sans-serif;
    color: red;
}

Attaching a CSS file: <link>

<link rel="stylesheet" type="text/css" href="filename" />


<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="stylesheet" type="text/css"
href="http://www.google.com/uds/css/gsearch.css" />

CSS properties for colors

p {
    color: red;
    background-color: yellow;
}

This paragraph uses the style above.

Specifying colors

p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }

This paragraph uses the first style above.
This heading uses the second style above.
This heading uses the third style above.

CSS properties for fonts

font-family

p { font-family: "Georgia"; }
h2 { font-family: "Arial Narrow"; }

This paragraph uses the first style above.

This heading uses the second style above.

More about font-family

p { font-family: "Garamond", "Times New Roman", serif; }

This paragraph uses the above style.

  • if the first font is not found on the user's computer, the next is tried
  • generally should specify similar fonts
  • placing a generic font name at the end of your font-family value ensures that every computer will use a valid font

font-size

p { font-size: 14pt; }

This paragraph uses the style above.

More about font-size

p { font-size: x-large; }

This paragraph uses the above style.

  • px specifies a number of pixels on the screen (absolute)
  • pt specifies number of point, where a point is 1/72 of an inch onscreen
  • em specifies number of m-widths, where 1 em is equal to the font's current size

font-weight, font-style

p {
    font-weight: bold;
    font-style: italic;
}

This paragraph uses the style above.

Body styles

body { font-size: 16px; }

Practice problem: Kittens

kitten 1 KITTENS! kitten 2

Why I love them:

  1. They are little.
  2. They make adorable sounds:
    • Meow!
    • Purr!
  3. JUST LOOK AT THEM!

Edit this HTML and add the following styles to it:

  • entire page should have a pink background and use 16 point font
  • main heading should use Comic Sans MS font
  • lists should appear in a Lucida Console font
  • list numbers should have yellow background; list items should have green background
  • link text should be purple
  • quote text should be italicized

Why <strong>, <em> and not <b>, <i>?

strong { font-weight: normal; color: red; }
em { font-style: normal; background-color: #DDDDDD; }

Now if I want to strongly emphasize something or just emphasize it, it doesn't necessarily have to be bold or italic.

CSS properties for text

text-align

blockquote { text-align: justify; }
h2 { text-align: center; }

The Emperor's Quote

[TO LUKE SKYWALKER] The alliance... will die. As will your friends. Good, I can feel your anger. I am unarmed. Take your weapon. Strike me down with all of your hatred and your journey towards the dark side will be complete.

text-decoration

p { text-decoration: underline; }

This paragraph uses the style above.

CSS properties for dimensions

p { width: 400px; background-color: yellow; }
h2 { width: 50%; background-color: aqua; }

This paragraph uses the first style above.

This heading uses the second style above.

CSS comments: /* ... */

/* This is a comment.
   It can span many lines in the CSS file. */
p { color: red; background-color: aqua; }

Grouping styles

p,h1,h2 { color: blue; }
h2 { background-color: yellow; }

This paragraph uses the above style.

This heading uses the above style.

Document tree

<html><head><title>My home page</title></head>
<body><h1>My home page</h1>
<p>Let me tell you about my favorite composers:</p>
<ul><li>Elvis Costello</li>
<li>Johannes Brahms</li>
<li>Georges Brassens</li>
</ul></body></html>

Document tree

Inheriting styles (explanation)

body { font-family: sans-serif; background-color: yellow; }
p { color: red; background-color: aqua; }
a { text-decoration: overline underline; }
h2 { font-weight: bold; text-align: center; }

This is a heading.

A styled paragraph. Previous slides are available on the web site.

  • a bullet list

Styles that conflict

p,h1,h2 { color: blue; font-style: italic; }
h2 { color: red; background-color: yellow; }

This paragraph uses the first style above.

This heading uses both styles above.

W3C CSS Validator

<p><a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" /></a></p>

Valid CSS!

Practice problem: More kittens

kitten 1 KITTENS! kitten 2

Why I love them:

  1. They are little.
  2. They make adorable sounds:
    • Meow!
    • Purr!
  3. JUST LOOK AT THEM!

Edit the previously-styled Kitten HTML and add the following styles:

  • all headings should be centered, bolded, and underlined
  • the images should be enlarged to occupy one-third of the screen each
  • the list of items should be narrowed to occupy only half the page width
  • the text should be spaced so that the lines are further apart
  • emphasized and strongly emphasized text should appear slightly larger than the other text on the page

----- CSS Classes -----

CSS Classes

Reading: Sebesta Ch. 3 sections 3.2 - 3.3, 3.4.2 - 3.4.4, 3.12

CSS class selectors

p.special {
    background-color: yellow;
    font-weight: bold;
}

The HTML class attribute

<p>Spatula City!  Spatula City!</p>
<p class="special">See our spectacular spatula specials!</p>
<p class="special">Today only: satisfaction guaranteed.</p>
<p>We'll beat any advertised price!</p>

Spatula City! Spatula City!

See our spectacular spatula specials!

Today only: satisfaction guaranteed.

We'll beat any advertised price!

Class selectors without element

.standout {
    color: red;
    font-family: cursive;
}

HTML class attribute revisited

<h2 class="standout">Spatula City!  Spatula City!</h2>
<p class="special">See our spectacular spatula specials!</p>
<p class="special standout">Satisfaction guaranteed.</p>
<p class="standout">We'll beat any advertised price!</p>

Spatula City! Spatula City!

See our spectacular spatula specials!

Satisfaction guaranteed.

We'll beat any advertised price!

CSS ID selectors

p#missionstatement {
    font-style: italic;
    font-family: "Garamond", "Century Gothic", serif;
}

The HTML id attribute

<p>Spatula City!  Spatula City!</p>
<p id="missionstatement">Our mission is to provide the most
spectacular spatulas and splurge on our specials until our
customers <q>esplode</q> with splendor!</p>

Spatula City! Spatula City!

Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers esplode with splendor!

Linking to sections of a web page

<p>Visit <a href=
"http://www.textpad.com/download/index.html#downloads">
textpad.com</a> to get the TextPad editor.</p>
<p><a href="#mac">Directions for Mac OS X</a></p>

Visit textpad.com to get the TextPad editor.

Directions for Mac OS X

Logical divisions in HTML: <div>

a section or division of your HTML page (block-level)

<div class="standout">
<h2>Spatula City!  Spatula City!</h2>
<p class="special">See our spectacular spatula specials!</p>
<p>We'll beat any advertised price!</p>
</div>

Spatula City! Spatula City!

See our spectacular spatula specials!

We'll beat any advertised price!

Inline styling sections: <span>

an inline element used purely as a range for applying styles

<h2>Spatula City!  Spatula City!</h2>
<p>See our <span class="special">spectacular</span>
spatula specials!</p>
<p>We'll beat <span class="standout">any advertised
price</span>!</p>

Spatula City! Spatula City!

See our spectacular spatula specials!

We'll beat any advertised price!

Embedding style sheets: <style>

<head>
<style type="text/css">
p { font-family: sans-serif; color: red; }
h2 { background-color: yellow; }
</style>
</head>

Inline styles: the style attribute

<p style="font-family: sans-serif; color: red;">
This is a paragraph</p>

This is a paragraph

Cascading style sheets

Practice problem: Digg

Add styling to the web page stored as digg.html to make it look like this:

Digg ripoff
  • 11pt Arial font
  • article background #EEEEEE
  • heading color #105CB6
  • popular color #A1295A
  • diggs background #FFF3B1

----- Background properties -----

CSS properties for backgrounds

CSS properties for backgrounds

background-image

body {
    background-image: url("draft.jpg");
}

This is the first paragraph

This is the second paragraph...
It occupies 2 lines

background-repeat

body {
    background-image: url("draft.jpg");
    background-repeat: repeat-x;
}

This is the first paragraph

This is the second paragraph...
It occupies 2 lines

background-position

body {
    background-image: url("draft.jpg");
    background-repeat: no-repeat;
    background-position: 370px 20px;
}

This is the first paragraph

This is the second paragraph...
It occupies 2 lines

Showing a partial image

.partialimage1, .partialimage2 {
    background-image: url("sex_and_the_city.jpg");
    background-repeat: no-repeat;
    width: 70px;   height: 200px;
}
.partialimage1 { background-position: 0px 0px; }
.partialimage2 { background-position: -115px 0px; }
sex and the city

----- Advanced CSS -----

Advanced CSS

Context selectors

selector1 selector2 {
    properties
}

selector1 > selector2 {
    properties
}

Context selector example

li strong { text-decoration: underline; }

<p>Shop at <strong>Hardwick's Hardware</strong>...</p>
<ul>
<li>The <strong>best</strong> prices in town!</li>
<li>Act while supplies last!</li>
</ul>

Shop at Hardwick's Hardware...

More complex example

div#ad li.important strong { text-decoration: underline; }

<div id="ad">
<p>Shop at <strong>Hardwick's Hardware</strong>...</p>
<ul>
<li class="important">The <strong>best</strong>
prices in town!</li>
<li>Act <strong>while supplies last!</strong></li>
</ul>
</div>

Shop at Hardwick's Hardware...

Pseudo-classes

a:link {color: #FF0000}      /* unvisited link */
a:visited {color: #00FF00}   /* visited link */
a:hover {color: #FF00FF}     /* mouse over link */
a:active {color: #0000FF}    /* selected link */

Pseudo-class example

a:link {color: red}
a:visited {color: green}
a:hover {color: purple; background-color: yellow;}
a:active {color: blue}

<a href="http://www.google.com">Goooooogle</a>
Goooooogle
  • answer: 
    div#header p a:link, div#footer p a:link {
    color: blue;
}

The list-style-type property

ol { list-style-type: lower-roman; }

The display property

h2 { display: inline; background-color: yellow; }

This is a heading

This is another heading

The visibility property

p.secret {
    visibility: hidden;
}

Practice problem: ESPN.com

ESPN page Modify the provided ESPN sports page (HTML, CSS, JS) to include a drop-down menu of links that appears when clicked.