Make sure you don't miss the latest insights and tips. Click here to sign up for my mailing list now! ยป

Introduction to Cascading Style Sheets (CSS)

The old way to style content

In the olden days, when you wanted to change the font of your HTML, you would have to use a <font> tag, like <font face=”Times”>…

If you wanted to set the background colour and border width of a table and the amount of padding in each cell, you’d put <table border="1" bgcolor="silver" cellpadding="3" cellspacing="0">

There were a few serious problems with this type of approach:

  1. Because your styles are embedded into your content, it’s laborious to write.
  2. You have to repeat the same styles over and over again, wherever they appear on a page and across your whole site.
  3. It’s also lots of work to change the style of your site, as each page and every piece of styling has to be edited one-by-one.
  4. It adds extra size to every file.
  5. The same styles are seen by everyone, no matter whether they’re viewing on a monitor, listening to the content, browsing on a PDA, or printing the content.

How CSS works

CSS is a new smarter way to apply style properties to HTML elements.

You can set all kinds of style properties, like border, font, background, spacing etc.
(We’ll go into these in detail later.)

There are 3 main ways CSS styles can be applied:

  1. Inline with HTML
  2. On-page style definitions
  3. Separate style sheets

1. CSS Inline with HTML (use with caution)

You can write CSS directly into an HTML tag.
In the example below, don’t worry about the specific styles for now.
(The <div> element is simply a box, as you’ll see in the introduction to HTML.)

Code

<div style="background-color:#ff3; border:1px solid black; color:red; font-size:150%; padding:1em;">I am a styled div!</div>

Looks like

I am a styled div!

This approach is very similar to the old-style inline HTML styling, and suffers from all the same problems.

It is only appropriate where the styling really is one-off.
If there’s a possibility that you’ll use the same styling elsewhere, you really should use one of the alternative methods below, because it will save time and effort if you have to change your styling later.

2. On-page CSS definitions

A better way to write CSS is to define your styles once in the document (preferably in the document <head> section).

Code

<head>
  <style type=”text/css”>
    div {
      background-color:#339;
      color:#fff;
      padding:15px;
      border-bottom:5px solid red;
      margin-bottom:15px;
    }
  </style>
</head>

<body>
  <div>
    I am affected by the definition above..
  </div>
  <div>
    So am I, but the styles are only defined once.
  </div>
</body>

Looks like

I am affected by the definition above..
So am I, but the styles are only defined once.

The benefit of this over the previous approach is that the style definitions are only written once.
In this case, they’d apply to any <div> elements on the page.

Use this method when you want to apply similar styles to multiple elements on a page, but not on any other pages.
To apply the same styles to things on multiple pages, you need to use method 3 below.

3. Separate style sheets

The ideal way to define styles for your HTML elements is to put the definitions in a separate stylesheet document.
Then, any page that includes the CSS file will inherit the same styles.

(Another benefit of this method is that it enables you to use different style sheets for different user agents – which we’ll address in a later article.)

HTML pages can include as many CSS files as you need, and the styles will be combined together (according to inheritance & cascading rules we’ll get onto later).

Code (2 different files):

my-styles.css

body {
  background-color:#ccf;
  letter-spacing:.1em;
}
p {
  font-style:italic;
  font-family:times,serif;
}

my-html.html

<head>
  <link href=”my-styles.css” media=”screen” rel=”stylesheet” type=”text/css” />
</head>

<body>
  <p>Here is some content in a paragraph.</p>
  <p>Here is another paragraph.</p>
</body>

How it looks

Here is some content in a paragraph.

Here is another paragraph.

Note that, again, the styles I defined once have been applied to more than one qualifying element.
The difference between this method and the one above is that, because I’ve defined the styles in a separate stylesheet, all I need to do to apply those styles to another HTML page is include the same stylesheet reference.

Advantages of separate stylesheets

There are lots of advantages of working this way, including:

  1. Reduced filesize – each CSS definition is written only once
  2. Reduced bandwidth – web browsers will remember (cache) the contents of CSS file, so don’t need to download the file again with each new page that uses it
  3. Easier updating – you only have to change styles in one place for them to change site-wide
  4. Separates the work of styling and creating content – you can create all your HTML pages first, applying sensible semantic markup, class names and IDs, and then do all your design work later on your style sheets.

How CSS styles apply to HTML elements

There are a few basic rules that govern which (separately-defined) styles apply to what elements.
Fortunately, these are relatively simple and logical, once explained.
I’ll go through them one at a time.

1. Applying to HTML elements themselves

In CSS, if you want some styles to apply to HTML elements of a certain type, you write the HTML element type, followed by style definitions all contained between curly braces and separated with semicolons.

p {
  font-weight:bold;
  line-height:1.3em;
}

<p>The styles above will apply to me because I am a paragraph.</p>
<div>But they won’t apply to me.</div>

The code above will apply bold text and slightly increased line-height to the contents of any element of type <p> (i.e. paragraphs).

2. Applying to elements with class names

You can give any HTML element one or more class names.
In CSS, these are defined with a preceding period (full-stop).

Styles derived from classnames (normally) override any of the same styles defined for the HTML element type (more on this later).

<style type=”text/css”>
  .custom {
    color:red;
  }
</style>

<p class="custom">Applies to me.</p>
<p>But does not apply to me.</p>

This is extremely useful, because you can define style characteristics under a single class, and then apply those characteristics to multiple elements by giving them that class (even if they’re different types of elements).

3. Elements can have multiple classes

HTML elements can have more than one class.
Class names must be separated in the class property with spaces.

<style type=”text/css”>
  .makered {
    color:red;
  }
  .yellowbg {
    background-color:#ff0;
  }
</style>

<p class="makered yellowbg">Both styles will apply to me.</p>

4. Applying styles by id property

HTML elements can have id properties as well as class names.

While there can be multiple elements that share any class name, there should only be one element with a particular id property.
This isn’t important in CSS, but it is important in DHTML, so good practice to follow.

Styles are associated with particular ids in CSS by prefixing the name with a hash/pound sign (#).

Another thing to remember is that properties inherited from an id will overwrite properties an element gets from its class (or from its HTML element type).

<style type=”text/css”>
  #banner {
    color:green;
  }
  .special {
    color:red;
    background-color:#ff9;
  }
  div {
    color:blue;
    font-weight:bold;
  }
</style>

<div id="banner" class="special">
  This text would come out green, because the ID trumps the class and the element type.
</div>

Note that, in the example above, the font-weight:bold; and background-color:#ff9; styles still apply to the text, because it’s only the color: property that is overwritten by the superior style definition.

5. CSS styles apply to elements within elements, unless overwritten

Taking the above example…

<style type=”text/css”>
  div {
    color:green;
  }
  .special {
    color:red;
    background-color:#ff9;
  }
  #banner {
    text-decoration:underline;
    font-weight:bold;
    color:blue;
  }
</style>

<div>

  This text is only inside the div…

  <p class="special">

    This text is inside the div and inside the paragraph…

    <span id="banner">
      This text is inside the div, paragraph with classname and span with id.
    </span>
  </p>
</div>

The first bit of text gets its green colour because it’s inside the div.

The second bit of text becomes red because it’s inside something with class="special", which overrides the previous color property.
It also gets the additional background-color.

The third bit of text is inside all three elements, but the properties it gets from its id overrule any other conflicting style properties it gets from the other elements.
Note that it has also inherited the background-color from the special paragraph, because the id’s styles don’t specify a background.

About the author

Ben Hunt

Ben is the creator of Web Design From Scratch. He started writing articles about web design to kill time on a long train commute, and is now one of the most influential figures on the subject of effective web design. He has written three books and spoken at multiple conferences internationally.

aishwarya - 4 years ago

Thank you !

Toro - 3 years ago

Very nicely explained and I’m hopefully able now to create a better stylesheet – understanding the difference ID and class.
Thank you!

Nature Ali - a couple of years ago

THANK YOU! I have been scratching my head over how to redesign my site to make it easier to make universal changes.
Your explanation (though I have much to learn) makes me feel as though CSS is the best thing since sliced bread. Too many of my former colleagues tried to get me on server side coding but I want my work to be completely controlled and workable offline. Again just this brief intro to CSS gives me the courage to learn something new and recode all my content.

Ava Smith - a couple of years ago

Very straightforward, very easy to understand. Thanks so much. Clears up a great deal.

Stephen Foster - last year

Thanks

I am just starting to use HTML5 and wanted to get a grip on CSS before I started, this has been very useful, something to refer to later.

regards

Stephen

jo - last year

very helpful and easy to understad thank you

Comments are closed