CSS Styles

What is a Cascading Style Sheet?
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Using CSS to control fonts, colors and style.
Click here to view the style sheet for Learn2Design.

Cascading style Sheets allow you to specify the style of your page elements (spacing, margins, etc.) separately from the structure of your document (section headers, body text, links etc.). This separation of structure from content allows greater manageability and makes changing the style of your document elements easier.

The Dreamweaver CSS Styles panel
Use the CSS Styles panel to apply custom CSS styles to the current selection. The CSS Styles panel displays custom (class) CSS styles only; redefined HTML tags and CSS selector styles do not appear in the CSS Styles panel, because they are automatically applied to any text controlled by the specified tag or selector. (If you want to simply cut and paste reusable but not updatable and customizable styles, use the HTML Styles panel.)

Choose Window > CSS Styles to display the CSS Styles panel.

Apply displays the tag of the current selection. Choose a tag from the pop-up menu to select a different tag.

New Style opens the New Style dialog box. Create a new style for a particular document or create a new external style sheet.

Attach Style Sheet opens the Select Style Sheet File dialog box. Select an external style sheet to attach to your current document.

Edit Style Sheet opens the Edit Style Sheet dialog box. Edit any of the styles in the current document or in an external style sheet.

Custom style (class) names must begin with a period (.mystyle).

Inline Styles Back to top
The Inline style attribute allows you to specify a style for one element. These attributes will over ride any other CSS styles defined in a local style element of linked style sheet.

<p style="font-size: 20pt; color:#000000>TEXT HERE</p>

Exercise 1
Create a generic HTML document.
Apply an inline style to a paragraph of text.

Local Style Element
The Style Element is declared in the header section of the HTML document. Styles declared here may be applied to each element of the entire document.

<style type="text/css">

Exercise 2
Using your generic HTML document declare the local style element.
Create a bold and italic local style.
Use the styles in at least 3 different places in your paragraph.

Exercise 3
Using your generic HTML document declare the local style element.
Create 3 different paragraph styles that you define using the <p> tag.

Inventing and applying your own named styles
Using the class attribute.
p.special {color: red; background: yellow}
p.small {font-size:90%}
p.large {font-size:200%}

External Style Sheets Back to top
The External Style Sheet allows you to link to an external CSS file and link multiple web pages to one document for a uniform look. If a change is needed for any attribute you can change a single line in the style sheet and update all the pages linked to the style sheet at once.

<link rel="stylesheet" type="text/css" href="styles.css">

The link element can be placed only in the header section of the HTML document.
External style sheets are saved with the extension of .css
Multiple external style sheets may be developed.
Manual HTML formatting overrides formatting applied with CSS (or HTML) styles. For CSS styles to control the formatting of a paragraph, you must remove all manual HTML formatting or HTML styles.
Sample of a style sheet.

Exercise 4
Create an HTML document.
Define 3 different inline styles, 3 different style elements, and an external style sheet with 8 different elements.
Back to top

CSS provides a means for web authors to separate the appearance of web pages from the content of web pages.

You can use CSS style sheets with Dreamweaver in a variety of ways. You can create new external style sheets, create embedded style sheets, local styles or link to existing external style sheets for each document.

You can also use CSS to apply border styles and different link styles.

Using Style Sheets:

Here is a sample of a CSS STYLE SHEET:

.speciallink {
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
}

.speciallink A:link {
color: #0099FF;
text-decoration: none;
}

.speciallink A:visited {
color: #9933FF;
text-decoration: none;
}

.speciallink A:hover {
color: #CC0000;
text-decoration: underline;
}

This will create a link style which is blue with no underline on unvisited links, purple with no underline on visited links and turns red with an underline when someone mouses over the link.

The hover attribute only works in IE 5+ and Netscape 6+

Create a New Class:

1. Select the MENU BUTTON in the upper right hand corner of the CSS MENU.
2. Click the EDIT STYLE SHEET in the dialog box that appears.
3. Then select NEW.
4. Select MAKE CUSTOM STYLE (Class)
5. Give the class a name.
6. Use the interface to select attributes for the new class.

Create a New External Style Sheet:

1. Open your document.
2. Click WINDOW/CSS STYLES to open the CSS Menu.
3. Select the MENU BUTTON in the upper right hand corner of the CSS MENU.
4. Click the EDIT STYLE SHEET in the dialog box that appears.
5. Then select NEW.
6. Make sure the DEFINE IN radio button is set to NEW STYLE SHEET FILE and not This Document Only.
7. Decide whether you're going create a style sheet class, redefine a html tag or use a css selector.
8. Select the item you're going to define and Dreamweaver will ask you to save your style sheet.
9. Save it in your web site folder called STYLES.
10. Edit your ATTRIBUTES and save the file.
11. To add more style sheet attributes for classes, html tags and selectors, click the MENU BUTTON again.
12. Select your new style sheet from the list.
13. Click EDIT and continue.
14. You can REMOVE the link to the style sheet by clicking the MENU BUTTON and then clicking REMOVE.

To remove text underlines, select NONE under Decoration.

Create an Embedded Style Sheet:

1. Open your document.
2. Click WINDOW/CSS STYLES to open the CSS Menu.
3. Select the MENU BUTTON in the upper right hand corner of the CSS MENU.
4. Click the EDIT STYLE SHEET in the dialog box that appears.
5. Select NEW.
6. Make sure the DEFINE IN radio button is set to THIS DOCUMENT ONLY and not NEW STYLE SHEET FILE.
7. Decide whether you're going create a style sheet class, redefine a html tag or use a css selector.
8. Select the item you're going to define.
9. Edit your attributes and click DONE.

Dreamweaver allows you to assign attributes which may not be supported by all browsers yet.

Link to an Existing Style Sheet:

1. Open your document.
2. Click WINDOW/CSS STYLES to open the CSS Menu.
3. Select the MENU BUTTON in the upper right hand corner of the CSS MENU.
4. Click the ATTACH STYLE SHEET in the dialog box that appears.
5. Browse to the existing style sheet.
6. Select DONE.

Applying an Existing Class or Style:

1. Select the text you would like to apply the class to
2. In the CSS Styles menu, click on the class to apply.
3. The attributes of that defined style are applied to the bit of selected text.

Be careful about usability issues. Don't confuse your visitors by having too many link styles. It still needs to be obvious to your visitors which bits of text are links, and whether they have already visited them before.