CSS Tutorial

Linked Style Sheets

One of the most common uses of style sheets is defining a visual template with which to apply to multiple HTML documents. You can create a single file that instructs your entire site how to display images, links, tables, and pretty much any aspect of any HTML objects. It provides a means of separating the content of a web page from its visual characteristics. Instead of embedding properties like font color, indentation, and positioning information inside of HTML tags you merely instruct an HTML tag that it belongs to a class which is defined in your style sheet. That way you can modify the class in the stylesheet and it will affect every tag of that class throughout your site. Following are a few simple examples for learning about style sheets.

To include a style sheet in an HTML document add a link tag in the <head> section such as the one I use for this page

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

To remove underlines from links but make them bold, create a CSS file with the following

a{
 text-decoration: none;
 font-weight: bold;
}

The result looks like

This page is hosted by thecommandline.org

To create a class for links to external sites that look a little different from the local links, add a class to your A HTML tag like this

<a class="external" href="http://thecommandline.org">My site</a>

and add the following tag.class definition to your CSS file

a.external
{
  border: thin dotted black;
}

The result looks like

Swaft

If you mouse over the link above you will notice that it changes color and border style, that is because of the addition of a separate a.class:pseudo-class definition with the pseudo class option 'hover'.

a.external:hover
{
  background-color: #bbbbbb; border: thin solid black; }

Note it is perfectly legal to assign properties to multiple tags. For example on this page I configured both header (<h1> and <h2>) tags in a single directive.

h1, h2
{
  text-transform: uppercase;
  text-align: center;
}

You can also define general classes which apply to multiple tag types

.note
{
  color: red;
}

For example the HTML code

<span class="note">Note</span> w3.org hosts the 
<a class="note" href="http://w3.org/TR/CSS1">CSS spec</a>

would display like this (the "note" class applied to both the span and the a tag)

Note w3.org hosts the CSS spec

Here you can take a look at the complete tutorial CSS file I use for this page. It also includes additional options for the boxed <pre> and <p> sections I used in this page.