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

Lesson 11. Using Cascading Style Sheets > Updating a style throughout a documen...

Updating a style throughout a document

Now you'll edit a style to see how your document is updated instantly.

If necessary, resize the index.html document window so that you can see several different headings and body text.

In the index.html:CSS Editor window, select the h2 element. Notice its attributes are displayed in the Selector and Properties tab in the CSS Editor.

In the CSS Style Editor, click the Font Properties button (). Choose a different color from the Color pop-up menu (we chose Maroon), and see how the change is immediately reflected in the document window.

Different color applied to h2 element

It's that easy to change a style that you've defined and apply it globally.

To make the font size a little smaller, enter 1 for Size and choose em from the pop-up menu.

About absolute versus relative font sizes

Note the different units of measure in the size pop-up menu. CSS supports two types of measurements: absolute and relative. An absolute unit of measurement such as pixel is useful when you need precise control over the placement of text and graphics on a page. But type sized in pixels may not print well from some browsers, and it can limit accessibility to your site for visually impaired viewers since it forces them to view type at a fixed size. A relative unit of measurement, such as the em, sizes type in relation to the font size settings active in a visitor's browser, and is a better choice if you are concerned about accessibility issues, or if the exact placement of type and graphics on your pages is not essential.

When you create a style using the Inspector, GoLive writes the HTML code for you. Now you'll take a look at that source code.

Click the Selector and Properties button () in the CSS Editor, and note the properties of the h2 element.

Now switch to the Source Code Editor in the document window by clicking the Source tab above the document window.

Notice the statement in the following illustration:

In the statement, h2 is the selector, and the information in brackets declares that the color property has a value of maroon, the font size property has a value of 1 em, and so on.

Remember that style rules are a statement consisting of a selector and a declaration on that element's property and value (that is, its specific appearance).

Click the Layout tab in the document window to return to the Layout Editor.



Not a subscriber?

Start A Free Trial

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