Design - CSS

Introduction to Web Development – Styling Web Pages with CSS

When you author Web pages using HTML markup, you can apply styling properties to your page content using CSS (Cascading Style Sheet) code. With CSS declarations working in conjunction with your HTML code, you can control various aspects of the layout and other presentation details of your pages, such as colors, fonts, background images, borders and much more. In this tutorial you will learn the essentials of CSS for styling your Web pages.

Applying Style Code To Your Pages

In Building Websites with HTML we started creating a simple Web page. You can add the CSS code to the page you built if you followed that tutorial:

<!DOCTYPE html>
<title>My Page</title>
<!--page content-->
<h1>My Page</h1>
You can validate your Web page code using the
<a href="">W3C Markup Validation Service</a>.

As you should already know, the body section holds the page content. To style this content, we can add CSS code to the head section in one of two ways. We can add a style section between the opening and closing head tags as follows (before or after the title element):

<style type="text/css">
/*style declarations*/

The style declarations will be placed between the opening and closing style tags. If you prefer, you can store your style rules in a separate file saved with “.css” as the extension. For example, if you use a file named “site_style.css” you can then apply it to your page by adding the following to the head section instead of the style tags:

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

You can include the declarations we work through in either the style section or a file linked to in this way. The appearance of your page will be determined in part by the HTML structures and in part by the CSS declarations you add.

CSS Syntax

Each CSS declaration you include is a rule the visitor’s browser will use to present the content of your page in a particular way. CSS code specifies one or more elements, then defines the style rules to apply to them. For example, to apply a background color to h1 elements, add the following to either your style section or CSS file:

h1 {

As you can see, the first part of the code is a selector, specifying the h1 element – the style rules contained between the brackets will be applied to all h1 elements in the page. The color is listed as a hexadecimal value – don’t worry if this syntax is new to you, the characters represent the red, green and blue values that make up the final color. Extend the code by setting the text color as well:

h1 {

Open your page in the browser to see the effect.


The page appearance will vary slightly in different browsers and on different systems. Let’s add another declaration inside the h1 section, before the closing } bracket:


You can apply padding, margins and borders to elements, using the box model. With the box model, each element can have an area of padding added around its content, a border around it and a margin outside it (between it and other elements).

Box Model

In the code above we used a percentage value to apply the padding relative to the size of the element within the page. You can also use fixed pixel values, but you will find that your styling is applied more reliably in different browsers if you use relative values where possible.

There are lots of CSS declarations you can apply to your page elements – see the CSS Cheat Sheet for an overview.

Selecting Elements

As you saw above, you can select elements in CSS by referring to the element name, which was h1 in the example. You can also select elements using class, ID and nested references.

Selecting by Class

You can assign HTML elements class names if you want to style a selection of elements in the same way. For example, add the following to the body section of your page, before the closing </body> tag:

<p class="note">
This is some text.
<div class="note">
This some more text.

Here we have two elements of different types, but both with the same class attribute. Add the following to your CSS code, after the closing bracket for the h1 declarations:

.note {

The . period character indicates that we are selecting elements by class name. Refresh your page.


If you wanted to only apply the styling to paragraph elements with the specified class name, rather than all elements with the same class, you could extend the selector as follows:


Selecting by ID

You can assign HTML elements with ID values to identify them as unique – a particular ID value should only appear once in each page. Add the following to your page, before the closing <body> tag:

<div id="conclusion">
This is even more text.

Now add the following to your CSS code:

#conclusion {

The # character selects by ID.


Styling by Nested Reference

You can also select elements to style using references to the element position within the nested tree structures in the page. For example, add the following to your page, before the closing </body> tag:

This is yet more text.

Now you can style paragraphs contained within divs by adding the following to your CSS code:

div p {

The CSS code specifies the element type, preceded by its parent type – you can chain together multiple selectors in this way.


Key CSS Declarations

You can experiment with your page by adding more CSS declarations – there are some key styling properties you are likely to use most.

Positioning and Layout

You can use HTML element markup to divide the content of your pages into sections, positioning these sections using CSS. To an extent, the positioning of elements is determined by the amount of space available in the user’s browser. You can use CSS code to specify generic style rules that will adapt to the user environment. For example, add the following to your CSS code:

div {

Check your page in the browser:


The float property tells the browser to place each instance of the specified element type to the left of the previous one if there is space. Resize your browser window to see how the display changes.


As you can see, the property provides the ability for the browser to rearrange the page content to suit the available space.

Styling Links

Styling HTML anchor elements requires a particular CSS syntax pattern. You can set style rules for links in specific states – add the following to your CSS:

a:link { color:#330000; }
a:visited { color:#003333; }
a:hover { color:#000033; }
a:active { color:#330033; }

To apply styles to links in all states, use the following:

a:link, a:visited, a:hover, a:active {

Note that you can use this syntax to select multiple element types – listing each selector with commas between them. This can be useful if you want to apply the same style rules to different types of element in the page.

Other CSS rules to try include width and height, background images, fonts and text styles. Again, you can view our CSS Cheat Sheet for a complete list of styles.


You have now discovered the essential features of CSS to get started styling your own pages. Try adding more HTML elements and CSS declarations to your page and continually refresh the browser to see the effects. You will soon discover that achieving the design you want requires trial and error, particularly as your pages become more complex. Remember to view your pages in more than one browser to see the variations your users may be experiencing.

About the author

I'm a developer and technical writer - see for details. Follow me on Twitter @BrainDeadAir or email me at

Share this post

Leave a Comment

Subscribe To Our Newsletter