Post by Lady Idril on Nov 26, 2006 19:13:14 GMT -5
HTML Layout Tutorial
Covered: Tables, DIV Elements, CSS.
Welcome to the most confusing HTML tutorial on the internet! I'm going to be diving into the coding used to make THIS layout, and I'll be explaining the techniques I use and (hopefully) why I use them.
The images I'll be using:
background and header
NOTE: In this tutorial, I will not be going into detailed introductions to each method of HTML. If you are a beginner, I suggest maybe you keep THIS link handy, it's very helpful when learning HTML.
Now. Let's start out by taking a look at the source code, as follows.
____________
<HTML>
<HEAD>
<TITLE>casee marie's art portfolio</TITLE>
</HEAD>
<BODY>
<body background="layouts/robbieback.jpg" bgproperties="repeat" bgcolor="#FFFFFF">
<div style="position:absolute; left:0; top:0;"><img src="layouts/robbieheader.jpg" border="0"></DIV>
<div style="position:absolute; left:400; top:600;">
<table cellspacing="3" cellpadding="0">
<tr><td width="120" bgcolor="#ffeea1">
<b>THE GIRL</B>
</td></tr>
<tr><td width="120">
Casee. Idril. 17. May 12th. Taurus. POTC LOTR HP SW medieval history greek mythology Arthurian legend web design BSB fanlistings fanfiction aspiring writer Pirate horses Draco/Ginny shipper More.
</td></tr>
</table>
<br><br>
<table cellspacing="3" cellpadding="0">
<tr><td width="120" bgcolor="#ffeea1"><b>NAVIGATION</B>
</td></tr>
<tr><td width="120">
<a href="me.html" target="main">Artist</A><br>
<a href="art.htm" target="main">Artwork</A><br>
<a href="site.html" target="main">Site</A><br>
<a href="links.html" target="main">Links</A><br>
</td></tr>
</table>
<br><br>
<table cellspacing="3" cellpadding="0">
<tr><td width="120" bgcolor="#ffeea1"><b>ETC</B>
</td></tr>
<tr><td width="120">
<a href="http://www.myspace.com/silentious" target="_blank">MySpace</A><br>
<a href="facebook.com/profile.php?id=502613269" target="_blank">Facebook</A><br>
<a href="http://www.last.fm/users/ladyidril" target="_blank">Last.FM</A><br>
<a href="http://idrilelendil.livejournal.com" target="_blank">Livejournal</A>
</td></tr>
</table>
<br><br>
<table cellspacing="3" cellpadding="0">
<tr><td width="120" bgcolor="#ffeea1"><b>Affiliates</B>
</td></tr>
<tr><td width="120">
<a href="http://www.white-wave.com" target="_blank">Jen</A><br>
<a href="http://www.goodnight-kiss.org" target="_blank">Jenn</A><br>
<a href="http://www.novicewriters.net" target="_blank">Melissa</A><br>
</td></tr>
</table>
</div>
<div style="position:absolute; left:90; top:550; width:290;">
<table cellspacing="2" cellpadding="3">
<tr><td bgcolor="#ffeea1">
<b>November 19th</B></td></tr>
<tr><td>
New layout! Look at that. Nothing utterly spectacular, but it works. I was going for really soft shades, and I was really inspired by these shots of Jen Lopez from Harpers Bazaar. Learn more about the layour <a href="layout.html">here</A>
<br><br>
Lots of new works. 3 colorizations (Christian Slater, Audrey Hepburn, Kate Moss), 1 new fanart (Keanu Reeves) and a wallpaper version of it, also 1 new orignal piece featuring the stunning Hye Park. Also, my darling <a href="http://www.goodnight-kiss.org/" target="_blank">Jenn</A> suggested I do more Christina Aguilera pieces, so I went searching for pictures (dang she's stunning, isn't she?) and came up with a desktop.
Enjoy!
<br><br>
<a href="desktops/002.jpg" TITLE="Keanu Reeves"><img src="desktops/icons/002.jpg" border="0"></A>
<a href="fanarts/041.jpg" TITLE="Keanu Reeves"><img src="fanarts/icons/041.jpg" border="0"></A>
<a href="colors/025.jpg" TITLE="Christian Slater"><img src="colors/icons/025.jpg" border="0"></A>
<a href="colors/026.jpg" TITLE="Audrey Hepburn"><img src="colors/icons/026.jpg" border="0"></A>
<a href="colors/027.jpg" TITLE="Kate Moss"><img src="colors/icons/027.jpg" border="0"></A>
<a href="origart/012.jpg" TITLE="Frozen Christmas feat. Hye Park"><img src="origart/icons/012.jpg" border="0"></A>
<a href="desktops/003.jpg" TITLE="Christina Aguilera"><img src="desktops/icons/003.jpg" border="0"></A>
</td></tr>
<tr><td>
<a href="javascript:HaloScan('007');" target="_self"><script type="text/javascript">postCount('007');</script></a> | <a href="contact.html">tag</A> | <a href="http://idrilelendil.livejournal.com" target="_blank">lj</A>
</td>
</table>
<br><br>
<table cellspacing="2" cellpadding="3">
<tr><td bgcolor="#ffeea1">
<b>November 15th</B></td></tr>
<tr><td width="390">
I'm alive, yes! I've had these few pieces done for days and haven't gotten to posting them. I realized my last six fanarts were focused on two gentlemen: Robbie Williams and Christian Slater. I promise, someday I'll start featuring more people in my artwork.
Speaking of which, no new updates in fanart. Can you believe it? I just haven't come up with anything I'm totally happy with yet.
<br><br>
A new colorization, though. Featuring Mr. Orlando Bloom. Also, two new original arts: New York City Heart and Creative Energy, the latter of which features my own stock photography.
<br><br>
A new vector, too! Believe it! Very simple, I'm still working on details. I guess we can call it a work in progress, but for the moment it's complete until I find the time and talent to produce something further that doesn't completely revolt me. I'm so kind, no?
<br><br>
<a href="colors/024.jpg" TITLE="Orlando Bloom"><img src="colors/icons/024.jpg" border="0"></A>
<a href="origart/011.jpg" TITLE="New York City"><img src="origart/icons/011.jpg" border="0"></A>
<a href="origart/010.jpg" TITLE="Creative Energy"><img src="origart/icons/010.jpg" border="0"></A>
<a href="vextors/003.jpg" TITLE="Phantom of the Opera"><img src="vectors/icons/003.jpg" border="0"></A>
</td></tr>
<tr><td>
<a href="javascript:HaloScan('006');" target="_self"><script type="text/javascript">postCount('006');</script></a> | <a href="contact.html">tag</A> | <a href="http://idrilelendil.livejournal.com" target="_blank">lj</A>
</td>
</table>
</div>
<style>
<!--
body,tr,td {font-family:verdana; color:#3bd4fd;font-size:7pt;line-height:8pt;letter-spacing:0pt;}-->
-->
<!--
BODY{scrollbar-track-color: none;
scrollbar-arrow-color:none;
scrollbar-face-color: none;
scrollbar-highlight-color: none;
scrollbar-3dlight-color: none;
scrollbar-darkshadow-color: none;
scrollbar-shadow-color: none;}
-->
<!--
A:link {color: #3bd4fd; text-decoration: none; font-weight:normal;}
A:visited {color: #3bd4fd; text-decoration: none; font-weight:normal;}
A:active {color: #3bd4fd; text-decoration: none; font-weight:normal;}
A:hover {color: #3bd4fd; text-decoration: none; font-weight:normal;}
-->
</style>
</BODY>
</HTML>
____________
Not that bad, right? It should be pretty easy to figure out. Now I'm going to break it down, make it a little less confusing..hopefully. We'll start with the painfully basic tags:
<HTML>
Whenever you start an HTML document it *must* begin with an HTML tag. That's just the rules.
<Head>
Your head tag is the place for information that will not be visible on the page. Meta tags, script tags and titles are all examples of things that are contained in the head tag.
<title> </title>
Your title tag is a great little tag. Any text you enter there will appear in the reverse bar of the viewer's browser. A word of advice, however: don't go overboard with your title. Quirky symbols and sticky caps tend to be a bit annoying to most people.
<body>
The body tag is where all of the coding for your webpage will go: tables, frames, etc. This is your canvas.
<body background="layouts/robbieback.jpg" bgproperties="repeat" bgcolor="#FFFFFF">
My background image, very simply set. If you're looking to set just a simple background color, you can remove the "background='layouts/robbieback.jpg'" tag and change the color to whichever you desire. For more information on background images, properties and the like, visit HERE.
<div style="position:absolute; left:0; top:0;"><img src="layouts/robbieheader.jpg" border="0"></DIV>
My header image, positioned with a DIV element. This is not necessary, but I like my documents to be organized and this pretty much guarentees that. I hate codes just floating around a page, these DIVs contain them. This particular DIV is holding the code for my header image:
<img src="layouts/robbieheader.jpg" border="0">
This is a typical tag for embedding an image. A very simple tag, and very useful.
What's a DIV element?
DIV elements are designed to hold groups of content and allow you to place them anywhere on your site using "absolute position". You'll see the tags that say "left:0; top:0;". Those are key. Using dimensions in pixels, you can move this little box of content anywhere on your site.
<div style="position:absolute; left:400; top:600;">
<table cellspacing="3" cellpadding="0">
<tr><td width="120" bgcolor="#ffeea1">
<b>THE GIRL</B>
</td></tr>
This lengthy code is the right column on the main layout, which holds the Navigation, Affiliates and other such information.
Let's go through it a bit.
I started with yet another DIV element, we already know about them. In the DIV element I've entered a table.
These tables are, quite frankly, pointless. There's no need for them at all. Really, I only use them for organization yet again. If you didn't want to use these, you could just enter a "width:120;" tage in the DIV element and be done with it. But not me. I like to be difficult.
<table cellspacing="3" cellpadding="0">
The start of our table, obviously. Cellspacing and cellpadding, what are those? Difficult to describe. I'm going to yet again redirect you HERE, as dear Lissa explains it much better than I. Much better.
<tr><td width="120" bgcolor="#ffeea1">
<b>THE GIRL</B>
</td></tr>
<tr> means "table row". A table is a grid, simply, and whenever you enter a <tr> you're starting a new row. <td> means "table data" and betwix its brackets is where you'll customize the data entered between <td> and </td>. (Note: this does not effect your entire table, just that specific data).
You'll notice in my <td> tag I've entered a width and a background color that would effect the title "The Girl". I then ended the data and the row (</td>, </tr>). I repeat this process for the small group of information about me:
<tr><td width="120">
Casee. Idril. 17. May 12th. Taurus. POTC LOTR HP SW medieval history greek mythology Arthurian legend web design BSB fanlistings fanfiction aspiring writer Pirate horses Draco/Ginny shipper More.
</td></tr>
</table>
<br><br>
After entering that information, I closed off the table completely (</table>) and entered two breaks (<br>, <br>). I did this in order to space the tables apart from one another. I then repeated the entire process for "Navigation", "Etc" and "Affiliates". And don't forget to close off the DIV when you're done (</div>).
<div style="position:absolute; left:90; top:550; width:290;">
<table cellspacing="2" cellpadding="3">
<tr><td bgcolor="#ffeea1">
<b>November 19th</B></td></tr>
<tr><td>
....
I repeated the same process I used for the right column, with a new DIV element and a new set of tables that holds my updates. It's exactly the same code for the right column, but I took out the width element in the <td> tag and put it in the <div> tag and changed the "left" and "top" values to position the updates where I want them.
<style>
Thus begins our Style Sheet. Quite honestly, I'm not an expert with Style Sheets by any means. I've been using this same sheet for a good year, constantly changing it to match the current layout. If you want to learn more about Style Sheets, go HERE. I certainly can't help with that. However, I can break down what I've already got.
<!--
body,tr,td {font-family:verdana; color:#3bd4fd;font-size:7pt;line-height:8pt;letter-spacing:0pt;}-->
-->
This section is for the appearance of the font. You'll notice the font attributes I've put in (font-family: verdana; color="#3bd4fd; font-size 7py; line height:8pt;). You can customize these to whatever you want.
Note: This sheet will only effect the text on THIS page. I tend to copy-and-paste the code on to each seperate page of my site.
<!--
BODY{scrollbar-track-color: none;
scrollbar-arrow-color:none;
scrollbar-face-color: none;
scrollbar-highlight-color: none;
scrollbar-3dlight-color: none;
scrollbar-darkshadow-color: none;
scrollbar-shadow-color: none;}
-->
This is the element for coloring your browser's scrollbar. I've set each color to "none" because the element does not work in Mozilla Firefox, which is my browser of choice. If you use IE however, you can play around with this element as much as you like.
<!--
A:link {color: #3bd4fd; text-decoration: none; font-weight:normal;}
A:visited {color: #3bd4fd; text-decoration: none; font-weight:normal;}
A:active {color: #3bd4fd; text-decoration: none; font-weight:normal;}
A:hover {color: #3bd4fd; text-decoration: none; font-weight:normal;}
-->
</style>
This element is going to control the font color of all of the links. We have four sections, "Link", "Visited", "Active" and "Hover". I like to keep them all the same color as to avoid a lot of confusion on my site, but the "Hover" section is fun to mess around with. Whatever color you make it will be what the person sees on mouse-over. We also get the option of "text-decoration" which is where you would enter your element of choice (underline, overline, line-through, blink, etc); and there's the "font-weight" option where you can enter your element of choice (normal, bold, italics, etc).
</BODY>
</HTML>
Don't forget to close off your page (</body>, </html>). And there you have it! Your page is complete! Hopefully this tutorial was of some assistance; good luck!
Covered: Tables, DIV Elements, CSS.
Welcome to the most confusing HTML tutorial on the internet! I'm going to be diving into the coding used to make THIS layout, and I'll be explaining the techniques I use and (hopefully) why I use them.
The images I'll be using:
background and header
NOTE: In this tutorial, I will not be going into detailed introductions to each method of HTML. If you are a beginner, I suggest maybe you keep THIS link handy, it's very helpful when learning HTML.
Now. Let's start out by taking a look at the source code, as follows.
____________
<HTML>
<HEAD>
<TITLE>casee marie's art portfolio</TITLE>
</HEAD>
<BODY>
<body background="layouts/robbieback.jpg" bgproperties="repeat" bgcolor="#FFFFFF">
<div style="position:absolute; left:0; top:0;"><img src="layouts/robbieheader.jpg" border="0"></DIV>
<div style="position:absolute; left:400; top:600;">
<table cellspacing="3" cellpadding="0">
<tr><td width="120" bgcolor="#ffeea1">
<b>THE GIRL</B>
</td></tr>
<tr><td width="120">
Casee. Idril. 17. May 12th. Taurus. POTC LOTR HP SW medieval history greek mythology Arthurian legend web design BSB fanlistings fanfiction aspiring writer Pirate horses Draco/Ginny shipper More.
</td></tr>
</table>
<br><br>
<table cellspacing="3" cellpadding="0">
<tr><td width="120" bgcolor="#ffeea1"><b>NAVIGATION</B>
</td></tr>
<tr><td width="120">
<a href="me.html" target="main">Artist</A><br>
<a href="art.htm" target="main">Artwork</A><br>
<a href="site.html" target="main">Site</A><br>
<a href="links.html" target="main">Links</A><br>
</td></tr>
</table>
<br><br>
<table cellspacing="3" cellpadding="0">
<tr><td width="120" bgcolor="#ffeea1"><b>ETC</B>
</td></tr>
<tr><td width="120">
<a href="http://www.myspace.com/silentious" target="_blank">MySpace</A><br>
<a href="facebook.com/profile.php?id=502613269" target="_blank">Facebook</A><br>
<a href="http://www.last.fm/users/ladyidril" target="_blank">Last.FM</A><br>
<a href="http://idrilelendil.livejournal.com" target="_blank">Livejournal</A>
</td></tr>
</table>
<br><br>
<table cellspacing="3" cellpadding="0">
<tr><td width="120" bgcolor="#ffeea1"><b>Affiliates</B>
</td></tr>
<tr><td width="120">
<a href="http://www.white-wave.com" target="_blank">Jen</A><br>
<a href="http://www.goodnight-kiss.org" target="_blank">Jenn</A><br>
<a href="http://www.novicewriters.net" target="_blank">Melissa</A><br>
</td></tr>
</table>
</div>
<div style="position:absolute; left:90; top:550; width:290;">
<table cellspacing="2" cellpadding="3">
<tr><td bgcolor="#ffeea1">
<b>November 19th</B></td></tr>
<tr><td>
New layout! Look at that. Nothing utterly spectacular, but it works. I was going for really soft shades, and I was really inspired by these shots of Jen Lopez from Harpers Bazaar. Learn more about the layour <a href="layout.html">here</A>
<br><br>
Lots of new works. 3 colorizations (Christian Slater, Audrey Hepburn, Kate Moss), 1 new fanart (Keanu Reeves) and a wallpaper version of it, also 1 new orignal piece featuring the stunning Hye Park. Also, my darling <a href="http://www.goodnight-kiss.org/" target="_blank">Jenn</A> suggested I do more Christina Aguilera pieces, so I went searching for pictures (dang she's stunning, isn't she?) and came up with a desktop.
Enjoy!<br><br>
<a href="desktops/002.jpg" TITLE="Keanu Reeves"><img src="desktops/icons/002.jpg" border="0"></A>
<a href="fanarts/041.jpg" TITLE="Keanu Reeves"><img src="fanarts/icons/041.jpg" border="0"></A>
<a href="colors/025.jpg" TITLE="Christian Slater"><img src="colors/icons/025.jpg" border="0"></A>
<a href="colors/026.jpg" TITLE="Audrey Hepburn"><img src="colors/icons/026.jpg" border="0"></A>
<a href="colors/027.jpg" TITLE="Kate Moss"><img src="colors/icons/027.jpg" border="0"></A>
<a href="origart/012.jpg" TITLE="Frozen Christmas feat. Hye Park"><img src="origart/icons/012.jpg" border="0"></A>
<a href="desktops/003.jpg" TITLE="Christina Aguilera"><img src="desktops/icons/003.jpg" border="0"></A>
</td></tr>
<tr><td>
<a href="javascript:HaloScan('007');" target="_self"><script type="text/javascript">postCount('007');</script></a> | <a href="contact.html">tag</A> | <a href="http://idrilelendil.livejournal.com" target="_blank">lj</A>
</td>
</table>
<br><br>
<table cellspacing="2" cellpadding="3">
<tr><td bgcolor="#ffeea1">
<b>November 15th</B></td></tr>
<tr><td width="390">
I'm alive, yes! I've had these few pieces done for days and haven't gotten to posting them. I realized my last six fanarts were focused on two gentlemen: Robbie Williams and Christian Slater. I promise, someday I'll start featuring more people in my artwork.
Speaking of which, no new updates in fanart. Can you believe it? I just haven't come up with anything I'm totally happy with yet.<br><br>
A new colorization, though. Featuring Mr. Orlando Bloom. Also, two new original arts: New York City Heart and Creative Energy, the latter of which features my own stock photography.
<br><br>
A new vector, too! Believe it! Very simple, I'm still working on details. I guess we can call it a work in progress, but for the moment it's complete until I find the time and talent to produce something further that doesn't completely revolt me. I'm so kind, no?
<br><br>
<a href="colors/024.jpg" TITLE="Orlando Bloom"><img src="colors/icons/024.jpg" border="0"></A>
<a href="origart/011.jpg" TITLE="New York City"><img src="origart/icons/011.jpg" border="0"></A>
<a href="origart/010.jpg" TITLE="Creative Energy"><img src="origart/icons/010.jpg" border="0"></A>
<a href="vextors/003.jpg" TITLE="Phantom of the Opera"><img src="vectors/icons/003.jpg" border="0"></A>
</td></tr>
<tr><td>
<a href="javascript:HaloScan('006');" target="_self"><script type="text/javascript">postCount('006');</script></a> | <a href="contact.html">tag</A> | <a href="http://idrilelendil.livejournal.com" target="_blank">lj</A>
</td>
</table>
</div>
<style>
<!--
body,tr,td {font-family:verdana; color:#3bd4fd;font-size:7pt;line-height:8pt;letter-spacing:0pt;}-->
-->
<!--
BODY{scrollbar-track-color: none;
scrollbar-arrow-color:none;
scrollbar-face-color: none;
scrollbar-highlight-color: none;
scrollbar-3dlight-color: none;
scrollbar-darkshadow-color: none;
scrollbar-shadow-color: none;}
-->
<!--
A:link {color: #3bd4fd; text-decoration: none; font-weight:normal;}
A:visited {color: #3bd4fd; text-decoration: none; font-weight:normal;}
A:active {color: #3bd4fd; text-decoration: none; font-weight:normal;}
A:hover {color: #3bd4fd; text-decoration: none; font-weight:normal;}
-->
</style>
</BODY>
</HTML>
____________
Not that bad, right? It should be pretty easy to figure out. Now I'm going to break it down, make it a little less confusing..hopefully. We'll start with the painfully basic tags:
<HTML>
Whenever you start an HTML document it *must* begin with an HTML tag. That's just the rules.
<Head>
Your head tag is the place for information that will not be visible on the page. Meta tags, script tags and titles are all examples of things that are contained in the head tag.
<title> </title>
Your title tag is a great little tag. Any text you enter there will appear in the reverse bar of the viewer's browser. A word of advice, however: don't go overboard with your title. Quirky symbols and sticky caps tend to be a bit annoying to most people.
<body>
The body tag is where all of the coding for your webpage will go: tables, frames, etc. This is your canvas.
<body background="layouts/robbieback.jpg" bgproperties="repeat" bgcolor="#FFFFFF">
My background image, very simply set. If you're looking to set just a simple background color, you can remove the "background='layouts/robbieback.jpg'" tag and change the color to whichever you desire. For more information on background images, properties and the like, visit HERE.
<div style="position:absolute; left:0; top:0;"><img src="layouts/robbieheader.jpg" border="0"></DIV>
My header image, positioned with a DIV element. This is not necessary, but I like my documents to be organized and this pretty much guarentees that. I hate codes just floating around a page, these DIVs contain them. This particular DIV is holding the code for my header image:
<img src="layouts/robbieheader.jpg" border="0">
This is a typical tag for embedding an image. A very simple tag, and very useful.
What's a DIV element?
DIV elements are designed to hold groups of content and allow you to place them anywhere on your site using "absolute position". You'll see the tags that say "left:0; top:0;". Those are key. Using dimensions in pixels, you can move this little box of content anywhere on your site.
<div style="position:absolute; left:400; top:600;">
<table cellspacing="3" cellpadding="0">
<tr><td width="120" bgcolor="#ffeea1">
<b>THE GIRL</B>
</td></tr>
This lengthy code is the right column on the main layout, which holds the Navigation, Affiliates and other such information.
Let's go through it a bit.
I started with yet another DIV element, we already know about them. In the DIV element I've entered a table.
These tables are, quite frankly, pointless. There's no need for them at all. Really, I only use them for organization yet again. If you didn't want to use these, you could just enter a "width:120;" tage in the DIV element and be done with it. But not me. I like to be difficult.
<table cellspacing="3" cellpadding="0">
The start of our table, obviously. Cellspacing and cellpadding, what are those? Difficult to describe. I'm going to yet again redirect you HERE, as dear Lissa explains it much better than I. Much better.
<tr><td width="120" bgcolor="#ffeea1">
<b>THE GIRL</B>
</td></tr>
<tr> means "table row". A table is a grid, simply, and whenever you enter a <tr> you're starting a new row. <td> means "table data" and betwix its brackets is where you'll customize the data entered between <td> and </td>. (Note: this does not effect your entire table, just that specific data).
You'll notice in my <td> tag I've entered a width and a background color that would effect the title "The Girl". I then ended the data and the row (</td>, </tr>). I repeat this process for the small group of information about me:
<tr><td width="120">
Casee. Idril. 17. May 12th. Taurus. POTC LOTR HP SW medieval history greek mythology Arthurian legend web design BSB fanlistings fanfiction aspiring writer Pirate horses Draco/Ginny shipper More.
</td></tr>
</table>
<br><br>
After entering that information, I closed off the table completely (</table>) and entered two breaks (<br>, <br>). I did this in order to space the tables apart from one another. I then repeated the entire process for "Navigation", "Etc" and "Affiliates". And don't forget to close off the DIV when you're done (</div>).
<div style="position:absolute; left:90; top:550; width:290;">
<table cellspacing="2" cellpadding="3">
<tr><td bgcolor="#ffeea1">
<b>November 19th</B></td></tr>
<tr><td>
....
I repeated the same process I used for the right column, with a new DIV element and a new set of tables that holds my updates. It's exactly the same code for the right column, but I took out the width element in the <td> tag and put it in the <div> tag and changed the "left" and "top" values to position the updates where I want them.
<style>
Thus begins our Style Sheet. Quite honestly, I'm not an expert with Style Sheets by any means. I've been using this same sheet for a good year, constantly changing it to match the current layout. If you want to learn more about Style Sheets, go HERE. I certainly can't help with that. However, I can break down what I've already got.
<!--
body,tr,td {font-family:verdana; color:#3bd4fd;font-size:7pt;line-height:8pt;letter-spacing:0pt;}-->
-->
This section is for the appearance of the font. You'll notice the font attributes I've put in (font-family: verdana; color="#3bd4fd; font-size 7py; line height:8pt;). You can customize these to whatever you want.
Note: This sheet will only effect the text on THIS page. I tend to copy-and-paste the code on to each seperate page of my site.
<!--
BODY{scrollbar-track-color: none;
scrollbar-arrow-color:none;
scrollbar-face-color: none;
scrollbar-highlight-color: none;
scrollbar-3dlight-color: none;
scrollbar-darkshadow-color: none;
scrollbar-shadow-color: none;}
-->
This is the element for coloring your browser's scrollbar. I've set each color to "none" because the element does not work in Mozilla Firefox, which is my browser of choice. If you use IE however, you can play around with this element as much as you like.
<!--
A:link {color: #3bd4fd; text-decoration: none; font-weight:normal;}
A:visited {color: #3bd4fd; text-decoration: none; font-weight:normal;}
A:active {color: #3bd4fd; text-decoration: none; font-weight:normal;}
A:hover {color: #3bd4fd; text-decoration: none; font-weight:normal;}
-->
</style>
This element is going to control the font color of all of the links. We have four sections, "Link", "Visited", "Active" and "Hover". I like to keep them all the same color as to avoid a lot of confusion on my site, but the "Hover" section is fun to mess around with. Whatever color you make it will be what the person sees on mouse-over. We also get the option of "text-decoration" which is where you would enter your element of choice (underline, overline, line-through, blink, etc); and there's the "font-weight" option where you can enter your element of choice (normal, bold, italics, etc).
</BODY>
</HTML>
Don't forget to close off your page (</body>, </html>). And there you have it! Your page is complete! Hopefully this tutorial was of some assistance; good luck!
