Topic: I find myself on a new path... and im scared.

Well I finally have finished the layout to where Im satisfied: http://lostcitytinnos.net/beta2/

Now I find myself on an unfamiliar trail. I find it's time to clean up my .CSS and make it more readable, ect.

Here is my current .CSS code:

<!--

body {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #FFFFFF; background-color: #000000; cursor: default}

img {  background-color: #000000}

h1 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #6798B8}

td {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #FFFFFF; background-color: #000000; border-style: none}

a:link {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #FFFFFF; text-decoration: none; cursor: hand}

a:visited {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #FFFFFF; text-decoration: none; cursor: hand}

a:active {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #FFFFFF; text-decoration: none; cursor: wait}

a:hover {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #6798B8; text-decoration: underline overline; cursor: hand}

-->

As you can see, it's a fucking mess. Now I know it can be cleaned up, and organized a lot better. My question is... how. Now please don't direct me to some article. Articles don't explain jack to me no matter how many times I read and re-read them. I need someone to walk me through this. I know, I'm a pain the ass. So help me out! I learn when someone takes the time to actually explain to me what to do and how to do it.

-----------------------------------------------
TiNNoS || My Forums || My Gallery

This is the way I lay out my CSS -

http://www.in-dented.com/temp/black_hat_css1.html

I've added some notes
After acting on the notes, this is what I have -

http://www.in-dented.com/temp/black_hat_css2.html

quote:

---

font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #FFFFFF; background-color: #000000;

---

That text is in your body {} rule, so it will "cascade" to the other elements of the page (anything that's a descendant element of the body - basically the whole page). That means you can remove that text from everything else. The "img {...}" won't be necessary since the default background color is transparent, so the body's background color will show through.

h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #6798B8}

can be reduced to

h1 {font-size: 10pt; color: #6798B8}

and similar reductions can be done for all of the other elements.

As for the a.foo rules, you can eliminate more redundancy. First, specify the style to be applied to all "a" tags:

a {
color: #FFFFFF;
text-decoration: none;
}

(notice that I deleted cursor:hand, since that's the default for hyperlinks anyway. also notice that i left in color:#FFFFFF despite that being specified in the body {} rule, because the browser's default stylesheet would default to a different color for links otherwise.)

Then, the rest of the "a" information can be just that which is specific to each type of link:

/* a:visited can be removed entirely since it contains only redundant information. */
a:active {cursor: wait}
a:hover {text-decoration: underline overline;}

That should about do it.


 

Thanks a lot both of you! Now see all of that makes a lot of sense to me, seriously. Now I have a question on redundant code? Why is it a bad thing exactly? I would think that if everything was specified multiple times... it would make the likelyhood of something displaying improperly less possible. Am I wrong?

-----------------------------------------------
TiNNoS || My Forums || My Gallery

quote:

---

if everything was specified multiple times... it would make the likelyhood of something displaying improperly less possible.

---

Nope. Just leaves more room for mistakes and confusion.

It also makes your file sizes significantly larger, and that's never a good thing.

I didn't notice the different cursor specs on the link states...so go with what Slime said there...
Other than that we both said more or less the same thing.

One thing here that will INCREASE the size of your CSS file, but is good nonetheless is adding background:transparent; to all of those declarations that include color specifications. It isn't *necessary*, but helpful and good.

Why?

quote:

---

If you don't specify color and background-color at the same level of specifity, your style sheet might clash with user style sheets. To avoid this, specify always both of them, see Section 9.1 "Color Contrast" in the W3C Note "CSS Techniques for Web Content Accessibility Guidelines 1.0" or the article CSS Color Issues by the CSS Pointers Group for a discussion.

---

I wondered why the validator alway suggested that, thanks mobrul =)