Cascading Style Sheets (CSS)

At the dawn of the WWW, web pages typically contained a mix of tags/attributes that specify:

Separating content and display

But nowadays there is broad consensus that the distinction between these two tasks of markup should be as strict as possible:

HTML tags should be used only to mark up the logical units of meaning (semantic structure, or functional structure) of your document.

CSS rules are what we'll use to specify the details of the appearance (or presentation) of the document

There are immediate benefits of separating content from presentation: One set of style rules can be linked to from many web pages to cause, for example, all level 1 headlines to appear in precisely the same font and size. And you can later on decide to change the font and size of all the level 1 headlines of your entire website in one place (instead of many).

Is the <b> tag semantic or presentation markup?

'Hello World' example

Add the following code to your test web page, just before the </head> tag:

<style type="text/css">
h1 {
  color: #ff0000;
  font-family: Arial, Helvetica, sans-serif;
}
</style>

Re-load your page in your browser to see the effect (red, sans-serif font) on your headline.

Anatomy of style

h1 {
  color: #ff0000;
  font-family: Arial, Helvetica, sans-serif;
}

h1 is a selector.

color: #ff0000; is a style rule.

color is a style name and #ff0000 is a style attribute.

Here's Paul's abridged CSS reference.

Stylesheets

But instead of using a <style></style> section, more often it's useful to put all of our styles in a separate text file (conventional extension .css) - a 'stylesheet' -- and then link to the rules with this tag in the <head></head> section:

<link href='sitelook.css' rel='stylesheet' type='text/css' media='all' />

Now, many pages can all refer to just one file, and thus get consistent presentation at the drop of a hat.

class - a re-usable style collection

So far, the only style rule we've seen has been applied to a particular tag. There's a way to define a reusable collection of style rules called a class by using the "." selector like this:

.wildtype {
   color:#66CC00; /* an obnoxious green */
   font-family: Comic Sans, Comic Sans MS; /* See http://www.bancomicsans.com/ */
}

Apply it:

<h4 class='wildtype'>My crazy summer</h4>
    
<p>Here's some 
<span class='wildtype'>wild and 
crazy</span> text</p>

My crazy summer

Here's some wild and crazy text

id - a once-per-page collection

#homework {
   background-color: #FFFFCC;
   font-size: 3.0em;
}

Applying it:

<h4 id='homework' 
class='wildtype'>Homework</h4>
    
<p>Write about your  
<span class='wildtype'>wild and 
crazy</span> summer.</p>

Homework

Write about your wild and crazy summer.


Remember how we used an id to mark a unique location (link anchor)? We could jump to this location using some variant of href="#homework" .

Selectors so far

* - used to style every last tag.

body - container of all of our page content. Apply your default typography to this tag.

.myclass - class with a name you decide on.

#myid - id with a name you decide on.

p.wildtype - just paragraphs of a particular class.

h1, h2, h3 - apply styles to more than one selector at a time.

 

Homework assignment

Download this chapter from Don Quixote (a big chunk of html with little or no formatting) style things including (but not limited too) the font, the line height (leading), link colors, and headline treatment of a website whose typography you admire. I used an article at alistapart.org as a starting example, but you may choose a different site. Just send a link to the site along with your e-mail (below).

Your styles should be in a linked stylesheet not in the page itself.

Post your page on the GC webserver (in your mypages folder). Validate your page. E-mail Paul (paulmr@goshen.edu) the URL to your page.

Two CSS cautions:

Designer resources

Reading

Read: