CSS Tutorial for Dreamweaver CS6

This Dreamweaver CS6 tutorial teaches you how to create an external CSS document for the Personal Website Project, but it can be adapted for any website.

Creating Sample Text

In order to see the results of your CSS choices, it is necessary to have text on the page formatted with each CSS element. Copy the text in the table below. Create a new cell at the bottom of the Master Table on your Test Page. Paste in the text.

Creating the CSS Document

• Open index.html
• Make sure your CSS Styles panel is open.
• Choose File>New (Ctrl+N)
• Choose CSS>Create
• Choose File>Save As (Ctrl+Shift+S)
• Name the file academic_resume.css This file should automatically be saved in your root folder.
• Close academic_resume.css, and return to index.html
• Click Attach Style Sheet in the CSS Style panel.
• Click the Browse button next to File/URL:, double-click your stylesheet. Click OK.
• Open each html page in your website, and repeat this procedure. From the second time on, you won't have to click Browse for your CSS document.
  • Special note: do not try to link the CSS document to itself.

Add CSS Rules to your CSS document:

• Click the New CSS Rule button in the lower right hand corner of the panel, or right click academic_resume.css and choose New...
• In the top drop down menu, choose Tag (redefines an HTML definition)
• In the middle drop down menu, choose Body
• Choose and format a default font for your body text. Format the font family, color, size, and weight. 12 pixels is a good default font size for body text. Remember, the color of your body text should be the darkest thing on your page.
• In the left hand column, click Background
• Choose your background color. Choose the lightest shade of whatever color you decided on.
• Click Okay
• Continue this process, and make sure format the font family, color, size, and weight for each of the following tags:
  • body
  • p (Your paragraph text settings must match your default body text settings)
  • h1
  • h2
  • h3

(Remember that h3 should be big, h2 should be bigger, and h1 should be biggest).

• Set the Horizontal and Vertical Alignment for the td tag.

• Double click td in the CSS STYLES panel to open the CSS Rule Definition dialog box (this works for any tag in the CSS panel.
• In the CSS Rule Definition dialog box for the td tag, click Block on the left hand side.
• Choose Vertical Align<top.
• Choose Text-align, and then choose either left or justified in the drop-down menu (do not choose right or center).
• Important concept: If everything is bold, there is no bold.
• If you have set your paragraph (p) weight to bold (either on the page or in the CSS), undo it. Set your paragraph weight in your CSS to normal.

To add the link formatting to academic_resume.css
(font family, size, weight, color, decoration):

• Open your index.html page.
• Make sure your CSS Styles panel is open.
• Right click academic_resume.css and choose New...
• In the top drop down menu, choose Compound (based on your selection)
• Choose a:link in the drop down menu
• Format the font family, color, size, weight and decoration.
• Repeat this procedure for a:visited a:hover and a:active
• Save your work
• Your link formatting should now appear on every page of your website.
• Save each page and test in Google Chrome and Firefox. Correct any errors. Save and test again.

How to submit your work for evaluation/grading

• In Dreamweaver, open your academic_resume.css document
• Select the CSS Styles Panel
• Click the All button
• Double check to make sure you have selected appropriate properties for each item. For example, the instructions call for the following:
  • "Your color scheme must provide high readability and strong contrast. DO NOT USE A DARK BACKGROUND COLOR FOR THIS PROJECT."
• 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. Do not add additional properties- in fact, take any additional properties out before you print unless I have given you specific permission to include them.
  

• 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
• td
  • text-align: left
  • vertical-align: top
• 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 (don't use blink)
• a:visited
• font-family
• font-size
• font-weight
• color:
• text-decoration (don't use blink)
• a:hover
• font-family
• font-size
• font-weight
• color
• text-decoration (don't use blink)
• a:active
• font-family
• font-size
• font-weight
• color
• text-decoration (don't use blink)

• From Dreamweaver, print your academic_resume.css document
• Open index.html in Google Chrome, and print it.
• Staple them together with the academic_resume.css on top.
• Your name is already printed on the bottom of the document.
• Hand them in.