CSS Introduction

Why should I use CSS?

It may seem that creating another file is making your webpage more complex, but in reality it makes maintaining your sight easier! The reason is that CSS provides a clear seperation of presentation and content, and centralizes all the presentation data. Thus, when you wish to change a color of a header, or the text-size of you content, you change it in one spot, and it affects your entire website instantly.

What should I use to create a CSS file?

The answer to this question is both simple, and difficult. It is my belief that you should use a simple text-editor of your choice to create the CSS file, and Mozilla for testing the resulting display of your HTML combined with CSS. The reason is this: it seems that Mozilla adheres to CSS standards better than Internet Explorer. There are other choices, such as Opera, Safarai (Mac), and various versions of Netscape, but they all adhere to CSS and HTML standards in varying degrees. However, the choice is ultimately up to you. Another recommendation might be Dreamweaver MX if you need something more visual to work with.

So CSS just modifies my text?

No! CSS provides you with much more control over your presentation of content. With CSS, you can position data within your webpage, size the container for the content, set background colors, hide data, and even create templates. You see CSS's true power when you combine CSS with templates . Keep in mind, this is much more that you can do that is beyond the scope of this introduction.

What is a template?

A template is very useful presentation tool that allows you to create a generic webpage with predefined sections of content, that you can then modify through CSS. Some examples of sections might be your title, your menu, a footer, a copyright area, and your actual content area. When you have a functional template, creating a webpage takes a matter of minutes, and adding things like a text-only option, or a printer-friendly option are suddenly very easy. Within this section of the Web Training Center you will be able to observe the creation of a simple template, and how easy it is to make a printer-friendly option, and a text-only option. You can then use this template if you wish, though we encourage you to use the template provided as a base and create your own!

So just what is a CSS file, and how do I use it?

CSS allows you to set properties to named elements in your webpage. If you have an element named 'header', you would then be able to do something like this:

#header {
height: 40px;
border-bottom:1px solid #000000;
width: 100%;
font-family:sans-serif;
font-size:1.6em;
font-weight:bold;
background-color: #cccccc;
}

So what exactly does this do? Well, this demonstrates the level of control you can have over your webpage. Here, we are setting the height of your element (a div in this case) to be 40px high and 100% of the parent wide, have a black bottom border, set the containing text to use sans-serif, be bold, and 1.6em high (discussed in our units section), and have an overall background-color of a grey tone.

When creating a CSS file, keep it simple. Do not go and create a CSS declaration for every little element, especially if that element is only used on one page. There is a fine line here: you want to make sure you declare an 'id' or 'class' for most of your elements, but not do it for every element. If you do, and you put in a declaration for each element in your CSS, it will get bloated very quickly. Here's an example: suppose we have an element on our link page, a div with an id of 'myLinks'. Now, this will only be used ever on our links page. Here is the CSS declaration we put in our main CSS file:

#myLinks {
height: 80px;
border: 1px solid #000000;
width: 50%;
background-color: #5555ff;
}

The above would actually make our CSS file 121bytes large (remember, 1024 bytes in a kilobyte). If we added more one-time elements like this in our main CSS, our CSS would quickly bloat up. Our main CSS file is supposed to be the 'skeleton' of our webpage design and gives it form. Our stylized CSS files provide the rest.

Now, you might get overly excited, and explicity declare all the properties of every element. This is not utilizing CSS to it's fullest, and will also cause our CSS files to bloat. The reason is that CSS stands for Cascading Style Sheets, and it is precisely this cascading effect that will help us.

Now that you a little familiar with CSS, please continue onto our "Cascading Style Sheet" section.

Here is the biggest benefit of using CSS, global control of your documents. With CSS all you have to do is make changes to one document, your style sheet, and change the look on all of your pages at once. What a time saver. Just think how long it would take to change font sizes and color on 50 pages.