Designing with CSS in Dreamweaver MX 2004 – Part 3: Writing the Body Selector
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 body selector into your basiclayout.css file. Set up the body selector to include the following properties and values:
- Background color of #666666
- Font family that includes Verdana as the first choice and provides a final option of 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:
font-family:Verdana, Arial, Helvetica, sans-serif;
Note: If you use Dreamweaver’s 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’s 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’s 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.