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

Lesson 11. 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, Adobe GoLive applies its styles automatically.

1.
Make sure that the untitled.css window is active. Then choose File > Save, and name the untitled.css document MyPoetry.css, and save it in the Styles folder within 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 helps to keep your site organized and more manageable.

2.
Click the CSS button () in the upper right corner of the document window to display the Spotlight.html Style Sheet window if it's not visible. This window shows any internal and external style sheets that are associated with your HTML page.

3.
Make sure that the MyPoetry.css file in your PoetryPond.com site window is visible. You may have to choose Site > Rescan to see the MyPoetry.css file.

4.
Drag the MyPoetry.css file from the site window to the Spotlight.html Style Sheet window.

The second heading in your document (tagged h2) is reformatted automatically to reflect the style changes that you specified in the previous procedure, and the Style Sheet window is updated to reflect the linking of the MyPoetry.css document to your HTML page.


Style sheet applied (top); linking external style sheet by dragging it to Style Sheet window (bottom)


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.

5.
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.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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