Back to table of contents

A Small Introduction to CSS

14.1

Catie Flick

CSS, or Cascading Style Sheets, has been edging its way into the mainstream of Web page development since 1996, and is fast on its way to becoming the latest thing that all the cool kids are doing.

It allows developers to easily separate form and structure, which brings the side benefit of being able to tweak the design of every page on a Web site from one file, it makes Web sites much easier to maintain in terms of design (great news for all those trigger-happy Web site redesigners), is mostly supported by most graphical browsers (and partially supported by some text-based browsers too), and results in much faster loading, smaller Web pages. It also usually degrades nicely, which means you won't piss off the text based browser users or those who insist on using really out of date versions of IE and Netscape.

But really, why should you depart from your <font> tags and bgcolor attributes? Why should you bother separating form and structure? Because in the end, you are a Lazy Bum, and will appreciate not having to type so much.

A note on style

As with any programming style, each coder has his or her own favourite which s/he is willing to defend to the death. In CSS styles across the web you may see any of the following (don't worry about the actual code, we'll come to that later): 

body { color:black; background-color: white }

or 

body {
    color: black;
    background-color: white
}

or even 

body
{
    color: black;
    background-color: white
}

... or even more exciting variations.

For within-HTML-file CSS I prefer the first (if it's not stupidly long), and for a separate file I prefer the middle, because it matches my regular coding style. But I digress. The three are equally valid and perfectly cromulent. Do what you will. Just don't forget the semi-colons as delimeters (not necessary on the last element).

CSS basics

Where does it go?

In order for your pages to take on the magical mystery of CSS they need to be able to reference the styles. You can do this by either including the styles at the top of each HTML file you create (messy and pretty useless except for single-page-specific things) or by creating a separate file and adding a reference to it at the top of each HTML file you wish to use the styles.

To do the former, you will want to add code within <style> tags, like this: 

<style type="text/css">
    <!--
        body { color: black; background-color: #ffffff }
    -->
</style>

If you were to create a separate file (I like ``styles.css'' residing in the top level of the site area), you need to add the following to each HTML file, within the <head> tag (reproduced here for completeness): 

<head>
    <title>My Funky CSSified Site</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

Of course, you'd replace the href attribute with whatever you called the file (you can do relative locations).

In the ``styles.css'', you just list your styles. It's that easy.

There's one more way of doing it, but it's really not recommended because it almost defeats the purpose of having easy-to-maintain, Lazy Bum-friendly code, so I will mention it just here and never again - you can put CSS within a tag as another attribute: 

<h1 style="color: blue; font-family: arial">A Heading</h1>

So how does it work with HTML?

Looking at an example of 

h1 { color: red }

Whenever you use the <h1> tag in your HTML, it will now be coloured red. You can have more than one attribute per tag as well, 

h1 { 
    color: red;
    font-family: arial
}

This will now show your heading in the Arial family of fonts, in red. Lovely. You can do multiple tags per set of attributes too: 

h1, h2, p, blockquote {
    color: red;
}

Within the HTML, tags used within styled tags inherit their styles unless specifically overridden. E.G., using the above style, 

<h1>This is a <em>heading</em>!</h1>

The <em> tag, although not having a rule of its own, will also display in red (and be in italics).

But what if you want different <h1> tags to have different properties? Say, in a menu you have <h1> tags and you want them to look different from the ones in the main body of text? This is where classes come in. No, not classes like in OO programming, but a way of differentiating between similar tags. In your CSS file you might have: 

a {
    color: blue
}

...which will mean all <a> tags will be in blue. Then you'd add, say, for a menu listing: 

a.menu {
    color: red
}

(You could call this a.first or a.foo or a.anythingyoulike. Just make sure it's not being used elsewhere for different a tags!)

Now, in your HTML, you would use your usual <a> tags for everything, but on your menu you'd use (for example): 

<a href="foo.html" class="menu">...</a>

You can also create classes that aren't associated with HTML tags: 

.foo {
    color: red;
    font-size: 14px;
}

...And reference that anywhere. I especially like to put them in <p> or <div>, or even <table> and <td>, but you can really do it in almost any tag within the <body> tags! For example: 


    

        
        some other stuff

You can also do some funky things, like ``only make the text that is within a table cell and bold red'' (called ``Contextual Selectors''): 

td b {
    color: red
}

And finally, you can put in comments to make it easier to read: 

b {
    color: red /* makes bold tags red */
}

Some Things To Note

Duplicate Rules

If you duplicate rules, say: 

b {
    color: red
}
b {
    color: purple
}

...all your <b> tags will actually be in purple, as all but the last rules are discarded.

HTML vs CSS

Browsers often see HTML tags as superior to CSS tags. So stick to one or the other, especially when it comes to colours and fonts.

CSS vs Shoddy Software Development Methodologies

Browser support of CSS is ...often substandard. IE and Mozilla-based browsers are still the most supportive of CSS, and Konqueror/KHTML-based browsers (including Safari for Mac) and Opera are close behind. Forget Netscape 4 and pre-version 5 IE, and text-based browsers, as they do not support enough CSS to be useful. However, CSS usually degrades nicely enough that users of text-based browsers won't be offended, and older version of Netscape/IE will just look a little uglier than their more recent counterparts. However, even then, it's always best to double check that your beautiful Web page looks at least functional under other Web browsers before releasing it upon the masses.

Some Common Attributes

Fonts

Colour and Background

There are other background attributes but these are the ones I see most often.

Text

There are lots and lots of things you can do with text, but you probably won't really care about 98 of them unless you are doing something really peculiar. The ones you probably will most care about are:

Boxes and Borders

You can use margin and padding to play with margins and areas within an element. Think of them as being like cellspacing and cellpadding in a table. The most useful attributes in this set are the border family:

Where to from here?

In this small tutorial, I introduced you to a small selection of the wide range of things CSS can do for you. There are many more available, however, and you can find extensive lists of CSS attributes and hints online. Try a Google search for ``CSS attributes list'' and ``CSS tutorial'' and you'll turn up a lot. Especially useful is the W3C standard (though remember my point about the lack of standards adherence in various Web browsers), found at http://www.w3.org/TR/REC-CSS1. There are also more extensive tutorials online, such as at http://webmonkey.com or at http://www.devshed.com.

Back to table of contents