Common Tasks with CSS

Working with Fonts

CSS was designed to work with fonts from its inception so it follows that working with fonts should be easy. Let's experiment:

h1 {
font: 36pt sans-serif;
}

Anyone who has done desktop publishing should be able to read the above style sheet. It simply tells the browser to render all h1 elements in a 36 point sans-serif font. That sounds simple enough! The font property is actually a shortcut property that allows you to specify a number of values at the same time. The font shortcut property lets you set the font-style, font-weight, font-variant, font-size, and font-family values. These values must be specified in this order and font-size and font-family are required. You can choose to let the browser handle the rest of the properties by either omitting them (as above) or specifying normal for their values.

To read about all of the font properties, view the CSS Specification adopted by the W3C. This document lists all of the individual properties of the font shortcut property as well as their possible values (all this info is also in the book - see Chapter 9).

Here are some examples of valid rules that use the font property:

p{
font: italic 12pt, "Times New Roman", serif;
}
h3{
font: normal small-caps 120% fantasy;
}
a{
font: oblique 700 50px Arial, sans-serif;
}

In addition to the font properties, CSS specifies a text-decoration property that you can specify separately. The values for the text-decoration property are: none, underline, overline, line-through, and blink. This property allows you to specify additional formatting but please don't use the blink value - it's just plain annoying and obscures your message. We'll explore this property shortly when we discuss using CSS with links (OHHHHHHH, that's how they get links that aren't underlined!).

Working with Margins

Setting space around elements is a basic typography tool. All documents have space around the text if only to make them easier to read. CSS can be used to specify the amount of space there should be around any particular element. Much like the font property, the margin property is a shortcut property that allows you to set margins. You may set the the margin to a single value that represents the amount of space on all four sides of an element or you may specify four values starting with margin-top and moving clockwise through margin-right, margin-bottom, and margin-left. The margin property defines the space between the bounding box of the element - the space it will take up on the screen - and the surrounding elements. Here are some examples:

p{
margin: 3pt;
}
h2{
margin: 0.5in 0.8in 0.5in 0.8in;
}

See the margin property defined by the W3C.

There is another margin specified in CSS: padding. It works identically to the margin property as far as specifying values: either 1 value for all four sides or four values starting with margin-top and moving clockwise through margin-right, margin-bottom, and margin-left. The padding property specifies the space between the margin of the element and the content of the element. Here are some examples:

p{
padding: 2em;
}
h6{
padding: 1px 2px 1px 2px;
}

See the padding margin defined by the W3C.

With either the margin or padding properties, you are free to set any number of properties simply by specifying them individually:

p{
margin-left: 5px;
padding-top: 3px;
}

Working with Links

We've already seen how to create color schemes to change the colors of our documents - including the colors of links, visited links, and active links. Since the Web wouldn't exist without links, CSS gives special attention to links. CSS specifies something called a "pseudo-class" that can apply styles to elements based on information gained outside of the document itself. This applies well to link styles since how might any CSS author know whether a link has been visited? Here is an example of a pseudo-class:

a:link{
text-decoration: none;
}

We know that a is a valid HTML element. the :link part of the above selector is the pseudo-class. The rule above simply tells the browser to render any unvisited links with no text decoration (i.e. no underline!). There are other pseudo-classes for the a element: a:visited, a:active, and a:hover. You can probably figure out :visited and :active but what about :hover? That one specifies what the style of a link should be when the mouse moves over it. It is currently supported by IE 4+ and implemented in Netscape 6 PR2 but Netscape 4 does not support :hover. You'll have to use CSS and JavaScript to accomplish the effect (we'll get to it!). So here is how designers get links to behave like they want them to, not how the browser does:

a:link{
text-decoration: none;
color: green;
}
a:visited{
text-decoration: none;
color: purple;
}
a:active{
text-decoration: underline;
color: yellow;
}
a:hover{
text-decoration: underline;
color: red;
background: silver;
}

See the anchor pseudo-classes as defined by the W3C.

Writing your own Selectors

So far, every rule we've written has included an HTML element as its selector. The obvious limitation is that the style applies to every instance of the element. So if you write a rule for the <p> element, it gets applied to EVERY paragraph. Since that might not be what you want, the designers of CSS included a way for you to write and apply your own selectors.

To write your own selectors, you simply change the selector's name from an HTML element to a name of your choosing preceded by a period. All of the other aspects of writing rules are the same. You specify properties and values in the declaration. Here's an example:

.MyStyle{
color: RGB(40,40,40);
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 18pt;
margin: 5px;
padding: 3px;
}

The above rule will render in a sans-serif font at 18pt in a very dark gray. It will not be underlined (even if it's a link) and any element that applies it will have a margin of 5 pixels and padding of 3 pixels. The obvious question is how to apply it to any element. Well, that's actually the easy part. You use the class attribute of the element:

<p class="MyStyle">Some Content</p>

This will apply your custom style to the given element. As you can see, the style will only apply to this particular instance of the <p> element - not all <p> elements. But what if you want to apply the style to only a few of the words in the paragraph? We know that the <p> element is a block-level tag so in the above case, the style is applied to the entire paragraph. HTML includes an inline tag for just such an occasion: <span>. The <span> element allows you to apply styles inline to block level elements:

<p>Some<span class="MyStyle">Content</span></p>

The above will only apply MyStyle to the word "Content" not to the word "Some." <span> is an inline container tag: you turn on the style with the open tag and turn it off with the closing tag. Cool!

Now, what about the opposite? Suppose you wanted to apply a style to an inline element in a block-level fashion? Or, suppose you wanted to group some elements together and apply a style to all of them? Use the <div> element. It's the block-level cousin to <span>:

This applies the style to lines 1 and 2 as well as the image (no effect here!) but not to line 3.

See using Class selectors defined by the W3C.

Positioning Elements

For the most part, elements on a web page are positioned next to or below each other depending on their order and whether they are inline or block-level. The distances and alignment of these elements is given by properties like margin, padding, and width. An occasional box may use the float property to shift it to one side but, generally, the browser just fills in the canvas in the order in which elements are received. This process is called relative positioning as each element gets its space relative to the others on the canvas. CSS supports relative positioning and adds the ability to make corrections to the positions of individual boxes without affecting other boxes.

CSS also supports the concept of absolute positioning which is something entirely different. Absolute positioning takes an element out of the rendering sequence and puts it somewhere specific on the screen. You specify the location on the screen by using the top and left properties combined with the position property set to absolute. The top and left attributes specify the coordinates of the top left corner of the element. These, along with the width property, can make for some interesting effects. Here's an example:

.One{
position: absolute;
top: 25px;
left: 25px;
}

<div class="One">
<p><img src="logo.gif"></p>
<p>Slogan</p>
</div>

This will position the the <div> block 2t pixels from the top of the screen and indent it 25 pixels from the left edge. It will include both the image and the text. Interestingly enough, we could have specified a class attribute for each <p> element instead of using a <div> element but the result would be that both elements would occupy the same space on the screen, overlapping each other.

In fact, many times you'll want this to be the case. CSS provides a z-order property for this specifically. The z-order property indicates which layer sits on top of others. A lower z-order value will be underneath a higher z-order value. So we can layer elements on top of each other! We might want to rewrite the above style sheet to something like this:

.logo{
position: absolute;
top: 25px;
left: 25px;
z-order: 0;
}
.slogan{
position: absolute;
top: 25px;
left: 25px;
z-order: 1;
}

This gives us control over the layering effect.

See what the W3C says on positioning.

Well, we've barely scratched the surface of CSS. As of this writing, the formatting tags in the HTML 4.1 specification have been deprecated in the new XHTML specification. This leaves only CSS to format web pages in the future. It makes good sense to know CSS now so that when it becomes necessary you won't have to start from the bottom. The documents that are linked above are the complete CSS1 and CSS2 specifications. If you require any further information regarding CSS, those are the places to start.