Other Codes
What are other codes I might need?
Remove Underline From Links
If the underline text effect shows up by default on your links, add this code to the head of your page to remove them.
<style type="text/css">
A:link {text-decoration:none; }
</style>
Adding Borders & Background Colours
You can define a border, and it's individual style, color and size, for images, text, links, etc. Here's an example of plain text with a border:
Text Example
You'd do this using the code below, and changing the properties in the code, like color, border style, size, etc. The code would be added to an already existing code. For example, you already have a code defined for your text colors, like this:
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
You would add this piece to the code:
background-color: #938E8A;
border:#000000;
border-style: solid;
border-top-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-right-width: 3px;
And in the end, the final code would look like this:
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #938E8A;
border:#000000;
border-style: solid;
border-top-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-right-width: 3px;
}
This code can be added to text properties, or link properties, or even image properties. This is often used to make CSS hover buttons, but having it set to one background color for links, and another color for the hover links.
Padding
So, you've added a border around your text, but maybe it requires more definition ... like leaving more space between the border lines and the text?
Text Example
You'd add padding to the definition, with a code like this:
padding-right:10px;
padding-left:10px;
padding-top:10px;
padding-bottom:10px;
So, instead of the code for text with borders in your stylesheet, like the one we worked with in the last code:
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #938E8A;
border:#000000;
border-style: solid;
border-top-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-right-width: 3px;
}
You'd add the padding code to the bottom of this, making it look like this instead:
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #938E8A;
border:#000000;
border-style: solid;
border-top-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-right-width: 3px;
padding-right:10px;
padding-left:10px;
padding-top:10px;
padding-bottom:10px;
}
You can add padding to any of your other codes, like text, links and even image properties.
Margins
Margins allow you to place a particular section of text, or links, or images, into a certain position easily. Maybe you want all your button links to be so far from the left hand side. You could define margins, so they'll do it automatically. For example, in the last two codes, you saw a line of text, sitting against the left edge. By defining a margin, see how it indents into the page?
Text Example
You'd add margins to the definition, with a code like this:
margin-right:10px;
margin-left:10px;
margin-top:10px;
margin-bottom:10px;
So, instead of the code for text with borders in your stylesheet, like the one we worked with above:
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #938E8A;
border:#000000;
border-style: solid;
border-top-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-right-width: 3px;
}
You'd add the margins code to the bottom of this, making it look like this instead:
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #938E8A;
border:#000000;
border-style: solid;
border-top-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-right-width: 3px;
margin-right:10px;
margin-left:10px;
margin-top:10px;
margin-bottom:10px;
}
You can add margin to any of your other codes, like text, links and even image properties.
Display Block
Adding one simple line into a code can drastically change the way it appears. For example, here's a simple link, but with borders and background making it a little fancier.
Link Button
To make that, I'd make my links look like this:
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #938E8A;
border:#000000;
border-style: solid;
border-top-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-right-width: 3px;
}
But now, watch the difference between the above link button and this one:
Link Button
Now, while this might resemble the same result that padding would add, this is very different. This is adding a block display property to your code, with this small addition:
display: block;
What this does is make the link, or text that's defined with a block display, take up the entire width of the line. So, for this page that's the entire page. If you have it in a table that's 250 pixels wide, then the link would be 250 pixels wide. You can see with this code below how it's been added to a regular link code.
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #938E8A;
border:#000000;
border-style: solid;
border-top-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-right-width: 3px;
display: block;
}