HTML5 and CSS3 All-in-One For Dummies, 3rd Edition
Book image
Explore Book Buy On Amazon
CSS3 supports external style sheets. This technique allows you to define a style sheet as a separate document and import it into your web pages. To see why this might be attractive, take a look at the example.

image0.jpg

When you look at the code for externalStyle.html, you might be surprised to see no obvious style information at all!

 
 
 externalStyle.html
 
 
 
 

External Style

This page has styles set for paragraphs, body, and header 1.

The styles are defined in an external style sheet.

Where you normally see style tags (in the header), there is no style. Instead, you see a tag. This special tag is used to connect the current document with another document.

How to define the external style

When you use an external style, the style elements aren’t embedded in the page header but in an entirely separate document.

In this case, the page is connected to a special file called myStyle.css. This file contains all the CSS rules:

/* myStyle.css */
body {
 background-color: #333300;
 color: #FFFFFF;
}
h1 {
 color: #FFFF33;
 text-align: center;
 font: italic 200% fantasy;
}
p {
 background-color: #FFFF33;
 color: #333300;
 text-align: right;
 border: 3px groove #FFFF33;
}
The style sheet looks just like a page-level style, except for a few key differences:
  • The style sheet rules are contained in a separate file. The style is no longer part of the HTML page but is an entirely separate file stored on the server. CSS files usually end with the .css extension.

  • There are no tags. These aren’t needed because the style is no longer embedded in HTML.

  • The code begins with a comment. The /* */ pair indicates a comment in CSS. Truthfully, you can put comments in CSS in the page level. External CSS files frequently have comments in them.

  • The style document has no HTML. CSS documents contain nothing but CSS. This comes closer to the goal of separating style (in the CSS document) and content (in the HTML document).

  • The document isn’t tied to any particular page. The great advantage of external CSS is reuse. The CSS document isn’t part of any particular page, but any page can use it.

How to reuse an external CSS style

External style sheets are really fun when you have more than one page that needs the same style. Most websites today use multiple pages, and they should share a common style sheet to keep consistency.

image1.jpg

The code shows how easily this is done:

 
 
 SecondPage.html
 
 
 
 

Second Page

This page uses the same style as externalStyle.html.

External style sheets have some tremendous advantages:
  • One style sheet can control many pages: Generally, you have a large number of different pages in a website that all share the same general style. You can define the style sheet in one document and have all the HTML files refer to the CSS file.

  • Global changes are easier: If you’re using external styles, you make a change in one place and it’s automatically propagated to all the pages in the system.

  • Separation of content and design: With external CSS, all the design is housed in the CSS, and the data is in HTML.

  • Easy upgrades: Because the design parameters of the entire site are defined in one file, you can easily change the site without having to mess around with individual HTML files.

The link tag

The tag is the key to adding a CSS reference to an HTML document. The tag has the following characteristics:

Link tags are often used to connect a page to an externally defined style document.

Most people refer to the hyperlinks created by the anchor () tag as hyperlinks or links. This can lead to some confusion because, in this sense, the link tag doesn’t create that type of link.

How to specify an external link

To use the tag to specify an external style sheet, follow these steps:
  1. Define the style sheet.

    External style sheets are very similar to the ones you already know. Just put all the styles in a separate text document without the tags.

  2. Create a link element in the HTML page’s head area to define the link between the HTML and CSS pages.

    My link element looks like this:

     
  3. Set the link’s relationship by setting the rel = "stylesheet" attribute.

    Honestly, stylesheet is almost the only relationship you’ll ever use, so this should become automatic.

  4. Specify the type of style by setting type = "text/css".

  5. Determine the location of the style sheet with the href attribute.

About This Article

This article is from the book:

About the book author:

Andy Harris taught himself programming because it was fun. Today he teaches computer science, game development, and web programming at the university level; is a technology consultant for the state of Indiana; has helped people with disabilities to form their own web development companies; and works with families who wish to teach computing at home.

This article can be found in the category: