Ken Walsh

Web Page Design Foundations

5. Cascading Style Sheets

Introduction to CSS

Cascading style sheets (CSS) are documents that describe how HTML elements should look. These documents are written in a languge called cascading style sheet language. This terminology is a little strange at first, but just think of CSS as a language for defining the look and feel of HTML elements. Instead of tags that were used in HTML, this language uses rules. The rules have a specific format described in more detail below. A complete description of the concept and the history of CSS can be read at the CSS Wikipedia page.

The language can be placed either within the html file or within its own css file. When the CSS rules are placed in an HTML file, they are put between beging and end style tags to tell the browser the lines of code are CSS rules and not HTML tags. When they are in their own file, no style tags are used because the entire file is just CSS rules. Usually the best place to use CSS rules is in a separate CSS file that is linked to the HTML document. The separate file approach is a best practice because all of the HTML files on one site can link to the same CSS file, keeping the look and feel consistent. For example, if the CSS file redefines the font size of the h1 element, that change would effect every HTML file that linked to it, making or a consistent presentation across page. To create a CSS file, use a text editor such as notepad to create a text file, but save it with the extension css. Within the HTML file that will use the CSS, use a link tag. The example below shows the use of CSS to change the font size of the h2 element and how it would be referenced in the HTML file.

Sample CSS code in CSS file to set the font size of h1 elements:

h1 {font-size:2em;}

To understand the above example, note the general formate is to define a rule that is made up of a selector, one or more properties, and values for the properties. The line above is a rule for the selector h1. The selector is what element will be effected by the rule. In this case the property font-size is set to the value 2m. The colon separates the property from its assigned value. Note that the properties are enclosed in the squiggly brackets. The semi-colon after the value separates multiple properties. This rule for example may have also change the font or color used for h1.

Since the above rule was in the CSS file, the HTML file still must be linked to the CSS file to use it. The following is an example of the link element that should be placed within the head section of the document. Note that the href attribute defines the location of the css file. In this example, a file named style.css should be stored in a folder name styles.

<link rel="stylesheet" type="text/css" href="styles/style.css">

Changing Fonts and Colors

Given the general format of a rule above, the question is what selector can you use and properties can they have. Most HTML elements can be selectors. Some examples are body, p, h1..h8, table, th, td, tr, and video.

One property that can be set for a selector is the background color. Look at the following rule sets the background color of the body to blue. Notice the any element could have been used in place of body.

body {background-color:blue;}

This example leads to the question of how to specify a color. Colors can be specified in the three ways. By color name, as shown above, by hexadecimal values such as #ff0000, or by red green blue values such as rgb(255,0,0). Valid name for color are listed on HTML Color Names. Hex and rgb values are listed on HTML Colors.

The color property sets the color of the text. The border-color property set the color of the border of an element. Both would use the same color values as used with background color.

The font-size property is used to set the size of the font. The size can be expressed in various units such as points (pt) like you see in aword processor, a percentage (%) of what the default browser size is, a number of pixels (px) or a size relative to the standard size of an M (em). Although the last units of em may at first seem a little odd, it works well in that it makes scaling by the browser most predictable. When a user scales the view in the browser, the browser updates what a standard M size shoud be and your elemenst which are a multiple of that will scale as well. The following code set the h1 element to 2,5 times the size of the standard M.

h1 {font-size:2.5em;}

The font-family property sets the font type. A list of fonts can be used in case the browse doesn't have a certain font. Fonts with spcaces in the name need to be enclosed on quotes. The following example shows both the h1 and h2 elements being defined to a serif font.

h1, h2 {font-family:"Times New Roman", Times, serif;}

The following example shows a p element being set to a serif font.

p {font-family:Arial, sans-serif;}

A elements are a little more interesting. The a tag was used to create links. What is different about the a tag is that is has states, meaning it looks different after you have visited the link or when you mouse over it than it did when you first saw the page. Therefor each one of those four states can be used in rules independently by using each state as a selector, rather than the plain a. See the four states of the a tag at CSS Links

The Box Model

The box model is the concept that every element is a box. So for example even the p element is a box where the size of the box is depended on how much text is in it. Normally the p element doesn't look like a box because it has the same background color as the box it is in, usually the body element. However, if you were to change the background color and the border color of the p element, you could see the box. An overview of the box model is shown at CSS Box Model.

In CSS, all elements have the following box related properties:

The Class of the Selector

Sometimes you might want more then one definition of how a tag should look, possibly in different parts of the page. Maybe the p tag should be one size in the main body and another in the footer of the page, for example. You can use the class destination with the rule for the p tag, to define the styles. The class designation works with rules for all tags.

In the CSS file you could have the following rules. These rule define how the p tag should look, when its class has been specified.

p.main {font-size:1em;}

In the HTML file you would place the corresponding p tags.

<p class="main">This would be what you want in the main size.<p>

<p class="subsection">This would be what you want in the the smaller subsection size.<p>

Formatting Menus

Menus can be set up as <a> tags within an unordered list. However, the standard formating of the unordered list is not the most readable for menus. Look at the CSS behind this simple menu to see how it made to look more readable.

Menu Example

Organizing the Page with the Div Tag

If you recall the box model. All tags are boxes. Sometimes you may want a box around the other boxes to group them together.

The div tag Sets up a Box around other boxes.

This example shows two sentences with p tags within a div tag. The div tag has a background color of LightGray.

The CSS rule, found in the CSS file, looks like this (Note the indentation helps keep the CSS file readable.):

div.graycallout {




The HTML tags, found in the HTML look like this:

<div class="graycallout">

   <p>The div tag Sets up a Box around other boxes.</p>

   <p>This example shows two sentences with p tags within a div tag. The div tag has a background color of LightGray.</p>


The div tag Sets up a Box around other boxes.

This example shows two sentences with p tags within a div tag. The div tag has a background color of LightGray.

So the box around box concept is the way to think about your web page layout as a whole. For example, if you think about CNN, they have used boxes in two specific way for their layout.

First, but putting a div tag around the entire site and setting the width property of the div tag, you created a fixed width page. By default, pages are variable width meaning the get wider the wider the user Extend the browser. If you look at CNN, you see that if you make your browser wide, the content is a fixed witdth in the middle.

Another thing to notice on CNN and many other pages, the information is set up in columns. The way to do this is to set two properties in the div tag for the first column. Set the width property to give is a fixed width and then set the float property to left. The float proprty makes the box begin on the left side of the screen and it extends right for the length of the width property. If the browser or containg box is wider than that, a second box, can be added as column two.

See the column example below for a two column example with a one column header and footer area.

Column Example