|
Using the CSS Styles Tab
Setting up a page for Cascading Style Sheets
(CSS) may be overwhelming, but you can master this seemingly
complicated process by using Dreamweaver's CSS Styles
tab to create and modify CSS styles in Dreamweaver. This
document describes your first step in creating a Cascading
Style Sheet: accessing and using the CSS Styles tab,
the tool that you will use to create and define CSS styles.
For more information on the advantages of
CSS and types of CSS styles, see
Overview of Cascading Style Sheets. Other helpful CSS
documentation includes
Select CSS terms,
Formatting with CSS, and
Measurement Units and Color References.
Sections of this document include the
following:
 Accessing
the CSS Styles Tab
Before you can begin creating CSS styles,
you need to open the CSS Styles tab located within
the Design pane. After you have accessed the CSS
Styles tab, you can begin
creating and
applying styles in
embedded styles sheets or
external style sheets.
- To access the CSS Styles tab,
from the Window menu, select CSS Styles
OR
Press [Shift] + [F11]
The CSS Styles tab appears on the Design
pane.
Using
the CSS Styles Tab
The CSS Styles tab toggles between
two different views: Apply Styles and
Edit Styles. To use Cascading Style Sheets
effectively, it is important to understand and become
comfortable using both of these views.
Apply Styles View
The Apply Styles window lists the
different custom styles that have been applied to a web page
or to specific elements on a web page. In the Apply Styles
window, styles are identified by name, which is preceded by an
icon indicating the style type (external or embedded). This
information can be helpful if you have multiple custom styles
assigned to the same document.
Use the Apply Styles view to apply
existing styles to elements on the web page. For more
information on applying styles, see
Applying Styles.
NOTE:
If you have not yet defined any CSS styles, the Apply
Styles view will only show one entry: No CSS Style.
As you define custom styles, those styles are added to the
view.
Edit Styles View
The Edit Styles window lists all of
a web page's CSS styles and their characteristics. The style
names are listed in the left column of the Edit Styles
window, and their corresponding descriptions are listed on the
right. Use the Edit Styles window to
modify existing styles. If you add a new style, it will
automatically be added to the list.
CSS Styles Toolbar
In addition to the Apply
Styles and Edit Styles windows, the
CSS Styles tab also features a toolbar for attaching,
creating, editing, and deleting the various CSS styles.
|
