Cascading Style Sheets
Libraries and Templates

DREAMWEAVER CASCADING STYLE SHEETS

 

Yeah, youve got style, baby. Cascading style.

Imaging this: You make a huge site. After countless hours of work, some guy from marketing comes down and says "Um, yeah, weve decided that we think the standard font size should be smaller, and the backgrounds should be light yellow instead of white." How happy are you now?

Youll have to tell Mr. Marketing Man that youll need about two weeks to make the changes. On the other hand, if youve used Cascading Style Sheets (CCS) to build your site, you can make all the changes in five minutes and go on vacation for two weeks.

 

Cascading Style Sheets allow you to stipulate special formatting on a file called a "Style Sheet". After you create the style sheet, you can instruct any desired pages to adopt the style sheets formatting. If you change the style sheet, any pages linked to it will change automatically.

Style sheets allow for much tighter control over your text and coloring. You can control the space between words (kerning), the space between lines (leading), and many other options. Using CSS, web designers have they same artistic freedom as traditional print designer.

Style sheets also allow for cool HTML functions, like HREF links that glow when you roll over them. In this section of our web design course you're going to learn all kinds of neat stuff.

 

Redefining HTML Tags

An HTML tag applies specified formatting to text. The <b> tag, for example, makes text bold. The <body> tag specifies that text appear on the screen.

What if you wanted all of the text on every page to be a little bigger and dark gray? Wouldnt it be great if you could change what the <body> tag meant? You could stipulate that the <body> tag now makes text appear on the screen and at a certain size. Using CSS, you can do just that. Basically, you can change what each tag means to the browser. You could change the <h1> tagor any other tagto apply formatting more suitable to your taste.

Does that rule, or what?

 

To Redefine Tags in HTML

  1. Open the CSS Styles Window
    1. WINDOW-> CSS STYLES
  2. Click the in the lower right corner of the CSS Styles window to create a new Style Sheet.



  1. Choose "Redefine HTML Tag"
    Notice that we are defining a new style sheet file. This is an external file that we can link other pages to. The linked pages will assume all of the formatting that we set in the style sheet.



  1. Choose the tag to Redefine. To change all text, background or formatting items, select "body"



After you save the new Style sheet in your root folder, the Style Definition box will pop up. This is where you set all the different settings for your text. Choose a category on the left and experiment with different choices on the left. Most of the really useful styles can be found in the "Type" and "Background" categories.

When youre done, hit OK

 

Assuming that youve got text affected by the tags you redefined, youll see changes!

 

You can redefine as many tags as you want.

 

To Edit a Redefined Tag

You might want to change the tags redefinitions that you made. Easy enough.

  1. Click the "Open Style Sheet" button on the Style Sheet window.

  1. Select the redefined tag you wish to edit and click "Edit"

 

***NOTE: Dont worry about linking this style sheet to other pages yet. Well do that later.

 

Making Custom Styles

Maybe theres a bunch of formatting that you have to apply over and over again. It doesnt really correspond to a certain tag, but your fingers are getting pretty sick of formatting.

In the following example, The Question is blue, serif, and large. The answer is red, sans-serif, and small.

Q. How much do you like Style Sheets?

A. I love style sheets more than life itself.

 

If you have to format twenty different questions, its going to get old

Custom styles allow you to set formatting. You highlight text, and click the style. Presto! Magical formatting.

 

To Create a Custom Style

  1. Open the CSS Styles Window
    1. WINDOW-> CSS STYLES
  1. Click the in the lower right corner of the CSS Styles window to create a new Style Sheet.

  1. Choose "Make a Custom Style"



  1. Name the style IMPORTANT: you must include a dot (.) before the name.
  2. Click OK
  3. Set the parameters. And click OK.

 

To Apply Your Custom Style

  1. Highlight the text you desire to change.
  2. Click the your new style in the CSS Styles Window

 

The text should assume the style sheet formatting.

You can make as many custom styles as you like.

 

Setting Cool HREF Styles

You can use CSS styles to apply all kinds of effects on links. You can remove the line under links, or change their colors, or make them glow on hover, all kinds of stuff.

Make a new CSS Style. Choose "Use CSS Selector".

 

Selectors to choose from:

a:active Change the way your links look when its being clicked.
a:hover Change the way your links look when its being hovered over.
a:link Change the way your normal links look.
a:link Change the way your links look after its been visited.

 

Linking Outside Pages to Your Style Sheet

You can link any page in your website to the style sheet you just made. Once its linked, that page will also assume the style sheet formatting. Linking other pages to your style sheet is easy. The best part is that if you edit the style sheet in the future, all of the linked pages will instantly adopt the new changes.

 

To link your open page to a style sheet:

  1. On the CSS Styles Palette, click the Attach Style Sheet button

  1. Navigate to and select your Cascading Style Sheet

 

The style sheets formatting will apply to the current page!

 

Continue to Templates and Libraries |