A Beginners Guide to CSS
  1. What is CSS?
  2. Where to put your stylesheets
  3. CSS Selectors
  4. CSS Properties
  5. Cascading
  6. Wrap Up

A Beginners Guide to CSS

Page 2

Where to put your stylesheets

There are three main ways to fit stylesheets into your HTML page. They are...

  1. Inline, using the style attribute
  2. Embedded in your document's head
  3. In a separate document, linked

The list of methods above goes from worst to best, although you should be familiar with all three methods, as they all have their uses.

The style attribute

The style attribute will give you the closest method to the old font tag. A style attribute can be added to any tag, and the CSS attributes will apply to that tag.

<p style="rules go here">This is my first paragraph</p>

Full examples will be presented later, once we've covered selectors and properties. Although this method works, it does nothing to separate structure from presentation, and updating pages is just as much of a pain as it was with font tags.

Embedded Style Blocks

When you embed a CSS block in the head of your document, you can style any of the elements in that document. This is what an embedded stylesheet looks like...

<html>
<head>
<title>My Web Page</title>
<style type="text/css">
rules go here
</style>
</head>
<body>
...
</body>
</html>

The advantages to this method will become clear once we've looked at selectors and properties.

Linked External StyleSheets

Linking stylesheets is very similar to embedding them - the difference is that the rules are in a separate file rather than between style tags.

<html>
<head>
<title>My Web Page</title>
<link type="text/css" href="style.css" >
</head>
<body>
...
</body>
</html>

style.css is the css file, which contains the exact same rules as would be between the style tags. The css file can be edited in any text editor, such as notepad, but must have a .css extension rather than a .txt extension.

Now let's take a look at CSS selectors and start making the rules work.