You may have found the title a little confusing. But what i wanted to know if it is possible to somehow adapt some css classes (with a generic styling) to modify just some piece of that css and adapt it to a specific div, element, whatever.
For example

.GenericLink{
color: #fff;
font-weight: bold;
text-decoration: none;
}

.GenericLink:hover{
text-decoration: underline;
}


And I want to have a link with same css of GenericLink, but margin-top: 10px for example....
Do i have to create a whole new class? or can i just adapt the current class for this particular case.

.CustomLink{
color: #fff;
font-weight: bold;
text-decoration: none;
margin-top: 10px;
}

.CustomLink:hover{
text-decoration: underline;
}

Thanks in advance.

You don’t have to copy all the styles again if you just want to add another style. You can just apply another class to the element like <a class="GenericLink CustomLink" … and then have a separate rule with just that one additional style in your stylesheet, e. g. either .CustomLink {margin-top: 10px;} or more specifically, if you only want to address links that have both classes .GenericLink.CustomLink {margin-top: 10px;} (note the missing space between the class selectors, that’s deliberate.).

ok, made a test and worked this way.


<a class="GenericLink CustomLink" href="#">Hello world</a>


.GenericLink{
color: #000;
font-weight: bold;
text-decoration: none;
}

.GenericLink:hover{
text-decoration: underline;
}

.CustomLink{
float: right;
margin-top: 30px;
}
Now im going to try it with my site, the thing is that its a menu in this case and I have the #MainMenu id and the .GenericListing class, so i will add an id="MainMenu" class="GenericListing", and be right back.

Does #id rule over .class?

Ok got it working with less css code ;)

Thanks