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

Lesson 11. Using Cascading Style Sheets > Exploring an internal style sheet

Exploring an internal style sheet

You'll start your work in the lesson by exploring a style sheet that was created with a document.

Start Adobe GoLive.

By default, an introductory screen appears prompting you to create a new page, create a new site, or open an existing file.


You can set preferences for the introductory screen to not appear when you start GoLive. If the introductory screen doesn't appear, choose File > Open and go to step 3.

Click Open to open an existing file.

Open the poetrypond.site file in Lessons/Lesson11/11Start/poetrypond/.

In the site window, double-click index.html to open the home page of the poetrypond Web site.

The basic structure and simple formatting of this document was achieved by applying the basic HTML elements such as h1, h2, and p to raw text. The finer styling such as the font size and color, margin widths, and even the white background of the document have been applied using a style sheet.

First you'll view the document without the style sheet formatting. You can preview your pages in one of several ways. You can choose a browser that doesn't have CSS support; you can turn off CSS support in your browser; or in the GoLive Web Settings, you can create a new browser profile that does not support CSS.

In this part of the lesson you'll create a browser profile that does not support CSS.

Choose Edit > Web Settings, (Windows) or GoLive > Web Setting (Mac OS) and click the Browser Profiles tab.

Click to select a browser profile (we used GoLive), and right-click (Windows) or Control-click (Mac OS) the browser name to display the context menu. Choose Duplicate.

Duplicating a browser profile

Notice that the lock icon does not appear, indicating that this duplicate browser profile can be edited.

Choose Window > Inspector to open the Inspector palette, or click the Inspector tab if the Inspector is collapsed.

In the Basic tab of the Root Style Sheet Inspector, enter No CSS Support for the name of the browser profile.

Click the Settings tab in the Root Style Sheet Inspector, and deselect the Can Handle Style Sheets option.

Click the document window to make it active.

Choose Window > View to open the View palette, or click the View tab if the palette is collapsed.

In the View palette, choose No CSS Support from the Basic Profile pop-up menu.

Choosing browser with no CSS support in View palette

Because you are now using a browser profile that does not provide CSS support, you have in effect turned off style sheets for the current document. In the document window, notice how the document display changes when the style sheet isn't used.

In this example, the headings lose their color properties and the fonts change to a larger serif face.

Style sheet active

Style sheet turned off

You can see how the document got this basic HTML structure by checking the Set paragraph format menu on the Main Toolbar.

In the document window, insert the text cursor in the “Live webcast of poetry reading” heading or triple-click to select the entire heading, and then notice the Set paragraph format menu on the Main Toolbar.

The Set paragraph format menu displays the text's current HTML formatting. Header 2 indicates that the text is tagged as an HTML h2 element. Similarly the “Events” text is formatted as Header 1, which translates to an HTML h1 element; the body paragraphs are formatted as Paragraph, which translates to an HTML p element.

Format menu shows Header 2; corresponding text in document

If you're new to HTML, click the Source tab () in the document window to see how GoLive has written the HTML code and tagged the various chunks of text.

Source view

Click the Layout tab () to return to the Layout Editor.

Now you'll take a look at the formatting that the style sheet controls.

Choose Explorer 5 for your platform (Windows or Mac OS) from the Basic Profile pop-up menu in the View palette. The document window once again displays formatting with styles.

Using the Basic Profile menu in the View palette, you can choose any of the popular browsers and see how the visual presentation changes. However, previewing with the View palette only simulates how the pages will appear in a browser; it is not a substitute for previewing pages in an actual browser.

To view the style sheet, click the Open CSS Editor button () in the upper right corner of the document window. This opens the index.html: CSS Editor window.

Click the triangle at the top right of the CSS Editor to show the popup menu and then select View > Folder for Sections. The Internal folder in the CSS Editor window displays the different styles defined for this document.

HTML Element styles let you reformat the visible part of an HTML document based on its structure. The designer can define a style for any HTML element, and it is applied automatically to all instances of the HTML element throughout a document. Element-based styles are fully compatible with browsers that can't read CSS1 information. So viewers with older browsers that don't support style sheets see the tag's plain HTML formatting, while viewers with newer browsers that support style sheets see the enhanced formatting. HTML Element styles are also useful for ensuring that your documents will be readable in alternative browsers or on nonstandard viewing devices, such as handheld PDAs.

Class styles apply style formatting to specific instances of a text block, rather than all instances that share a common HTML element. Unlike HTML Element styles, Class styles are independent of the document's structure; they are defined by the designer but must be manually applied. Classes are useful for creating distinctive formatting like warning notes or pull quotes that you want to stand out from the rest of your text, or for creating special effects such as varying font sizes or colors within a word. However, don't use classes to structure a document visually; the formatting won't stick if viewers have non-CSS-compatible browsers. Instead use HTML Element styles to achieve as much styling as you can, and reserve Class styles for special (but not imperative) styling, at least until browser support for cascading style sheets improves and you are sure that most of your viewers are using the latest browsers.

ID styles let you embed a specific style for a unique paragraph or range of text in your document, and create unique type treatments. Applying an ID style in GoLive requires that you edit HTML code.

Notice that the Internal folder in the index.html:CSS Editor already lists some common HTML elements.

In the CSS Editor window, click different elements. Notice that the styles with their associated selectors, properties, and values appear.

HTML Element style selected in CSS Editor window

Make sure that the Selector and Properties button () in the CSS Editor is selected.



Not a subscriber?

Start A Free Trial

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