Dreamweaver CSS Categories


Dreamweaver uses the CSS Rule definition dialog to break down CSS into various categories. Below, you'll find each of the categories in the CSS Rule definition dialog, along with what you can find in that category. If you want more details about valid values for each field, check out Appendix C.

Type (Figure 5.7)

  • Font

  • Size

  • Style

  • Line height

  • Decoration

  • Weight

  • Variant

  • Case

  • Color

Background ( Figure 5.9 )

Figure 5.9. Always give a page a background color, even if you're using a background image.


  • Background color

  • Background image

  • Repeat

  • Attachment

  • Horizontal position

  • Vertical position

Block ( Figure 5.10 )

Figure 5.10. Set rules for spacing and alignment of text in the Block category. Text indent affects first line onlyyes, you can indent paragraphs with CSS!


  • Word spacing

  • Letter spacing

  • Vertical alignment

  • Text align

  • Text indent

  • Whitespace

  • Display

Box ( Figure 5.11 )

Figure 5.11. Set rules for width and height in the Box category. Margin and padding are both transparent, which means that a background shows through either.


  • Width

  • Height

  • Float

  • Clear

  • Padding (Same for All, Top, Right, Bottom, Left)

  • Margin (Same for All, Top, Right, Bottom, Left)

Border ( Figure 5.12 )

Figure 5.12. Set rules for borders in the Border category. Uncheck "Same for all" to style borders individually.


  • Style (Same for All, Top, Right, Bottom, Left)

  • Width (Same for All, Top, Right, Bottom, Left)

  • Color (Same for All, Top, Right, Bottom, Left)

List ( Figure 5.13 )

Figure 5.13. Set rules for list type and position in the List category. If you want an image instead of a standard bullet, specify it here.


  • Type

  • Bullet image

  • Position

Positioning ( Figure 5.14 )

Figure 5.14. Set position in the Positioning category. The z-index refers to the stacking order when more than one layer occupies the same position. Clip refers to material that might overflow the size set for width and height.


  • Type

  • Width

  • Height

  • Visibility

  • Z-index

  • Overflow

  • Placement (Top, Right, Bottom, Left)

  • Clip (Top, Right, Bottom, Left)

Extensions ( Figure 5.15 )

Figure 5.15. Set extensions in the Extensions category. Internet Explorer for Windows is the only browser that supports the Filter extensions.


  • Page break (Before, After)

  • Cursor visual effect

  • Filter visual effect

Tips

  • Page break properties are used in style sheets for print.

  • The eight categories of style definitions in the CSS Rule definition dialog cover nearly every CSS property included in Appendix C. Even more impressive is that you can apply any of the properties in any of the eight categories to any element in your document. Backgrounds, for example, can be used in the body element, but can also be used with div , class , table , blockquote , span , acronym , quote , form , paragraphs, or any other element.

  • Don't create classes to describe text when there are already logical tags that do the job. For example, don't create a class to make text big and bold and use it as a heading. HTML already provides six heading tags ( h1 , H2 , h3 , h4 , H5 , and h6 ). Simply redefine one of the existing heading tags to suit your purpose. Remember, you want to use HTML to create a logical structure for your content, and CSS to style the structured content.





Macromedia Dreamweaver 8 for Windows & Macintosh Visual QuickStart Guide
Macromedia Dreamweaver 8 for Windows & Macintosh
ISBN: 0321350278
EAN: 2147483647
Year: 2005
Pages: 239

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net