User Guide
80 Chapter 6 Editing Pages
Formatting pages with Cascading Style Sheets
This section describes Cascading Style Sheets (CSS), and provides information for
using the integrated TopStyle Lite Style Editor and for coding styles by hand.
About Cascading Style Sheets (CSS)
CSS (also known as styles) lets you specify a format for a page element, such as a
paragraph or table, and then specify where to apply this format.
You can create a style block (also called embedded styles) in a single HTML page to
apply the formats to a single block of HTML code; or you can create a separate CSS
file and apply its formats across one or more pages in a website.
At whatever level you specify styles, the styles “cascade” down to apply to the lower
levels as well. For example, a style block in the <head> section applies to the entire
HTML document, and a style block in a
<table> tag applies to the entire table. When
there is more than one style block, the “local” style rules; in the preceding example,
the table style overrides the head style in the table.
About classes
A class is just like a style, except that it is not automatically applied to a page element,
but only to a page element whose tag contains the attribute
class="<class name>";
for example, <p class="note">.
This means that you can define an unlimited number of styles for a single page
element. For example, you can define classes for a paragraph tag to apply different
formatting to introductory text, important notes, and contact information.
Benefits of using CSS
Styles provide the following benefits:
• Lets you quickly preview text, color, and layout designs. This is a great help when
you are prototyping a new or redesigned website. Imagine the alternative:
changing every tag with formatting—for example,
<font="Arial" size=”10”
color=”black”>
and <p align="center">—in every page!
• Lets you make rapid and dramatic changes to all HTML elements in a website;
you can reference a style sheet by adding a single attribute to the
<head> tag and,
by doing so, immediately change the look of the entire page.
• Ensures a consistent look and feel throughout the website, even with multiple
contributors. This makes it easier for visitors to find what they need.
• Reduces the amount of code required to format a page, so a browser can
download, process, and display pages more quickly.
• Lets you manipulate styles and other document objects, when used in
conjunction with scripts and Dynamic HTML (DHTML).
• Lets you focus on developing content, and solving any organizational or
navigation issues in your site, instead of maintaining formatting code.