Creating Cascading Styles Sheets

1
Creating Cascading Styles Sheets

• Introduction to Dreamweaver MX

By Joy Kennedy Horton
2
What is meant by Cascading Style Sheet or
CSS?

• One way to think of CSS is as a word processing
  tool for the web.

For example, whenever you write a paper, you may
always set the title page as bold, Times New
Roman, and have a font-size of 18pt. On your
outline page, you set the text to be normal with
a font-size of 12pt. In the rest of your paper,
for the entire topic headings indicated in your
outline, you set that text to be bold and have a
font-size of 14pt. For the text in your
paragraphs, you set them to be normal with a font
size of 12pt.
3

• Bold, font, and font-size are all properties of
  text or Type. By specifying how each type element
  in your paper appears, what you are essentially
  doing is creating styles!

Do you like my style?
Hows my style???
Now, Im a style with real style!!!
I'm a better style Pick me!!!!
Let us now move onto our lesson, in which we will
be creating our first style sheet, using
Dreamweaver MX!
4

• In this lesson, we will begin by creating a new
  site.
• The format with all web pages within this new
  site will be
• Links that are not underlined
• Use the font family of Verdana, Arial,
  Helvetica, sans-serif with a font size of 12
  pixels
• Link font family of Georgia, Times New Roman,
  Times, serif
• There will be other setting changes, as well,
  such as background and font color.
• There are two parts to this lesson Part
  ACreating the Style Sheet, and Part BTesting
  the Style Sheet

5

• Part ACreating the Style SheetLets begin by
  opening Dreamweaver MX.
• Open a new, blank HTML file by selecting File/New
  from the Menu bar, as follows

• Select Basic, and then HTML for the type of
  document

• Click the Create button

6

• You should now have a document on your screen
  entitled untitled-1

• In the title Window, change the title from
  untitled document to template

• Now, save this file, by selecting File/Save from
  the main menu tool bar at the top of the page

7

• Save this file under the folder entitled,
  Project 1. Type in the file name as
  templatecss, and then click on Save

Great! Now you should have a template document
with the styles we want to incorporate into all
web pages that are created within this
site! Next, we will define the page properties
for each page

• At the bottom left corner of the page, click once
  on properties

8

• Properties for this page should be displayed, as
  follows on the bottom of the page

• Click once on the page properties buttonA
  window, as follows, should now be displayed on
  the screen

The very next step now is to set up the overall
appearance of the page the default font, text
color, and background color. The default
background color is usually white, but for this
site, well be using light yellow, with blue
lettering (or font).
9

• Here are some examples of background and
  foreground colors

I have a background color of light green, with a
foreground (font) color of dark blue.
I have a background color of violet, with a
foreground (font) color of red.

• Change the page font on this screen to Vendana,
  as follows

10

• Now, change the font size to 12 pixels, text
  dolor to 000066, and the background color to
  FFFFF99 click on the Apply button when you
  have made the changes.

• Next, click on Links. Change the Link Color
  to 0000FF, visited links to 009999, rollover
  links to 99000, and the active links to 33FFF.
  Click on Apply, then OK when done.

Ok, now were coming up on the home stretch!
Your document screen should be displaying a light
yellow background. We are now ready to create
a cascading style sheet!
11

• From the menu bar, select File/Export/CSS Styles

• Type the name, project1 for the file name, and
  then click on the save button

Congratulations! Youve just created a style
sheet! But wait! Were not done yet. It is
good practice to test out what you have just
created. Now, lets put the style sheet to the
test!
12

• Part BTesting the Style SheetLets begin by
  creating another new web page
• Open a new, blank HTML file by selecting File/New
  from the Menu bar

• Select Basic, and then HTML for the type of
  document

• Click the Create button

13

• You should now have a document on your screen
  entitled untitled-2

• In the title Window, change the title from
  untitled document to index/htm

• When you have finished, save the file as you did
  in Part A give it the name index.htm.

• If it isnt already openClick to open the Design
  Tab on the right hand side of the screen

14

• Click on the Attach Style Sheet button

• The following window should appear on your screen

• Click the Browse button.

15

• The following window should pop up on your screen

• Click the file, project1 click the ok button.

• Click ok to accept the style sheet

16

• Below is an example of how your screen should
  appear

Congratulations! You have just successfully
created and tested your first style sheet! Now,
practice on your own, and create another style
sheet with your own colors and schemes!
17
REVIEW

• One way to think of CSS is as a word processing
  tool for the web.

Steps for creating a cascading style sheet
(CSS) Step 1 Create a blank, HTML
document Step 2 Change the page properties as
you would like them to appear Step 3 From the
menu bar, select File/Export/CSS Styles
Steps for attaching a cascading style sheet
(CSS) Step 1 Open the Design tab. Step 2
Click on the Attach Style Sheet button. Step
3 Attach your style sheet file!