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

Creating a style sheet

Now that you've explored both internal and external style sheets, it's time to create your own from scratch. You'll create an external style sheet and link it to a document.

Double-click the Spotlight.html file in the Pages folder in the site window to open the file.

In the document window, click the CSS button () to display the Spotlight.html Style Sheet window.

Notice that no styles appear under an Internal folder in the Style Sheet window. The document has only the basic formatting from HTML elements; no styles are associated yet with any elements.

To create a new external style sheet, choose File > New Special > Style Sheet Document to open an untitled .css window.

If the Inspector is not open, choose Window > Inspector to display it.

To add a new style to the style sheet, click the New Element Selector button in the Style Sheet toolbar. A new item named "element" appears in the untitled .css window.

Click the Basics tab in the CSS Selector Inspector, and name the style h2. Press Enter or Return to create the element.

Click the Font tab () in the CSS Selector Inspector so that you can set font properties.

Click the New button in the Font tab of the CSS Selector Inspector, and use the pop-up menus to select a font color and font family. Choose a font size. (We chose Maroon, 1 em, and the Arial, Helvetica sans serif group for font family.) Choose a font family from the pop-up menu next to the New button.

You've created the style, but nothing has changed in the document. In contrast with internal style sheets that instantly update their associated document, external style sheets must first be saved and attached to a document for the styles to be applied.



Not a subscriber?

Start A Free Trial

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