Lecture Notes 3:
Cascading Style Sheets (CSS)

CSE 190 M (Web Programming), Spring 2007

University of Washington

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

The bad way to produce styles in a web page

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

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

• the above tags such as b, i, u, and font are legal in older HTML but are deprecated in strict XHTML
  • you should not use the above tags on your homework assignments!
• why are we discouraged from expressing stylistic information this way?

Cascading Style Sheets (CSS)

• describe the appearance, layout, and presentation of information on a web page (as opposed to HTML, which describes the content of the page)
• describe how information is to be displayed, not what is being displayed
• can be embedded in HTML document or placed into separate .css file
  • advantage of .css file: one style sheet can be shared across many HTML documents

Basic CSS rule syntax

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

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

• a CSS file consists of one or more rules
• each rule starts with a selector that specifies an HTML element and then applies style properties to it

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" />

• the link tag appears in the head of an HTML page
• can link to multiple style sheet files
  • in case of a conflict (two sheets define a style for the same HTML element), the latter sheet's properties will be used

CSS properties for colors

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

This paragraph uses the style above.

• color: color of the element's text
• background-color: color that will appear behind the element

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.

• color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), yellow
• RGB codes: red, green, and blue values from 0 (none) to 255 (full)
• hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)

CSS properties for fonts

• font-family: which font will be used
• font-size: how large the letters will be drawn
• font-style: used to enable/disable italic style
• font-weight: used to enable/disable bold style
• Complete list of font properties

The font-family property

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

This paragraph uses the first style above.

This heading uses the second style above.

• enclose multi-word font names in quotes

More about font-family

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

This paragraph uses the above style.

• can specify multiple fonts from highest to lowest priority
• generic font names:
  serif, sans-serif, cursive, fantasy, monospace

The font-size property

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.

• vague font sizes: xx-small, x-small, small, medium, large, x-large, xx-large
• relative font sizes: smaller, larger
• percentage font sizes, e.g.: 90%, 120%
• units: pixels (px) vs. point (pt) vs. m-size (em)
  16px, 16pt, 1.16em

font-weight, font-style

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

This paragraph uses the style above.

• either of the above can be set to normal to turn them off (e.g. headings)

Body styles

body { font-size: 16px; }

• to apply a style to the entire body of your page, write a selector for the body element
• saves you from manually applying a style to each element

Practice Problem

Why are strong, em better than 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.

• strong and em describe attributes of the content (it is something important in the document that you want to emphasize)
• b and i describe formatting and presentation ("I want this to be bold.")

CSS properties for text

• text-align: alignment of text within its element
• text-decoration: decorations such as underlining
• line-height, word-spacing, letter-spacing: gaps between the various portions of the text
• text-indent: indents the first letter of each paragraph
• Complete list of text properties

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-align can be left, right, center, or justify (which widens all full lines of the element so that they occupy its entire width)

text-decoration

p { text-decoration: underline; }

This paragraph uses the style above.

• can also be overline, line-through, blink
• effects can be combined:

  text-decoration: overline underline;

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.

• width, height: how wide or tall to make this element
  • width applies only to block elements; ignored for inline elements
• max-width, max-height, min-width, min-height: the maximum or minimum size of this element in the given dimension

Comments: /* ... */

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

• CSS (like HTML) is usually not commented as rigorously as programming languages such as Java
• the // single-line comment style is NOT supported in CSS

Grouping styles

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

This paragraph uses the above style.

This heading uses the above style.

• a style can select multiple elements separated by commas
• the given properties will be applied to all of the elements
• the individual elements can also have their own styles (like h2 above)

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>

Inheriting styles

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; }

• when multiple styles apply to an element, they are inherited
• a more tightly matching rule can override a more general inherited rule
• not all properties are inherited (notice link's color above)

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.

• when two styles set conflicting values for the same property, the latter style takes precedence

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>

• jigsaw.w3.org/css-validator/
• checks your CSS to make sure it meets the official CSS specifications
• more picky than the web browser, which may render malformed CSS correctly

Practice Problem