Even More Dreamweaver
Computing Resources >> Tutorials >> Web Development >> Even More Dreamweaver 

Evaluate this tutorial


Using Cascading Style Sheets (CSS)

Creating CSS file

CSS allows you to apply consistent fonts, size attributes, colors or other style elements to your document.

Open your page and click on Window > CSS styles; the following window will open:

Click the New Style icon in the lower right of the dialog box and select “Make Custom Style” and “(New Style Sheet File)” in the window that opens up. Name the style. Click OK and Save the .css file.

You will see a Style Definition window will open. This window allows you to select the required font, font size, color etc in the dialog window to define the content of your web page; click OK.

So far, you have defined the content attributes of your web page. If you want to define the hyperlinks on your page, click on “New Style” icon again on the new style window and choose “”Use CSS Selector”; you will see the different selector choices and your css file name appear as the default.

Choose “a:link” to define the hyperlink in your css file, “a:hover” to define the mouse over effect, and so on.

Attaching CSS file

To apply the .css file that you just defined, go to Text > CSS Styles > Attach Style Sheet. Then, highlight the text that you want the CSS file to define, go to Text > CSS Styles, click your .css file name. You can find that all the content and the hyperlinks are changed to what your .css file defined.

To preview in a browser, just press F12 on PC keyboard.

next section >

Watch the video

choose format/speed
dial-up | broadband
dial-up | broadband
dial-up | broadband

Tutorial Transcript

© 2003 Nadalia Yuehong Liu| iSchool | UT Austin | webmaster