Cascading Style Sheets Chapter 6

1
Cascading Style SheetsChapter 6

• Web Page Design

2
Cascading Style Sheets (CSS)

• Cascading Style Sheets can easily apply
  consistent formatting to your web pages.
• You can create styles that only go to one page or
  that can be attached to any page.
• If you change a CSS style, Dreamweaver will
  automatically update everything that has that
  style applied to it.
• The CSS Styles Panel can be found in the Design
  Panel group. If you lose it, go to Window, CSS
  Styles.

3
Creating Cascading Style Sheets

• To create a new CSS style, Click on the New CSS
  Style button at the bottom of the Design Panel.
• Class and Tag will be the selector types we will
  work with.
• Css style sheets can be saved and applied to
  multiple web pages
• All style sheets need to be saved as .css
• When you are creating new style for new sheet, be
  sure to select new style sheet for the define
  in option.
• You may add many styles to a single style sheet
  (Just be sure to define additional styles in the
  existing sheet)

4
Class

• Can be applied to any block of text
• IS NOT automatically applied
• User must specify when to use by choosing the
  class name in the style menu that is located in
  the property inspector.
• Must be given a name that starts with a period.
  (.bluetext for example)

5
Tag

• Is assigned to specific tags
• Is automatically applied to anything that is
  located inside the selected tag whether you want
  it to or not!
• It is not necessary to name these (as they are
  already named using the selected tag)
• ltH1gt,ltbodygt,ltolgt ltulgt

6
Attaching Cascading Style Sheets

• To attach an existing CSS file, Click on the
  Attach CSS Style button at the bottom of the
  Design Panel. Make sure Link is selected.
• .