Dreamweaver: Chapter 3

Chapter 3: CSS Basics

Goals for this Lesson

• CSS (cascading style sheets) terms and terminology
• The difference between HTML and CSS formatting
• How to write CSS rules by hand
• How to use the CSS Designer panel
• How to format your HTML text and structural elements

Objective

• Insert inline styles to a webpage.
• Create and style an external stylesheet.

Instructions

1. Open Dreamweaver and be sure to work within your Web Design and Interactive Media website from Chapter 2 Exercise. The Web Design folder on the desktop should be the Local Site Folder.
2. Open the index.html file.
3. In the first paragraph make the words: “exciting program of study” bold and italic by using the properties tab.
4. Create an inline style to the word: “Certifications” (the h3 for the second paragraph) that changes the color of the text to #4A7ABE. Hint: use the properties tab.
5. Create a new CSS file and name it syles.css
6. Create a style that centers the header tag.
7. Create a style that affects the nav ul to have:
   1. list-style-type: none;
   2. margin: 0;
   3. padding: 0;
   4. overflow-x: hidden;
8. Create a style that affects the nav ul li to have:
   1. float:left;
9. Create a style that affects the nav ul li a to have:
   1. display: block;
   2. padding: 16px;
   3. text-align: center;
10. Create a style for the footer that centers it, gives it a background color of: #4A7ABE, and changes the text color to white.
11. Create a style for the nav that gives it a background color of: #4A7ABE.
12. In the style you created for the nav ul li a add a style that changes the text color to white and gives a text decoration to none.
13. Create a style for the main that gives it a width of 90%, margin of auto, and padding of 10px.
14. Create a style for the body and give it a background color of your choice!
15. Create a style for the p tag that changes the font to a font of your choice.
16. Create a style for the h1, h2, h3, h4, h5, h6 that changes the font to a font of your choice!
17. Save your work! File > Save All.
18. Attach the existing CSS file that you just created to the existing about.html and contact.html page.
19. Save your work and Preview it! File > Save All.
20. Submit the root folder that you named: Web Design into the shared drive.