Starting a Stylesheet

Start your stylesheet after you have the basic HTML structure in place. You may want to use the starter skeleton as a starting point.

Identify the element (or set of elements) you want to style, and figure out how to construct a selector to include it.

The most direct approach is to add a class attribute to your element, and then add it to your stylesheet:

<style>
.starterParagraph {
  color: darkblue;
}
</style>
<p class="starterParagraph">
  I want to style this
</p>

I want to style this

Linking your stylesheet

In the above example, the CSS is embedded within a STYLE tag in the same HTML. But in most cases it's better to put your styling in a separate file, linking to it from your HTML file(s). That way multiple HTML files can share the same stylesheet and your HTML isn't cluttered with CSS.

To do so, copy the styling (and don't include the <style> or </style> tags) and put it into a file with a 'css' extension. As usual,try to avoid capitals, spaces or strange characters in the filename.

In your HTML, add a LINK element inside the HEAD section of your HTML page(s). See the starter skeleton for more

For example:

<html>
    <head>
        <link rel="stylesheet" href="style.css">
        ...
    </head>
    <body>
        ...
    </body>
</html>

Visualising your DOM

Especially when you are starting out, it can be useful to set different background colours or borders to your main elements so you can be sure you are selecting them properly in your CSS.

Use this colour blocking as you get the positioning and layout aspects of your design right. Background colours and borders can be useful to see the position and size of elements and to debug layout.

Once you have elements roughly in place, and you've experimented with differently sized browsers, you can remove these CSS rules and start to focus on presenting the elements the way they are supposed to be.

For example:

body {
  border: 1px solid blue;
}
div {
  border: 1px solid yellow;
}
section {
  border: 1px solid red;
}
nav {
  border: 1px solid green;
}
header {
  border: 1px solid purple;
}
footer {
  border: 1px solid gray;
}