CODEWITHSUNDEEP
htmlcss
Harshal
Harshal

Reputation: 63

How to overwrite online CSS with internal/ External CSS

I am writing HTML page where i used Server CSS (<link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/cs">) and i want to overwrite some class style with local CSS. I used !important in local CSS but its not working. please give suggestion.

Upvotes: 0

Views: 578

Answers (2)

bhv
bhv

Reputation: 5378

while adding css first add framework css and then add your css file 

<link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/cs">
<link rel="stylesheet" href="style.css">

more at css specificity

Upvotes: 2

Arvind Sasikumar
Arvind Sasikumar

Reputation: 502

The HTML page is parsed sequentially from beginning to end. So if you add your css after the framework css, your css will overwrite the properties in the framework css as in:

<link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/cs">
<link rel="stylesheet" href="style.css">

At the same time, you need to know that if you use this approach, if any property exists in both css files, only those in the 2nd one, i.e. your style.css file will be in effect. On the other hand, if both your css and framework css have properties for a class style which are non overlapping, i.e. the framework css has property 'A' set for the class and your css has a property 'B' set for the same class, that class will inherit both properties A and B.

Read this for further details: Two css files defining same class

Also, read this question on completely overriding a css style, which at the moment doesn't seem to be possible: Entire (completely) overwrite CSS styles

Upvotes: 0

Related Questions