Linked Style Sheets

Vine

This lesson: Overview | Syntax | Location | Example | Exericses 
 Other lessons:  Style Syntax | Order of Precedence | Style Properties | Other Style Information
Intro. to Styles | Inline Styles | Embedded Style Sheets | Linked Style Sheets

Overview

Syntax

The syntax for linked and embedded style sheets are the same.  These two style types:

This is the syntax for linked (and embedded) style sheets:

Tag { property: value; property: value }

Here are a few variations of the above syntax:

Tag, Tag, Tag { property: value; property: value }

Tag.class { property: value; property: value }

H1, H2, H3 { font-size: 20pt; color: red }

H4  { font-size: 16pt; color: navy }

H5.Indent { font-size: 12pt; margin-left: 50pt }

Location of Style Information for Linked Style Sheets

The style information for a linked style sheet is placed in a separate file.  Further, 

H1, H2, H3 { font-size: 20pt; color: red }
H4 { font-size: 16pt; color: navy }
H5.Indent { font-size: 12pt; margin-left: 50pt }

<LINK rel="stylesheet" type="text/css" href="filename.css">

<HEAD>
<LINK rel="stylesheet" type="text/css" href="mystyles.css">
</HEAD>

OR

<HEAD>
<LINK rel="stylesheet" type="text/css" href="http://www.mysite.edu/styles/mystyles.css">
</HEAD>

Example

body       { font-family: JunkFont1, Arial, sans-serif }
h1         { font-size: 20pt; font-weight: bold; 
             color: #FF0000; text-align: center }
h2         { background-color: #CCCCFF; text-align: center }
blockquote { color: green }
address    { font-size: 10pt; text-align: center }

Exercise: Create a Linked Style Sheet

Method 1 - Using a Text Editor

Create the Style Sheet

  1. Use a text editor to create a new file and type the code below.

body { font-size: 18pt } 
h1   { font-family: Impact, Cooper Black, sans-serif;
       text-align: center;
       background-color: yellow }

  1. Save the file with the name of:  linkedstyles.css .

Create the Web Page (with a Link to the Style Sheet)

  1. Use a text editor to create a new file and type the code below.  

<html>
<head>
<title>Exercise: Using Linked Style Sheets</title>
<link rel="stylesheet" type="text/css" href="linkedstyles.css">
</head>
<body>
<h1>Exercise: Using Linked Style Sheets</h1>
<p>The linked style sheet formats the body text as 18 points.  It also formats a heading 1 paragraph so that it uses the Impact or Cooper Black Font.  If those fonts are not available, then a sans-serif font is used.  Heading 1 is also formatted with a center text alignment and a yellow background.</p>
</body>
</html>

  1. Save the file with the name of:  exercise-linked.htm .
  1. View the web page in a browser.

Method 2 - Using FrontPage

Create the Style Sheet

  1. From the FrontPage menu, select:  File/New/Page.
  2. At the New dialog window, click on the tab for Style Sheets.
  3. Click on the desired style (in this case, Normal Style Sheet) and click the OK button.
  4. Save the file with the name of:  linkedstyles.css.
  5. From the menu, select Format/Style.

Format Body Text

  1. At the Styles dialog window, click on the body tag which is listed in the Styles box.  Then click the Modify button.
  2. At the Modify Style dialog window, click the Format button.  Then click on Font from the pop-up menu.
  3. At the Font dialog window, select 18pt from the Size box.  Then click OK until you return to the Style dialog window.

Format Heading 1

  1. Click the drop-down arrow next to the List box and select All HTML Tags.  
  2. In the Styles box, scroll down and click on the h1 tag.  Then click the Modify button.
  3. At the Modify Style dialog window, click the Format button.  Then click on Font from the pop-up menu.
  4. At the Font dialog window, select Impact from the Font box.  Then click OK until you return to the Modify Style dialog window.
  5. At the Modify Style dialog window, click the Format button.  Then click on Paragraph from the pop-up menu.
  6. At the Paragraph dialog window, select Center from the Alignment drop-down menu.  Then click OK until you return to the Modify Style dialog window.
  7. At the Modify Style dialog window, click the Format button.  Then click on Border from the pop-up menu.
  8. At the Borders dialog window, click on the Shading tab.  From the Background Color drop-down menu, click on the yellow color.  Then click OK until you exit from the Style dialog window.
  9. Save the file.

Create the Web Page (with a Link to the Style Sheet)

  1. Open a blank page in FrontPage.
  2. Type the text below.
         OR
    Open the file, exercise-linked-text.txt.  Copy the text and paste it into the blank page (in Normal view).

Exercise: Using Linked Style Sheets

The linked style sheet formats the body text as 18 points. It also formats a heading 1 paragraph so that it uses the Impact or Cooper Black font. If those fonts are not available, then a sans-serif font is used. Heading 1 is also formatted with a center alignment and a yellow background.

  1. Change the title that appears in the browser's title bar to:  Exercise: Using Linked Style Sheets.
  2. Click in the first paragraph.  From the Style drop-down menu, select Heading 1.
  3. Save the file with the name of:  exercise-linked-fp.htm .
  4. From the FrontPage menu, select Format/Style Sheet Links.
  5. At the Link Style Sheet dialog window, click on the Add button.
  6. Navigate to the location which contains the style sheet that you wish to link to.
  7. Click on the style sheet file name.  Click OK.
  8. Click OK to exit from the dialog window.
  9. Save the file.
  10. View the HTML tags by clicking on the HTML tab.  You should notice that a link statement has been added to the Head section of the web page.

Penn State Behrend Home | Computer Center Home

This page is maintained by Carolyn Dudas
Updated May 21, 2002