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 |


 

Internal Style Sheets
------------------------

Internal Style Sheets only affect the HTML document in which they are embedded. They are most suitable for use in smaller websites with 2-3 pages.

To Create Internal Style Sheets in Dreamweaver MX:

  1. Open the HTML document in which you would like to embed the style sheet. The code for the style sheet will automatically be embedded once you start creating new styles.

    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.  

  4. In the window that pops up, for the Define In field, choose This Document Only to embed the 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 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.

    6. 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.

     

  6. Once you 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.

    7. 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. To see the code of a document, go to View>Code or View>Code and Design.

     

  7. To edit a style, click on the button for the Edit Styles menu. Double-click on the name of the style you are editing. 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.

     

     

 

Computing at Wellesley

Macintosh Documentation

PC Documentation