Navigation

Lesson: Styling with CSS

Goals

After HTML, CSS is the most important Web technology. This lesson explains what it is, why it is important, and how to use it.

Notes

First, we'll talk about the concept behind CSS. What were the people who created CSS thinking? Were they all high?

In CSS, properties (like font color) are applied to elements (like a paragraph). Our second topic talks about the most commonly used basic properties.

The third topic looks at the elements. If you put a group of properties together, how do you specify what they get applied to? That's what selectors are for.

Finally, we'll talk about ways to make CSS work easier, and to learn more.

Exercises

Exercise 1.

Here is some HTML:

<h1>Ode to My Rump</h1>
<p>
My rump is so large.<br>
So large,<br>
So large.
</p>
<p>
My rump is as large<br>
As a garbage barge.
</p>

Make it look like this:

Ru,p

Solution - no peaking at the CSS file!

 

Exercise 2.

Here's some HTML

<h1 class="firstHeading">A Scanner Darkly (film)</h1>
<h3 id="siteSub">From Wikipedia, the free encyclopedia</h3>
<p><span class="title">A Scanner Darkly</span> is a
<a href="/wiki/2006_in_film" title="2006 in film">2006 film</a>
directed by
<a href="/wiki/Richard_Linklater" title="Richard Linklater">Richard Linklater</a>
based on the
<a href="/wiki/A_Scanner_Darkly" title="A Scanner Darkly">novel of the same name</a>
by <a href="/wiki/Philip_K._Dick" title="Philip K. Dick">Philip K. Dick</a>.
The film tells the story of identity and deception
in a near-future <a href="/wiki/Dystopia" title="Dystopia">dystopia</a>
constantly monitored by intensive high-technology police surveillance
in the midst of a drug addiction epidemic.
To give the film its distinct look, the movie was
<a href="/wiki/Digital_cinematography" title="Digital cinematography">filmed digitally</a>
and then <a href="/wiki/Animation" title="Animation">animated</a>
using <a href="/wiki/Rotoscope" title="Rotoscope" >interpolated rotoscope</a>
over the original footage.</p>

Make it look like this:

Scanner

 

Exercise 3.

Here's some HTML code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="???.css">

    <title>A dog</title>
  </head>
  <body>
  <p id="dogPhoto"><img src="dog.jpg"></p>

  <p class="heading">G'day!</p>
  <p class="details">This is my dog, Mr. Grumpy. We call him that because he
    so happy about the world. Sometimes. Though not today.</p>
  <p class="details">Why is Mr. Grumpy so happy? We don't know. Maybe
    it has to do with the time he was locked in the basement accidently,
    and ate all those cleaning supplies.</p>

  </body>
</html>

By only changing the CSS file, make it look like this:

Look 1

and this:

Here's the dog:

Dog

Here's a bone background:

Bones

Solution - no peeking at the CSS file!

Exercise 4.

Cut-and-paste the HTML from this joke page. Create a style sheet for it, without changing the HTML. Figure out how to get the image on your own.

Note that the code contains a conditional comment for IE. Try messing with it, if you have IE 7 or less available.

Got it? Yay!! Now change the style sheet so that when the user mouses over a link, the size of the font doubles.

Done that? Yay!! Now add some images to the jokes, like a skeleton. Have the images appear just to the right of each joke's text, not all the way over at the rignt margin. Make sure the text doesn't run up against the left edge of the image.

Done that? Yay!! Now make a similar page that links to some funny YouTube videos.

Done that? Yay!! Now make an index page that links the two pages (jokes and videos) together.