Need example for css design inheritance 1

[royboy75]

Hello,

Suppose I've created a certain design A in my css file.
I would like to create a similar design B only change one property in it, for example the text-align.
Instead of copy-paste the entire design from A to B I assume there is a way in css to state that design B inherits it's design from design A and than make the changes I need. Can someone show me a simple code example for that?

 

[BabyJeffy]

You can include a CSS file on a web page, and then you can apply further CSS include files (one after another). Any CSS rule that follows a previous CSS rule will overwrite the previous rule (assuming it has greater, or equal, specificity <-- look this word up as it is important to understand).

<style type="text/css">
body {color: red; font-weight: bold;}
</style>

<style type="text/css">
body {color: green;}
</style>

This example shows the body initially getting text colour of red and font weight of bold... then the text colour is changed to green in a CSS rule that follows afterwards (and in this case has the same specificity).

This is basically how you do what you are asking.

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch

http://www.codecouch.com/jeff/blog/

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

 

[royboy75]

Hi Jeff,

Thank you for the example but I was looking for something else. Suppose my css file contains this design for h1:

h1
{
  font-size: 22pt; color: #00CC00; font-style: normal;
  font-family: Arial, Helvetica, sans-serif; text-decoration: none;
  text-align: center
}

Now, I want the h2 design to be the same but with different font-size value. I can do this of course:

h1
{
  font-size: 18pt; color: #00CC00; font-style: normal;
  font-family: Arial, Helvetica, sans-serif; text-decoration: none;
  text-align: center
}

but it's redundant. How can I specify that h2 inherits it's properties from h1 and than just change the font-size in h2?

Roy

 

[BabyJeffy]

Ah, slightly differently...

h1[!], h2[/!]
{
  font-size: 22pt; color: #00CC00; font-style: normal;
  font-family: Arial, Helvetica, sans-serif; text-decoration: none;
  text-align: center
}[!]
h2
{
  font-size: 22pt;
}[/!]

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch

http://www.codecouch.com/jeff/blog/

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