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.
java noviceAsked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
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
 
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
 
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
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
Chris StanyonConnect With a Mentor Commented:
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
 
java 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 StanyonCommented:
Yeah - course you can:

.my_font_green {
   font-family:Arial;
   font-variant:700;
   font-color:green;
}
0
 
java noviceAuthor Commented:
Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.