Home » Resources » Dreamweaver CS4 Tutorial » CSS (Cascading Style Sheets)

Part 3.1: CSS (Cascading Style Sheets)

Dreamweaver CS4 uses a technology called Cascading Style Sheets, or CSS, to change the appearance of web pages – including changing fonts. Cascading Style Sheets are covered in our comprehensive Dreamweaver training course.

Most of the time, Dreamweaver will write all of the CSS (and HTML) code for you, so that you don’t need to get bogged down in programming. However its useful to understand what CSS is and what it does, just so you understand the concept.

Basically, CSS allows you to change the style of certain sections of text within your website quickly and easily without having to trawl through your whole site selecting areas of text and changing the font section by section.

For example – if every time we wanted the company name Silicon Beach Training to appear in our site in the Arial font, we could go through the site highlighting “Silicon Beach Training” everywhere it appeared and change the font to Arial. However – let’s say we then changed our minds and wanted the company name to appear in Times instead. We’d have to go through the whole site again and make all of the changes.

To make this easier – we can create a class and give it a name – say “sbt”. We can then apply that class to all of the instances of the company name Silicon Beach Training wherever it appears in the site. We can then associate any font we want to our “sbt” class, and the text linked to that class will all appear in that font.

In this way, the font instructions for all text in the “sbt” class are stored in one central place in the website – and that place is called the “style sheet”. Now, instead of changing the font manually every time, we can just update that class in the style sheet, and Dreamweaver will update (or cascade) the changes throughout the whole site.

This saves you a small amount of time when you’re editing one page, but imagine how much easier it makes things when you’ve got a site with hundreds of pages.

The steps in the next section illustrate how this works in practice.

Once you have mastered all these techniques you may want to attend our Advanced Dreamweaver training course.

Similar resources you may like

1. Creating Websites using Dreamweaver CS4
2. Working with Text in Dreamweaver CS4
3. How to change fonts in Dreamweaver
4. Changing the font size
5. Different Coloured Text

Tags

cascading style sheets, class, css, Dreamweaver, dreamweaver tutorial

Share This Resource

This entry was posted by Colin Welch on Monday, March 16th, 2009 at 10:43 am and is filed under Dreamweaver CS4 Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.