Redundant Coding? 2

[gwillr]

Is there any way that the following code can be simplified or reduced, and still provide the same formatting results?

is it possible to have a CSS style shee with this in it to get the same results?:

<style type=&quot;text/css&quot;>
a:link{font-size:12px;font-family:Verdana,Arial;text-decoration:none;color:black;font-weight:bold}
a:active{font-size:12px;font-family:Verdana,Arial;text-decoration:none;color:E353FD;font-weight:bold}
a:visited{font-size:12px;font-family:Verdana,Arial;text-decoration:none;color:black;font-weight:bold}
a:hover{font-size:12px;font-family:Verdana,Arial;text-decoration:underline;color:ff0033;font-weight:bold}
font.1{font-size:16px;font-family:Verdana,Arial;color:white;font-weighT:bold}
font.2{font-size:12px;font-family:Verdana,Arial;color:black}
font.3{font-size:9px;font-family:Verdana,Arial;color:white}
font.4{font-size:9px;font-family:Verdana,Arial;color:FFCCF6}
table.1{border-width:1px;border-style:solid;border-color:white}
a:link.1{font-size:12px;font-family:Verdana,Arial;text-decoration:none;color:white;font-weight:bold}
a:active.1{font-size:12px;font-family:Verdana,Arial;text-decoration:none;color:black;font-weight:bold}
a:visited.1{font-size:12px;font-family:Verdana,Arial;text-decoration:none;color:white;font-weight:bold}
a:hover.1{font-size:12px;font-family:Verdana,Arial;text-decoration:underline;color:black;font-weight:bold}
</style>

Gary

 

[dwarfthrower]

I usually format mine along the lines of:

a:active {
 font: bold 12px Verdana,Arial;
 text-decoration:none;
 color:#E353FD;
}
table.1 {
 border: 1px solid white;
}

And yes, putting the styles into a separate sheet achieves the same result.

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}

Check out Tek-Tips Australia New Zealand forum1155

 

[Chacalinc]

Group macros, then details, example:

a:link{font-size:12px;font-family:Verdana,Arial;text-decoration:none;color:black;font-weight:bold}
a:active{font-size:12px;font-family:Verdana,Arial;text-decoration:none;color:E353FD;font-weight:bold}
a:visited{font-size:12px;font-family:Verdana,Arial;text-decoration:none;color:black;font-weight:bold}
a:hover{font-size:12px;font-family:Verdana,Arial;text-decoration:underline;color:ff0033;font-weight:bold}

change to:
a {font-size:12px;
font-family:Verdana,Arial;
font-weight:bold}
a:link{text-decoration:none;
color:black}
a:active{text-decoration:none;
color:E353FD}
a:visited{text-decoration:none;
color:black}
a:hover{text-decoration:underline;
color:ff0033;}

 

[ChrisHunt]

Strictly speaking, class names should begin with a letter to be valid - though most browsers seem to cope with wholly numeric ones. Picking meaningful names for your classes will make it easier to maintain the site too.

When combining classes and pseudo-classes, the format is (I think)

a.1:active { ... }

not

a:active.1 { ... }


-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[Vragabond]

Chris is double right. Your pseudo class syntax for special classes was wrong (see Chris' solution). Also as he said, avoid assigning only numbers (or even starting with numbers) to your class names. Mozilla 1.5 is one of the browsers which will not handle that - the W3 standards say that classes must begin with a letter.

Also note that in order for pseudo classes to function properly they need be applied in the correct order:

a:link
a:visited
a:hover
a:active

To further help with removing redundant code. Try declaring:

* { font-family: Verdana, Arial, sans-serif; }

This would mean you assign this fonts to all your tags. Also, I added a generic class (sans-serif) which means that if none of the fonts are found on the client computer, a closest sans-serif tyle font will be used.

Another thing to remember are pseudo classes. You only need to specifically assign attributes that change. Your example would look like:

a:link, a:visited { font-size: 12px; font-family: Verdana, Arial; text-decoration: none; color: black; font-weight: bold; } /* since they are the same, we can join them together */
a:hover{ text-decoration: underline; color:ff0033; }
a:active{ text-decoration: none; color:E353FD; }
/* omitted the attributes that did not change */

Hope it helps.