Dreamweaver tutorial: Understanding Style Sheets in Dreamweaver

What you’ll learn in this Dreamweaver Tutorial:

  • Inline style sheets
  • Internal vs. external style sheets

This tutorial provides you with a foundation for working with Adobe Dreamweaver style sheets. It is the fourth lesson in the Adobe Dreamweaver CS5 Digital Classroom book. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.

Adobe Dreamweaver Tutorial: Understanding Style Sheets in Dreamweaver

The term “Cascading” in Cascading Style Sheets alludes to the fact that styles can live in three different places, each of which has its strengths and weaknesses. You’ve actually been working with all three types of styles in the last exercise. The first line is being defined with an inline style, the second with an internal style sheet, and the third with an external style sheet.

Inline style sheets in Dreamweaver

An inline style is a set of CSS properties defined directly in an HTML tag using the style attribute. These are slightly less common because you can’t reuse them, which somewhat defeats the purpose of using style sheets in the first place.

1 Click three times rapidly to select the first paragraph.

2 Press the Split view button, and notice that your selected text is nested inside a paragraph or <p> element; however, the CSS style rules for color, font-family, and font-size are contained directly inside the opening paragraph tag. This is called an inline style because the CSS rules are not separated from the HTML.

Although inline styles are part of the CSS language, they are not often used. They present many of the same problems as the older <font> tags in HTML. They only apply to one tag at a time and are not easily reusable. So when are they used? Inline styles are useful when an internal or external style sheet may not be available; a good example of this is HTML-based e-mail.

An inline style places the CSS rules inside an opening paragraph tag.

Internal versus external style sheets in Dreamweaver

Internal style sheets are CSS rules that are contained directly within a document, using the <style> tag. The entire style sheet is contained within the opening and closing <style> tags. External style sheets are style rules saved in a separate document with the extension “.css”. One of the fundamental differences between internal and external style sheets is that with internal style sheets, the CSS rules apply only to the HTML in a single document. For example, if you had a ten-page web site and could only use internal style sheets, you would essentially have ten styles sheets: one per page. If you made a change on one page and then needed to make the other pages look the same, you would have to either copy or redefine internal styles from page to page, not an enjoyable prospect. External style sheets, by contrast, have CSS rules located in one single document. You can attach .css files, or external style sheets, to an unlimited number of HTML pages. This method is extremely flexible: if a style rule such as the font-color for a paragraph is changed in the external style sheet, all paragraphs in the site are instantly modified, whether it be 2 pages, 10 pages or 100 pages.

In Dreamweaver, when you create a new style, the default behavior is to use an internal style sheet. In many ways, a web browser doesn’t care which type of style sheet you use; it renders the page exactly the same. There are certain situations when an internal style sheet makes more sense than an external style sheet and vice-versa. You will explore this in more detail in later exercises, but first you need to know how to determine whether a style is internal or external.

1 In the CSS Styles panel, click on the All button. In the top half of the screen you will see a listing for <style> and one for StylePlacesCSS.css. The first line is the internal style sheet, and the second is for the external style sheet.

2 If necessary, click on the arrow to the left of the plus sign (Windows) or the arrow (Mac OS) to the left of the <style> option, and it expands to show you the rule for the class red. Again, if necessary, click on the arrow to the left of StylePlacesCSS.css to expand this and see the rule for the class .greenText. You may have noticed that the listing for the inline style is not here; only rules for internal and external style sheets are visible in All mode.

In the last exercise, you used the Code Navigator to view the CSS rules applied to a paragraph. You can also use the Code Navigator to quickly determine where the CSS rules are located.

3 Back in Design view, click inside the second paragraph and Ctrl+Alt+click (Windows) or Command+Option+click (Mac OS) to open the Code Navigator. The window reads StylePlaces.html and the class .red is indented below it. If a style is located inside an HTML document, as it is in this case, it must be an internal style.

The Code Navigator has located the origin of this CSS rule to be in StylePlaces.html.

4 Place your cursor over the .red class, and all the properties appear; this is a quick way to determine the properties.

5 Click on the .red rule, and Dreamweaver’s Split view opens, sending you directly to the internal style. An experienced hand-coder might use this to directly edit the rule as you did earlier, although you will not be making any changes at this point. Now you will look at the external style sheet again using the Code Navigator.

6 Ctrl+Alt+click (Windows) or Command+Option+click (Mac OS) in the third paragraph to open the Code Navigator.

7 This time, the Code Navigator window lists StylePlacesCSS.css first. If a style is located inside a .css document, as it is in this case, it is an external style. Place your cursor over the .greenText class, and all the properties appear.

8 Click on the .greenText class, and in the Split view, the external style sheet StylePlacesCSS.css appears. Doing this actually opens the external style sheet, which is a separate document. To return to the original HTML document, press the Source Code button.

Clicking on the Source Code button switches you from
the external style sheet back to the original HTML file.

9 Choose File > Save All. Close this document for now. Choosing Save All saves not just the HTML document but the external stylesheet at the same time.

Understanding why they’re called Cascading

You have defined style sheets and determined that there are three categories of styles. Additionally, you have seen that an HTML document such as the one from the last exercise can contain all three types. Now you’ll begin to explore when you might use one type over the other. A good way to look at this is to ask the question, Which one of the style types is most dominant? Consider the following situation: you have a paragraph, or more accurately a <p> tag, in your document and you have the three style types (inline, internal, and external). Each one targets the <p> tag with the same property (color, for example) but they all have different values, so which one wins? The answer is the inline style is the most dominant because it is closest to the HTML source. The internal style sheet is the next dominant because it is one step farther away from the HTML source, in the head section of the HTML document. Finally there is the external style sheet, which is a separate document and is the least dominant because it is farthest away from the actual source.

Image
tutorial image

We have actually simplified the argument here a bit. The question of which CSS rule “wins” can get even trickier depending on the rules in question. We discuss some of these rules at the end of the lesson.

Continue to the next Dreamweaver Tutorial: Creating and modifying styles in Dreamweaver >