What is CSS?

As you know, when writing HTML tags, you are giving instructions to the web browser on just how you want your web page to look. If you don't give specific instructions, the web browser will assume a few things. To explain, when you type in your text between the body tags, the web browser assumes that you want that text to be displayed a certain size because you haven't told it any differently. However, you can make your words bigger or smaller by just giving more specific instructions to the web browser.

But you already know this…

What you may not know is that proper HTML programming these days stresses the importance of dividing style and content. In other words, what a text says should not be kept in the same file as the instructions for how that text should look.

That's where CSS, or Cascading Style Sheets, come in. A style sheet does just what the name says: it provides style instructions, or instructions for how your web page should look. More importantly, these instructions do not have to be a part of your web page.

Let's start off using CSS by using what are called inline styles. Inline styles don't use CSS so that the style and content of your website are separate, but inline styles are easier to understand than internal style sheets and external style sheets. I will show you what these are shortly, but for now, I will stick to using inline styles.

To use inline styles, all you need to do is add the style attribute or style="" to a tag, like this:

<p style="">Woo-Hoo! I'm learning HTML!</p>

Here, we added an empty style attrbute to the opening paragraph tag. Style attributes always get added to the opening tag in an HTML tag pair. If you wanted to add a style attribute to single HTML tag that is not part of a pair, like <br />, it would look something like this:

<br style=""/>

So far, we've only been adding empty style attributes that won't change the appearance of the text at all. We haven't used CSS yet. So now we'll put some CSS between the quotations marks ("") in our style attribute.

Suppose you want to center your words on a line. Add text-align: center; between the quotations marks ("") in the style attribute, like so:

<p style="text-align: center;">Woo-Hoo! I'm learning HTML!</p>

Let's break down what we are seeing here.

We have a pair of paragraph tags: <p></p>

We have the style attribute inside the opening paragraph tag: style=""

Then we have the CSS inside the style attribute: text-align: center;

The CSS inside the style attribute has two parts: the property and the value.

This is the property in the example above: text-align:

This is the value in the example above: center

Every property and value in CSS gets followed by a ; or semicolon.

Now, CSS has lots of different properties, each of which have their own sets of values. I've only shown you one property and one of that property's values.

If you want to see most of CSS's properties and values, the W3Schools site has a great reference page:

CSS2 Reference
http://www.w3schools.com/css/css_reference.asp

Ready to learn more about CSS?

Previous | Home | Next

This resource originally created by Deborah Dunk.
Revised and edited by Michael Galloway in 2005 & in 2006.

Updated on 28 Nov 2006