A CSS Walkthrough, part 3

In the previous part of this walkthrough, I added basic styling to the example page.

Styling the Images

Let's make the images look like polaroids. The first step is to remove the bullets on the list items. Then, it is just a matter of applying the correct dimensions to the list items and images themselves. The relevant CSS is:

ul#pictures li { 
  list-style-type:none; 
  margin:0;
  border:1px outset #999;  
  width:148px; 
  height:158px;
  background-color:#fff; 
  margin-bottom:20px; 
}

ul#pictures li img { 
  border:1px inset #aaa; 
  margin:3px; 
}
		

The property "list-style-type" is what we use to remove the bullets. The list items are slightly taller than wide, and they have medium gray borders. Each has a bottom margin of 20 pixels to provide some space between them. The images have light gray borders and a small margin applied to center them in their blocks. The border styles "outset" and "inset" create a 3D look that suits the polaroid look very well. The CSS is updated in step3.css and the effect can be viewed in step1-3.html.

Adding Some Actual Content

Now that we have some polaroids, it's time to add content to our page.

I'll start with a top level header (h1). Each page should only have one of these, and it should be used to hold the title of the page. I will then follow that with a welcome paragraph (p) and some sub-headers (h2) for each section on the page.

Section 1: About

For this section, I will use a definition list (dl). The definition list provides terms (dt) and definitions (dd). In each term I will have a topic (such as hobbies) and the corresponding definition will have the description of my hobbies. This may not seem like an absolute use of a definition list, but this is the closest structure available for this content.

Section 2: Resume

I will have a link to my resume in PDF format. All I need for this is a simple link tag (a) with some descriptive text. An aside: avoid phrases like "click here" or "here it is" when creating links, since they are not informative for users.

Section 3: Links

For my links I will use a simple list. If my links needed their own descriptions, I would use a definition list, but that is not the case here.

You can see all the content added at step2.html.

Styling this Fresh Content

Now we have some real content, so it's time to style it. All the changes I am going to make:

• Add a border to the page to make it contrast more with the background.
• Reduce the top header (h1) to 140% (1.4em) of its original size and reduce its top/bottom margin.
• Letterspace the top header and apply a dotted bottom border.
• Reduce the sub-headers (h2) to 120% (1.2em) and underline, letterspace, and un-bold them.
• Make the definition list terms (dt) bold.
• Give the list items (li) square markers.

The relevant CSS for accomplishing all this is:

h1 { 
  font-size:1.4em; 
  margin:.2em 0;
  letter-spacing:2px; 
  border-bottom:1px dotted #ccc; 
}

h2 { 
  font-size:1.2em; 
  margin:.2em 0; 
  letter-spacing:1px; 
  text-decoration:underline; 
  font-weight:normal; 
}

dl dt { 
  font-weight:bold; 
}

ul li { 
  list-style-type:square; 
}
		

All of this is added to step4.css and the effects can be viewed at step2-1.html.

In the next part, I will focus on placing the columns side-by-side. Move on to part 4.