CODEWITHSUNDEEP
htmlcss
The Third
The Third

Reputation: 795

Override Css styling from external css file

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 ?

Upvotes: 0

Views: 316

Answers (2)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

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.

Upvotes: 0

cssyphus
cssyphus

Reputation: 40030

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)

Upvotes: 2

Related Questions