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. http://css-tricks.com/specifics-on-css-specificity/ — user32342534, Aug 22 '14 at 19:17
In fact it should work because a class selector has a higher specificity value than an element selector. — Hashem Qolami, Aug 22 '14 at 19:23

score 2 · Accepted Answer · edited May 23 '17 at 10:33

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>

See Also:

When to use "!important" to save the day (when working with CSS)

edited May 23 '17 at 10:33

Community

1
1

answered Aug 22 '14 at 19:18

cssyphus

37,875
18
96
111

1

Or an `!important`. But some call it "!important hell". – user32342534 Aug 22 '14 at 19:20
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 {}`. – Hashem Qolami Aug 22 '14 at 19:27

score 0 · Answer 2 · answered Aug 22 '14 at 19:42

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](http://stackoverflow.com/questions/25454075/override-css-styling-from-external-css-file#comment39717960_25454075) [comments](http://stackoverflow.com/questions/25454075/override-css-styling-from-external-css-file#comment39718065_25454125). — Hashem Qolami, Aug 22 '14 at 19:47

Override Css styling from external css file

2 Answers2