Override Css styling from external css file

Question

Following is the code in the custom.css file, which is an external css in within of html page.

button {
cursor: pointer;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
border: none; 
padding: 0; 
margin: 0; 
background: none; 
-webkit-user-select: none; 
-moz-user-select: none;
user-select: none;
}

I want to override it with my own style. I tried the followig in HTML, but it did not work:

<style> .myButton {background-color:initial; } </style>
<button class="myButton">Add</button>

Any Sugesstions ?

You need to do it inline due to specificity. css-tricks.com/specifics-on-css-specificity — user32342534
– user32342534, Commented Aug 22, 2014 at 19:17
where do you have your second <style> definition? in your <head>? — Marc Anton Dahmen
– Marc Anton Dahmen, Commented Aug 22, 2014 at 19:17
In fact it should work because a class selector has a higher specificity value than an element selector. — Hashem Qolami
– Hashem Qolami, Commented Aug 22, 2014 at 19:23

Community · Accepted Answer · 2017-05-23 10:33:25Z

2

If you have access to the HTML, you can do it inline:

<button class="myButton" style="background-color:initial;color:red;" >

Inline styling always takes precedence.

As user32342534 commented below, you can also use the !important flag in css:

<style> .myButton {background-color:initial !important; } </style>

2 Comments

user32342534 Over a year ago

Or an !important. But some call it "!important hell".

Hashem Qolami Over a year ago

While true, it doesn't explain why an element selector is overriding a class name selector; Whereas element {} has a lower specificity value than .class {}.

Gildas.Tambo · Accepted Answer · 2014-08-22 19:42:01Z

All what you have to do is to add your style after custom.css in the header

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>Kougiland-Studio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content="learn css" />
    <meta name="keywords" content="what ever you like" />
    <meta name="author" content="your name" />
    <link rel="shortcut icon" href="favicon.ico"> 
    <link rel="stylesheet" type="text/css" href="custom.css" /><!--custom style-->
    <link rel="stylesheet" type="text/css" href="mystyle.css" /><!--your style-->
</head>

in mystyle.css you can now write:

button{
  /*what ever you like*/
}

NOTE: Using !important is not very clever since you will not be able to change later.

All these suggestions are right. However it seems the OP is doing something wrong; Check my comments.

Collectives™ on Stack Overflow

Override Css styling from external css file

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related