intro |  html |  css |  design |  scripting |  dhtml |  server 


This page covers:
   Intro to CSS
   Adding Style Sheets to HTML Pages
   Adding Inline Style Tags
   Linking to an External Style Sheet

Introduction to CSS
HTML 4.0 deprecated many tags that were related to layout control of HTML pages in an effort to detach the structural from the presentation aspects of documents. This encourages the use of style sheets instead of HTML for rendering of presentation. Cascading Style Sheets allow you define a set of markup elements and their attributes for a consistent layout with minimal coding. CSS definitions can also be kept in an external file which allows you to use one css file for an entire site allowing for quick and easy updating and a consistent look throughout the site.

Adding Style Sheets to HTML Pages
Style sheets tags can be included at the top of your HTML page, used inline (within the file), or as an external file (via linking). When writing style sheet definitions within your html page, you need to place them within the HEAD element. View the example below:
   <TITLE>CSS Example</TITLE>
   <STYLE TYPE="text/css">
   P      {font-family: Arial;
          font-size: 12px;}


body of page goes here

Adding Inline Style Tags
When adding style tags to individual elements, for example if you want to change the look of of the text in just one paragraph, you add inline style tags. The code would like like this:

<P STYLE="font-family: Times; font-size: 16px; line-height: 3; color: blue; background-color: white;">

This is the what the paragraph would look like using the above example code. Notice the difference in font face, size, color, line height, and background color from the rest of this page

NOTE: Be mindful when using an external style sheet with inline style tags. In Explorer you can do this with no problem. In Netscape Navigator however, if you link to an external style sheet and try to use inline style tags, the definitions in the external style sheet do not work. For this example, I had to include the above style definitions and assign them to the ".example" class and then use <P class="example"> in order to not lose the definitions I had originally set up for the rest of the page. Please go to the next page to learn more about style classes.

Linking to an External Style Sheet
When using an external style sheet you will need to create a link to that style sheet page. This link, like the inline style sheet definitions, goes within the HEAD element. For an example of what a .css page looks like, click here. The link on the .html page looks like this:
<LINK REL="stylesheet" HREF="mystyle.css" TYPE="text/css"> © 1999-2011. all rights reserved. // site created and maintained by kathy ahn