Accessibility

Dreamweaver Article

 

Designing with CSS – Part 3: Creating Your First Design Without Tables


Table of Contents

  1. Introduction
  2. Using a Correct Doc Type
  3. Writing the Body Selector
  4. Writing the Wrapper Selector
  5. Creating the Banner Graphic
  6. Creating the Banner Selector
  7. Creating the Navigation Selector
  8. Defining the Link Style
  9. Setting Up the Content Div
  10. Clearing Elements
  11. Writing the Footer Selector
Comments

Writing the Body Selector

In Part 1, you learned about defining the margins and padding on the body selector and you saw how CSS allows you to set up margin and padding values. In Part 2 you saw how it is possible to set up a series of default settings, and how other selectors can inherit them. Using this method reduces the size of your CSS file and decreases any style maintenance.

You can now write your zeroing and body selectors into your basiclayout.css file. Set up the zeroing selector as you were shown in Part 2.

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}
  • Background color of #666666
  • Font family of Arial, Helvetica, sans-serif
  • Default font color of #666666
  • All four margins set to 0 (zero)
  • Four sides set to 0 (zero) padding
  • Default size of 100%

If you set up your body selector correctly, it should resemble the code below:

body {
font-family: Arial, Helvetica, sans-serif;

color: #666666;
background-color: #666666;
}

Note: If you use Dreamweaver CSS dialog boxes, you may see 0px; as the value of the margin and padding properties instead of 0;. This is OK, although it is not necessary to provide a measurement unit for zero.

In this series of tutorials I have covered the following methods of adding selectors to your CSS file:

  • Using Dreamweaver dialog boxes
  • Hand-coding the selectors directly into the CSS file

It makes sense to hand-code selectors if you have the confidence to do it right. If you prefer to use Dreamweaver dialog boxes, that is fine too. However, be sure to examine the CSS file as you work on it because it will help you understand CSS syntax in greater detail. I will be using hand-coding and code hints for writing CSS selectors but use whichever method suits you best.

Page 3 of 11
Previous Page
Next Page