Paris Graphics

Home > Web Development Course > CSS > You Are Here

Cascading Style Sheets

Intro

What are Cascading Style Sheets?

Cascading Style Sheets are a type of Style Sheet Language. They define how to format and present a structured document. As you may recall from our discussion on the XHTML page, (X)HTML is a mark up language intended to to structure a document - not to style it. In the 1990's this all went to hell as "web designers" used mangled the two concepts with FONT tags and other nonsense - including formatting a page by using nested tables. These pages can still be found on the web today and what's worse is that there are people still making pages like this!

You may be asking yourself - so what's the problem - if the page looks good, so be it! Well, no, I'm not JUST a blow hard - there are good reasons for keeping the structure and presentation (format, design, etc) separate here ar just a few:

In the remainder of this article we will look at how to include CSS, how to use it to redefine an HTML tag, how to define classes, and do a little page layout. The topic of CSS can fill entire books and so we will only touch on it here. To put this to use on a regular basis, you will want to get yourself some good bookmarked sites, or a good cheat sheet or book.

Before we go any further, maybe you want to see what a style sheet looks like? Probably a good idea. Although it's not as simple as it could be, here's the one I'm using for this site. Don't worry about trying to understand it all now.

Including CSS in your XHTML file

There are four ways to include CSS in your page. The first is called "Inline" and looks like this:

<p style="color:#FF0000;">URGENT NOTICE!</p>

If you try this you'll see that the text URGENT NOTICE is red. Personally I never use this method of including CSS because it's too tied to the content. If I want to change all urgent notices to green, I would have to make the change in all my documents.

The next way is to include a definition of your styles within the style tag. NOTE: The style tag must be included within the <head> of your document.

<style type="text/css">
h1 {color: red;}
body {background: gray;}
</style>

For the same reason as the first example, I almost never use this way of including CSS.

The third way is to use the @import directive inside of the <head> of your document like this:

<style type="text/css">
@import url(style.css);
</style>

This will load the file style.css which has all of your CSS info in it. There are a few cases where I use this but mostly I use the last method.

The last method is to use the <link> element to load one or more external style sheets (files with your CSS info). Like the previous two examples, this must happen in the <head> - like this:

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

This loads the info found in the style.css.

You can load more than one file by repeating this line and changing the href.
There are various values that you can use for the media attribute including screen and print.

Styling an HTML tag

As our first example of seeing some CSS in action, let's style an HTML tag. Let's say we have a file called style.css with the following in it:

p {
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
/* ff0000 is red */
color: #ff0000;
padding: .5em;
}

Now everytime we use a p tag in our XHTML file, the p tag will have these properties. It will have a font size of 11 pixels, it will use either Arial, Helvetica or some other san-serif font, it will be red, and the area around the p tag will have a padding (more on this shortly under "box model") of .5em where an "em" is the size of one character.

So an XHTML file that links to style.css and has content like this:

<p>Hey Kids! What time is it?</p>

Will produce this output:

Hey Kids! What time is it?

A super easy example, I know, but this is most of what "real" CSS looks like!

Notes:
Each element (tag, class, id, etc) follows the form Element Name { property 1; property 2; }
Notice that each property is followed by a semi-colon.
Another thing to note in the example above the line:
/* ff0000 */
is a comment. You can place comments anywhere in your CSS in this format.

So any HTML tag can be defined as we did above with <p> What you might be asking now is "What are all the properties that you can define?" Good question but... there are too many to discuss here! This page shows you some along with browser compatibility (another thing we need to talk about).

The Box Model

CSS uses something called a Box Model which defines the area that surronds any content. Think of the <p> tag again. Let's say we have this code:

<p>Cool stuff goes here!</p>

The phrase "Cool stuff goes here!" is our content. Around the content there is a box of Padding around the Padding is a Border box and around the Border is a Margin box. Each of these has properties that can be defined (e.g. color, border style, etc) and not only that... each of the sides of each of the boxes can be defined separately!

Confused? I don't blame you. This picture may help a bit.

As an example, let's try this:

p {
background-color:#000000;
color:#FFFFFF;
padding:20px;
border: 10px solid;
border-color:#99FF00;
margin: 20px;
}

which give us this:

Cool stuff goes here!

Right now this may all seem unnessarily complicated but having this much control will come in handy later when we want to layout a page.

Defining a Class

A class is a user defined set of properties which can be applied to any elemet.

As an example, consider what we did above when we defined the <p> tag making it red among other things. In a real document, I doubt that I'd ever want the text to always be red but may just for urgent warnings so I can define a class for this purpose. I'll call the class warning and define it in my style.css document like this:

.warning {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#FF0000
}

note that I preceed the class name with a period "."

Now, I could remove red from the defintion of the <p> tag and use this class with the <p> tag whenever I want red warning text, like this:

<p class="warning">Warning! Running this command will format your hard drive!</p>

Which results in this:

Warning! Running this command will format your hard drive!

Because this is a class and not tied to a particular element, I could use it with any other tag, for example:

<h2 class="warning">Warning! Running this command will format your hard drive!</h2>

Resulting in this:

Warning! Running this command will format your hard drive!

Defining an ID

An ID does the same thing as a class - allows you to set several properties under a user defined name. The difference is that an ID should only be used once in a document. For example, an ID might define a header or footer. This is the most common and best use of an ID and in such cases is used with the <span> or <div> tags. <span> and <div> are discussed below but here's what a user defined ID called footer looks like in our style.css file:

#footer {
clear:left;
width:740px;
margin-top: 1em;
rder-top: 1px solid #333;
}

Note that where classes have a period prefix, an ID has a hash symbol # before the name.

One way to use this would be as follows:

<div id="footer">
<p>Copyright &copy;2004-2008 Paris Treantafeles</p>
</div>

Span and Div

Span and Div are XHTML tags which when used with a class or ID as above can be used to apply properties to a section of your document. The major difference is that <div> can be thought of as a block and will cause a break at its closing. Very similar to the <p> tag but it can enclose many tags itself. <span> does not cause a break.

Here's how I use them...

I design the entire page with <div> tags and IDs to make logical sections of the document, e.g.

I use <span> if I need some special formatting but do not want a break and it's not a logical division of the document.

Page Layout

Now we will use CSS to put together a simple two column page layout. Let's say we want the following logical divisions in our page:

Along with a definition of the properties for the <p> tag and the <h1> tag our style.css might look like this:

h1 {
font-family:Arial, Helvetica, sans-serif;
color: green;
}

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

#header {
background-color: #ccc;
text-align: center;
}

#navigation {
float: left; /*Float puts the block to left or right */
width: 10em;
}

#content {
margin: 0 10em 0 10em; /*this reads Top, Right, Bottom, Left */
}

#footer {
clear: both; /* Clears the Float - we could have just used clear: left */
text-align: center;
background-color: #ccc;
}

 

Which we could use with our XHTML like this:

<html>

<head>
<title>a two column floating example</title>

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

</title>
</head>

<body>

<div id="header">
<h1>Super Cool Math</h1>
</div>

<div id="navigation">
<ul>
<li><a href="fractals.html">Fractals</a></li>
<li><a href="chaos.html">Chaos</a></li>
<li><a href="harmonicseries.html">Harmonic Series </a></li>
</ul>
</div>

<div id="content">
<h1>Intro...</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec adipiscing. Duis feugiat commodo nibh. Proin varius euismod mauris. Donec sed sapien ut erat tristique mollis. Integer pede felis, tristique in, luctus nec, hendrerit in, metus. Mauris pretium mauris a enim. Ut tincidunt, est in imperdiet consequat, arcu arcu accumsan felis, sed elementum mauris nisl sit amet nibh. Nam semper elementum ipsum. Proin pharetra justo in pede. Cras arcu. Cras congue odio non mi. Cras blandit diam sit amet elit. Nunc faucibus odio et lacus. Ut fermentum.</p>


<p>Nulla diam neque, aliquet quis, convallis sed, auctor vel, odio. Morbi iaculis lacus id massa. Etiam lacinia urna vel erat. Suspendisse consequat eleifend dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec et lorem.</p>
</div>

<div id="footer">
<p>this is the footer - copyright, policy, etc
</p>
</div>

</body>

</html>

Which turns out to look like this.

Final Thoughts

This has been a quick overview of CSS. There is much that we didn't cover because it could fill a whole book.