Home > Advanced > Css- Cascading Style Sheets

Style Sheet Fundamentals

Positioning

Compatibility: IE 3.0+    NS 4.0+

Style sheets have the potential of being the best answer for positioning of text and images in HTML documents, were it not for the same reasons that everything else in website design is handicapped by: the assinine browser 'wars'. The following information is applicable to the above-named browser versions to the best of my knowledge, but I don't have room on my hard drive to test all of the different releases of even these two major ones.

Style sheets, or cascading style sheets, are both the same sort of animal with different names. The term Cascading is used when more than one style sheet is accessed by the same document. A style sheet can be written right into the head section of the document, or style commands can be individually inserted into parts of code in the body section. This form of usage is called inline. If several HTML documents need to access the same style sheet, it can be placed with those documents on the site with a .css extension, and be linked to by each document like so:

This second type of use is called a SPAN, because it 'spans' two or more documents. If your spanned style sheet should call for, let's say an <H5>tag as being specified as a blue font, and for some reason you wanted to set apart one of those tags as a red font, then you could put an inline style command wherever you want in your document. This would give you a red font in that one instance, and revert back to the blue font right after the closing tag of the instance. The rule for this is: whenever two or more style sheets act upon the same document, the one considered 'closest' to the instance will be the one that takes priority. In this case the inline command is clearly closer to the action than the linked style sheet, so you would get a red font.

Here's an example of an inline style command used with the <DIV> (Text division) tag:

<DIV STYLE="position: absolute; left: 20px; top: 80px">
The first letter in this sentence is printed 20 pixels from the left edge of the window and 80 pixels from the top.
</DIV>

Let's break that down a bit. STYLE of course tells the browser that a style command is coming. And while we're on the word, I should point out that <STYLE> must have a closing </STYLE> tag unless it is used inside of an HTML tag as in the above. But we'll get into that later.

position: absolute; means that the coordinates refer to the absolute top left corner of the display window which is the default for absolute positioning.

left: 20px is the distance from the left edge of the window. These dimensions are given in pixels, but you can use any of the following values if you prefer:

pixels ...........px inches ..........in points ...........pt centimeters ...cm percent ..........%

top: 80px; is the number of pixels from the top.

Notice the placement of the colons and semicolons... a semicolon is needed after every definition set except the last one. And while we're on the subject of details, keep in mind that syntax is as unforgiving in style sheet usage as it is in, say, "javascript". Try using the above sample while leaving out a quote mark and you'll see what I mean.

Now let's look at the same window, but with the y, or vertical coordinate, set to 10 instead of 80.

As you can see, the term absolute positioning means exactly what it says; anything under the positioned text is overwritten as if it weren't even there. This can be both a problem and a good thing. For instance, for some design considerations you may want to overwrite an image.

Let's change the code again, and we'll add a background color to the text and a width definition like this example:

STYLE="position: absolute; left: 110px; top: 100px; background-color: gold; width: 200px"

Are you wondering about a height definition? Well, it can be used, but it is usually easier and safer to let the text width adjust the height of the text automatically, so the height is seldom used.

We've looked at absolute positioning, so let's use relative positioning in the next example. We will use the same code as in example 2, with the only change being the positioning style.

<DIV STYLE="position: relative; left: 20px; top: 10px">
The 'T' in this text is printed 20 pixels from the left edge of the window and 10 pixels from the top.
</DIV>

Okay, so it wasn't printed 10 pixels from the top, it was positioned relative to the logo image. Or to be more exact, relative to the upper left corner of the page below the preceding element. If you placed this code inside a table, the x and y coordinates would start from the upper left corner of the table, if there was nothing else in that table for the text position to be relative to. Get it? If not, use these examples to play around with and you'll soon pick up the idea; just remember that absolute means with respect to the document main window, and relative positioning means the coords will be from the end or bottom of the closest preceding element in your code before your positioning statement.

Whew! That was a long-winded sentence. Here's an example of inline style positioning with an image.

<img style="position: absolute; left: 110px; top: 65px; width: 278px; height: 64px" src="images/wc3.gif">

Yeah, I moved the button... Just making sure you're really awake.

Again, take note of the placement of the colons, semicolons, and quote marks. As you see, style sheets can be very helpful with placement of things on your page. You can use the same basic format for almost anything you wish, whether images, tables, marquees, etc.

I should also point out that you can use either upper or lower case letters most of the time in css, the same as with html; I use lower case almost exclusively because most of the programming languages I've used for the last 20 years are case-sensitive and I'm a creature of habit. There are few css or html words that require a certain case, except for the rare thing like the EMBED html tag. In html work, I will sometimes use uppercase tags for a certain section of code I want to find quickly so it stands out. But it's a matter for you to decide for yourself. I will say, though, that if you ever intend to learn any real programming languages, it might be a good idea for you to use lower case too, just to get used to only using caps when it is called for in your code.

I think you should have a good idea of how style commands can be used inline with your html code; now we'll get into making an inline style block. A style block is simply a style sheet that is inserted in the html document; technically, it isn't considered a style sheet unless it is a separate document that is called by the html document. We'll get to that in a moment. First of all, your style block, or sheet, for simplicity's sake should begin with this html tag:

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

//-->
</style>

Of course the comment symbols are there to keep older browsers from printing out the style definitions where you don't want them. Notice I called these 'html' tags, and that is just what they are. They tell the browser to expect style definitions and when they are over with, and these tags aren't technnically a part of the style sheet. Style blocks belong in the head section of your document.

I mentioned earlier that there was a difference between an inline style block and a style sheet. The only real difference is placement. The style block goes into the html document head section, and the style sheet is uploaded to your website space and is called by the html document as we described briefly at the top of this page. Here's the example again, so you don't have to go back up there:

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

When using a separate, or spanned style sheet, the above link should also go into the head section of your document for two reasons: first, the browser will load it before those things that the style will be applied to in the body section, and secondly it will be loaded into memory just as if the sheet was written right into the head section instead of saved separately. And don't forget the '.css' extension so the browser will know it from an html file.

Here is a fairly complete example of a style sheet:

<style type="text/css">
<!--hide

Does a style sheet have to follow this form? No, I like to set them up like this to make it easier to find my way through the code in case I want to modify anything. Style sheets are like html code- spaces and carriage returns are not usually a problem the way they are in, say, "javascript".

Class

Let's pick things apart a little bit. Notice that there are 3 style definitions for the 'p' or paragraph tag; The last one is the definition for all regular paragraph tags used in this page. The prior two are a little different though- p.head and p.code. These two are used to define paragraph class definitions. In other words, they are used to set up a separate classification for the 'p' tag for special uses. The 'p.head' definition is used when I want to make a large header like the one just above here that says "Class". The 'p.code' is used to color the code examples blue.

I could have used 'p.header' or 'p.whatever' if I had wanted to. The name after the period is whatever you want it to be. The period between the 'p' and the class name is simply to tell the browser that this is a 'class' definition. The example sheet above is a part of the spanned style sheets I use for this tutorial, so if I want to make a header I simply code it like this in the html document:

<p class="head">
Example
</p>

...and the output is this:

Example

Or, if I want to set apart a code example and make it easier for you to find it from amongst all the other gobbledegook on the page, I can do this:

<p class="code>
This is a code text example
</p>

...and get this:

This is a code text example

The reference to TD is for the text in your table data cells; Any style definition placed outside of a table will not affect the contents of a table, so 'TD' can be used to format the text in all table cells in the document. The A: hover reference is for when the mouse pointer is held over a link; however, this is a definition in a modified version of CSS, called CSS-P, and is IE 4 specific.

Here is a style example for the paragraph tag for you to look at, and then we'll take it apart and analyze it a little.

First of course is the 'P' (Paragraph) tag... or it could be an 'H1' (Header) or whatever. Next comes the left-hand curly brace which is used at the start of a style definition set. This is mandatory.

Next, we come to the first definition set which here is the text align attribute. There must be a colon between the attribute and its value, which for text can be left, center, right or justify. Why the creators decided a left value was needed is mystifying, since left is the default. If you want all your text left-justified you can just leave this whole definition set out. Notice that at the end of this set, there is a semicolon-- and that has to be there, unless there is no definition set following. (Notice there is no semicolon after the value '#0000CC')

Then there is the text decoration. Some values are underline, overline, italic, line-through, or none.

Now we come to the font definition. The reason there are three fonts listed, with commas separating them, is that the fonts you specify will not be displayed on the users screen unless that particular font is on his hard drive. If the user doesn't have Verdana, then Arial will be displayed; if he doesn't have that font, then any sans serife font will be displayed, whichever one the browser chooses first. I use these three because they are all very similar, very common and clear to read. You can choose whatever font you want, but keep in mind that if the viewer of your page doesn't have that font, he won't see it.

Next is font size, and it can be measured in points (pt), pixels (px), inches (in), centimeters (cm) or as a percentage value (%), but be careful with the last three, they can make some mighty big letters.

Font weight is next and you have a lot of choices, although most of them are seldom used. They are: extra-light, light, demi-light, medium, bold, demi-bold, and extra-bold. If you just want normal text, you can leave this out.

Line-height is the distance between lines, measured from the top of one line to the top of the next line, not the space between the lines.

Letter-spacing is the space between each letter; this is supported by Internet Explorer 4+ but not by Netscape at the present time.

Last of all is the color definition. You can use the hex values as in the example, or any of the word colors available such as navy, red, etc. Again, notice that since the color value is the last in the list, a semicolon is not needed. However, always remember the last curly-brace is needed to let the browser know you are done with that particular style definition.

If you want to change the format from the above, you can make it just about any way you want, as long as you keep the necessary operators where they belong. You can do it like so, if you want:

P {align: justify; font-family: Verdana, arial, sans-serif; font-size: 11pt; font-weight: bold; color: #0000CC}

I don't like this shorter method because it makes it a little harder to wade through your code, but of course how you do it is up to you.

That's about it for style sheets. CSS is, in my opinion, one of the best answers to browser compatibility if only IE and NS would wise up and fully support it. We have only touched on the possibilities of style, but the above is about all of the subject that is cross-browser compatible at this time. However, you can find a few more examples of how style can be used in special ways in the sections on Margins and Dynamic HTML. Thanks for dropping by.