CSS 2.x and Inheritance 2

[jtanner]

Hey all,

I am wondering if I can cut down on my CSS via efficient use of inheritance. My goal is for my CSS 2.x to work with IE5+ and Mozilla 1.6+. If I can get rid of all my font-family: arial; tags for starters that would be great. Given my below example which ones do you think I can eliminate?

body { font-family: arial; font-size: 14px; color: black; background-color: #ffffff; }
th   { font-family: arial; font-size: 14px; color: white; background-color: #006666; }
td   { font-family: arial; font-size: 14px; color: black; vertical-align:text-top; }
p    { font-family: arial; font-size: 14px; color: black; }
h1   { font-family: arial; font-size: 20px; color: #006666; font-weight: bold; }
h2   { font-family: arial; font-size: 16px; color: #006666; font-weight: bold; margin: 5px 0 0 0; }
h3   { font-family: arial; font-size: 16px; color: black;   font-weight: bold; margin: 5px 0 0 0; }

hr   { margin:0px 0px 0px 0px; }
ul   { margin:0 0 25 0;}
img  { border:0 }

a:link    {color:black;   font-family:arial; font-size:14px; }
a:visited {color:black;   font-family:arial; font-size:14px; } 
a:active  {color:black;   font-family:arial; font-size:14px; } 
a:hover   {color:#006666; font-family:arial; font-size:14px; color:white; background-color:#006666; }

Thanks,

JT

 

[BillyRayPreachersSon]

Try something like this:

body, th, td {
	font-family: Arial, sans-serif;
	font-size: 14px;
	color: black;
	background-color: #ffffff;
}

th {
	color: white;
	background-color: #006666;
}

td {
	vertical-align:text-top;
}

p {
	font-size: 14px;
}

h1, h2 {
	color: #006666;
}

h1 {
	font-size: 20px;
}

h2 {
	font-size: 16px;
	margin: 5px 0 0 0;
}

h3 {
	font-size: 16px;
	margin: 5px 0 0 0;
}

hr   { margin:0px 0px 0px 0px; }
ul   { margin:0 0 25 0;}
img  { border:0 }

a:link    {color:black;   font-size:14px; }
a:visited {color:black;   font-size:14px; }
a:active  {color:black;   font-size:14px; }
a:hover   {color:#006666; font-size:14px; color:white; background-color:#006666; }

Some notes:

- You don't need to have "bold" on headings - they are bold by default.

- I've left the anchor declarations as-is, because it really depends on what element they are in to what styling they will pick up (e.g. an anchor inside am H1 would be different to an anchor inside a P).

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

Just a wee typo there, Dan...

ul   { margin:0 0 25[!]px[/!] 0;}

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[BillyRayPreachersSon]

Not my typo, though. Garbage in, garbage out!



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jtanner]

BillyRayPreachersSon, BabyJeffy,

That was very helpful. Simple and effective.

One comment please. I noticed you did not place the p {..} tag in the same main grouping as the body, th, td tags.

Why is that?

Thanks again,

JT

 

[BabyJeffy]

That was probably because there was no initial styling for background-color with the original p style - but that is present in the body, th and td styles. It could certainly have been included in the body, th, th style block if setting the background-color on the p tag is not a problem.

Cheers,
jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094