The Beginner's Guide to CSS

What is CSS?

An HTML page contains text and other information. A Cascading Style Sheet (CSS) contains all the layout information (like colours, sizes, and fonts) for your pages. By attaching a CSS to an HTML page, you can turn a page of drab text into something much more appealing.

You don't need to know CSS. If you do learn CSS, however, you'll be able to edit the layout of your template in your web page editor. You don't need to know CSS at this stage, if you use WordPress.

You should have a basic grasp of what HTML is, before attempting to learn CSS. See The Beginner's Guide to HTML.

Connecting an HTML page to a CSS file

An HTML page is linked to a CSS file by the following line:

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

It goes between the <head> and </head> tags.

In Dreamweaver and other modern web page editors, there should be a CSS styles window, in which you can easily edit your CSS styles, by double-clicking on them. However, you can also open up your CSS file and edit it directly if you like. In Trellian Webpage, you can only edit your CSS file directly.

An Example

<html>

<head>
  <link href="css.css" rel="stylesheet" type="text/css">
</head>

<body>
  <p><a href="main.htm">Main Page</a></p>
  <p><a href="gallery.htm">Gallery</a></p>
  <p><a href="contact.htm">Contact Us</a></p>
  <img src="orange.jpg">
  <h1>An Orange</h1>
  <p>This is a picture of an orange. Read all about it. This is just some descriptive text.</p>
  <p>This is the tutorial where you learn about CSS. You've already learnt HTML.</p>
  <p>Please contact us if you have any queries.</p>
  <p>We can be reached at any time of the day.</p>
  <p>Copyright Website Setup Guide</p>
</body>
</html>

I'll show you how to use CSS, by applying it to this example site. You already understand the HTML code here. Note that a proper web page needs to be enclosed in an <html> tag. It also needs to contain a "head" section and a "body" section. All HTML code should go in the "body" section. Only a few special things go in the head section.

A few touches of CSS

<html>

<head>
  <link href="css.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="box">
  <p><a href="main.htm">Main Page</a></p>
  <p><a href="gallery.htm">Gallery</a></p>
  <p><a href="contact.htm">Contact Us</a></p>
  <img src="orange.jpg">
  <h1>An Orange</h1>
  <p class="description">This is a picture of an orange. Read all about it. This is just some descriptive text.</p>
  <p>This is the tutorial where you learn about CSS. You've already learnt HTML.</p>
  <p>Please contact us if you have any queries.</p>
  <p>We can be reached at any time of the day.</p>
  </div>
  <p>Copyright Website Setup Guide</p>
</body>
</html>

.box {
  width: 450px;
  border: solid #993366 2px;
  background-color: #ffffcc;
  padding: 10px;
  }

.description {
  font-size: 10pt;
  color: #33aa66;
  margin: 20px;
  }

This purple area is your CSS file.

Have a look at the HTML. The first thing I've done is to add a <div> tag around most of the HTML. A div is just a box. It doesn't have a visual appearance, until you give it one.

In the HTML, I've put class="box" in the div tag. This means that the .box class will apply to this div tag.

Then in the CSS sheet, I 've typed in some properties for the .box style. There are dozens of different CSS properties that can be applied to a tag, but I've used some common ones here.

.description is another style. However, this style is applied to one of the <p> tags.

You don't need to understand and know all these properties just yet. You just need to have the general idea of what's going on. You can refer to my CSS chart for a description of all the CSS properties.

Altering tags, and hierarchical styles

.box {
  width: 450px;
  border: solid #993366 2px;
  background-color: #ffffcc;
  padding: 10px;
  }

.description {
  font-size: 10pt;
  color: #33aa66;
  margin: 20px;
  }

img {
  border: dashed #000000 3px;
  }

.box p {
  font: Arial;
  }

The HTML hasn't changed in this step, so I've omitted it here.

These two new styles are different from the previous two.

As well as making your own styles, you can alter existing HTML tags. By just putting img (no dot) as the name of the style, this will make all images have this dashed border. You don't need to make any changes to the HTML code to do this.

The next style is a combination of two things. The .box p style applies wherever there's .box and then a p tag inside it. (See in the screenshot, above, how the <p> text below the div is still the default font, because the style only applies to p tags that are inside .box). You can nest any number of styles and tags like this. This can help reduce the number of class="something" that you have to put in your HTML.

A good web designer will just give classes to a few major divs or other major elements on a page, and then define their contents in the CSS file with (for example) .main-content-box p and .main-content-box h1 or something similar.

Now that you know what styles are, and how you can use them, have a look at my CSS Properties Chart. It describes all the common CSS properties.