Thomas Wallace

When it comes to creating and applying styles to elements in an HTML document, there are three different ways to approach the issue. In this module, we will look at these three approaches and discuss their appropriate use.

Redefining HTML Tags (Type Selectors)

By default web browsers have default style rules the render for each HTML tag. For example a <p> tag (paragraph) typically is styled with a top margin of around 15 pixels. While this may work for you in some instances, there will be times where you’ll need something different. In order to change this, you can use Dreamweaver to create a rule in your style sheet that will tell all instances of a given tag a new set of styles to be applied when the browser renders the page.

Usage: The ability to redefine an HTML tag is a powerful tool to use when styling your pages but you should be careful about when you use it. I recommend redefining a tags default property for such things a setting a global font or resetting a page or tags margin and padding settings.

A CSS rule that redefines an HTML tag will look like this in your style sheet.

body {
property: value;
}

ID Selectors

IDs are style rules that are geared toward styling a specific element on a page. IDs are assigned to tags, like so:

<header id="branding">Content</header>

or to take an example from the code blocks we created

<div id="container">Content Goes Here....</div>

IDs cannot start with a number and you cannot apply multiple ids to one tag. Also, each id can only appear once in a document although can appear multiple times across an entire site and multiple different ids can appear on the same page. A good rule of thumb is to only use ids with elements related to your global layout and elements that appear on every page.

A CSS rule for an id element will look like this in your style sheet

#cssidname {
property: value;
}

Class Selectors

Classes on the other hand can be used several times in the same document. Two classes can be assigned to the same tag but like ids cannot start with a number. You assign a class to a tag like so:

<header class="primary">Content</header>

and to assign two classes, like this:

<header class="primary home">Content</header>

A CSS rule for an class will look like this in your style sheet

.cssclassname {
property: name;
}

You can assign a tag a class and an id at the same time, like so:

<header class="primary" id="masthead">Content</header>

An example of where you might use a class could be to create a border around an image that floats to the right side of the page. You might have multiple images on the same page that you want to present in the same way and with classes you can create one rule and apply it to multiple items on a page.

Combining These Techniques

There will come a time in most any CSS based design project that you will want to target elements more specifically. Lets say you want to style all links <a> in a web site to look and behave the the same way, but you would like all links in a particular <div> to look differently.

Your CSS would like this:

a {
color: #FFFFFF;
font-size: 12px;
}

div#navigation a{
color: #CCCCCC;
font-size: 16px;
}

The first rule styles all links <a> in the document to be white and have a size of 12px.

The second rule is more specific. It styles all links <a> inside a <div> with an ID of Navigation <div id=”navigation> to be grey and have a size of 16px.

To explore some more advanced CSS properties with examples visit this page.