Understanding CSS


Cascading Style Sheets are all about style, looks, and presentation. CSS properties and rules give you an amazing array of control over foregrounds, backgrounds, colors, fonts, positions , alignments, margins, borders, lists, and other aspects of presentation.

Appendix C contains a complete list of CSS properties. That list is amazing in its scope, but it can be a little overwhelming as well. Dreamweaver organizes all the properties listed in Appendix C into a couple of manageable interfaces: the CSS Styles Definition dialog and the CSS Styles panel. With these two features, you can control every style aspect of every element on your page. From your document's body to its divs, paragraphs, lists, tables, and links, to using spans to style individual words or even individual letters , it's all handled with the CSS Styles panel or the CSS Styles Definition dialog.

Content vs. presentation

Content is king, the saying goes, because users seek content when they come to your site. Content is the actual information in the headings, paragraphs, lists, divs, tables, forms, images, blockquotes, links, and other HTML elements you use on a page. With no styling, content looks something like an outline ( Figure 5.1 ).

Figure 5.1. A page with no styles shows content and working links, even though it isn't beautifully arranged.


The unstyled content should be useful and informative, even if it doesn't look like much. That's because some users are getting only the text content; for instance, those with screen readers, PDA browsers, cell phone browsers, or text-only browsers. Some of these also get images, but not all, so be careful to never require images on your pages.

Once you add presentation rules in a style sheet, you have the layout, color scheme, font choice, background, and other "pretties" that make a Web page look good in a standard browser ( Figure 5.2 ). The content itself hasn't changed. What has changed is the way the content is presented on the page. With different presentation, that is, different styles, the same content could look entirely different.

Figure 5.2. Add styles to the same page to determine rules for layout, background, fonts, margins, and other presentation features.


The power of CSS derives from the separation of content from presentation. You can make the content look like anything you want simply by changing the way it is styled and presented.

Setting CSS Preferences

When you're first learning CSS, you'll want to set your preferences so that Dreamweaver gives you the maximum help:

  • In the General category, be sure you've selected "Use CSS instead of HTML tags" ( Figure 5.3 ).

    Figure 5.3. Set Dreamweaver General Preferences to use CSS instead of HTML tags.

  • In the CSS Styles category ( Figure 5.4 ), setting the styles to use shorthand is optional. Shorthand saves on bandwidth when downloading style sheets as default values are omitted. For the most dependable results, don't use shorthand.

    Figure 5.4. The CSS Styles Preferences should be set based on how you like to work.

    For the "When double-clicking in CSS panel" preference, it's easy to rely on "Edit using CSS dialog" while you learn about styles. If you find you prefer to edit using the Properties pane, you can change it later.


Anatomy of the CSS Styles Panel

In Dreamweaver 8, the CSS Styles panel has been extensively reworked and revised, so it's worth taking the time to familiarize yourself with it even if you're a long-time Dreamweaver user . And if you're new to Dreamweaver, take the time now because the CSS Styles panel will become a good friend.

The illustration (below left) shows the CSS Styles panel in All mode, with the All Rules and Properties panes displayed. The Properties pane is in Category view.

The illustration on the bottom right shows the CSS Styles panel in Current mode, with the Summary, Rules, and Properties panes displayed. The Properties pane is in Set view.

The CSS Styles panel in All mode shows the All Rules and Properties panes.

The CSS Styles panel in Current mode. The Summary, Rules, and Properties panes are visible.





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