Cascading Style Sheets (CSS)

What are Cascading Style Sheets (CSS)?

Styles define how to display the elements on your web page.

(example: bold, italics, Heading 1, highlighted, Courier New, etc)
Styles give pages a uniform look
Styles save time and energy when creating and editing web pages.

How can I use CSS on my web pages?

Follow this simple example:

1. Launch Dreamweaver

2. Define a new site called CSS, (you will need to create a new folder called CSS)

3. File > New, to create a blank page

4. Save the file as: styletest.htm in your CSS folder

5. Type Heading 1, Press Enter

Type Heading 2, Press Enter
Type Heading 3, Press Enter
Type This is the body

6. Highlight Heading 1
Modify > Selection Properties to open the properties inspector
Change the drop down box in the upper left corner from Paragraph to Heading 1
 7. Highlight Heading 2
Modify > Selection Properties (if the properties inspector is not already open)
Change the drop down box in the upper left corner to Heading 2

8. Highlight Heading 3
Modify > Selection Properties (if the properties inspector is not already open)
Change the drop down box in the upper left corner to Heading 3

9. Highlight This is the body

Modify > Selection Properties (if the properties inspector is not already open)
Change the drop down box in the upper left corner to Paragraph

This is what your page should look like so far:

10. File > Save

11. Window > HTML Source, to open the source code. OR click on the blue <> at the bottom,
right-hand corner of the page.
The source should look like this:

______________________________________________________________________

I) To Create an Internal Style Sheet:

In the source window, type the following code before the </head> tag:

<style type="text/css">
h1 {font-family:georgia}
h2 {font-family:verdana}
h3 {font-family:courier}
p {font-family:arial}
</style>

Now your source should look like this:

Once you type in the code, click somewhere on the page.

The fonts will change!

Result:

__________________________________

Modify the code to look like this:

<style type="text/css">
h1 {color:blue; font-family:georgia}
h2 {color:green; font-family:verdana}
h3 {color:purple; font-family:courier}
p{color:red; font-family:arial}
</style>

The colors will change!

Result:
__________________________________

Modify the code again to look like this:

<style type="text/css">
h1 {color:blue; font-family:georgia; text-align:center}
h2 {color:green; font-family:verdana; text-transform:uppercase}
h3 {color:purple; font-family:courier; font-size: 20pt}
p{color:red; font-family:arial; font-style: italic}
</style>

Heading 1 will be centered, Heading 2 will be in all capital letters, Heading 3 will change
in size and body will be italicized.

(Hint: if you dont see the changes, preview the page in the browser)

Result:

__________________________________

* File > Save As, internal.html

To learn about more CSS properties and attributes check out:

http://hotwired.lycos.com/webmonkey/reference/stylesheet_guide/css_properties.html

Play with the different attributes by modifying your code and noting the changes that are made.

______________________________________________________________________

II) To Create an External Style Sheet:

1. Open a blank text document. (WordPad, Note Pad, Simple Textetc)

2. In the source code of internal.html, copy all of the code in between (but not including) the <style>
and </style> tags and paste into the blank text document.

h1 {color:blue; font-family:georgia; text-align:center}

h2 {color:green; font-family:verdana; text-transform:uppercase}
h3 {color:purple; font-family:courier; font-size:20pt}
p{color:red; font-family:arial; font-style: italic}

3. File > Save As: mystyle.css in your CSS folder

4. In Dreamweaver, File > Open: styletest.html

5. Window > HTML Source, to open the source code.

6. Type the following code before the </head> tag:

<LINK HREF= mystyle.css REL= stylesheet TYPE= text/css>

(This will link your html page to your style sheet file)

This is what your code should look like:

<html>
<head>
<title>CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK HREF= "mystyle.css" REL= "stylesheet" TYPE= "text/css">
</head>

<body bgcolor="#FFFFFF">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>This is the body</p>
</body>
</html>

7. Note the changes to the page, it should look exactly as it did before with the internal style sheet.

8. File > Save As, external.html

*The advantage of an external style sheet is that you can edit the .css and the changes will be made to
whatever page it is linked to. This saves the time because there is no need to make changes to every
page.

Using Dreamweaver to edit your style sheet:

Text > CSS Styles > Edit Style Sheet

Select your style sheet mystyle and click Edit
Select an element and click Edit
 Modify one or more of the properties
Click OK > Save > Done

*Note the changes to the page

More with CSS

Online Tutorials and Resources:

http://www.w3schools.com/css/default.asp

http://hotwired.lycos.com/webmonkey/reference/stylesheet_guide/

http://www.htmlhelp.com/reference/css/