• 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 style sheet 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 Open CSS Editor button () to display the spotlight.html CSS Editor window.

Notice that no styles appear in the CSS Editor 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 > Cascading Style Sheet to open an untitled.css window (untitled2.css).

To add a new style to the style sheet, click the New Element Style button () at the bottom of the palette. Select the new item named “element” that appears in the untitled2.css window.

Click the Basic button in the CSS Style Inspector.

In the CSS Style Inspector, name the style h2. Press Enter or Return to create the element.

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

Click the New Font Family button () at the bottom of the CSS Style Inspector, and choose a font family from the pop-up menu. (We chose the Arial, Helvetica, etc. group for font family.)

Selecting a font family

Notice that several fonts are now listed under Font Name. The font at the top of the list is the preferred font. Subsequent fonts will be used (in the order listed) if a viewer does not have the preferred font. You can change the order in which the fonts are searched for by the user's browser by selecting the font you wish to move and using the up and down arrows at the bottom of the Inspector.

Use the pop-up menus to select a font color and font size. (We chose Maroon, 1 em.)

Leave the Line Height, Style, and Weight at their default values.

You've created the style, but notice that 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 then 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