<resolved> CSS inherit

**JPicasso** · Sep 29th, 2003, 01:42 PM

How do I actually CASCADE these things.

Or maybe I want to inherit... I'm not sure.

anyway.

Say I define a style as

Code:

.basictitle {font-size: 16;
			color: white;
			font-family: arial;
			font-weight: bold;
			border-style: solid;
			border-width: 1px;
			background-color: darkblue;
			}

Now, what I want to do is use this for my entire website.
BUT, for some pages I want to modify the font size
for this element.

This willl allow me to use a basic style, and then for each
page I want to put something like :

Code:

.advtitle {[somecodehere that references .basictitle];
           font-size:55;}

so that advtitle will use the bastitle, but be a bit bigger??

is there a way to do this?

**JPicasso** · Sep 29th, 2003, 02:04 PM

so,

I can nest styles.

that is, I can put a

Code:

<div class=bastitle>
<div class=advtitle>
  This will have all of bastitle properties, PLUS overridden properties of advtitle.
</div>
</div>

But what I'd really like to do is have this type of nesting effect take place in the style tag.

:sigh:

**techgnome** · Sep 29th, 2003, 02:46 PM

change

Code:

.basictitle {font-size: 16;
			color: white;
			font-family: arial;
			font-weight: bold;
			border-style: solid;
			border-width: 1px;
			background-color: darkblue;
			}

to

Code:

Body {font-size: 16;
			color: white;
			font-family: arial;
			font-weight: bold;
			border-style: solid;
			border-width: 1px;
			background-color: darkblue;
			}

That will se the base for use through out the whole body area (essentially the whole page).... then you can further define other elements as needed.

**JPicasso** · Oct 1st, 2003, 12:38 PM

I think this is what you were saying, but just for the record.

Apparently I can define elements, or sub-classes as I like to say, of current HTML tags.

without explaining, here:

Code:

<style type="text/css">
<!--
P.beefy {font-family: script;
		font-size: 40px;
		}
P.veggie {font-family: arial;
			color: green;
		}

-->
</style>

now I can use different sub-classes of the P tag.

like this:

Code:

<body>

<p>
Hello this is normal <br>
</p>

<p class=beefy>
And this is beefy
This is <b>beefier</b>.
</p>
<p>
Normal again,
</p>

<p class=veggie>
This is veggie, hold the bacon
</p>

</body>

I love this stuff. Actually makes HTML interesting.

**phpman** · Oct 7th, 2003, 10:38 AM

well you can also do this (I know you resoved it so this is just an FYI)

if you set a specific font size to the page and want another part to be different.

body {font-size: 16;
color: white;
font-family: arial;
font-weight: bold;
border-style: solid;
border-width: 1px;
background-color: darkblue;
}

then in a P tag you can do this

<p style="font-weight: normal">

that should over-write the body style since it is changing a font style.

that is inheritance

Thread: <resolved> CSS inherit

Thread Tools

Display

<resolved> CSS inherit

Posting Permissions