Graphics Programs Reference
In-Depth Information
Dreamweaver uses CSS styles by default to format page elements. When you defi ned
the page properties for the NextBest Fest site, Dreamweaver added CSS styles that con-
trol the appearance of the text placed in the page. For example, the text that you pasted
in the home page is displayed in the Arial, Helvetica, sans-serif font group, which you
defi ned as the page font when you set the page properties. You can also create CSS styles
yourself.
A CSS style sheet provides a convenient way to store styles that can be defi ned in one
location and then applied to content in many other locations. This ability to separate the
look of the site from the content of the site lets the designer more easily update the Web
site's appearance. Designers can redefi ne an existing CSS style, and any content to which
that style has been applied is then updated to refl ect the changes. This makes changing
the font for all headings in a site or changing the color of body text on all the pages a
simple task.
Previewing Your Site
Although CSS styles are the current standard for formatting the look and layout in
Web pages, some limitations still exist. CSS styles were adopted as part of HTML 4 and
are not fully compatible with older browsers. Be sure to preview the Web site in every
browser and browser version you plan to support before making the site public. This
is the best way to verify that all aspects of the site work and display as you expect. In
CS5 Dreamweaver has made this process easier by introducing the BrowserLab exten-
sion which enables you to see screen shots of a Web page as it will display in various
browsers. BrowserLab displays various versions of Internet Explorer, Firefox, Chrome,
and Safari and is currently free and available on the Adobe Web site to anyone with an
Adobe User Id. You can get to the BrowserLab extension in Dreamweaver by opening
the Adobe BrowserLab window in the extensions list of the Window menu.
Creating CSS Styles
You can create styles using the CSS Styles panel located in the CSS panel group. When
you create a CSS style, fi rst you choose a selector type, then you choose the selector
name, and fi nally, you choose the location of the style. Selectors enable you to bind
styles to elements in your pages. The four types of CSS selectors are class, ID, tag, and
compound (based on your selection).
You create a class selector from scratch and you can apply it to any HTML element
selected in the page. A class can be applied to any tag even if that tag has been rede-
fi ned or has other styles applied to it. The class selector is the most versatile selector.
ID selectors are similar to class selectors with one major distinction: they can be used
only once in a page. Because of this, ID selectors are frequently used to create page
layouts where you defi ne each section of a page only once.
The tag selector is an existing HTML tag that you modify. You can change and remove
existing attributes or add new attributes to any HTML tag to make the tag more useful.
This is probably the most common type of CSS style. When you redefi ne an HTML tag,
the modifi ed CSS style is used in every instance of that tag.
The compound selector is a combination of the ID, class, and tag styles and is used to
redefi ne formatting for a group of tags only when those tags appear in the defi ned order.
Compound selectors are especially helpful in creating a special look for text only when
it displays in a certain area of the page. For example, if you defi ne the footer area of the
page using an ID style, you could create a compound style that tells the browser to dis-
play any text in a paragraph tag inside that area of the page in a smaller font size.
After you decide on a type of style, you choose a name or tag to redefi ne. Finally, you
select the location in which to defi ne the style. You can save the style you are creating in
You can also create styles
in the CSS pane of the
Property inspector.
Search WWH ::
Custom Search