The basic principle behind CSS is to enable a few basic styles to be applied to a webpage or website, so that, not every individual piece of text etc needs the font and style to be specifically coded. CSS is for much more than fonts etc but that’s our focus just here.

CSS can either be contained in a separate page (usually called style.css or similar) where every page is referenced to that page,

 

or inline styles are created on the page itself.

 

This would be an example of an inline stylesheet

body,td,th {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #333333;
}
a {
 font-size: 11px;
 color: #333333;
}
a:link {
 text-decoration: none;
 color: #123682;
}
a:visited {
 text-decoration: none;
 color: #123682;
}
a:hover {
 text-decoration: none;
 color: #666666;
}
a:active {
 text-decoration: none;
}
body {
 background-color: #123682;
}

 

Initially, this is generated automatically by Dreamweaver when you create a brand new page.

In the properties panel, you can click “page properties” and it will automatically create the inline styles for that page. If you are working on a new page from a template, the styles set in the template will automatically be applied to your new page.

Then, when you decide to use a different font colour or size etc, it automatically creates it as a new style. So when changing the formatting of a piece of text, it’s worth checking if you already have a style set for it.

 

WHAT CAN GO WRONG?

Firstly it’s wise to only use fonts that are already in the list in Dreamweaver by default. If you use an obscure font, it is likely that people viewing your website will not have that font installed on their pc and then won’t be able to view that font on your site correctly (normally it will default to Times New Roman).

Secondly, there can be a problem where a style is created in a template and it is given the same name (eg Style18) as a style that has been created on a page that is based on that template. If the style has been created in the template but is not used by it, you can go back to code view, look at the styles near the top of the page and delete it.