Wellesley College
Dreamweaver Documentation


Cascading Style Sheets

| What is CSS? | Creating CSS | Links |
| CSS in Dreamweaver MX: Internal Style Sheets, External Style Sheets |
| Hand-Coding Basics: Coding CSS, Rules, Properties, Attaching Style Sheets |


 

External Style Sheets
------------------------

External Style Sheets are independent and can be attached or linked to many HTML documents. With external style sheets, one can change the entire appearance of a website by altering just one file. This makes site maintenance easier and quicker.

An external style sheet, saved as a .css file, is a separate file that your website links to. You should treat it like any other HTML file in your website. When you upload your website to a server, you will need to upload the .css file as well. Once uploaded, make sure you do not change its location relative to the other pages in your website when you update. Otherwise the link to the external style sheet will break and none of the styles you created will be applied.

To Create External Style Sheets in Dreamweaver MX:

  1. Open the HTML document that you would like to attach the style sheet to.

    2.  

  2. Open the CSS Styles palette. Go to Window > CSS Styles.

    3.  

  3. To create a new style, click on the little menu icon in the top right-hand corner of the palette and select New CSS Style...

     

  4. In the window that pops up, for the Define In field, click the button for New Style Sheet... to create an external style sheet.

    5. As for defining styles, you have several options: Create your own style, redefine an HTML tag, or use a CSS selector.

    To Make Custom Style (class), you will need to create a name for your new style, for example .newStyleName. Remember to keep that dot (.) in the front. Click OK. For more information on Custom Styles, click on the Class Selectors link under the Rules section.

    To redefine an HTML Tag, click on the arrow/s and select a tag from the pull down menu, i.e. p for paragraphs. Click OK. This is the most commonly used form of CSS at Wellesley. For more information on redefining HTML tags, click on the HTML Selectors link under the Rules section.

    To use a CSS Selector, click on the arrow/s and select from the list. Click OK. In Dreamweaver MX, using a CSS Selector is essentially redefining the HTML tags of links. For example, if you choose a:visited, you are redefining the properties of visited links.

    In the above example, the HTML file is a page from a journal. A custom style has been created for the journal entry dates, named .dateHeadings.


  5. A window will pop up, prompting you to give your external style sheet a name. Type in a name, i.e. extStySheetName.css. In the Where field, click on the arrow/s to select your website folder. Click Save.

     

  6. A window will pop up for you to define the style. You can define the style through a combination of properties including Type, Background, Block, Box, Border, List, Positioning, and Extensions. Check the browser support tables to see what properties are supported in the different browsers. After you are done setting the properties, click OK.

    In the above example, the Type properties for .dateHeadings are defined as Verdana, Arial, Helvetica, sans-serif Font, of a Size medium, normal Style, normal Line Height, bold Line Weight, etc. in a bright red color with a hexadecimal code of #990000.

    7.  

  7. Once you have create a custom style, it is stored under the Apply Styles and Edit Styles menus on the CSS Style palette. To apply a style, click on the Apply Styles button, choose the text or object which you would like to apply it to, and then click on the name of the style from the list.

    Note: HTML elements and CSS selectors can be seen only under the Edit Styles menu, since they are automatically applied to the entire document.

    8. Here, the journal entry date of Monday - April 14 2003 was selected and had the .dateHeadings style applied to it.

    Above is the original HTML code. Below, you can see the CSS code that has been added to the HTML document linking to the external css file. To see the code of a document, go to View>Code or View>Code and Design. To view the css file, go to File>Open and browse to your css file. Select it and click Open.

     

  8. To edit a style, click on the button for the Edit Styles menu. Double-click on the name of the style you are editing. Notice how .dateHeadings is stored under the extStySheetName.css file because it was created in that external style sheet. Make any changes you would like and click OK. The changes will take effect throughout your page.

    In this example, the bright red color, #990000, has been changed to a royal purple with a hexadecimal code of #330099.

    9.  

  9. When you create another new CSS style within the document, the name of the .css file that has been created should be the default storage file. If it is a different file, click on the double arrows and scroll down to select the .css file that you would like to save the new style in.

    10.  

  10. To attach another style sheet, you can use the Properties Palette. Go to Windows> Properties. The Font menu and the CSS menu toggle. Click on the Font icon, the capital A after the Format field. It will change to a different icon for the CSS menu.

    Click on the arrow/s, scroll down, and select Attach Style Sheet...

    You can choose to either link the style sheet or import it. The most common method is linking. The import method is not recognized by older browsers. If you would like to have support for multiple browsers, you could create two style sheets, one to cover older browsers and the other for newer ones. Use the link method to attach a style sheet for older browsers, saving the import method to attach a style sheet for the newer browsers. This ensures that your document will be readable in older browsers while maintaining CSS capabilities in newer ones.

 

Computing at Wellesley

Macintosh Documentation

PC Documentation