Mr. O'Connell's Technology Home Page
home web design business and personal finance biography links2

Creating a CSS Document for an Existing Website

Part One: Choosing a Color Scheme

The client in this case is Mr. O’Connell. Your goal is to meet your client’s expectations. Your target audience is High School students.

  • Open each page of your personal website.
  • Choose which of your existing color schemes is the strongest.
    • Above all else, the goal is to choose a highly readable, high contrast color scheme.
    • When in doubt, ask other people for their opinion when choosing a color scheme.
  • You will use the color scheme you chose for all of your pages.

Important Concepts Regarding Headings:

  • Heading 1 is the largest and Heading 6 is the smallest. Do not set these up in reverse.
  • Most pages don’t need any more than Heading 1, Heading 2, and Heading 3.  
  • Think of the three headings this way:

    H1 biggest

    H2 bigger

    H3 big

  • All headings should be larger than the (p) paragraph text below them. For example, on this website, the sizes are:
    • H1: 33px
    • H2: 29px
    • H3: 21px
    • p: 15px

Part Two: Generating an external CSS document based on existing internal CSS.

Before you begin, examine each page carefully. Decide on a formatting for every text object on the page. Your hyperlinks will automatically be formatted, but everything else needs to be selected and formatted using the Format drop-down menu in the Property Inspector. For example, your titles should be selected and formatted as Heading 1. Your body text should be selected and formatted as Paragraph. Format any subheadings as either Heading 2 or Heading 3.
  • File>New>CSS>Create
  • File>Save>firstname_lastname.css>Save
  • Open the page that contains the color scheme you chose in Part One
  • Expand the CSS Styles Panel
  • Collapse all other panels
  • Click the link icon at the bottom of the CSS Styles Panel (it looks like a chain, remember?)
  • Click Browse (if necessary) and double-click firstname_lastname.css
  • Click Okay
  • Drag down your existing CSS properties from <styles> to firstname_lastname.css
  • Once you have moved all of your existing properties, select <styles> and tap delete on your keyboard.
  • Make sure you have the following properties in your CSS, and that they are arranged in this order. Drag them up and down as needed. Add properties as needed by double clicking the CSS element and filling in the information in the CSS Rule Definition dialog box.
    • body
      • background-color
      • font-family (should be the same as the "p" font-family)
      • font-size (should be the same as the "p" font-size)
      • font-weight (should be the same as the "p" font-weight)
      • color (should be the same as the "p"color)
      • alignment
        • left or justified only
    • p
      • font-family (should be the same as the "body" font-family)
      • font-size (should be the same as the "body" font-size)
      • font-weight (should be the same as the "body" font-weight)
      • color (should be the same as the "body" color)
      • alignment
        • left or justified only
    • h1
      • font-family
      • font-size (see above)
      • font-weight
      • color
    • h2
      • font-family
      • font-size (see above)
      • font-weight
      • color
    • h3
      • font-family
      • font-size (see above)
      • font-weight
      • color

The next four control hyperlink attributes. The font-family and font-size should be the same for all four. You can achieve variety by changing the color, font-weight, and text-decorations on each of the four.

    • a:link
      • font-family
      • font-size
      • font-weight
      • color:
      • text-decoration
    • a:visited
      • font-family
      • font-size
      • font-weight
      • color:
      • text-decoration
    • a:hover
      • font-family
      • font-size
      • font-weight
      • color
      • text-decoration
    • a:active
      • font-family
      • font-size
      • font-weight
      • color
      • text-decoration
    • td
      • background
      • text-align: left
      • vertical-align: top

Part Three applying the new your newly generated CSS to all pages

  • Open the remaining pages of your website
  • Open the CSS Styles Panel
  • Collapse all other panels
  • Select the internal CSS by selecting <style> enclosed in brackets
  • Tap delete on your keyboard

The style information that previously existed on the page should now disappear. Your page should now be formatted with Dreamweaver’s default CSS properties.

  • Click the link icon at the bottom of the CSS style (it looks like a chain, remember?)
  • Click Browse (if necessary) and double-click firstname_lastname.css
  • Click Okay
  • Your document should now be formatted according to your firstname_lastname.css
  • Repeat this process for all of the pages of your personal website.

    When you are done, examine each page carefully. Decide on a formatting for every text object on the page. Your hyperlinks will automatically be formatted, but everything else needs to be selected and formatted using the Format drop-down menu in the Property Inspector. For example, your titles should be selected and formatted as Heading 1. Your body text should be selected and formatted as Paragraph. Format any subheadings as either Heading 2 or Heading 3.