My CSS
Over the long period of time that I have had this Web site up and running I have had a large handful of people ask me how to do CSS. Unfortunately, I dislike explaing this. However, it will make your life so much easier if you can get down the basic concepts!
Notice: I will not be covering everything that there is to cover because it would take at least a year to do so.
Alright, I am not sure which way would be the best way to teach this but I can only think of one that would not take all of my time to do so.
In order to learn this we are going to start by looking at a large portion of this Web site's CSS and I will break it down into parts for you.
<![CDATA[
<style type="text/css">
body
{
background-color: #1D1C1C;
margin-top: 0px;
margin-bottom: 0px; }
a:link
{color:#525F81;
text-decoration: none;
font-family:Arial;
font-size:8pt;
font-weight: bold; }
a:visited
{color:#525F81;
text-decoration:none;
font-family:Arial;
font-size:8pt;
font-weight: bold; }
a:hover
{color:#64202E;
text-decoration: none;
font-family:Arial;
font-size:8pt;
font-weight: bold; }
a:active
{color: #525F81;
text-decoration: none;
font-family:Arial;
font-size:8pt;
font-weight: bold; }
.menuh
{ background-color: #861717;
border: 1px solid #000000;
font-family: Arial;
color: #000000;
font-size: 9pt;
line-height: 12pt;
font-weight: bold;
text-align: center; }
.menu
{ background-color: #000000;
border-bottom: 1px solid #1D1C1C;
border-top: 1px solid #1D1C1C;
font-family: Arial;
color: #B6998C;
font-size: 8pt;
line-height: 12pt; }
h1
{ background-color: #000000;
border-bottom: 0px dashed #BA0000;
font-family: Arial; color: #861717;
font-size: 11pt;
line-height: 12pt;
font-weight: bold;
text-align: right; }
h2
{ background-color: #000000;
border-bottom: 1px solid #861717;
border-top: 1px solid #861717;
font-family: Arial;
color: #000000;
font-size: 8pt;
line-height: 12pt; }
</style>
]]>
Okay, so I am going to break this down into pieces and perhaps this will make more sense to you than it did before.
First off: One always has to start and end the style sheet with the
<![CDATA[<style type="text/css"> and </style>]]> tags.
Next in line we have the chunk:
<![CDATA[
body
{
background-color: #1D1C1C;
margin-top: 0px;
margin-bottom: 0px; }
]]>
What this chunk is saying is that the background color will be #1D1C1C(grayish), that the margin at the top and bottom of the page will be 0px meaning that any content on the page will borderline the browser window.
The next two chunks are completely about the colors of links and what they will do when someone hover or clicks on them. (I am only going to describe the top section of the links.)
<![CDATA[
a:link
{color:#525F81;
text-decoration: none;
font-family:Arial;
font-size:8pt;
font-weight: bold; }
a:visited
{color:#525F81;
text-decoration:none;
font-family:Arial;
font-size:8pt;
font-weight: bold; }
a:hover
{color:#64202E;
text-decoration: none;
font-family:Arial;
font-size:8pt;
font-weight: bold; }
a:active
{color: #525F81;
text-decoration: none;
font-family:Arial;
font-size:8pt;
font-weight: bold; }
]]>
Here, the first
a:link refers to how your normal link will appear on the page. The color will be #525F81, there will be no text decoration(examples: "underline," "overline," "underline overline", and "line-through"), the font size will be 8pt and the font will appear as bold.
The next line,
a:visited defines how the link will look once a person has already clicked on it(the default color for browsers is purple). What I have written for this link is that it will appear the exact same as the normal link.
a:hover Defines what the text will do when the mouse hovers over the link. In this case, the only change I had made to the font is the color so when someone hovers over a link it will change color.
a:active Defines what the text will do when the link has been clicked on and the next page is loading. On my page, the link looks the exact same as the
a:link and
a:visited links.
Alright, the next chunk is probably the most useful part about style sheets.
<![CDATA[
.menuh
{ background-color: #861717;
border: 1px solid #000000;
font-family: Arial;
color: #000000;
font-size: 9pt;
line-height: 12pt;
font-weight: bold;
text-align: center; }
]]>
If you have ever used one of my free layouts then you will often see the tag
<![CDATA[<td class="f">]]>. What I have below is considered a class and it is one because it has a period in front of it. Where I have
menuh written you can change that to whatever you want to call it. I called it menuh because to me that means "Menu Heading" and this chunck here defines the style of that heading.
Classes are wonderful and can be applied almost anywhere and work wonderfully with multiple boxes in tables. The class can be used in the table, tr, or td tag.
Say you have a table that looks like this:
<![CDATA[
<table width="380" cellpadding="2" cellspacing="5">
<tr>
<td>Text </td>
<td>Text </td>
<td>Text </td>
<td>Text </td>
<td>Text </td>
</tr>
<tr>
<td colspan="5">
Text Text Text Text Text Text Text Text Text Text
</td></tr>
</table>
]]>
| Text |
Text |
Text |
Text |
Text |
|
Text Text Text Text Text Text Text Text Text Text
|
Say you wanted the entire top row to have the style that is written in
menuh. In order to do this one would change the code to look as such:
<![CDATA[
<table width="380" cellpadding="2" cellspacing="5">
<tr class="menuh">
<td>Text </td>
<td>Text </td>
<td>Text </td>
<td>Text </td>
<td>Text </td>
</tr>
<tr>
<td colspan="5">
Text Text Text Text Text Text Text Text Text Text
</td></tr>
</table>
]]>
|
Text Text Text Text Text Text Text Text Text Text
|
Now say instead you wanted the entire bottom part to have the style that is writtin in
menuh. In order to do this one would change the code to look as such:
<![CDATA[
<table width="380" cellpadding="2" cellspacing="5">
<tr>
<td>Text </td>
<td>Text </td>
<td>Text </td>
<td>Text </td>
<td>Text </td>
</tr>
<tr>
<td colspan="5" class="menuh">
Text Text Text Text Text Text Text Text Text Text
</td></tr>
</table>
]]>
Finally, say you wanted the style to be on the entire table. In order to do this one would change the code to look as such:
<![CDATA[
<table width="380" cellpadding="2" cellspacing="5"
class="menuh">
<tr>
<td>Text </td>
<td>Text </td>
<td>Text </td>
<td>Text </td>
<td>Text </td>
</tr>
<tr>
<td colspan="5">
Text Text Text Text Text Text Text Text Text Text
</td></tr>
</table>
]]>
