Cascading Style Sheets

Dreamweaver Tutorial

- Cascading Style Sheets

Cascading Style Sheets

Style sheets can be used with or without Templates to create consistency between your pages.
Warning: Although CSS makes your formatting easier and greatly adds to the consistency of your web pages, it is only supported by browsers 4.0 and above. Enough time has elapsed for us to assume that this is the majority of our audience, but you should be aware that users of older browsers will be seeing your pages very differently. Some web-designers choose to format their pages two ways to get around this issue and accessibility issues at the same time. If you have used formatting tags for your headers and such, they will still appear differently from the remainder of the body of your pages.
The first step in applying CSS is to remove any formatting that you have already applied to your text.
To do that, highlight all your text and set your fonts, colors, sizes etc. to DEFAULT.
You can create CSS in two general ways. You can either tag your text first and REDEFINE the styles, or you can simply type in text, create your stylesheets, and then apply formatting from the style sheets.

To redefine tags, you first need to USE tags.

Highlight some text and look at the properties panel. In the upper left corner you will see a box labeled “format”. This will indicate the current tag for the highlighted text. If it says “none”, you can assign a tag by clicking on the drop-down menu.
Creating a Style Sheet
Open the Home page and remove all formatting. (see above)
First you will attach a Style Sheet that will affect the appearance of the entire page.
Look your page over. Notice that it has Headings and paragraphs, and links on it. Click in any of those paragraphs and notice that the properties panel format window displays the name of the format tag.. The links will indicate Paragraph because that is the format that has been given them by default.
Be sure your CSS Styles Panel is open. To create a new Style Sheet, either click on the first icon from the left in the bottom right corner of the panel or right click inside the panel (Control click on a Mac) and choose Attach Style Sheet. Enter a name for your stylesheet (probably something relating to your site) and be sure it ends with .css

To create a style

Click on the second icon from the left or right click (control click) inside the panel and select New CSS Style. In the bottom of the box, select Define in and select your style sheet, click Redefine HTML Tag, and at the top, click on the drop-down menu arrow to select Body. Click OK and a new dialogue box will appear. Select a font, font color, font size and perhaps a background color for the page (click on background in the left hand menu to access that dialogue box.)
Repeat these steps two more times to create styles for your H1 and H2 tags. Note: if you highlight the text of a style you’d like to define and then click New Style, all the options should be selected for you.

The Many States of Links

There are four definable states of a link. The default link, hover state, click (active) state and visited state. Three of these are very helpful to distinguish. The first state is necessary to identify a link. The hover state aids in that identification, particularly if you are using a less-common style for your static link (not blue and underlined). USM uses an underline in the hover mode for it’s styles, which makes their orange links look a LITTLE more like links. The visited state helps a user keep track of where they’ve been in the site. The active state is often left alone.

To define styles for the links

Create 3 or 4 new styles, redefining the tags, and it is important to do them in order.

Default Link: Create new style. Define within your stylesheet. Choose CSS Selector. Choose a:link. Let’s emulate the USM tags by selecting an orange color and no decoration.
Visited: Create new style. Define within your stylesheet. Choose CSS Selector. Choose a:visited. Choose a color that is clearly different but still harmonious with your site scheme.
Hover: Create a new style, Define within your stylesheet. Choose CSS Selector. Choose a:hover. Add an underline.
Active: Create a new style, Define within your stylesheet. Choose CSS Selector. Choose a:active. Let’s try making this a negative of the Hover state … Choose white font on a bright orange background with underline.

Margins

As you’ve seen in previous sessions, you can set margins with tables and padding, but here is another method within Cascading Style Sheets:
Look in your CSS panel and double click body. This is the style that covers your entire page. On the left side of the page, click on Box. Deselect Same for All at the top of the Margins section, then try a value of 5% for the right and left sides. Save and preview.
To attach a style sheet to a page, open the page, click on Attach Style Sheet in the CSS Styles window. Browse to your stylesheet and click ok.