|
Formatting with CSS Styles
After you have
created an embedded or external style sheet, you can
apply the style to text, objects, or elements as you create your web
page. You may also find that you want to change a style
you created, or even delete it altogether.
For more information on the advantages of CSS and types of
CSS style sheets, see
Overview of Cascading Style Sheets. For information on creating
embedded styles and
external style sheets, see
Creating Style Sheets. For information on accessing and using the CSS
Styles Tab, see
Using the CSS Styles Tab. Other helpful CSS documentation includes
Select CSS terms,
Formatting with CSS, and
Measurement Units and Color References.
This document supplies instruction for the following:
 Applying
Styles
HTML Tags and CSS Selectors
When you redefine an existing HTML tag or CSS selector, the
style definition is automatically applied to the HTML code.
Custom Styles
Since custom styles are not attached to a specific element of
the HTML when they are created, you need to apply them to individual design
elements. You can apply a custom style to selected
elements through the CSS Styles Tab, HTML tags
through the Tag Selector, or HTML tags through the
CSS Styles Menu. Also, be sure to review the
HTML considerations associated with applying custom styles.
Applying Custom Styles to a Selected Element: CSS Styles Tab
-
From the Design view, select the object or text
you want to apply the class style to
-
From the CSS Styles tab, select
Apply Styles
-
From the Apply Styles view, select the desired
class style
The class style will be applied to the object or text.
Applying Custom Styles to a Selected Element: Document
-
From the Design view, right-click the object or
text you want to apply the class style to » select CSS Styles
» select the class style you want to apply
Applying Custom Styles to a Selected Element: Properties Pane
-
From the Design view, select the object or text
you want to apply the class style to
-
In the Properties pane, click
TOGGLE CSS/HTML MODE
-
From the CSS Style pull-down list, select the
appropriate class style
Applying Custom Styles to an HTML tag: CSS Styles Tab
-
From the Code view, place the insertion point
within the tag you want to apply the class style to
-
From the CSS Styles tab, select
Apply Styles
-
From the Apply Styles view, select the desired
class style
The class style will be applied to the individual tag.
Applying Custom Styles to an HTML Tag: Tag Selector
-
From the Document Window Tag Selector, select the
HTML tag you want to apply the class style to
The tag will appear bold.
-
Right click the selected tag » select Set Class
» desired class style
The class style will be applied to the individual tag.
Editing
Styles
As you are designing your web pages, you may decide that you
would like to change a style that you have already defined. For information
on using the Editing Styles view, see the
Edit Styles section of
Using CSS Style Tab.
-
Access the CSS Styles tab
-
From the CSS Styles tab, select
Edit Styles
-
From the Edit Styles window, select the style
definition you would like to edit
-
From the CSS Styles toolbar, click EDIT
STYLE SHEET
The CSS Style Definition dialog box appears
-
From the Category section, select the style
element you would like to redefine
-
In the corresponding category section to the right, select
the appropriate options
-
Click OK
The CSS style will automatically apply to all applicable tags on the web
page.
Deleting
Styles
As your web page progresses, you might decide that you would
like to delete a style or style sheet.
-
Access the CSS Styles tab
-
From the CSS Styles tab, select Edit
Styles
-
From the Edit Styles view, select the style or
style sheet that you would like to delete
-
From the CSS Styles toolbar, click DELETE
CSS STYLE
The style sheet entry is removed from the CSS Styles tab, and the
style definition is removed from all applicable tags on the web pages.
|