[RESOLVED]Override existing CSS Classes

Hi All,

I am new to CSS, I have used css directly in the code mentioning class name but not as a css professional.

I need your help to resolve the issue, I need to override all existing css classes (that’s provided through third party components).

Rather then changing their classes (which is not good), I will be overriding their css classes. CSS functionality they exposed as seperate css classes for their seperate functionality i.e. WebParts functionality (Seperate WebParts).

Kindly suggest.

Thanks,

Vivek

If the third party styles are declared in a style sheet, create your own version and link to it. If you cannot remove the reference to the third party style sheet, make sure the link to your version comes after the link to the third party file.

Thanks a lot for ur reply, yes thats what i am trying to do but behaviour of CSS is quite unpredictable, it would be really great if you please provide few examples.

vivek_cs

behaviour of CSS is quite unpredictable

It’s not. It’s very predictable. You just need to understand it, that’s all. You should start here: http://www.w3schools.com/css/

Hi,

Unpredicatable that is? Make sure to change the properties you want AFTER they defined those properties and your definition will be taken into account. Now you can still have some kind of issue depending on what you are doing…

Hi Vivek,

Thanks for your post.

vivek_cs

I need to override all existing css classes (that’s provided through third party components).

As for your problem, I agree with Mike. You could create your own style sheet and add reference to your version comes after third party style sheet.

vivek_cs

it would be really great if you please provide few examples.

I create a simple sample for you, you could refer to it.

pagestyle1.css
.content{
    font-size:14px;
    font-style:italic;
    color:red;
}
NewStyle.css
.content{
    font-size:18px;
    font-style:normal;
    color:green;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="CSS/pagestyle1.css" rel="stylesheet" />
    <link href="CSS/NewStyle.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <span class="content">Hello World</span>
        </div>
    </form>
</body>
</html> 

Regarding this matter, please feel free to post back.

Best Regards,

Fei Han

Leave a Reply