Instructional Technology Resource Center (ITRC) - Saint Mary's College, Notre Dame, IN

Instructional Technology Resource Center - Saint Mary's College - Notre Dame, Indiana

Another use of cascading style sheets is to position text on the page exactly were one would like it. The way this is done is to think of an abject as in a bounding box and then this box is positioned on the page. An object's position can be declared in one of two ways, absolute or relative. Absolute positions the box exactly from the top or left edge of the screen. Relative positioning positions the object in relation to the other elements on the page.

When declaring your class include as the first attribute "position" and then declare either absolute or relative. It is best to start with absolute positioning first. Then, include the measurement in pixels that you would like your object to be from the top of the page with the attribute "top" and the number of pixels from the left margin with the attribute "left".

EX: h1{position: absolute; top: 150px; left: 50px}

Here is an example of some code and what the results would look like.

<HTML>

<HEAD>

<STYLE>

h1{ position: absolute; top: 150px; left: 50px; font-family:Havetica; font-style:bold; color:blue}

.astyle{ position: absolute; top: 50px; left: 200; font-family:Arial; font-style:italic; color:red}

#anid{ position: absolute; top:300px; left: 450px; font-family:Arial; font-style:bold; color:green}

</STYLE>

</HEAD>

<BODY>

<H1> This text was defined with the heading tag <H1> and will be bold and blue!!</H1>

<SPAN CLASS="ASTYLE"> This text was defined with the "astyle" class and will be red and in italics!!</SPAN>

<DIV ID="anid">This text was defined with the "anid" id and will be bold and green!!</DIV>

</BODY>

</HTML>

See It In Action!!

External Style Sheets

Once you have gotten your style sheets to work there are a few other considerations. The reason style sheets are so exciting is that they separate the actual content of one's page from the presentation. Thus onedoes not have to retype the definitions of the styles for every page she wants to use them on, but rather to define the styles once in an external style sheet and then link this to the specific page.

To do this one needs to first create an external style file. Declare the file as a "css" file. For example when you save the file call it "style sheet.css". In this file define all of your styles, ids, or tags as you did in the <SYTLE> tag. Then link this file to your page by including the following code in the <HEAD> tag of the file you would like to use the styles in.

<HTML>

<HEAD>

<LINK rel="stylesheet" href="filename.css">

</HEAD>

*filename.css is the name of your file that holds all of the style definitions

Other References

Here are some links to other tutorials:

http://www.geocities.com/SiliconValley/Orchard/5212/css.htm

http://www.htmlhelp.com/reference/css/stylesheets-now.html

There are some other issues to think about when one is designing Cascading Style Sheets and those center mainly around the degree to which the different browsers implement CSS. This is a good list of the known problems with Netscape Navigator's and Internet Explorer's implementation. Interestingly enough there is even a site for stories about CSS implementation problems.