Style Sheets

Control of the appearance of web pages is pretty rudimentary and many of the tricks that designers use are just that - tricks that force HTML to do things it was never intended to do. Style Sheets are an attempt to give designers more sophisticated layout and typographic capabilities.

A Style Sheet is basically a list of instructions for the browser telling it how to display content. Style Sheet information can be embedded within individual html documents or placed in a separate .css file that is shared by many html docs. The advantage of the external file approach is that one .css file can determine the look of an entire web site and site-wide changes can be made very easily by simply modifying the single .css file.

Styles can be applied to existing tags such as <h1> or <p> or to custom "classes" that the page author creates.

A style applied to the h1 tag would cause any occurrence of the h1 tag to have the newly assigned style characteristics:

h1 { color: #990000; text-decoration: none; font-size: 10pt; font-family: Verdana, Geneva, sans-serif;}

So this tag:

<h1>An h1 tag with style</h1>

Would look like this:

An h1 tag with style

Alternately, you could create a "class." Class names can be whatever you want them to be. In the style definition, they always start with a ".":

.whatever { color: #009900; text-decoration: underline; font-size: 10pt; font-family: Georgia, "New York", serif;}

So this tag:

<h2 class="whatever">An h2 tag with style</h2>

Would look like this:

An h2 tag with style

Embedded Style Sheets

Like scripts and meta tags, embedded style sheets go in the head of the document:

<html>
<head>
<title>Style Sheets</title>

<style type="text/css" media="screen">

</style>

</head>
<body bgcolor="#ffffff">

They are used throughout the document by adding class info to the normal formatting tags:

<font class="text"> Any text between the open and close font tag will now be displayed as specified in the "text" class in the head of the document. </font>

<font class="code"> The "code" class is used on this page for all HTML examples. </font>

This would also work - both blockquote and the class specifications are applied. Same would apply to <i class="text"> and <b class="text">.

</blockquote>

External .css Style Sheets

An external style sheet document ends with the .css suffix and contains only style information. This one is titled webwork.css:

a:hover { color: #336600; text-decoration: underline; }
.link { color: #993333; text-decoration: none; }
.headline { color: #660000; font-family: Verdana, Geneva,
sans-serif; font-style: bold; font-size: 18pt; }
.text { line-height: 150%; font-family: Verdana, Geneva,
sans-serif; font-style: normal; font-weight: normal;
font-size: 10pt; text-align: left; }
.code { line-height: 100%; font-family: Courier, Georgia, serif;
font-style: normal; font-weight: bold; font-size: 10pt;
text-align: left; }

It is incorporated into web pages through the link tag:

<html>
<head>
<title>Style Sheets</title>
<link rel=stylesheet href="webwork.css" type="text/css" media=screen>
</head>
<body bgcolor="#ffffff">

Styles are applied throughout the document by adding class info to regular html tags - the same as for embedded style sheets (above).

Font & Text Properties

(Support for these varies considerably from platform to platform and browser to browser. Test before using.)

.text { line-height: 150%; font-family: Verdana, Geneva, sans-serif; font-style: normal; font-weight: normal; font-size: 10pt; text-align: left; }

font-family:
  Verdana, Geneva, sans-serif; or
  Times, "Times New Roman", serif;
  etc. Multi-word font names should be in quotes.
font-size:
  18pt; or 24pt; or 90%;
font-style:
  normal or italic
font-weight:
  normal or bold

text-align:
  left or right or center or justify
text-decoration:
  underline or line-through
line-height:
  normal or number or length or percentage
text-transform:
  none or capitalize or uppercase or lowercase
letter-spacing:
  normal or length

Box Properties

The <div> and <span> tags allow the manipulation of the invisible boxes that web pages are made of. <div> is used for paragraphs or groups of paragraphs and <span> is used for in-line elements like the word "boxes" in the previous sentence.

<div style="margin: 25pt; background-color: #eeeeee; padding: 20; border-style: 'solid'; border-color: #990000; border-width: 1pt">The stuff in the box.</div>

Properties

top-margin:
right-margin:
bottom-margin:
left-margin:
margin:
Length or Percentage

top-padding:
right-padding:
bottom-padding:
left-padding:
padding:
Length or Percentage

top-border-width:
right-border-width:
bottom-border-width:
left-border-width:
border-width:
Length

border-width:
Length
border-color:
color name or hex
border-style:
none or dotted or dashed or solid or double or groove or ridge or inset or outset

float
Works like align="left" and align="right" do in image tags.
clear
Works like <br clear="all"> does in image tags.

background-color:
color name or hex
background-image:
url (see below)
background-repeat:
repeat or repeat-x or repeat-y or no-repeat
background-attachment:
scroll or fixed

Additional Style Sheet Info:

Web Design Group
World Wide Web Consortium
or just type CSS into Google...