• 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 Create 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 Selector and Properties button in the CSS Editor.

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

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

Click the Create new font family button () at the bottom of the CSS Editor, and choose a font family from the pop-up menu. (We chose the Arial, Helvetica, etc. group from the All Font Families popup menu 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 installed.

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