Computer Tutoring Logo
Est. 2002
Menu Button

CSS changing background colour - Dreamweaver Tutorial part 6


How to change the background colour & font using Dreamweaver

You may have a page but to be honest it doesn't look great. What we'll do is use the style sheet to change the background color and the style of the font. If you want to follow along then download the exercise files. You'll then need to set up Dreamweaver to administrate the web site. See creating a website from scratch. Or you could just watch and get the general idea.

Click on the Code button just look and appreciate the HTML code.

Switch back to the Design view.

Click on Body in the quick tag selector bottom right switch back to code view and note that that everything between the body tag will be affected.

Switch back to Design view by clicking on the Design button at the top, and ensure that the body is selected in the quick tag selector.

In the CSS Designer panel on the right click on the plus + to the left of Selectors.
(Note that body appears in the selectors box).

Drag the body selector to the top of the selector list.

Ensuring the body tag is still selected in the properties windows then click on the T button in the properties section.

Click in font-family then click on manage fonts from the menu that appears.

Click Custom Font Stacks at the top.

Click on Verdana from the available font list on the right, then click on the double arrow to add it to your Chosen fonts.

Add Arial as the substitue font.

Click on Done

Click to the right of font-family and choose verdana and note that the font of the page changes.

Select #main_wrapper in the Selector list.

In the properties section find background-color. Click on the colour swatch to the right, then drag to the top left corner to ensure that you have white selected.

Press Enter and note the background colour of #main_wrapper changing.

Click File- Save All.

Then File - Preview In browser - Google Chrome.
(choose another browser if you desire).

 

The exercise files you need for this can be found here unzip them to a convenient location.