Using CSS

Styling HTML Tags

Choose Method: Show Dreamweaver Instructions | Show Code

There are several different flavours of style sheets. The simplest type of style is to modify an existing HTML tag. Using the template that you worked on in the template page and these images, we will make a replica of this page. Save the images into your images folder before beginning.

Define the <P> tag

First you need to have some paragraph text inside your HTML file - i.e. text which is surrounded by <p> and </p> tags - because it is the 'p' which tells the CSS styles to affect how the paragraph text is displayed.

To create paragraph text in Dreamweaver, type in some text, highlight it and in the 'Format' drop down menu in the properties window select 'Paragraph'.
format settings

Simply insert some text into the <body> of the HTML document and wrap in <P> and </p> tags.

<body>
<p>I’m tired of appliances breaking in my house; <br />
the shower, the dryer, the car, the hoover, the curtain rail and the mouse.</p>
</body>

  • Click on 'Window > CSS Styles' to open the CSS window.
    window style sheet
  • Click the 'New Style Sheet' icon - the button at the bottom with the +.
    create new style sheet
  • Click 'Redefine HTML tag''. In the 'Tag' dropdown menu select 'p'. We are going to define a style for 'paragraph'.
    redefine p tag
  • Make sure that 'New Style Sheet File is selected'. Browse to your local folder and in the filename box type in 'my_style'. The style sheet file is saved as a .CSS file. Click 'Save'.
    save style sheet
  • The next window allows you to change the font attributes for 'paragraph'.
    settings for p
  • Use these paragraph settings. This specifies the font, the size and the line spacing:
    • font family: Verdana, Arial, Helvetica, sans-serif
    • font size: 80%
    • line height: 150%

The CSS1 paragraph style should look like this:

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:80%;
line-height:150%;
color: #666666;
}

The CSS2 paragraph style should look like this. You can see how 4 lines of CSS1 code have been condensed into 2 lines of CSS2 code. The 80% and 150% refers to the font-size and line-height of the CSS1 code shown above.

p {
font: 80%/150% Verdana, Arial, Helvetica, sans-serif;
color: #666666;
}

Define the <BODY> Tag

Many web designers choose to define default font and background colour settings for the page. As the styles sheets are 'cascading', styles defined for the <BODY> tag are inherited by the elements inside the body. So, defining the font to be Verdana in the body style, also sets paragraph text, header text and list text to be Verdana, by default. However, be careful when sizing fonts with % because they accumulate... try the code below in addition to the paragraph font above.

  • Click the 'New Style Sheet' icon - the button at the bottom with the +.
    create new style sheet
  • Click 'Redefine HTML tag''. In the 'Tag' dropdown menu select 'body'. We are going to define a style for 'body'.
    select body tag options
  • Select the Type panel in the CSS window and set the settings below. This specifies the font, the size, the line spacing and the colour of the default text fo the entire document:
    1. font family: Trebuchet, Verdana, sans-serif;
    2. font size: 80%
    3. line height: 150%
    4. font color: #333333
  • Select the Background panel in the CSS window and set the settings below. This specifies the background colour for the page.
    1. background: #D6D6CD
  • Select the Box panel in the CSS window and set the settings below. This specifies that there is no margin (no gap around the page) so the <body> takes up the entire space of the page. We use ems rather than pixels because it is better to use a relative method of sizing (an em is the size of the font you are using) than an absolute method (a pixel is a fixed size, and cannot be resized without changing the monitor resolution)
    1. all margins : 0em

The CSS1 code for the body style looks like this:

body {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 80%;
color: #333333;
background: #D6D6CD;
margin-left: 0em;
margin-right: 0em;
margin-top: 0em;
margin-bottom: 0em;
}

The CSS2 code for the body style looks like this. Notice that the margin specification takes up one line, rather than 4.

body {
font: 80% "Trebuchet MS", Verdana, sans-serif;
color: #333333;
background: #D6D6CD;
margin: 0em;
}

If you now check your page, you should see that your paragraph text is even smaller than before. This is because it is now 80% of 80%, or 64%. Removing the 80% from the paragraph style will return it to normal size, because it will inherit the body 80% size only.

Defining Other HTMLTags

All tags are defined in the same way. If using Dreamweaver if is worthwhile spending some time selecting the different options in the CSS window and studying the results.

If using HTML & CSS code, it might be useful to read through the CSS and HTML specifications published by the W3C.