Creating Cascading Styles Sheets - PowerPoint PPT Presentation

1 / 17
About This Presentation
Title:

Creating Cascading Styles Sheets

Description:

At the bottom left corner of the page, click once on properties' : Great! ... Properties for this page should be displayed, as follows on the bottom of the page: ... – PowerPoint PPT presentation

Number of Views:42
Avg rating:3.0/5.0
Slides: 18
Provided by: joyho
Category:

less

Transcript and Presenter's Notes

Title: 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!
Write a Comment
User Comments (0)
About PowerShow.com