• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Using CSS Styles

From the standpoint of the site designer, the main benefit of using Cascading Style Sheet styles in a Web site is that with CSS, changing the definition of a style changes all the instances that have that style on the site. For it to work on many pages, the style has to be in an external style sheet, which is a separate file on the site. Pages on the site contain a reference to the external style sheet, and “pick up” their styles from it. For example, imagine that a Web designer creates a CSS style named CautionText that is used on dozens of pages on a site. The text is red, bold, and large (the equivalent of 24 points). After a bit of friendly counseling by his supervisor, the designer tones down CautionText to be less visually obtrusive. Because the style is a CSS style, changing the definition of CautionText in the external style sheet automatically changes every use of CautionText in the whole site.

Also, by using CSS styles, and by asking the site administrator to disable use of anything other than CSS styles, the designer can make sure that you, the Contribute user, don’t have the ability to inadvertently mess up the site design by applying HTML headings, making text bold, or doing things the designer doesn’t want. You’ll only have the ability to add and edit text and images, which lets the designer sleep at night.

One more thing: in addition to using CSS styles in external style sheets, a page can have internal CSS styles. Those are styles that are specific to just the document that they are in.

New to Contribute 3, you can create, delete, and rename internal CSS styles for your current document (if the administrator allows it for your user role), but not for the whole site (you need Dreamweaver or a comparable tool to create external style sheets). As you style text, Contribute automatically adds the internal style to the Style menu, named style1, style2, and so on. You can then rename these styles to something more descriptive.

You can also use the CSS styles in external style sheets or that are attached to the site templates. If the designer has created CSS styles, and you have the editing permission to also apply HTML styles, you should use the CSS styles in preference to the HTML styles. It makes your Web site easier to maintain, improves the site’s performance for visitors, and makes it easier to change the site in the future, when the inevitable site redesign happens.

As you can see in Figure 4.14, the names and appearance of CSS styles appear in the Editing toolbar’s Style menu, along with the seven HTML styles (Normal plus Headings 1 through 6; in Figure 4.14, the site administrator had not disabled HTML styles). The display of the CSS style’s appearance, rather than just its name, is another new feature in Contribute 3. The Style submenu of the Format menu shows just the style names (Figure 4.15).

Figure 4.14. When a site template includes CSS styles, they appear in the Editing toolbar’s Style menu, as they would appear in the document.


Figure 4.15. The Style submenu of the Format menu displays the plain-text names of the CSS styles.


✓ Tips

  • Besides giving finer control over the look of type, CSS styles are useful for positioning elements on the page. Don’t be surprised if text moves around as you apply a CSS style to it.

  • You can clear a style and return to the default text style for the page by selecting the text you want to change and then choosing Normal from the Style menu in the Editing toolbar.

  • Behind the scenes, Contribute uses a third kind of CSS style, the inline style. That’s a style that is applied to a single HTML tag. Contribute uses inline CSS to do paragraph breaks (see the “That’s the Breaks” sidebar, earlier in this chapter).

  • Some CSS styles are redefined HTML tags. For example, a designer can redefine the Heading 2 style to be a different font as well as bold, centered, and/or in a different text color. You still apply Heading 2 from the Editing toolbar’s Style menu, but the effect is different.

  • When you see links on Web pages that are not underlined, or are the same color as the body text but are bold, the trick was done using CSS styles.

  • When you launch Contribute, it connects to each site for which you have a site connection and makes sure that those sites are using the latest versions of the templates on each of them. As part of the same process, Contribute reads the style sheets for the sites.

  • The Contribute help file refers to internal CSS styles as user-defined styles.


To apply CSS styles:

1.
Click within the line you want to style to place the insertion point, or select the text you want to style.

2.
Choose Format > Style, then select the CSS style from the Style submenu.

or

Choose a CSS style from the Style menu in the Editing toolbar.

To create an internal CSS style:

1.
Select the text you want to style.

2.
Apply the formatting you want; you can use any combination of Contribute’s formatting features.

Contribute automatically creates an internal CSS style with the characteristics you just applied tot he text, and adds an automatic style name (in the format styleX, where X is the number of internal styles you create) to the Style menu in the toolbar (and to the menu).

To rename an internal CSS style:

1.
Choose Format > Style > Rename Style. You can instead use the Style menu in the editing toolbar, or Right-click (Ctrl-click) to use the Style menu in the shortcut menu.

The Rename Style dialog appears (Figure 4.16).

Figure 4.16. Choose a style from the pop-up menu in the Rename Style dialog.


2.
From the Style pop-up menu, choose the style you want to rename.

3.
Enter the new name in the New Style Name field.

You cannot include any spaces or punctuation marks, except for a hyphen or an underscore, in the style name.

4.
Click OK.

✓ Tip

  • You cannot rename any external CSS styles that are in your document or are part of the document’s template.


To delete an internal CSS style:

1.
Choose Format > Style > Delete Style. If you prefer, use the Style menu in the editing toolbar, or Right-click (Ctrl-click) to use the Style menu in the shortcut menu. The Delete Style dialog appears.

2.
From the Style pop-up menu, choose the style you want to delete.

3.
Click Delete.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint