CSS Reference Pseudo-Classes - San Diego Web Design

Welcome

About

Services

What It Takes to Run a Web Site

How to Include Style Definitions

There are four different ways to include style-sheet definitions in your HTML pages. They are all pretty straight-forward and easy-to-use. Don't worry about the syntax for now, we will go over that later.

Embedded Style-Sheet

You may embed your style-sheet definition directly in your web page by placing it in the HEAD section of your document. This type of style sheet can only be referenced by the page it is included in. The one exception to this rule is when this type of style definition is placed in a common include file that is used on multiple pages of your site.

<HTML>
  <HEAD>
  <STYLE type="text/css">
  BODY { font-family: sans-serif }
  H1 { color:blue }
  </STYLE>
  </HEAD>
  <BODY>
  </BODY>
</HTML>

Inline Style Elements

Instead of associating styles with an entire class or class of elements, you can simply define an inline style for a single instance of an HTML tag. This can be used to override the default style that otherwise would be assigned to the element by another style definition.

<P STYLE="color: blue">
This paragraph is blue.
</P>

Global Style Sheets

If you wish to define a global style sheet that will be used on all pages throughout your site, you may create a special file to hold all of your style definitions and then include it using the LINK element.

<HTML>
  <HEAD>
  <LINK REL="STYLESHEET" TYPE="text/css';
	HREF="http://www.domain.com/css/style.css"> 
  </HEAD>
  <BODY>
  </BODY>
</HTML>

This code defines a link to an external style sheet that is located based on the HREF attribute. This should contain a complete URL (resource link) that will locate the style sheet file. It is recommended that you name your file using the .css extension (although this is not required.)

The style sheet file itself should contain only style sheet information. Any HTML tags or scripting will be ignored in certain cases while in most others it will cause an error and your styles will not be loaded properly. Basically, any valid CSS code should be placed in the style sheet file.

Imported Global Style Sheets

Instead of including a global style sheet by using the LINK element, you can use a special directive in your style definition to include an external style sheet. This is done using the @import directive.

<HTML>
  <HEAD>
  <STYLE TYPE="text/css">
  @import url(http://www.domain.com/css/style.css)
  h1 { color:blue }
  </STYLE>
  </HEAD>
  <BODY>
  </BODY>
</HTML>

As you can see, you simply pass a complete URL to the @import directive that indicates where the file may be found containing the style sheet definition. This will be loaded and merged with your style sheet definition. Make sure that you use parentheses around your style sheet url.

Table of Contents

Featured Clients

HomeWatch International
Since 1973, Homewatch CareGivers have provided professional, in-home personal care.