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.
Example: http://junglia.com/nscc/design2/css/css_samples.htm

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