CODEWITHSUNDEEP
css
Newb 4 You BB
Newb 4 You BB

Reputation: 1355

Overriding CSS Trouble

I have an issue where I would like to override some CSS but cannot find the right setting to accomplish what I need. Lets use the the following:

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #dee2e6;
}

I have some things I am not a fan of with this class so I comment out what I dont like

.page-link {
  position: relative;
  display: block;
  /* padding: 0.5rem 0.75rem; */
  /* margin-left: -1px; */
  /* line-height: 1.25; */
  /* color: #007bff; */
  /* background-color: #fff; */
  /* border: 1px solid #dee2e6; */
}

Easy enough but now I would like to keep all of my changes or overrides in a separate file.

With the class duplicated in my new file I should be able to alter the things I dont like to mimic as if the original was commented out. However I cannot seem to get this to work. I have tried the following with unset, inherit, initial, revert, and a few others. What am I doing wrong?

.page-link {
  padding: unset;
  margin-left: unset;
  line-height: unset;
  color: unset;
  background-color: unset;
  border: unset;
}

Edit: To state again, this works as expected when the original values are commented out.

Edit 2: I should have noted that my current method is to include the original file in my html followed by my overrides file. This is ineffective.

<link href="css/original.css" rel="stylesheet"> 
<link href="css/overrides.css" rel="stylesheet">

This is how my browser is interpreting the above

enter image description here

Upvotes: 0

Views: 60

Answers (4)

Sergio Gabriel Fruto
Sergio Gabriel Fruto

Reputation: 331

initial should work, that resets the property to its default value, that's what I usually use for cases like this.

And it works here: https://codepen.io/sergiofruto/pen/VwadVeR

I would suggest checking the order of the CSS files, the overrides should come after, like this:

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="overrides.css">

I would also check the browser, inspect the element and see if there isn't another more specific rule messing with yours.

Upvotes: 0

AbyssfireX
AbyssfireX

Reputation: 1

If you really need to keep the classes in separate files, you should try just putting the tag of the file you want to override above the tab of the file that you want to override with. You could also use property-name: property-value !important;, but that isn't recommended.

Upvotes: 0

simmer
simmer

Reputation: 2711

  1. Are you referencing your new CSS file in your HTML document? Seems like a silly question, I know, but it's easy to make small mistakes like that.
  2. If so, are you referencing your new CSS file before or after the original CSS file? It should come after.
<link rel="stylesheet" href="original.css" />

<link rel="stylesheet" href="new.css" />

Upvotes: 2

ikiK
ikiK

Reputation: 6532

Declare class two times. 2nd will take priority over first one... Same goes with including files if you use two of them. Include the one that has class that you want to apply last, order of things is important.

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #dee2e6;
}

.page-link {
  position: relative;
  display: block;
  
  padding: unset;
  margin-left: unset;
  line-height: unset;
  color: unset;
  background-color: unset;
  border: unset;
}
<div class="page-link"> test </div>

Upvotes: 0

Related Questions