Inheritance in CSS

How inheritance works in CSS.

.my_font{
font-family:Arial;
font-variant:700;
font-color:red;
}
.font_red{
font-color:red;
}
.font_green{
font-color:green;
}

Open in new window


.my_font is my parent class which holds the main information,now there is need wherein the color of font needs to be overrideen keeping the size and variant of parent (.my_font)
How can i achieve the same.
Tech NoviceAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ares KurkluSoftware EngineerCommented:
Depends on what you mean by overridden there are different ways, the way you defined there instead of my_font you can assign font_green and it may become green otherwise you can use something called inline CSS like the orange background here:



<!DOCTYPE html>
<html>
<head>
<style type="text/css">

.my_font{
font-family:Arial;
color:red;
font-variant:700;
}
.font_red{
      color:red;
}
.font_green{
      color:green;
}
</style>
</head>
<body>
<p class="my_font">This is red  </p>

<p class="font_green">This is green  </p>

<div style="background-color:orange;">orange background</div>
</body>
</html>


This may be a better illustration if in header style you set all the div tags to be red you can just change a single one by using an inline css e.g:
<html>
<head>
<style type="text/css">

div{
background-color:orange;
}
</style>
</head>
<body>
<div>This is default red  </div>

<div>This is default red  </div>

<div style="background-color:red;">orange background</div>
<div>This is default red  </div>

</body>
</html>
0
Chris StanyonWebDevCommented:
You can just assign both classes on your element:

<p class="my_font font_green">This will use both classes</p>

The colour of the font will be overridden to green, because that class comes after the my_font in your CSS.

Just as a note of best practice. Try to avoid naming classes using a colour, such as font_green. It makes your site slightly less maintainable. Let's say you have this in your HTML:

<div class="font_green">This is some text</div>

and the css:

.font_green { color: green; }

And the client comes along and says ... you know what, I want that in blue.

You change the CSS:

.font_green { color: blue; }

Now it's just weird !!

Consider using names that include terms such as primary, hilight, lolite, success, error, complement, so you may have:

<div class="colour_hilite">This is some text</div>

And your css:

.colour_hilight { color: green; }

Now it doesn't matter if you need to change the color in CSS
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
@Chris,

Actually naming styles for attributes is fairly common practice.

In your scenario what would happen is the client requests the colour of an element change from green to blue - the common approach is to define a new class
.font-blue {
   color: blue;
}

Open in new window

And replace the class in the element.

A case study would be Bootstrap styles for setting the colours on buttons and pannels
btn-primary
btn-warning
btn-default
btn-success

Open in new window

Or for aligning text
text-left
text-centre
text-right

Open in new window

These classes define functions when you need a new function you don't change the class - you create a new one.

In your example - lets say the client wanted text on one page to change from green to blue - but the class being used (for green text) is also being used on another page - where the colour must remain green. Changing the class (function) can create side-effects.

This is obviously offset by the situation where a common style throughout the site needs to change and a single point of change is convenient - I would argue however that in most cases that constitutes a change in function and changing a central style still has the potential for side effects - so even though it may take longer you replace the classes on the target elements rather than changing the style.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Chris StanyonWebDevCommented:
There's a reason Bootstrap doesn't call it's classes things like btn-blue, btn-red. It would be an absolute nightmare.

And I agree that there is a time and place to use presentational class names, such as text-left etc.

And as for common practice - never come across it myself - except in some pretty ropey coding :)

To change a color in a specific page, you could argue it would be semantically more correct to change it at the page level with a class or ID:

<body id="about-us">...</body>
<body id="contact-us">...</body>

.hilight-text { color: green; }
#contact-us .hilight-text { color: red; }

Sometimes you can't avoid changing the HTML when the styling changes, but you can make it easier for yourself by not scattering your structure with presentation.

None of this is right or wrong, so each to their own. I'll stick with NOT naming classes with a color :)
0
Julian HansenCommented:
I wasn't referring to the use of the colour as the class name but rather the principle that you change the class to change the style of the page. Call the class whatever you feel is right in terms of a naming convention but don't change it to affect a change the document as this can have side effects - that was my point.
0
Tech NoviceAuthor Commented:
<p class="my_font font_green">This will use both classes</p>

can i achieve the same with only single class instead of using the multiple classes?
0
Chris StanyonWebDevCommented:
Yeah - course you can:

.my_font_green {
   font-family:Arial;
   font-variant:700;
   font-color:green;
}
0
Tech NoviceAuthor Commented:
Thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.