If an absolute
value has already been declared, and you want to simply replace it using a length
value, you have a few options.
Possible Solutions
Override the CSS by being more specific. If your code is declaring the value using:
div.xlarge {
font-size: x-large;
}
You could add another CSS selector
to target that div
, and CSS would use the more specific of the two values. For example, you could add body
or the parent container:
body div.xlarge {
font-size: 12px; /* This would overwrite the x-large value above */
}
div div.xlarge {
font-size: 12px /* So would this */
}
.parentclass div.xlarge {
font-size: 12px; /* And this */
}
For the sake of the example, I'm using a div
with a parent div
and a parent with the class name of .parentclass
. You could also use span
, p
, li
, ul
, a
, etc.
Note: Learn more about Specificity from MDN.
You could also add styling inline to the desired target. For example, if your
HTML is:
<div class="xlarge">My Text</div>
You could add inline styling like so and it would override the font-size
CSS declared value:
<div class="xlarge" style="font-size: 12px;">My Text</div>
The last thing I'd recommend, is using the
!important
tag to override
CSS values you couldn't otherwise target using the above methods. Assuming there is no other
!important
declarations, the last
!important
will force the
CSS value.
div.xlarge {
font-size: 12px !important; /* Will override more specific CSS & Inline CSS */
font-size: x-large; /* Would be ignored */
Note: Learn about using !important
from CSS-Tricks.
IFrames
None of these solutions will work with just CSS if you are trying to edit an iframe
, unless you have control of the iframe
content. For editing iframe
CSS, just do a quick search on Stack Overflow and there are a number of solutions.