Main  Basic   Advanced  Download  

Style Sheets  

Cascading Style Sheets, or CSS, are a technology that is set to revolutionise the way we web design: Style Sheets use special tags and files to define styles of text (font, colour, size, etc) as classes to be used for any block of text, leaving HTML as the language it was meant for: simply giving the bare elements of the page, not formatting them.

Style Sheets are one of the most browser dependent technologies in the business yet: they are capable of what is called exact positioning, which in theory means you can place an element you define in the HTML code anywhere on the page you want, and exactly too! In practice at the minute the situation is not quite as good: The W3C (WWW Consortium) has brought out the implementation of style sheets (CSS level 1), but the draft for absolute positioning (CSS Level 2) has yet to be implemented. This means that browsers that came out before CSS Level 1 did aren't likely to display the same stuff as ones that support it, and all browsers at the minute don't display the exact positioning (Level 2) the same. You may well ask then why are we using it yet? Well, the answer is that if you can get the right page to the right browser you are ok, as your pages will look even better. Browsers that support Style Sheets are as follows:
Internet Explorer 3.x (Although not fully by any means, as it came out before CSS Level 1)
Netscape Communicator (4.0) (Reasonable, although some of the newer stuff such as DHTML (explained in another topic), is not supported)
Internet Explorer 4.0 (At the minute the only contender that supports CSS Level 1, CSS Level 2 Draft, HTML 4.0, and DHTML to the best extent)

The examples in this tutorial only work with the specified browsers, so, if you aren't viewing these pages with them, the examples will not appear as they should do.

Style sheets can be defined to work in a page in three ways:

  • Having a class definition of the syles in a block in the <HEAD> block.
  • Using special tags within the document to apply a style on a particular part of text, with the style defined in those tags.
  • Using an external Style Sheet file, which is then linked to from the document.

I will first tell you about how to define the classes in the <HEAD> tag and also in the tags around individual elements.
Style Sheets start with the tag <STYLE>. This is also where we tell the browser what kind of style sheet it is: at the moment there are only two types, normal text style sheets, and Netscape's proprietary JavaScript ones. The definition is as follows (we will be using the text ones):

<STYLE TYPE="text/css">
<!--

-->
</STYLE>

We put in the comment tags to stop old browsers reading this and just putting it up as part of the normal page text, which could be a trifle embarrassing! Between these comment tags we define the styles. Styles can be applied to any element on the page, text, images, whatever you have on the page. You can define what are called classes, which can then be applied to a specific page element, or define a style for a tag, such as the <B>, or Bold, tag, or define a style that is inline, actually within the HTML code, which you are applying to a large part of the page.

The way we define styles for a tag is to use the following format:

<STYLE TYPE="text/css">
<!--
tag {attribute: setting;}
-->
</STYLE>

The tag can be any tag without it's normal < and > round it. This is then followed by the opening curly bracket which contains all the different attributes with a colon and the setting for that attribute and then a semi-colon (;). The semi-colon separates one attribute from the next, as you may define many attributes for a single tag. After all the desired attributes have been defined, the style definition for that particular tag is closed by the closing curly bracket.
An example is:

P {font-size: 15pt; color: blue;}

This makes all blocks of text or other elements on the page surrounded by the <P>, or pragraph, tag, have a font size of 15 points (pt), and have the color blue. Neat eh?

In other words, like

This!

You can group tags that you want to have the same style together:

H1, H2, H3 {font-size: 15pt; font-weight: bold; color: maroon}

To define classes, which can be applied to any tag, we use the following format:

.classname {attribute: setting;}

Where classname is any name you want to call the class, preceded by a full stop (.), and attribute and setting are as explained above. Therefore, we can define a class called "bluetext" in the following way:

.bluetext {font-size: 20pt; color: blue; font: verdana; font-weight: bold;}

This defines a class that makes any text told to "take on" that class be in the Verdana font, be 20 points high, be blue, and be in bold type.
In other words, like this!

You may now be wondering how you apply classes to tags and objects. Well, you use the following format for tags:

<TAG CLASS="classname">Text or Object</TAG>

Where TAG is any tag you want, it could be <B> or <BODY> or anything you want. classname is the name of the class you want that particular tag to have (but not any others of the same kind on the page, otherwise you would just define the style for the tag in the header as explained above).
An example is:

<B CLASS="bluetext">Some text</B>

which would give you:

Some text

You can specify that large portions of the web page inherit the class by using two special tags, <SPAN> and </SPAN>, and <DIV> and </DIV>. These you can put round any number of elements in the page and they will all inherit the style defined by that class. The format is:

<SPAN CLASS="classname">Any Element of the page</SPAN>

This format is the same for the <DIV> tag. The <DIV> is used for large containers, such as a whole page of text, whereas <SPAN> is used for smaller page elements, words or even letters. An example of the way these two tags are used is:

<SPAN CLASS="bluetext">Any Element of the page</SPAN>

Which results in:

Any Element of the page

Lastly, you can specify different classes for one type of tag. This means you could have, for example, 5 different classes for the <P> tag:

P.normal
P.red
P.green
P.bold
P.italic

These are defined just like any other class or style, as follows:

<STYLE TYPE="text/css">
<!--
P.normal {font-size: 12pt; font: arial;}
-->
</STYLE>

These different classes for one type of tag are used as follows (using the <P> from above as the example):

<P CLASS="normal">Text with the normal style</P>
<P CLASS="red">Text with the red style</P>
<P CLASS="green">You get the picture...</P>

One thing you might be wondering about is can you have a different style of tag when you've specified a style for that tag already? the answer is yes you can, and the way to do it is simply call another class from the tag you want to be different from all the rest of the same kind of tag.

An example is when you have specified the following:

<STYLE TYPE="text/css">
<!--
LI {font-size: 12pt; font: arial; color: blue;}
.redtext {color: red;}
-->
</STYLE>

<UL>
<LI>A list item with the normal class
<LI CLASS="redtext">A list item using the "redtext" class.
</UL>

This gives the following result:

  • A list item with the normal class.
  • A list item using the "redtext" class.

Tags can also have what are called inline styles defined in them. This simply means that styles can be defined in the HTML code rather than having to be specified as classes in the header between the <STYLE> tags. The format is as follows:

<TAG STYLE="attribute: setting;">Any page Element</TAG>

An example is:

<U STYLE="font-weight: demi-bold; color: green;">Some text with an Inline Style</U>

Which results in:

Some text with an Inline Style

The other way of introducing styles to a page is by linking a stylesheet file to the web page. This enables you to be able to modify the styles which affect a whole group of pages by editing one file, which is especially good if you want your whole site to look reasonably the same, or at least have the same text fonts and sizes. The way you link to external stylesheet files is using the following code on the header (between the <HEAD> and </HEAD> tags):

<LINK REL=STYLESHEET HREF="path/to/stylesheet/.css" TYPE="text/css">

The path/to/stylesheet/.css is the exact URL of the stylesheet.

External Style Sheets are created by simply defining the styles as shown but without any HTML tags in the file, so for example, this could be an external style sheet:

LI {font-size: 12pt; color: green;}
.boldgreen {font-weight: bold; color: green;}

The style sheet is then saved as a file with the .css extension. As an example, lets say I've created a file called "homepage.css". I would link to it by putting the following in the header of the page/s that used it:

<LINK REL=STYLESHEET HREF="homepage.css" TYPE="text/css">

Something special you can do is make different styles for links depending what status they have: whether they are unvisited, visited or active (when a link is clicked it flashes it's active colour). The way to do it is as follows:

A:link {attribute: setting}
A:visited {attribute: setting}
A:active {attribute: setting}

Where the attribute and setting are the normal way styles are defined. The A:link is for unvisited links, the A:visited for visited links, and the A:active for active links. These style definitions are like any others and go between the <STYLE> tags in the header.

Style Sheets support the following properties:

Attribute
Description
Possible Values Example
font-size Sets the size of the font in points any number in points (pt)
pixels (px)
centimetres (cm)
inches (in).
{font-size: 12pt}
font-family Sets the actual font Typeface name
Font Family name
{font-family: courier}
font-weight Sets thickness of type. extra-light
light
demi-light
medium
demi-bold
bold
extra-bold
{font-weight: bold}
font-style Sets text in italics or not normal
italic
{font-style: italic}
line-height Sets the distance between bottoms of each line of text. points (pt)
inches (in)
centimeters (cm)
pixels (px)
percentage (%)
{line-height: 24pt}
color Sets color of text. color-name
RGB triplet
{color: blue}
text-decoration Underlines or highlights text. none
underline
italic
line-through
{text-decoration: underline}
marginSets the value for all the margins.Numbers separated by commas in the order: top, right, bottom, left. If only one value is specified, it applies to all four margins.{margins: 12, 34, 4, 34}
margin-left Sets distance from left edge of page. points (pt)
inches (in)
centimeters (cm)
pixels (px)
{margin-left: 1in}
margin-right Sets distance from right edge of page. points (pt)
inches (in)
centimeters (cm)
pixels (px)
{margin-right: 1pt}
margin-top Sets distance from top edge of page. points (pt)
inches (in)
centimeters (cm)
pixels (px)
{margin-top: -20px}
text-align Sets justification. left
center
right
justify
{text-align: right}
text-indent Sets distance from left margin. points (pt)
inches (in)
centimeters (cm)
pixels (px)
{text-indent: 0.5in}
background-color Sets background images or colors. URL
color-name
RGB triplet
{background-color: #33CC00}
a:hover Used once in the style definition to specify the colour links go when the cursor is over them.color-name
RGB triplet
<STYLE TYPE="text/css">
A:hover {color: #0000FF; }
</STYLE>
heightSpecifies the height of an object.points (pt)
inches (in)
centimeters (cm)
pixels (px)
{height: 48px}
widthSpecifies the width of an object.points (pt)
inches (in)
centimeters (cm)
pixels (px)
{width: 57pt}
letter-spacingThe spacing between the letters in a word.A number in em s (1em is the space taken up by the letter m){letter-spacing: 3}
background-imageUsed to specify an image as a background.Filename
URL
{background-image.url(back.gif)}
background-repeatWhether and how the background is tiled.repeat-x
repeat-y
repeat
{background-repeat: repeat}
background-positionIf the background doesn't repeat, you'll probably want to position it.top
bottom
center
left
right
The format is first the horizontal parameter and then the vertical.
{background-position: right, center}
word-spacingThe space between wordsem{word-spacing: 6 }
vertical-alignThe vertical alignment of an objectbaseline
sub [that means subscript]
super [superscript]
text-top [aligned with the top of the paragraph text]
text-bottom
middle
top
bottom
x% [where x is a number indicating the %age distance from the baseline, +ve or -ve]
{vertical-align: text-top}
text-transformChanges the text to a different case.capitalize [the first letter of each word]
uppercase
lowercase
none
{text-transform: capitalize}
padding-topUsed for tables, to define the distance of the cell wall from the text.Any unit of measurement, or a percentage.{padding-top: 23 px}
{ }

Possible colour names are:

  • black
  • silver
  • gray
  • white
  • maroon
  • red
  • purple
  • fuchsia
  • green
  • lime
  • olive
  • yellow
  • navy
  • blue
  • teal
  • aqua

There are many more attributes that can be set using Internet Explorer and Style Sheets with Dynamic HTML, but these are the main ones.

Well, this has been a rather long tutorial, but I think you'll agree it's been worth it.

 

Copyright 1998 Iceman. All Rights Reserved. Further Legal Stuff

This page hosted by Get your own Free Home Page