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

Lesson 12. Using Cascading Style Sheets > Saving and linking a style sheet

Saving and linking a style sheet

Now you'll save and link the style sheet to your HTML document. Once you link a style sheet to your document, GoLive applies its styles automatically.

Make sure that the untitled2.css window is active. Then choose File > Save, and name the untitled2.css document mypoetry.css, and save it in the styles folder in the poetrypond.com folder.

It's important to use the .css extension so that browsers recognize the document as a style sheet. Saving the style sheet in a styles folder is not mandatory, but it helps to keep your site organized and more manageable.

Make sure that the mypoetry.css file in your poetrypond.com site window is visible. You may have to choose Site > Refresh View to see the mypoetry.css file.

Drag the mypoetry.css file from the site window to the spotlight.html CSS Editor window.

Linking external style sheet by dragging to CSS Editor window

The second heading in your document, “Started at an early age” (tagged with <h2></h2>), is reformatted automatically to reflect the style changes that you specified in the previous procedure, and the CSS Editor window is updated to reflect the linking of the mypoetry.css document to your HTML page.

It's that simple to create an external style sheet and link it to a document. Now you'll continue to refine the formatting of the spotlight.html document by linking an additional style sheet to it. This style sheet already contains several styles to give you a jump start. You'll edit those styles and add some new ones.

In the site window, select the poetrypond.css file in the styles folder within the poetrypond.com folder. This time, drag the style sheet to the Page icon () of the spotlight.html document window.

Linking to external style sheet by dragging to Page icon (left); updated CSS Editor window (right)

This is another technique for linking external style sheets to a document.

Once again the second heading (tagged with <h2></h2>) is reformatted, to reflect the properties in the style sheet that you just attached. A feature of cascading style sheets is that you can attach more than one style sheet to a document and apply styles cumulatively or separately.

When a new style sheet uses the same style names as the previous one, the newer styles will take precedence and override the styles in the old style sheet. In this case, the h2 tag overrides that in the previous one (mypoetry.css).



Not a subscriber?

Start A Free Trial

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