Learnthat.com

Working with Cascading Style Sheets (CSS)

Cascading style sheets (CSS) offer you more control over the appearance of elements on your web pages by implementing a series of rules that describe those elements. The use of styles prevents the appearance of text from being determined by the viewer's browser preferences, as is often the case with standard HTML. For example, you can use a style sheet to define the font, color and size of the text you use for various headings, for paragraphs, and for special purposes such as tips in a tutorial. Even if the viewer's browser uses a default font different from the one you've used, the text on your site will appear as you've defined it.

Finally, you can use cascading style sheets to create custom classes, essentially allowing you to create your own tags, rather than being limited to only existing HTML tags. This means that you can define rules that control the appearance of virtually any element on your page, and then update those elements globally simply by changing the style sheet.

Creating and Applying Style Sheets

The CSS Styles panel in the Design panel group lets you easily alter the style of existing HTML tags, as well as create custom classes.

To alter the appearance of existing tags:

1. On your web page, highlight the text whose appearance you want to change.

Notice that on the status bar the tag is selected. You could have also placed the cursor inside the text you wanted to change, and then used the Tag Selector to select the tag.

2. Click the CSS Styles tab in the Design panel group.
3. At the bottom of the CSS Styles panel, click the New CSS Style button.

The New CSS Style dialog opens.

4. Make sure the Tag option button is selected.
5. If necessary, choose the tag whose style you want to change from the Tag drop-down menu.

Tip:

If you selected a tag from the page (as described above), it should already be selected in Tag field.

6. You can choose to change the style for the entire site, or for only the current web page. For consistency, you generally want to define the styles of common tags for the entire web site; that way, all heading and body text appears the same on all the pages of your site. For Define in, select (New Style Sheet File). This creates a new style sheet that will contain all the style definitions for your web site.

Tip:

If a style sheet already exists for your site, it will also appear in this drop-down menu. You can choose to define the style in that sheet by selecting it from the menu, or you can create a new style sheet, if you want to keep certain styles separate for use in later sites.

(Continued Next Page)