Ways to include CSS in your page

Internet Basics
   About the Internet
   About Web Browsers
   Why Domain Names

Getting Started
   HTML vs XHTML
   Making Webpage Files
   Naming Webpage Files

HTML Basics
   About HTML Tags
   Basic HTML Page
   DTDs and Doctype Tags
   Spaces and New Lines
   Special Characters
   Bold, Italics, More
   Writing Headlines
   Adding Links
   Making Lists
   Comments in HTML

Images and Colors
   How to Add Images
   Sources of Images
   Image File Formats
   Optimizing Images
   Color in HTML & CSS
   "Web-safe" Color Chart

More Advanced HTML
   Making Tables
   Formatting with Tables
   Making Forms
   Using Imagemaps
   Using Frames
   Meta Tags

Cascading Style Sheets
   Intro to CSS
   Ways to include CSS
   Some Useful CSS
   CSS Hover for Links

More
   Promoting Your Site
   How-To's Homepage
   Links

Cascading Style Sheet Inline, <Style>, & External

Inline

Inline styles are when you just insert the type of style you want inside another tag, using the style attribute. This is usually the least useful way to use CSS.

<p style="width:100%; color:#660099; text-align:right; background-color:#ffcc00;" > is the style for this example.

Weird IE quirk, until I put width:100%; in this style the yellow bar stretched all the way across the page into the menu area. Sometimes you will get odd behavior, but be able to make it behave by playing with it a bit.

<style>

Styles can also be placed in the document using the <style> tag. The <style> tag is usually placed in the head section of the document, where it will apply to the whole document.

When using styles that are not inline styles. A style is defined for a particular tag or for a named class. The syntax for creating a style for an HTML tag is to write tag { styles } . Note that you do not need " marks around the styles when written this way. It is a good idea to put  comment tags in between the <style> and </style> tags, just to make sure that their contents aren't accidentally displayed in the page.

Lets make the example basic page from the first class a little bit more complex and add some style like this.

Example Styles for Tags
<html>
  <head>
    <title> 
      Basic styling!  
   </title>

   <style> 
    <!--
	p { color:#009900; 
	font-family:"comic sans ms",sans-serif; }
	h1 { color:#660000; font-size:12pt; }
    -->
   </style>

  </head>

  <body>
    <h1>    Hello World!</h1>
    <p>I am a very basic page.</p>
    Use your back button to 
    get out of here.
  </body>
</html>

View this new example page

Styles can apply to any html tag, but Netscape 4 doesn't support styles for the <body> tag. Support for styles on form elements is also buggy.

Note that if a font name has more than one word, quotes are used around the font name. Other than this and their appearance surrounding the specification in an inline style= quote marks aren't used inside of a style specification.

Styles can also be applied to classes. A class is just a name you make up for your style.

To specify the style for a class, just write the class name with a . in front of it and then define your style as you would have done for an html tag.

To use your class, just put class="whatever_your_class_is" in your opening tag.

<div> & <span>

Don't have an appropriate tag to put the style in? Two special tags were introduced to take care of just this.

Use <div> when the area you want to apply the style to has other tags inside it and is a self-contained unit of anywhere from a paragraph to most of a page.

Use <span> when the area you want to apply the style to is only part of a paragraph, perhaps a single word.

Example Styles for Classes
<html>
  <head>
    <title> 
      Basic styling!  
   </title>

   <style> 
    <!--
	.green { color:#009900; text-decoration:underline; }
	.red { color:#660000; font-size:12pt; }
	p { color:#000099; }
    -->
   </style>

  </head>

  <body>
    <h1 class="green">    Hello World!</h1>
    <p class="red">I am a very basic page.</p>
    <p>Use your back button to 
    get out of here.</p>
  </body>
</html>

View this new example page

External styles

Styles can also be set in an external style sheet which is linked to the page with a <link> tag. For example the style sheet for this site is included like this:

<link rel="stylesheet" type="text/css" href="class.css" />

The advantage of doing this is that the same style sheet can be used in every page on your site. Your entire site can be updated by changing just this one file.

You can also include different styles for different devices in the same xhtml page. Just add the attribute media=type_of_media. Where type of media is something like screen, print, aural, etc. See HtmlHelp for a list of media types and more on span, div, and adding styles.

Inside an external css file you just list your selectors and their specifications like you would between <style> tags, but You do not put <style> tags inside an external style sheet.

More Info

Another explanation of the ways to include styles and the reasons for preferring one over the other.

Cascading

How order matters

The term "Cascading" is used because styles "cascade" or are inherited. If more than one style can apply to something on the page, then the one that is closest to it is what is applied.

There may be some parts of a previous style that aren't contradicted by the current style, these are also supposed to apply. For example: If the attributes in an inline style change the font size to 20pt, but don't say anything about font type, then whatever font type is specified earlier in the document for this tag still applies. This can be a bit buggy with some tags especially in version 4 Netscape.