Cascading Style Sheets (CSS) are rapidly becoming a significant component of Web sites because they offer so many advantages in design and content management. The HTML 4.0 specification strongly encourages their use despite the limitations of CSS support in browsers.
Style sheets can be added at any point in a site's development process, but ideally the design specification for a site will be implemented via style sheets, eliminating the need to code and maintain formatting for individual tags. More significantly, CSS lets developers and content providers focus on organizational and navigation issues by separating formatting from content. As a site's structure evolves, styles can be globally changed, added, and deleted, giving developers greater freedom (and more time!) to achieve design goals.
A site can be retrofitted with CSS, although this requires deleting tag-based formatting code.
If you want some practice defining and applying styles, see the "Cascading Style Sheets Tutorial".
If you are new to style sheets, the first thing you need to master are the terms you use when working with styles. Style elements apply to HTML elements, but there isn't a one-to-one relationship.
HTML tags contain attributes with values, such as this sample:
<h1 align="center"><font size="+2" color="green">Some Text</font></h1>
The h1
and font
tags contain attributes whose values set the positioning and the font size and color for the enclosed text.
Style sheets contain rules that apply to selectors which use declarations to specify the formatting:
h1 { text-align : center; font-size : larger; color : Green; }
In this example, the h1
selector contains declarations which set the positioning and text size and color. If this is the only rule in effect for h1
, then every instance of the <h1>
tag will display this formatting.
Cascading Style Sheets are a sophisticated tool for precisely controlling the look of Web pages, but properly implementing them requires learning some new skills and thinking about document layout in a different way.
Fortunately, you can start off with simple rules for common page elements and go on to create more complex styles as you become familiar with the techniques. Studio's Style Editor gives you an instant preview of rules as you define them, before you apply them in a document. You can then preview entire pages in a browser to see how your styles interact visually.
HomeSite's style editor, TopStyle Lite, provides a complete interface for designing and implementing Cascading Style Sheets. It is a special version of TopStyle, an application written by Nick Bradbury, the original developer of HomeSite.
TopStyle Lite contains it's own online help system that covers CSS basics, HomeSite integration, and features like Style Insight and the Style Inspector that make defining, previewing, and applying styles a snap. The help system also includes information about upgrading to the full version of TopStyle from Bradbury Software.
This illustration shows the main components of the TopStyle interface. See the online help for a description of its features and user options.
The Style Sheets topic in the online HTML Reference contains a lot of useful information on syntax and usage requirements for styles and presents numerous code examples.
You may want to work through the procedures in the "Cascading Style Sheets Tutorial" to get some experience with TopStyle. If you complete both the HTML and CSS tutorials, you can compare the results of using tag-based formatting and styles to layout the same sample Web page.
![]() |
To create a new style sheet: |
This selection determines which properties and values are available for use in the style rules you create.
Use this dialog to select Class and ID attributes for the selector. You can also define pseudo-classes and pseudo-elements for specialized uses in the style sheet.
Formatting changes are shown in the Preview pane.
To review the structure of the style sheet, click the Selector tab in the Inspector
![]() |
To add a style block to a document: |
![]() |
To link a style sheet to a document: |
![]() |
To edit existing styles: |
You can use the following commands to perform style editing tasks: