[Funny Bugga]

I'm very very new to CSS, aparantly I should use it for all the appearance of a webpage rather than HTML. Well, that's a bit beyond me for now, so I would like to start using it for text (better than nothiing hey?).

I'm getting the hang of it but I have a small problem:

I am using CSSEdit, and have setup a 'tag stlye' of 'a', to format my links in a certain way. (that is the way to do links right?). Well, I don't want every single link on the p[age to be the same size/colour/font! For instance I would like one style for the body of the page, but the row of links at the bottom of every page should be very small, and not coloured. How do I setup 2 (or more) styles of 'a' for the same page/stylesheet?

I'm very sorry if that wasn't clear, please ask me to clarify anything if you are able to help.

[philzilla]

here's the style sheet i use on www.houseofninja.com

Code:
.text {
	font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
	color: #FFFFFF;
}

body,a,p,li,td { 
	font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
	font-size: 10pt; 
	color: #ffffff}

.sensei { 
	font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
	font-size: 9pt;
	text-decoration:none;
	color: #333333}

.credits { 
	font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
	font-size: 8pt;
	text-decoration:none;
	color: #333333}

h1 { 
	font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
	font-size: 24pt;
	color: #ffffff;
	font-weight:bold}

h2 { 
	font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
	font-size: 16pt; 
	color: #ffffff; 
	font-weight:bold}

h3 { 
	font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
	font-size: 14pt; 
	color: #ffffff; 
	font-weight:bold}

select, option, textarea, input {
	font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
	color:#ffffff; 
	font-size: 12px; 
	background-color:#333333}

a:link,a:active,a:visited {
	text-decoration:none; 
	color:#ff0000}

a:hover {
	text-decoration:underline; 
	color:#ff0000}

a:link.sensei,a:active.sensei,a:visited.sensei {
	text-decoration:none; 
	color:#333333}

a:hover.sensei {
	text-decoration:underline; 
	color:#333333}

a:link.credits,a:active.credits,a:visited.credits {
	font-size: 8pt; 
	text-decoration:none; 
	color:#ff0000}

a:hover.credits {
	font-size: 8pt; 
	text-decoration:underline; 
	color:#ff0000}

img {border-color:ff0000}
	
body { 
	scrollbar-face-color: #000000; 
	scrollbar-highlight-color: #990000; 
	scrollbar-shadow-color: #990000; 
	scrollbar-3dlight-color: #990000; 
	scrollbar-arrow-color:  #990000; 
	scrollbar-track-color: #191919; 
	scrollbar-darkshadow-color: #191919}

i've given you a ball, now it's up to you to learn how to kick it

(Mundy: feel free to pick holes in my css)

[wallinbl]

Originally posted by Funny Bugga:
I am using CSSEdit, and have setup a 'tag stlye' of 'a', to format my links in a certain way. (that is the way to do links right?). Well, I don't want every single link on the p[age to be the same size/colour/font! For instance I would like one style for the body of the page, but the row of links at the bottom of every page should be very small, and not coloured. How do I setup 2 (or more) styles of 'a' for the same page/stylesheet?

I don't think that Phil's CSS really shows what you are asking.

What you can do is define classes.

Code:
a.Body {
font-size: 12pt;
}
a.Footer {
font-size: 8pt;
}

Then, in your HTML, do this:

Code:
<a class="Body" href="/SomePage.php">Some Page</a>
Blah, Blah, Blah
<a class="Footer" href="/Copyright.html">Copyright 2003, Blah Enterprises</a>

[Funny Bugga]

Thanks so much guys! Both of your responses helped a lot, that's exactly what I want to do!

..Off to kick a ball now

[Millennium]

Although wallinbl's code will work, it will bloat your HTML a fair bit, the way that it's set up. Here's another way.

You have a row of links along the bottom of the page, you say. I will assume that those are contained in a div or a table cell or a list or something similar. I'm going to use a div for this example, but the same technique (and, in fact, the same CSS code) will work for whatever way you have it set.

First, set your a: rule for all links on the page, like perhaps this:

Code:
a {
    color: blue;
}

Second, set the id attribute on whatever you've put your footer's links in. Note that you are not putting the ID on the links themselves; it goes on whatever contains them. Perhaps something like this:

Code:
<div id="footer"><a href="somewhere.com">Somewhere</a></div>

I put the ID on a div tag, but you can also use it on UL tags and TD tags; just make sure you use it on a tag that contains only the links you want to modify.

Now -and this is the part that ties it together, you define a rule for a tags inside that div. You'd do that like this:

Code:
#footer a {
    font-size: 60%;
    color: black;
}

This technique works in all browsers that I know of. It is one of the oldest parts of CSS, and so it works even as far back as IE3/Win. The advantage is that you don't have to put a class on any links at all; any A tag inside the footer div automatically gets the correct style for footer links, and any A tag not in that div will get the other style.

This is a basic example of a Web design technique called rule-based stylesheets, which lets you minimize your bandwidth usage by using as few classes and ID's as possible while acheiving the same effect. Unfortunately, most rule-based design techniques don't work in IE/Windows, but this one does, so you can use it right now..

[wallinbl]

Originally posted by Millennium:
Now -and this is the part that ties it together, you define a rule for a tags inside that div.

That's pretty close to the last situation I'd like to be in. You want your CSS definitions littered throughout your page? That would suck for maintenance as well as dynamically generated pages.

[Millennium]

Originally posted by wallinbl:
That's pretty close to the last situation I'd like to be in. You want your CSS definitions littered throughout your page? That would suck for maintenance as well as dynamically generated pages.

Forgive my poor wording; that's not what I meant.

When I said that, I did not mean that you define your CSS rule inside the div. What I mean is that you define the rule for those A tags which are inside the div. That's why I said to put the ID attribute on the div (I called it "footer").

The selector "#footer a" means "all A tags which are inside whatever tag has the ID 'footer'". You put it with the rest of your CSS. If you do it in this way, you only have to define one ID and no classes, rather than having to define a class for every A tag.