First things first: This tutorial
is an updated version of my original style sheet tutorial. Style Sheets, A.K.A.:
Cascading Style Sheets, A.K.A.: CSS, are becoming more popular now that they are
cross-browser models thanks to Netscape’s version 4.x including the commands.
This is a general overview of Style Sheets. You’ll find more specific Style Sheet
elements explained in the Positioning,
Class & ID, and DHTML tutorials.
…use these to jump around or read it all.
Wouldn’t it be nice if you could
say to all browsers that enter your page – “This is how I want
you to handle my text.” You could make all H3 commands arial
font. You could make all paragraph commands indent a half inch.
You could specify a distance between your lines! You could ask
for the world on a string! You wouldn’t get it, but you could
ask. It’s the other stuff I’m talking about.
Explorer 3 and above and Netscape 4.0 (and all those to come)
offer you more control through the use of what are titled
“Style Sheets”. It’s actually a novel concept. Instead of
writing font size, weight, margin commands, etc, etc, again and
again…you write them once and the whole page feeds off of that
one master list, that one style sheet.
Style Sheets? Cascading Style Sheets, or CSS?
Any one. They all mean the same thing. I’ll tell you
what I really find funny. I had the original style sheets (usually called Explorer
Style Sheets when referenced on other pages) up for six months when Netscape 4.0 came out.
All of a sudden I was over run with letters asking me when I was going to put up a
tutorial on Cascading Style Sheets and/or CSS even though they mean the same thing.
Yet this pup had been sitting waiting all the time. I just hadn’t updated the name
to the new version.
The term “Cascading” Style Sheets is used because
more than one Style Sheet can affect the same page. For instance, if you are using
a Style Sheet on the actual document, called an “in-line”, and a style sheet that is being
referenced by multiple pages, called a “span”, both can have an effect on the items in
the page. If both the in-line and the span Style Sheet are attempting to affect the same
item, like an <H1> command, the closest to the <H1>command wins. That would be
the in-line in this case.
In case you’re wondering, if two span Style Sheets are attempting
to affect the same <H1> command, the one listed second in the actual HTML
document wins. It’s closest to the command going from the top of the document.
Implementing the Style Sheet
OK, you can do this one of two ways:
- You can put a separate style sheet on each page.
~or~
- You can create one style sheet and link all your pages to it
One Style Sheet — One Page
This is the way I see style sheets
being used most often. To see a couple in action, head to USA Today or ESPN. Both use style
sheets on their pages. I’m using that type of style sheet on this page. Check the source if you don’t believe me. Go ahead – I dare ya!
In all fairness, I should mention
that when used like this, it technically isn’t a style sheet, it’s an in-line style block. But another term just pushes something useful out of your brain. …and we can’t have that.
Follow these rules to place a Style Sheet (Block) on your
page:
- It must be within the <HEAD> and </HEAD>
commands.
- The text must be surrounded by <STYLE TYPE=”text/css”>
and </STYLE>
Remember that CSS from above? It Stands for Cascading Style Sheets?
- The style sheet is text so if you just type it on the page,
it will show up and we can’t have that. So! In addition to the
the style commands above, surround the text with <!– and
–> Those happy little commands make the text invisible. Like Wonder Woman’s jet. Man, I loved that show.
When you’re all done, the format will look like this:
<HEAD>
<STYLE TYPE=”text/css”>
<!–
Style Sheet information goes in here…
–>
</STYLE>
</HEAD>
Hey! Make With The Style Sheet Already, Bub!
This gets a little confusing, but
there is a method to the madness. I’ll give you the format to
follow and you plug in what you want to work with.
Here’s the basic format:
TAG {definition; definition; definition}
Here’s what a line from this page’s style sheet looks like:
H2 {font-size: 16pt; font-style: italic; font-family:
arial}
OK – Lookie Here! There are a few things I want to point
out:
- Notice the thing before the definition is a “{” not a
parentheses or a “]”.
- Notice the spaces! You don’t have to leave them, but it helps to be able to read your style sheets later. Just don’t forget the semi-colons.
- Notice each definition is separated by a semi-colon, but the
definition contains a colon! Confusing I know, but that’s the
way it goes in Internet-land.
You’re not limited either. If you can somehow find a way to use
30 Style Sheet commands to affect the same H2 command, bully for you! Just remember to
separate them all by semi-colon.
What HTML Tags Can I Define?
As far as I can tell, you can
define any HTML tag. Now, some definitions will be silly with
some tags. I mean, a font definition with an HR tag seems a bit
goofy, don’t you think?
I see the style sheets using these tags the most:
- H1 through H6
- P
- BODY
- A:link (That denotes the unvisited link)
- A:visited (That denotes the visited link)
- DIV (That denotes a division of the page)
The Definitions
Below are 28 very common Style Sheet commands. You can put together a myriad of different
looks with these. However, this is a list of less than half of those available. At the
end, I’ll give a couple of links to full lists of commands. But I’ll bet these become
your work-horses. Most of the other commands are overly specific.
- The FONT/TEXT Definitions:
- font-family
- Denotes typeface.
- H2 {font-family: arial}
- Denotes typeface.
- font-style
- Denotes the style of the text.
Use normal, italic, small
caps, or oblique for commands.
- H3 {font-style: small caps}
- Denotes the style of the text.
- font-size
- Denotes the size of the text.
Specify in points (pt),
inches (in), centimeters (cm), pixels (px), or percentage (%).
- H4 {font-size: 20pt}
- Denotes the size of the text.
- font-weight
- Denotes text presence.
Specify in extra-light, light,
demi-light, medium, bold, demi-bold, or extra-bold.
- A:link {font-weight: demi-light}
- Denotes text presence.
- font-variant
- Denotes a variant from the norm.
Specifiy normal and small-caps
- H2: {font-variant: small-caps}
- Denotes a variant from the norm.
- text-align
- Justifies the alignment of text.
Specify as left, center,
or right
- H1 {text-align: center}
- Justifies the alignment of text.
- text-decoration
- Lets you decorate the text (duh).
Specify as italic, blink, underline, line-through, overline, or
none.
- A:visited {text-decoration: blink}
- Lets you decorate the text (duh).
- text-indent
- Denotes margins. Most often used with the <P>. Make
sure you use </P also!>
Specify in inches (in), centimeters (cm), or pixels (px).
- P {text-indent: 1in}
- Denotes margins. Most often used with the <P>. Make
- word-spacing
- Denotes the amount of spaces between words.
Specify in points (pt),
inches (in), centimeters (cm), pixels (px), or percentage (%).
- P {word-spacing: 10px}
- Denotes the amount of spaces between words.
- letter-spacing
- Denotes space between letters.
Specify in points (pt),
inches (in), centimeters (cm), pixels (px), or percentage (%).
- P {letter-spacing: 2pt}
- Denotes space between letters.
- text-transform
- Denotes a transformation of the text.
Specify capitalize, uppercase, lowercase.
- B {text-transform: uppercase}
- Denotes a transformation of the text.
- color
- Denotes color of text.
See here for a few
color codes. If you use the six digit hex codes, make sure you place a hash mark (#) in front.
- H3 {color: #FFFFFF}
- Denotes color of text.
- font-family
- The MARGIN/BACKGROUND Commands
Note! When used with the “BODY” tag these commands affect
the entire page!- margin-left
- margin-right
- margin-top
- Denotes space around the “page”.
Specify in points (pt), inches (in), centimeters (cm), or pixels
(px).
- BODY {margin-left: 2in}
- P {margin-right: 12cm}
- BODY {margin-top: 45px}
- Denotes space around the “page”.
- margin
- Denotes all three margin commands above in one command.
The pattern follows top, right, and then left.
- P {margin: 3in 4cm 12px} (note no commas or
semi-colons)
- Denotes all three margin commands above in one command.
- line-height
- Denotes space between lines of text.
Specify in points (pt), inches (in), centimeters (cm), or pixels
(px), or percentage (%).
- TEXT {line-height: 10px}
- Denotes space between lines of text.
- background-color
- Denotes page’s background color.
Specify the color in hex or word codes, or use “transparant”
- BODY {background-color: #ffffff}
- Denotes page’s background color.
- background-image
- Denotes the background image for pages.
Specify the image you want through that image’s URL.
- BODY {background-image: http://www.page.com/dog.jpg}
- Denotes the background image for pages.
- background-repeat
- Denotes how the image will tile.
Specify repeat-x, repeat-y, or no-repeat.
- BODY {background-repeat: repeat-y}
- Denotes how the image will tile.
- background-attachment
- Denotes how the image will react to a scroll.
Specify scroll, or fixed.
- BODY{background-attachment: fixed}
- Denotes how the image will react to a scroll.
- margin-left
- The Positioning/Division Definitions:
These commands come into play when you begin working with text and image positioning. Note these examples are given
using a specific item.
- position
- Denotes the placement of an image or a division of the page.
Specify absolute for specific placement, or relative for a relative placement to other images.
- <IMG STYLE=”position:absolute” SRC=”joe.jpg”>
- Denotes the placement of an image or a division of the page.
- left
- Denotes amount of space allowed from the left of the browser screen when positioning an item.
Specify in points (pt),
inches (in), centimeters (cm), pixels (px), or percentage (%).
- <IMG STYLE=”position:absolute; LEFT: 20px;” SRC=”joe.jpg”>
- Denotes amount of space allowed from the left of the browser screen when positioning an item.
- top
- Denotes amount of space allowed from the top of the browser screen when positioning an item.
Specify in points (pt),
inches (in), centimeters (cm), pixels (px), or percentage (%).
- <IMG STYLE=”position:absolute; LEFT: 20px; TOP: 200pt” SRC=”joe.jpg”>
- Denotes amount of space allowed from the top of the browser screen when positioning an item.
- width
- Denotes width of image or page division.
Specify in points (pt),
inches (in), centimeters (cm), pixels (px), or percentage (%).
- <IMG STYLE=”position:absolute; WIDTH: 80px; LEFT: 20px; TOP: 200pt” SRC=”joe.jpg”>
- Denotes width of image or page division.
- height
- Denotes height of image or page division.
Specify in points (pt),
inches (in), centimeters (cm), pixels (px), or percentage (%).
- <IMG STYLE=”position:absolute; HEIGHT: 55px WIDTH:80px; LEFT: 20px; TOP: 200pt” SRC=”joe.jpg”>
- Denotes height of image or page division.
- overflow
- If the item is too large for the height and width specified, this tells the page what to do with the overflow.
Specify visible, hidden, or scroll.
- <IMG STYLE=”position:absolute; overflow: hidden; WIDTH: 80px; LEFT: 20px; TOP: 200pt” SRC=”joe.jpg”>
- If the item is too large for the height and width specified, this tells the page what to do with the overflow.
- z-index
- Denotes an item’s position in the layering structure. The lower the number, the lower the layer. An image marker with a 20 would go overtop of an image marked with a 10.
Specify by number.
- <IMG STYLE=”position:absolute; Z-INDEX: 10; overflow: hidden; WIDTH: 80px; LEFT: 20px; TOP: 200pt” SRC=”joe.jpg”>-
- Denotes an item’s position in the layering structure. The lower the number, the lower the layer. An image marker with a 20 would go overtop of an image marked with a 10.
- position
- H1 through H6
For a full list of Style Sheet Commands, visit either of thise great sites:
- C-Net’s Table of Style Sheet Commands
- and there’s always the World Wide Web Consortium’s Style Site
What It All Looks Like
Here’s the Style Sheet from this
page:
<STYLE TYPE-“type/css”>
<!–
BODY {background: #FFFFFF}
A:link {color: #80FF00}
A:visited {color: #FF00FF}
H1 {font-size: 24pt; font-family: arial}
H2 {font-size: 18pt; font-family: braggadocio}
H3 {font size:14pt; font-family: desdemona}
–>
</STYLE>
What If I Want The Same Tag Handled Different Ways?
What you do it assign different
“classes” of tags. Real simple. Look here:
H3.first {font-size: 20pt; color: #FF00FF}
H3.scnd {font size: 18pt; color #DD00FF}
See what I did? I labeled the H
commands separately by adding a dot and then a suffix. I used
“first” for the first type and “scnd” for the second type. You
can use what ever you want. I like these determinants. When you
place them on your page, you do this in the text:
<H3 CLASS=”first”>This will be affected as outlined in
“H3.first”</H3>
<H3 CLASS=”scnd”>This will be affected as outlined in
“H3.scnd”</H3>
I get a little more in-depth in the Classes and ID’s Tutorial
One Style Sheet–Many Pages
First off, create a style sheet as you did above. This will be the only thing on the page. No <HEAD>
commands this time. You will make the file so that if I wanted, I could just copy and paste what you have
right into my own <HEAD> commands. Which is just about what you will be asking the
computer to do.
The Style Sheet will be a simple text file with a .css suffix.
Let’s say you name your style sheet “fred”. Its name would become “fred.css”.
The suffix is required for browsers to recognize it as a style sheet rather than a
simple mesh of letters.
Place this command on your page to call for the Style Sheet:
<LINK REL=stylesheet HREF=”http://www.your.page/fred.css”
TYPE=”text/css”>
Here’s what’s happening:
- LINK tells the browser something must be linked to
the page.
- REL=stylesheet tells the browser that this linked
thing is relative to this page as a style sheet.
- HREF=”—“ denotes where the browser will find the style sheet.
- TYPE=”text/css” tells the browser that what it is
reading is text that will act as a Cascading Style Sheet. If the document isn’t text
with a .css suffix – no dice.
Every page that contains this
command will be affected by the one style sheet you created and
placed in your directory. One sheet – many pages.
Can I Use These Style Element on Individual Items?
Yes you can. They simply sit
inside the TAG you are working with. Just make sure to denote
them using the STYLE command. Since they sit inside another
command as just a defining command, they require no /STYLE. In
that position, they affect only what you say they will rather
than the entire page. Like so:
<FONT STYLE=”font-weight: extra light; font-family:
courier”>affected text<FONT>
Follow this format and you can
define a style for just about any HTML TAG. There’s also a method of setting up classes
of items that works pretty much the same way. See just below for the link.
Now Try These
Now that you have the basics in hand, try these more
specific CSS tutorials: Positioning,
Class & ID, and DHTML
