Style Sheets are simply, fun way to actually modify HTML tags. Yes, I did just say that you could change the tags. Woah, power! With the <STYLE> tag (this tag is probably one of the more intuitive names, compared to <H1> or <img src>) you can alter exactly how a certain tag effects the style of whatever that tag is attached to. You can supply the details for style in the header of an html page, or from externally-linked page (called external style sheets) because we are just trying to understand the concept of style sheets, and not create a massive site based on them, I'll focus on the local, most common style sheets. Then, you can read up, later, on external style sheets to apply the concepts here to a full-blown style-sheet networked website!
Let's take apart the code:
<HEAD>
<STYLE type="text/css">
H1.spyderbyteclass {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="spyderbyteclass"> This H1 is affected by our style </H1>
<H1> This one is not affected by our style </H1>
</BODY>
As you can see, style sheets are always defined in between the <HEAD> tag. After defining the type of style, which should always be text/css, you can go ahead and do the actually styling! This is where it gets a bit more complex. The nitty-gritty of the style command is:
H1.myclass {border-width: 1; border: solid; text-align: center}
Okay, what is happening here is that the style is being named, "spyderbyteclass". You can name your style anything you want, but you will always have to, in the <BODY> of the page, declare the name of the style, to have the stuff in between the brackets be applied. Okay, so I lied:
{border-width: 1; border: solid; text-align: center}
Is the real nitty-gritty. This stuff defines a solid, border with a width of 1; and text that is center-aligned as the spyderbyteclass style. Now, you just close the style tag and to apply it in the <BODY> you just use the corresponding tag (H1, in this case) with the STYLE name, and boom, your text is modified according to the style! Cool, huh? Now that you know that, style-sheet roll-overs are simple. You just plug-in the text changes you want (in between the <STYLE sheets of course) for the link that's been visited, or active, and you have a style sheet-"animated" rollover!
A:link { text-decoration: none;};A:visited { text-decoration: none;};A:active { text-decoration: none;}
It's pretty incredible all that can be accomplished with the enhancements of HTML!
