Style sheets are awesome! The only draw-back, really, is not all browswers can "see" some of the fancier tricks (ex. if you're viewing this page with something other than IE, you're not likely seeing a semi-transparent table background, but rather, a solid white instead. Boo!)
But overall, this is another thing I learned how to implement that saves me tons of times and effort, especially when I want to do some quick but sweeping changes on a site to anything such as colors, backgrounds, fonts, link properties and so on.

Now, you *can* hard-code this kind of thing into the head of all your pages...but the smarter thing to do would be to make a .css file you upload. And just like the php include trick, modifications to this one file will effect your whole site rather than your having to go back and individually edit every page on your site. Handy!

Step 1: Find yourself a good site that will clue you in on what the style elements are you can use and what they do. Even if you know basic html, this is a whole other ballgame, but not that complicated.
This site is a wonderful resource for this purpose, and I find myself going back again and again to learn some new tricks. You can set parameters for all sorts of stuff with css - your tables and their properties, images, backgrounds, text - you name it. But for the purposes of this tutorial, we'll just concentrate one element - font.

Step 2: Open notepad or some sort of simple text editor equivelent. This is where you're going to put all your little css parameters for your page. Like I said, we'll just be using font as a simple example.
Put a line such as this in the file:
.font {FONT-FAMILY: Verdana, Helvetica; FONT-SIZE: 12px; COLOR: #000000; text-align: justify}
Just a few elements are laid out here - the family, size, color and alignment. But as the link above will show you, there's a whole lotta other attributes you can set. And you can also use several font styles, colors and sizes on the same web page. How? Add a second line under the first, like so:
.font1 {FONT-FAMILY: Verdana, Helvetica; FONT-SIZE: 10px; COLOR: #000000}
Just give 'em different names and you can put as many lines as you want for as many different fonts as you'll ever need.

Save the file with a .css extention (if you do it right, the icon for the file will have a little gear on it in Windows), and call it something like style.css - this is very important. Upload it to your server wherever your web pages are that you want to be affected.

Step 3: Getting them to show up on your web page. Like the php include thing, you gotta have some way on your web pages to "tell" the server to look for and "obey" your style sheet. Although some items, such as commands you lay out for your body tag (background images, color, etc) and links won't need any extra prompting other than the first thing below (I believe because the body tag itself and the link anchor tag are enough of a prompt for those). Other things will need more information to appear, though.

First of all, in the head of your web pages, you want to put this line of code:
<LINK REL="Stylesheet" HREF="style.css" TYPE="text/css" MEDIA="All">

That's going to tell the server, "hey, I'm using a style sheet - find it!"

But...how will the server know what text you want to show up the first way (.font) and what text you want to show up differently (.font1)? More tags on your web pages, that's how.

For example, any text that you want to show up using the parameters set out for .font, put this code before all such text:
<div class="font">
Any text appearing after that should show up in the style, size and color you determined for .font in the style sheet. To end that effect and move to your second font style (.font1), you'll first want to "close" the tag on the first command.
A simple </div> will do.
Then put <div class="font1"> before the next batch of text you want to appear as your alternative style, color and so on that you put in the style sheet. Just close the tag whenever you want that effect to end.

Only thing I found with fonts, anyway, is that using this command inside table cells takes some extra doing - in that the div class will not effect the whole table simply by putting it at the top - you have to add it before the text in each *cell* to get it to work.

Step 4: Now upload your web page - it should work! If you don't have text showing up as it should, make sure your style sheet is uploaded and in the right spot on your server - and that all the syntax on it is correct. One missing semi-colon or fancy bracket and it's a no-go.
If that's not the problem, make sure you've got all your div tags in placed and closed when they should be closed.
At any rate, play around with it. After you get the hang of it, it's not only a great time saver but you can do some fun stuff with it. This is another thing I don't know how I got along without before.


Main