Dreamweaver MX Tutorial

Created and designed by Vivienne Trulock for ilikecake, 2005

Style Sheets

Style sheets are a way of ensuring that all the elements of a page - header, paragraph etc. - are the same from one page to the next. Style sheets can also be used to layout a page. 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.

Redefine the <P> HTML tag

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

Type

This specifies the font, the size and the line spacing:

font family: Verdana, Arial, Helvetica, sans-serif
font size: xx-small
line height: 150%

Block

This specifies how we want the text to layout - justified is the same as in word processing - the text is aligned both on the right and the left.

text align: justify

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

Define More HTML Tags

Use the following settings to define more HTML tags which occur in the site

<body> - main document body

Type

This specifies the font, the size, the line spacing and the colour of the text:

font family: Verdana, Arial, Helvetica, sans-serif
font size: xx-small
line height: 150%
font color: #333333

Background

This specifies the background colour, the background image, how the image should repeat and its horizontal and vertical position on the page. The image in this case is the footer at the bottom of the page.

background: #D6D6CD
background image: design_dream2_r3_c2.jpg
repeat: repeat-x
horiz position: center
vert position: bottom

Box

This specifies that there is no margin so the <body> takes up the entire space of the page.

margin all: 0px

<h1 > - level 1 header

Type

font family: Georgia, Times New Roman, Times, serif
font size: large
font color: #dddddd

<h2> - level 2 header

Type

font family: Georgia, "Times New Roman", Times, serif
font size: medium
font color: #555555

<h3> - level 3 header

Type

font family: Georgia, Times New Roman, Times, serif
font size: small
font weight: bold
font style: italic
font color: #333333

Block

letter spacing: 1px

<h4> - level 4 header

Type

font family: Verdana, Arial, Helvetica, sans-serif
font size: xx-small
font weight: bold
case: uppercase
font color: #333333

<li> - list item

Type

font family: Verdana, Arial, Helvetica, sans-serif
font size: xx-small
line height: 150%

Block

text align: justify

Define Class Attributes

You can also create a custom class. You do this if you just want to apply a certain font size or colour etc to a small amount of text.

Exercise - create a custom class stylesheet

Click on 'Window > CSS Styles' to open the CSS window, as above. Click the 'New Style Sheet' icon, as above. Click 'Make Custom Style (Class)'. In the Name drop down menu, type in the name of your custom class - example 'invisible'.

The invisible class attribute allows us to make content invisible by applying this class to a tag. In this case, it is applied to a skiplink which we want to only be 'visible' to blind users - it will be read out by screen readers but invisible in visual browsers.

Because we have already set up our style sheet name in a previous exercise, it comes up automatically selected. Click 'OK'. The next window allows you to change the font attributes for your tip, as in the previous exercise. To test the styles, type in some text, highlight it and click on the new styles 'invisible' in the CSS window. (Window > CSS)

.invisible - contains invisible text such as skip links

block

display: none

Create Text Rollovers

The last type of style sheet deals specifically with links and rollovers. This type of style allows you to create rollovers without making images.

Click on 'Window > CSS Styles' to open the CSS window, as above. Click the 'New Style Sheet' icon, as above. Click 'Use CSS Selector'.

In the Selector drop down menu, there are four different options.

a:active - when the browser is getting the linked page the link is active
a:hover - the rollover itself
a:link - the default link attributes
a:visited - the visited link attributes

link options

Select one option at a time and assign attributes to each of the link states. If you don't want an underlined link, just select the 'None' checkbox in the 'Decoration' options.
decoration none