Using CSS

Class Styles

Define Class Attributes

A custom class is a style of style which can be 'reused'.

  • Calss styles can be used if you just want to apply a certain font size or colour etc to a small amount of text - ie you can't or don't want to style a HTML tag.
  • You can also use classes to create styles that can be used more than once on a page. So it is different to the 'id' attribute and style which can only be used once on each page.
  • Another use for class styles, is to differentiate between pages, according to the class they have.

Exercise - create a Simple custom class style

Choose Method: Show Dreamweaver Instructions | Show Code

  • In Dreamweaver, click on 'Window > CSS Styles' to open the CSS window.
  • Click the 'New Style Sheet' icon
  • Click 'Make Custom Style (Class)' and in the Name drop down menu, type in the name of your custom class - example captiontext.
  • Style the class style according to your preferences. I have used
    • font family: Verdana
    • font size: 80%
    • text transform: uppercase
    • color: #990000
  • To apply the style, highlight the text on the HTML page you want to apply the style to.
  • In the properties window is a Style menu. Select 'captiontext' from the options to apply it to your text.
  • The style should now be visible on your text

The CSS code looks like this. Notice how the class style has a dot in front of it. This is to differentiate it from tag style which have no dot, and 'id' styles which have a hash symbol (#) in front.

CSS1

.captiontext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
text-transform: uppercase;
color: #990000;
}

CSS2

.captiontext {
font: 80% Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #990000;
}

The HTML code looks like this. Notice that the <p> tag has the class attribute inside the opening tag.

<body>
<p class="captiontext">Caption text here</p>
</body>