Topic: I find myself on a new path... and im scared. (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=24087" title="Pages that link to Topic: I find myself on a new path... and im scared. (Page 1 of 1)" rel="nofollow" >Topic: I find myself on a new path... and im scared. <span class="small">(Page 1 of 1)</span>\

 
Black Hat
Bipolar (III) Inmate

From: Sin City (Can you guess where?)
Insane since: Sep 2004

posted posted 11-18-2004 03:33

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:

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

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 11-18-2004 03:52

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

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 11-18-2004 03:53
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.


 

Black Hat
Bipolar (III) Inmate

From: Sin City (Can you guess where?)
Insane since: Sep 2004

posted posted 11-18-2004 04:08

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

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 11-18-2004 04:37
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.

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

posted posted 11-18-2004 15:34

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.
JKMabry
Maniac (V) Inmate

From: raht cheah
Insane since: Aug 2000

posted posted 11-18-2004 17:25

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



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu