Dhtml

Defining Styles

Shortcuts

Overview
Part 1
Part 2
Part 3

Overview

As an introduction to DHTML, this tutorial will teach you how to define cascading style sheets for your web pages. These can be used to create set formatting styles for almost any element on your page.

Part 1

Styles sheets are represented as groups of classes, each with a number of rules for that class. A class may be a particular HTML tag, a developer-defined class, the ID of an individual element, or any combination of these. The rules within these classes assign a value to a particular property that is associated with that class. The examples below show some examples of classes with rules (the "/* */" syntax represents a comment, which you may use in your style sheets).

H1 {
   /* H1 tag class */
   font-family: "Arial";
   color: blue;
   text-align: center;
}

.MyHeader {
   /* A class defined by the class="MyHeader" parameter */
   font-size: 12pt;
   font-weight: bold;
   margin: 2em;
}

#PicOfMe {
   /* An element uniquely identified by the id="PicOfMe" parameter */
   width: 320px;
   height: 200px;
   border: 0;
}

The HTML code sample below shows how the above style classes would be used.

<H1>Some blue, centred, Arial text</H1>

<H1 class="MyHeader">Some blue, centred, Arial, 12pt, 
bold text with 2em margins</H1>

<IMG id="PicOfMe" src="pics/me.jpg">

Notice that the formatting of the "MyHead" tag also uses the styles of the H1 tag. This is an essential property of CSS. An element will be formatted using the styles of all of its ancestors. Also, a style may be overriden by a new definition. The most recent definition is the one that is used. This occurs when multiple style sheets are used for the one page, as is shown in the next section.

As mentioned before, class definitions may be combined to specify a more definite class. The example below shows how these combinations are implemented.

/* style sheet */

P.Highlighted {
   /* "Highlighted" class in a P tag */
   background: yellow;
}

P A {
   /* A tag in a P tag */
   font-weight: bold;
}

.Pictures#Pic1 {
   /* "Pic1" id in the "Pictures" class */
   width: 100%;
}

/* HTML code */

<P>
Normal paragraph text.
</P>

<P class="Highlighted">
Paragraph text with a yellow background.
</P>

<P>
Normal text. <A href="somewhere.html">Bold link</A>.
</P>

<!-- 100% width   -->
<IMG class="Pictures" id="Pic1" src="pics/pic1.jpg">

<!-- normal width -->
<IMG class="Pictures" src="pics/pic2.jpg">

Part 2

There are three different ways to define styles -- in an external file, in a "style" tag in the HTML header, or as an inline parameter of a particular tag you wish to apply the style to.

By defining styles in an external file, you may use the same styles in many different pages. To define an external style sheet file, simply create all of your style definitions in a separate text file with any name you want. Let's say you called it "mystyles.css". To import the style definitions from this file, use the following tag in the header of your HTML code.

<LINK href="mystyles.css" rel="stylesheet" type="text/css">

If you only want certain style definitions to apply to one page, you may use a style tag. To define styles this way, include the following tag with your own content in your HTML source.

<STYLE type="text/css">
<!-- comment out the styles for older browsers

H1 {
   font-weight: bold;
}

A:link {
   color: blue;
}

A:visited {
   color: magenta;
}

A:active {
   color: red;
}

// -->
</STYLE>

There may be some instances where you want to define a set of styles for a particular element. This is useful when defining layers (see Intermediate Tutorial 1). To do this, you include a parameter in the opening tag. The example below demonstrates this.

<P style="font-family: 'Courier New'; font-size: 10pt; color: gray;">
A bunch of dull gray Courier New text.
</P>

Part 3

Take the time to use each of the methods mentioned in this tutorial to become familiar with CSS. You should also use the CSS Alphabetical Reference to explore more style rules that you can apply and use to make creative web pages.

Go back
Next Tutorial