CSS Introduction

Cascading Style Sheets, or CSS, is the language used to define the visual appearance of web pages. Although, in Dreamweaver, we work with a visual, nearly WYSIWYG, interface, behind the scenes CSS rules are being created for us. Whilst you don't need to understand CSS to use Dreamweaver, if you want to be the best web designer you can be, you will need to have some understanding of how CSS works behind the scenes.

What Does It Mean?

First, what does CSS mean? The style sheet part is just any page, or part of a page, that contains rules that define how various things should look. This might include, for example, what colour, size and font style the text on a page should be displayed in. These rules may be defined in the same page as the text (called an internal style sheet) or in a completely separate page (called an external style sheet). Alternatively, the styles may be applied directly to the individual elements in the page (called inline styles).

Finally, what does the cascading part of the name mean? This simply refers to the fact that, as described above, rules can be defined in different places. The combination of all the different rules are merged to arrive at a final set of style rules to be used when displaying the elements in a page.

Thus, you could have some HTML defining the basic structure and content of a page but, by applying different style sheet rules, you could make it look completely different. The W3 Schools web site has an excellent example of this here.

A Simple Example

Rules are defined by specifying a number of properties and their values. With the exception of inline style definitions, they also have a selector which determines what elements the rule should be applied to.

Consider the heading above. Notice that this appears different to the same heading on the previous page. In fact, this text is still declared as being a level 3 heading, and, if you were to look at the code for that heading you would see the following:

<h3>A Simple Example</h3>

So, why does it look different? If you look at the source for this page, in the <head> element, there is a style rule with the following definition:

<style type="text/css">
h3 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
}
</style>

This specifies that any h3 element should be displayed using the Georgia font in italic. The h3 part of the rule statement is the selector, which specifies what kind of element the rule should apply to. This is a tag selector, because it applies to a specific HMTL tag. The properties that the rule defines are enclosed in curly brackets (usually called braces) and consist of a set of attribute/value pairs, with the name of the attribute, a colon, the value of the attribute, and then a semicolon. Notice also that the whole rule is enclosed with <style> tags. More than one style rule can be included in a style tag, here we keep things simple.

Types of Style Rule

There are other kinds of selector for style rules. A tag selector, as shown above, only applies to a specific tag, but affects every appearance of that tag. In this case, the selector of the rule is simply the name of the HMTL tag that the rule to which the rule should be applied.

It is also possible to define a class selector, which applies the rule to any element that has a matching class. In that case, the selector of the rule begins with a dot, as the following example shows:

.code {
    font-family:"Courier New", Courier, monospace;
    font-weight: bold;
}

This rule would apply to any element with the value "code" for the attribute class. For example, the code snippet below shows a paragraph element with the required attribute.

<p class="code">This paragraph would be displayed using the Courier New font in bold. All text in the element is affected.</p>

There can be as many elements in a page as you need that have the required class atribute.

It is also possible to define a rule with id selector which applies the rule to the specific element with a matching id attribute. In this case the rule selector begins with a hash symbol, as shown here:

#header {
    background: #CFC;
    padding: 0 10px 0 20px;
}

In this case the rule specifies a background colour and padding which will be applied to the single element in the page with the matching id, for example:

<div id="header">This would have the specified formatting.</div>

Remember that a div element is just a way of dividing a page into different regions.

The difference between a class rule and an id rule is that there can be many elements in a page with a matching class, but there should only be one element in a page with a given id.

The final type of selector to mention is the psuedo-class selector. These can only be applied in a small number of cases, as there are only a few specific psuedo-classes defined. Consider the following rule:

a:hover {
    color: #C00;
    font-weight: bold;
}

This rule would apply to anchor elements (links) when the mouse is hovering over them. In this example, hover is a psuedo-class of the a element.

These different kind of selector can be combined in a variety of ways to create quite complicated application contexts. Consider the following rule:

#footer p.info {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: bold;
    color: #F00;
}

This will be only applied to the contents of any paragraph tag with the class info appearing within the element with the id footer. You can see the result of applying this rule to this paragraph and to the paragraph in the footer!

Location of Style Rules

As already mentioned, styles can be defined in a number of different places.

They can be included in the head of a page, in which case the style rules will only apply to the given page. This kind of style sheet is called an internal style sheet. Alternatively, if you want the same style definitions to be shared by many pages, you should define them in a separate file and load that file into each page with a link declaration in the page head, as shown here:

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

This would load the file given in the href attribute and make all the style rules it contained available for use in the page.

We will return to consider style rules in more detail later.

Next, combining styles with divs... Next

References