Introduction to Styles and Style Sheets
This lab session will guide you through examples of how styles and
Cascading Style Sheets (CSS) may be used in your Web pages to simplify
maintenance of your pages / site.
Note that this document was written using Dreamweaver MX, however
the video presentations use Dreamweaver CS3. The programs are mostly
the same however some of the menu options have moved.
Introduction to Styles
To begin with download and examine the two sample documents.
So what is the difference between the two documents?
The contents of both documents are pretty much identical. However there
are significant differences in the way that the documents are organised
internally.
Before proceeding to the next section, look at the documents again but
this time view the source HTML they are based on.
The Bad Example
The bad example has been created in Front Page and is fairly typical of
how many Web pages are created. (This is not a forum for Front Page
bashing, but unfortunately it's an easy target!)
Save a copy of the bad example to your H drive and edit in
Dreamweaver.
Go through the document and change the headings from Times New
Roman to another font of your choice.
What you will probably do is highlight the section of text.
Select a different font...
Then view the result...
You will then repeat this for every occurrence of the section headings.
The Good Example
Ok, now load the good example in to Dreamweaver and see how the use
of styles makes life so much simpler.
Don't do any editing of the document yet.
Notice the properties for the text at the bottom of the window and click
on the drop down box labelled as "Style":
In this version of the document we have defined five styles that are used
throughout the document.
Main Heading
Section Level1
BodyText
BodyHighlight
and
ExampleSections
Notice at the bottom of the list is an option "manage styles...", click on
this and the following screen will appear.
This screen allows you to edit the appearance of all of the styles defined
within the document.
Click on .MainHeading and then Edit.
The following screen allows you to edit various aspects of how that style
looks.
Try changing the font and size then press OK. What happens to your
document?
The Internal Style Sheet
If you view the HTML for your page you will see the following section of
HTML called the Style Sheet:
<style type="text/css">
<!-.MainHeading {
font-family: "Times New Roman", Times, serif;
font-size: 24pt;
}
.SectionLevel1 {
font-family: "Times New Roman", Times, serif;
font-size: 18pt;
font-weight: bold;
}
.BodyHighlight {
font-family: "Times New Roman", Times, serif;
font-size: 18pt;
color: #CC0000;
}
.BodyText {
font-family: "Times New Roman", Times, serif;
font-size: 14pt;
line-height: 30pt;
}
.ExampleSections {
font-family: "Times New Roman", Times, serif;
font-size: 14pt;
font-style: italic;
}
-->
</style>
This style sheet defines the five styles that we are using within the
document.
So the code defines a style Class called .MainHeading.
.MainHeading {
font-family: "Times New Roman", Times, serif;
font-size: 24pt;
}
A style is defined once in the style sheet, then, when we want to use it we
use the following code.
<span class="MainHeading">Quick Guide to Report Writing</span>
This says that for the section of text "How Reports are Read" apply the
style class "MainHeading".
Any change to the style class definition is automatically passed on to all
instances of the style class in the document.
The problem with the bad example is that there is no central class
defining the style.
The code in the bad example for the heading looks like this...
<font size="6"><b>Quick Guide to Report Writing</b></font>
This example uses the font tag to format the text there is no central
definition of style.
The font tag is being depreciated - which is another way of saying it is
being made redundant.
As you will appreciate the ability to centralise the definitions for your
styles makes modifying your document much simpler.
Creating Your Own Styles
To create your own styles in Dreamweaver, click again on the drop down
style selector at the bottom of the screen...
And again select "Manage Styles..."
But this time press New to get the following screen.
In the Name box you type the name you want to give to the new style, in
this case we shall call it FootNote.
Where it says "Define in:" make sure "This document only" is selected.
(We shall come back to this in a bit!)
You will then be able to define the style..
In this case set font to Times New Roman, size to 9 points and colour to
blue.
Press Ok and done to return to the document.
To apply the style, highlight some text (try the text at the bottom of the
document)
Then select the style from the style combo box.
External Style Sheets
Before we get into any major discussion of using an external CSS lets do
a little exercise.
Create a new XHTML document containing the following text...
Cascading Style Sheets
Cascading Style Sheets are a very useful tool in controlling the
appearance and layout of your HTML documents.
Make the heading H1 and leave the rest as it is.
Switch to Code view for the document and you should see something like
this...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-88591" />
</head>
<body>
<h1>Cascading Style Sheets</h1>
<p>Cascading Style Sheets are a very useful tool in controlling the
appearance and layout of your HTML documents. </p>
</body>
</html>
Now add the following line of HTML into the <head> section of the
document.
<link rel="stylesheet" type="text/css"
href="http://www.cse.dmu.ac.uk/~mjdean/matthew.css">
The HTML code should read as follows.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-88591" />
<link rel="stylesheet" type="text/css"
href="http://www.cse.dmu.ac.uk/~mjdean/matthew.css">
</head>
<body>
<h1>Cascading Style Sheets</h1>
<p>Cascading Style Sheets are a very useful tool in controlling the
appearance and layout of your HTML documents. </p>
</body>
</html>
Save the document and open it in the browser, what happens?
What should happen is that the new page should acquire the look and feel
of "Matthew's Web Site" without you having to do any formatting!
How has this happened?
The line of HTML...
<link rel="stylesheet" type="text/css"
href="http://www.cse.dmu.ac.uk/~mjdean/matthew.css">
Has told the page to use the external style sheet matthew.css which is the
name of the style sheet I use for my Web site.
Contained within matthew.css are definitions of how I want my pages to
look.
The big advantage of this is that I can make a single change to the style
sheet and that single change is passed to all linked pages.
Creating your own External Style Sheet
The next time you create a new style within your document via the style
combo..
and you see the following screen.
Rather than creating the style in "This document only" type in the name
of a style sheet file.
This will create a new file called yourCSSname.css, where yourCSSname
is whatever you wish to call your external style sheet. (In my case it is
matthew.css)
It is common to have a single site wide style sheet file for your site, so
you only do this once (although there are good reasons to use multiple
external style sheets!)
If you already have an external style sheet defined then it is just a matter
of pointing to its location.
To start with open an existing document in Dreamweaver from within
your own Web space.
With that document open select TEXT from the main menu - CSS
STYLES and MANAGE STYLES .
Click attach on the next screen to navigate to your external style sheet.
Assuming the style sheet exists and is set up correctly the formatting and
styles within the style sheet will be automatically applied to your
document.