Accessibility
[an error occurred while processing this directive]

Community Publishing

Created:
2009-08-03
User Level:
Beginner
Products:
Dreamweaver CS4,CS3


Using Page Properties to create a basic CSS style sheet

A common mistake among newcomers to CSS is to think that styling text involves creating classes and applying them to every paragraph. The great strength of CSS is what's know as the cascade. Put simply, the cascade treats a web page as a family tree. All visible content is inside the <body> tag. Everything inside the <body> is regarded as one of its children; and in just the same way as human children inherit looks from their parents, so do HTML tags when styled with CSS.

By creating some simple styles, and attaching the style sheet to each page, you can change the default look of paragraphs, headings, and links. The Page Properties panel in Dreamweaver makes this a quick and intuitive process.

Before you start

Everything you do in Dreamweaver should normally be inside a defined Dreamweaver site. If you haven't yet defined a site, follow the instructions for setting up a site in the Dreamweaver help files.

If you are using Dreamweaver CS3, also make sure that the option to use CSS instead of HTML tags is selected in the General category of the Preferences panel (Edit > Preferences in Windows, Dreamweaver > Preferences in the Mac version). This is the default setting.

Using Page Properties to create basic styles

  1. Create a new HTML page, and save it in your site. The name of the file is unimportant. Add some text in the file. Ideally, it should have some paragraphs, three levels of headings (Heading 1, Heading 2, and Heading 3), and some links. If you want to use the dummy text from my files, download index.html here.
  2. Open the Page Properties panel by clicking the button in the Property inspector, or by selecting Modify > Page Properties (Ctrl+J/Cmd+J).
  3. On the left of the Page Properties panel is a list of categories. When it opens, the first one, Appearance (CSS), is selected (in Dreamweaver CS3, it's called just Appearance). This sets the font, text color, background, and margins for the page.
    Choose a set of fonts in the Page font pop-up, and click the Apply button. You should see an instant transformation in the look of the text, as shown in the following screenshot:

  4. It's not a good idea to specify a size for the font here, as it affects the whole page. Font sizes are better specified later in your style sheet. However, you should always set the text and background colors, even if you want to use the default black and white. Click inside the color picker for each one, or type the hexadecimal value for the color in the text field alongside. If you enter the hexadecimal value yourself, don't forget that it must begin with a hash sign (#). Forgetting the hash sign is a common cause of CSS mistakes.
    Note: Dreamweaver CS4 uses 3-digit hexadecimal values where possible. Dreamweaver CS3 uses 6-digit values. There is no difference between them.
  5. If you want your page to have a background image, click the Browse button, and select the image. Set the Repeat pop-up to indicate how you want the image to be displayed. If you leave this blank or select repeat, the image will automatically tile across and down the page. Selecting repeat-x tiles the image across the page; repeat-y tiles it down the page; and no-repeat prevents it from tiling.
  6. Browsers add a small margin all around the page, so it's often a good idea to remove it by entering 0 in each of the margin text fields. The settings in the Appearance (CSS) category of the Page Properties dialog box should look similar to this:


     
  7. Next, select Links (CSS) from the Category list on the left of the Page Properties panel (in CS3, it's called just Links). This is where you set the basic styles for your links. You can change the font and size of your links, but I think it looks better if they are left the same. However, it's a good idea to make your links bold by clicking the B button alongside the Link font text box.
  8. Choose the colors you want your links to be in the four main states. Link color is the normal color of the links; Visited links is how you want to indicate links that have already been visited; Rollover links is the color when the mouse pointer is directly over the link; and Active links is the color of the link at the moment of being clicked. You can also choose whether you want your links to be underlined. 
  9. Click the Apply button to see the effect of your changes. The Links (CSS) category of the Page Properties dialog box should look similar to this:


     
  10. The final set of styles to create in the Page Properties dialog box are in the Headings (CSS) category (it's called just Headings in CS3). This section lets you choose the font, font size, and color for the various levels of headings. It's a good idea to choose a different set of fonts for your headings to make them stand out from the rest of the text.
  11. Also choose a size and color for the first three levels of headings. Because CSS lets you choose font sizes, there is rarely any need to use the other levels. The days of choosing Heading 6 to get small, bold text are over.
    When you have made your choices, click Apply to make sure the settings are what you want. The Headings (CSS) category of the Page Properties dialog box should look similar to this:


     
  12. That completes setting the basic styles. Click OK to close the Page Properties dialog box.

Adding other useful styles

The Page Properties dialog box lays the basic foundation for a style sheet, but you need a few more styles to make your pages look good. There are several ways to add new styles. Because of the differences between Dreamweaver CS3 and CS4, I'm going to dive into Code view and create them there. Don't worry. Dreamweaver's code hints make this easy.

  1. At this stage, it's a good idea to save your work so far.
  2. After saving the file, open Code view or Split view, and scroll to the top of the page in Code view. Directly below the <title> tag, you should see that Dreamweaver has created a <style> block like this:


    These are the style rules that control the look of your page. Each style rule consists of a selector, which tells the browser where to apply the rules. This is followed by one or more style declarations between a pair of curly braces.
    Each style declaration begins the the CSS property you want to use, followed by a colon (:) and the value you want the property to have. Each declaration ends with a semicolon (;). Most CSS properties have intuitive names, so it's not difficult to follow what each rule is for once you learn the names of the properties.
  3. Unfortunately, there's a bug in the Page Properties panel in Dreamweaver CS4. The names of fonts that contain spaces should be enclosed in quotes. For example, Trebuchet MS on line 9 of the preceding screenshot should be "Trebuchet MS" (with quotes). If you selected fonts that have spaces in their names, you need to add the quotes manually in the body,td,th style rule shown here, and in the h1,h2,h3,h4,h5,h6 style rule further down the page. Make sure the closing quote comes before the comma.
  4. Scroll down to the last style rule (h3), position your cursor after the closing curly brace (}), and press Enter/Return to insert a new line. Type .floatleft followed by a space and an opening curly brace. Then press Enter/Return.
    Dreamweaver displays CSS code hints. Start typing the word float. As soon as the code hint displays float, press Enter/Return. Dreamweaver finishes the word, inserts a colon, and displays the next set of code hints, as shown here:


     
  5. Use your arrow keys to select left, and press Enter/Return for Dreamweaver to fill in the value for the float property.
  6. Type a semicolon, and press Enter/Return again.
  7. This time, start typing margin, and select margin-right from the code hints. After the colon, type 8px followed by a semicolon. There should be no space between the number and px.
  8. The style rule you have just created should look like this:
    .floatleft {
        float: left;
        margin-right: 8px;
    }

    The dot (period) at the beginning of .floatleft indicates this is a CSS class. The two rules in this class float an element to the left, and add a right margin of 8 pixels. You can apply this class to images to align them to the left and flow text around the right side. The 8-pixel margin on the right prevents the text from sitting right up against the image.
  9. Create another class called .floatright, setting float to right, and margin-left to 8px like this:
    .floatright {
        float: right;
        margin-left: 8px;
    }

    This aligns images to the right, and leaves an 8-pixel margin for the text flowing around on the left.
  10. Add one other rule to automatically remove the border from images used as links, using the following code:
    a img {
        border: none;
    }
  11. Save your page.

Exporting the styles to an external style sheet

You have now created a very basic set of style rules for a page, but you don't want to go through the same process for every page in your site. The answer is to export the style rules in the <head> of the page to an external style sheet. Dreamweaver CS3 and CS4 make this a simple operation.

  1. Open the CSS Styles panel by double-clicking its tab, or by selecting Window > CSS Styles. On Windows, you can also use the keyboard shortcut Shift+F11.
  2. Select the All button at the top left of the CSS Styles panel. If necessary, expand the <style> tree menu,  and Shift-click to select all items, as shown in the following screenshot:


     
  3. Right-click the selected styles and select Move CSS Rules from the context menu. This opens the Move To External Style Sheet dialog box.
  4. In the dialog box, select the radio button labeled "A new style sheet" and click OK. This opens the Save Style Sheet File As dialog box.
  5. It's normal practice to save style sheets in a separate folder, so create a new folder called styles, and save the style sheet as basic.css. When you click OK, Dreamweaver exports the styles from the <head> of the page to basic.css, and links the two files.
  6. Select File > Save All to save both the original page and the new style sheet.
  7. To tidy everything up, select <style> in the CSS Styles panel as shown here:


     
  8. Press Delete to remove the empty <style> block in the <head> of the web page, and save the page again.

You now have a basic style sheet that can be attached to any new document in your website (see Automatically attaching a style sheet to new documents). This is only a very basic style sheet, but it should lay the basis for building new style rules that can be used throughout your site. If you want to check your version against mine, download css_from_pageprops.zip.

About the contributor 

David Powers is an Adobe Community Expert and Adobe Certified Instructor for Dreamweaver. He is the author of The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP. His book, Getting StartED with CSS, is being published by friends of ED in November 2009.

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License