A CSS Walkthrough, part 2

In the previous part of this walkthrough, I started with the initial elements of a webpage.

Initial Styles

Now I will begin writing a CSS stylesheet with some initial settings for my page content. These initial settings will standardize some spacing and text sizing settings that various browsers implement differently by default. You can view this initial CSS in step1.css. Some conventions and shorthand from this document (not necessary to understand but helpful):

• The number 0 never has a unit.
• #fff is the color white, and is equivalent to #FFFFFF and rgb(255,255,255).
• The 2 values in margin:.2em .8em; correspond as follows: the first is the top and bottom measurement, the second is the left and right measurement.
• "em" is a unit that is relevant to the size of text. 1 em is usually, but not always, equal to 16 pixels.

You can see not much has changed with these initial styles for the page: step1-1.html.

Basic Styles

I am ready for some basic styling that will make my page stand out. I will change the font, background color, and background image:

body { 
  font-family:Trebuchet, "Trebuchet MS", sans-serif; 
  background-color:#ccc; 
  background-image:url(bg.png); 
}
		

The font order defines the font "Trebuchet" as it is names on Mac and Windows systems, followed by a basic identifier (sans-serif) for those computers that do not have this font available. The background color is set to a gray that is close to the background image.

The next step is to style the main div (pageContent). I want a 5 pixel left margin, 10 pixel padding all around, and I want this div to extend no farther than 760 pixels. Since the total reach of an element is defined as a combination of margin, border, padding, and width in CSS, I need to set the width to the remaining amount (760-10-10-5 = 735). I do this as so:

#pageContent { 
  background-color:#fff; 
  margin-left:5px; 
  padding:10px; 
  width:735px; 
}
		

The content column has a white background to accommodate the black text, and the margins, padding, and width are set to the values I planned earlier.

All of these changes have been added in step2.css and can be seen on this page: step1-2.html.

In the next part, I will focus on styling the images. Move on to part 3.