About style sheets
Style sheet files
store common design and layout information independently of the
page content of HTML or JSP files. By using style sheets you can:
- Create a standard design for your HTML pages that
can be reused for additional pages as needed. - Make it easy to change style definitions within
a Web site. Editing a style sheet propagates any style change across
all of the HTML pages that use that style sheet. - Separate document design from content development,
letting some team members concentrate on the design, while other
team members develop content.
Working with styles
You can define and modify style definitions in external style
sheets or inside an HTML page. Precedence rules govern how your
document appears when the browser finds overlapping style definitions.
Styles for the same element might be defined in any of the following
(listed inversely to the order of precedence as defined for the
Microsoft Internet Explorer browser):
- External style sheets store
style definitions in separate files external to HTML pages. These
files are also known as cascading style sheets because styles can be defined
at different levels, with a browser’s interpretation of the
styles cascading from one level to another. - Embedded styles can be used
to create new styles for HTML elements or to modify the appearance
of styles from style definitions in an external style sheet. The
new or modified styles are included in a STYLE element tag that
you add to the Head section of an HTML page. - Inline styles can be used to create new styles for
HTML elements or to modify the appearance of embedded and external
styles. You define inline styles as style attributes of elements
on an HTML page. - Classes and IDs can have
styles of their own. These styles are linked to particular objects
and classes, not to particular elements. - Scripts can modify any style.
With recent versions of HTML, any style on a page is considered
an object. Scriptable objects should be assigned IDs to support
script debugging activities. The Style Sheet editor lets you create
style objects associated with IDs.
For information about the Script editor, see Chapter 6, “Writing Scripts “.
Syntax for style attributes and selectors
For external style sheets and embedded styles, a selector
is the link between an HTML element and a style attribute. The selector
specifies what element is to be affected by a declaration for a
specific style attribute. The style is that part of the rule that
sets forth what the effect will be. In this example:
|
1 |
H1 {color: red } |
the selector is H1 and the style is color:red
.
When this declaration is included in an embedded style tag on an
HTML page, or in an external style sheet linked to the page, all
H1 elements on the page will appear in red (unless overridden by
inline styles or scripts for particular elements).
You can use the Web Target style sheet editors to assign specific
style attributes to HTML elements and selectors through a user-friendly
interface. The editors insert the correct syntax for your style
definitions onto your HTML page or external style sheet.
Working with IDs and classes
Classes and IDs, as well as HTML elements, are implemented
as selectors in external or embedded style sheets. In the terminology
for style sheets, a selector is an element to which a style definition
is assigned. Selector elements are not
enclosed
in angle brackets (< >).
If you define classes and IDs in external style sheets, they
are available to all of the files that share that style sheet. You
can define style characteristics for an ID or class, then assign
that ID or class as an attribute to an HTML element.