Specifying Styles

There are four methods of specifying styles:

Imbedding in the <head> Section
<head>
<style type="text/css">
<!--
H1 { color: #666699;
   }
span {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11pt;
	color: #ff0000;
	font-weight: normal;
	margin-left: 2em;
    }
-->
</style>
</head>
<body>
<p>Normal and <span class="red">red</span> text.</p>
</body>

Normal and red text.

Linking to an External CSS File
<head>
<link rel=stylesheet type="text/css" href="stylesheet.css">
</head>
Importing an External CSS File
<head>
<style type="text/css">
@import url (http://website.com/stylesheet.css);
H1 { color: #666699;
   }
</style>
</head>
Using Inline Markup
<p style="color: #4444dd;">This paragraph is in blue.</p>

This paragraph is in blue.

Pseudo-Classes

Psuedo-classes are similar in structure to classes, but the markup is different:

<style type="text/css">
A:visited, A:active { color: #FFFFFF }
</style>

Only the <A> tag takes pseudo-classes.

Margins

<style type="text/css">
p.indentleft { margin-left: .5in}
</style>

The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. 

<style type="text/css">
p.indentright { margin-right: .5in}
</style>

The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. 

<style type="text/css">
p.indenttop { margin-top: .5in}
</style>

The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. 

<style type="text/css">
p.indentbottom { margin-bottom: .5in}
</style>

The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.

Padding

Padding markup and effects are similar to those of margins. However, you can add padding to margins.

<style type="text/css">
p.padded { padding: .75in}
</style>

The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.

Borders

You can apply a variety of borders to elements:

<style type="text/css">
.border { border-left: solid thin red;
		  border-top: double thick blue;
		  border-right: groove medium yellow;
		  border-bottom: solid thick #111111;
		  padding: .25in;
		  }
</style>

This shows the border attributes.

<style type="text/css">
p.raise { border-style: outset;
		border-color: #7777cc;
		background-color: #7777cc;
		color: white;
		font-weight: bold;
		padding: 3px;
		width: 120px;
		}
</style>

Fake button

Using Images for List Item Markers

<style type="text/css">
ul { display: list-item;
     list-style-image: url(maple.gif);
     list-style-type: square;"
   }
</style>

Placing an Image in a Location

<style type="text/css">
p.place { background-color: #ccccff;
		font-weight: bold;
		width: 200px;
		height: 200px;
		padding: 8px;
		background-image: url(maple.gif);
		background-position: 90% 90%;
		background-repeat: no-repeat;
		}
</style>

This a colored area that has an image at the x=90% y=90% location.