or

Subscribe to RSS feed!

Beginner’s guide to CSS

Full HTML template and sample CSS

Let’s start by putting the two pieces of HTML I showed you together and combine it with some sample CSS: Sample HTML + CSS. You can find all code that makes that page below. Feel free to copy the code below and experiment on your own.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <title>Your own page title</title>
   <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div id="header">
   <h1>The name of this page</h1>
</div>
<div id="navigation">
   <h2>Navigation</h2>
   <ul>
      <li><a href="first.html">First</a></li>
      <li><a href="second.html">Second</a></li>
      <li><a href="third.html">Third</a></li>
   </ul>
</div>
<div id="content">
   <h2>Content</h2>
   <p>Some sample content, add your own here</p>
</div>
<div id="footer">
   <p>This page is written by [Your name] and builds on a <a href="http://friendlybit.com">Friendlybit template</a>.</p>
</div>

</body>
</html>

You should be able to tell what each part of the HTML does by now. Let’s instead have a look at some sample CSS for the structure we have above. If you want to experiment with this code you can copy it to a file named style.css (or any other filename you reference in the <link>-tag in the HTML) and place it in the same directory as the HTML document.

body {
    background-color: Green;
}
div {
    border: 3px solid Black;
    padding: 7px;
    width: 600px;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

#navigation {
    float: left;
    width: 150px;
}
#content {
    float: left;
    width: 430px;
}
#footer {
    clear: both;
}

Let’s go through the six rules above. First we set the background-color of body, and body is the background of everything, so this will do the same as bgcolor did in HTML.

Next we set some styles on all divisions on the page. We have four of them and with this single rule we affect them all. First we set a black border to be 3 pixels wide (note that there is no space between number and unit in CSS). We then set a padding (the space between the border and content) to be 7 pixels and lastly we set the width of all divs to 600 pixels (note that margins, borders and padding are not included in the width).

The third rule selects all headers on the page and removes the margins (the space between the border and other nearby elements) from them. The commas are used between the elements to apply the same CSS to all of them.

Next we have some specific rules for three of the divisions. We position the navigation to the left of the content. This is done by using floats, a way to put things side by side. If you have used the align-attribute on images in HTML you will know how floats work, they move the element as far to the left as possible and then let the next element follow right next to it. If you want to put something below a float you need to clear it. Clearing moves the element down until it’s below any floats, exactly where we want the footer. So both navigation and content are floated and given a width to match the 600 pixels wide header, and the footer is cleared.

[Update: I have added some simple layouts for you to look at, and a list of tools I use when developing. Hope they help all of you out there that learn by examples.]

Now it’s your turn, you will learn CSS by using it and trying out how things work. So go ahead and play with the sample above. Thanks for reading, and good luck!

Any ideas of how this guide could be improved? Just leave a comment to the right.

Friendly Bit is a blog by Emil Stenström, a Swedish web developer that occasionally gets ideas of how to improve the internet.