Here is a set of examples for changing the style for your links:
Code:
Inline style, changing the style for a single tag:
<a href="#" style="color:#999922;background-color:#eeeeee;text-decoration:none;">Click Me</a>
Style:
color: refers to the foreground or text color - uses hex rgb or a word like red, blue, green, yellow, etc
background-color: refers to the background color for the tag
text-decoration: refers to, well, the text-decoration, in this case none will remove the underline for the link
Page wide styles, two methods:
<html>
<head>
<style>
a{
color:blue; /* this is a comment */
/* RGB Colors: 6 digit base 16 number, the first two
stand for amount of red, second pair is green, last pair is blue
values range from 00 to FF (0 to 255 in base 10) */
background-color: #aaaaee; /* this should be a light blueish color */
font-family:tahoma, serif; /* browser will first try to find font tahoma, if it doesn't exist it will look at the next one (serif in this case)
}
a:hover{ /* Seperate style for when mouse hovers over link */
color:green;
font-weight: bold; /* Numerical or words here, I believe lighter, light, normal, bold, bolder but I could be wrong */
}
</style>
<body>
<a href="#">Click Me!</a>
</body>
</html>
The above way will change all links on the page to have the defined look and feel.
The second way to define these inside a document is to define your own classes:
<html>
<head>
<style>
.myLink{
color:red;
background-color:green; /* ick */
border:1px solid #cccccc; /* a 1 pixel solid border*/
}
.myLink:hover{
color:#883333;
background-color:#aabbaa;
border:1px dashed #888888;
}
</style>
</head>
<body>
<a href="#">Normal Link</a>
<a hred="#" class="myLink">Special link</a>
<span class="myLink">Note that this will look like your link, but will not change when you mouse over it as it does not have the hover event like a link does.</span>
</body>
</html>
The last way to define styles (not counting inside javascript or vbscript) is to create a stand alone file like so:
.myLink{
color:red;
background-color:green; /* ick */
border:1px solid #cccccc; /* a 1 pixel solid border*/
}
.myLink:hover{
color:#883333;
background-color:#aabbaa;
border:1px dashed #888888;
}
For now we'll pretend we saved the above as myStyle.css in the same directory as our html file.
Now by referencing this in your document head like so:
<link rel="stylesheet" href="myStyle.css" type="text/css">
and it will act exactly as if we had written the style into style tags in our head. The great thing about this is if you have a large number of pages and want to keep the look and feel the same, you can simply include the same style sheet in all the files, and if you need to change it you will only need to change it in one place.
One last note:
You saw above three ways to define styles, but what happens if an object is defined by all three?
The way styles work is by scope. The swcope of an object, or tag, starts globally and works it's way down to the local, or inline style.
So when the page is first loaded it gets it's generic settings from the browser. Then any generic definitions from the external stylesheet or styles in the style tags are applied (generic meaning like above when we redefined the style for the
tag). Then any class definitions that apply to an object are applied (such as the myLink definitions above). Then finally any inline style in the tag is applied (such as when you have the style="" attribute inside the tag).
So in the following case:
Code:
<html>
<head>
<style>
a{
color:red;
}
.myLink{
color:yellow;
}
</style>
</head>
<body>
<a href="#">What color?</a>
<a href="#" class="myLink">What color?</a>
<a href="#" style="color:green;" class="myLink">What color?</a>
</body>
</html>
</body>
The a tag will first be set to blue (generic tag color), then red (due to the a style definition), then yellow (myLink style definition), then green(inline style definition).
Of course the user only sees the end result of this, the green link.
Hope this helps you get started with CSS, theres quite a bit out there that you can do with it.
-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
For my next trick I will pull a hat out of a rabbit (if you think thats bad you should see how the pigeon feels...)
