CSS AND STYLESHEETS
Cascading Style Sheets
In computing, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a
document written in a markup language. Its most common application is to style web pages written in
HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.
The CSS speciﬁcations are maintained by the World Wide Web Consortium (W3C). In order to maintain
standards compliance, it is recommended that CSS code be validated before release.
W3C Tutorials on CSS
Problems with HTML/WYSIWYG
HTML is a structured markup language. There are certain rules on how HTML must be written if it is to conform to W3C
standards for the World Wide Web. Following these rules means that web sites are accessible on all types and makes of
computer, to able-bodied and disabled people, and also on wireless devices like mobile phones and PDAs, with their limited
bandwidths and screen sizes.
Unfortunately most HTML documents on the web are not valid according to W3C standards. According to one study only
about 1 out of 141 is valid. (More info at Wikipedia: “HTML editor” article”)
People who use text editors can generally ﬁx such HTML problems immediately, once they become aware of them. People ﬁnd it
frustrating when such errors come from WYSIWYG editors.
However a web page was created or edited, WYSIWYG or by hand, in order to be successful among the greatest possible
number of readers and viewers, as well as to maintain the 'worldwide' value of the Web itself it can be argued that, ﬁrst and
foremost, it should consist of valid markup and code. Some would argue that it should not be delivered by a designer to his or
her customer, and not be considered ready for the World Wide Web, until its HTML and CSS syntax has been successfully
validated using either the free W3C validator services (W3C HTML Validator and W3C CSS Validator) or some other
Others would argue that publishing useful information, as soon as possible, should be ﬁrst and foremost.
Whatever software tools are used to design, create and maintain web pages, there is little doubt that the quality of the
underlying HTML is dependent on the skill of the person who works on the page. Some knowledge of HTML, CSS and other
scripting languages as well as a familiarity with the current W3C recommendations in these areas will help any designer produce
better web pages, with a WYSIWYG HTML editor and without.
Conﬁning all style formatting to CSS has
The newer W3C guidelines emphasize the separation of content (HTML) from style (CSS). This has the beneﬁt of
delivering the style information once for a whole site, not repeated in each page, let alone in each HTML element.
WYSIWYG editor designers have been struggling ever since with how best to present these concepts to their users
without confusing them by exposing the underlying reality.
Modern WYSIWYG editors like Dreamweaver all succeed in this to some extent, but many would say that none of them
yet succeed totally.
Using Dreamweaver to add
an external CSS stylesheet
to control body attributes
First, make a directory called “Class10” or
“Class4” (depending on which Wired class
you attend) on your desktop or in your
Wired directory. Inside this folder make a
folder called “docs” and one called
Open Dreamweaver, and create a new
HTML page that says “Stylesheet Demo”.
Save this page as index.html in the Class 4 or 10
folder your just made.
Now we are going to add an external stylesheet to
control body attributes. Open your palette for
CSS: Window>CSS Styles.
Add a CSS rule
Click the plus sign in
the lower part of the
CSS window to add a
First, let’s redeﬁne the body tag. We want to deﬁne this in
an external stylesheet, thus the radio button “New Style
Sheet File” is highlighted.
Make sure you are
redeﬁning the body tag
in a “New Style Sheet
You will be immediately prompted to save your stylesheet.
Save in the “docs” folder in your root, or “Class10” directory.
All stylesheets must
end with the extension
adds this automatically.
Try to name your
you’ll remember. Put it
in the docs folder.
Now choose the following body attributes.
Save and preview in browser. You will be
prompted to save the stylesheet also.
Now let’s edit the tag. In the CSS window double click the
“font-family” attribute. Change to a 12 point bold Courier
with no case change. Click “Apply” to see updates.
Take a look at your stylesheet. The new body styles
are noted below. You can edit directly in this page
to create style shifts in your “index.html” doc.
font-family: "Courier New", Courier, monospace;
font-size: 12px; Changing the 12px to a
text-transform: none; 16px and saving would
result in a font shift in
your linked HTML
page. Try it!
Close all Dreamweaver docs and open a new HTML
doc. Type “Class 10 page 1” in the body AND title.
Save in your “docs” directory as “pageone.html”.
Now close that document. Add a new HTML doc.
Type “Class 10 page 2” in the body AND title. Save
in your “docs” directory as “pagetwo.html”.
Reopen your “index.html” doc. We are going to
add links to “pageone.html” and “pagetwo.html.”
For now, just type the text as shown on the page.
Select the text for the “Link to page one.”Using the Properties
palette, click the blue folder to browse. Choose
“pageone.html” in the docs folder as a relative link.
Click blue folder to
browse for your ﬁle.
Save “index.html” and preview, testing the new link.
Add a second link to the text for “Link to page two.”
Repeat the steps shown previously.
<p><a href="docs/pagetwo.html">Link to page two</a> </p>
Note that link is relative to the HTML
This path tells the brower to look in a
directory called “docs” for a ﬁle named
Now let’s add a new style to the external stylesheet
to redeﬁne our anchor tag.
Click the plus sign in
the CSS palette to add
a new rule for the
anchor, or <a> tag.
Choose the following attributes.
Click apply to see shifts immediately.
of the anchor
the default link
you see on so
many web pages.
Save and preview in browser. You may need to click the
“Refresh” button to see the new style changes. Note
that “pageone.html” does not have the new styles
because the stylesheet is not linked yet.
To link the external stylesheet, open ﬁle “pageone.html.”
Click the chain link icon in the CSS palette, browse for
Save and preview in brower. Repeat process to link
external stylesheet to ﬁle “pagetwo.html.”
Note the HTML syntax to link an external stylesheet
appears in the <HEAD> tag. See also that
Dreamweaver adds its own meta-tag that you can
delete if you wish.
<meta http-equiv="Content-Type" content="text/html;
<title>Class 10 page two </title>
<link href="class10styles.css" rel="stylesheet" type="text/css" />
If time remains, add links on “pageone.html”
and “pagetwo.html” back to “index.html.”
Consider adding a table to the page and
redeﬁning the <TABLE> or <TD> tag with a