how to overwrite css style
HtmlCssHtml Problem Overview
I'm developing pages, now in my css style I have this line of code
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0;
}
for my pages. Now, some of my pages don't need this line
width: 25%;
float: left;
It is possible that I can overwrite it in internal css of the page, which will cause the original behaviour to be ignored?
Html Solutions
Solution 1 - Html
Using !important
is not recommended but in this situation I think you should -
Write this in your internal CSS -
.flex-control-thumbs li {
width: auto !important;
float: none !important;
}
Solution 2 - Html
instead of overwriting, create it as different css and call it in your element as other css(multiple css).
Something like:
.flex-control-thumbs li
{ margin: 0; }
Internal CSS:
.additional li
{width: 25%; float: left;}
<ul class="flex-control-thumbs additional"> </ul> /* assuming parent is ul */
Solution 3 - Html
You can create one more class naming
.flex-control-thumbs-without-width li {
width: auto;
float: initial; or none
}
Add this class whenever you need to override like below,
<li class="flex-control-thumbs flex-control-thumbs-without-width"> </li>
And do remove whenever you don't need for other <li>
Solution 4 - Html
Just add
.flex-control-thumbs li {
width: auto;
}
Solution 5 - Html
Yes, you can indeed. There are three ways of achieving this that I can think of.
- Add inline styles to the elements.
- create and append a new <style> element, and add the text to override this style to it.
- Modify the css rule itself.
Notes:
- is somewhat messy and adds to the parsing the browser needs to do to render.
- perhaps my favourite method
- Not cross-browser, some browsers like it done one way, others a different way, while the remainder just baulk at the idea.
Solution 6 - Html
CSS Specificity
Increase yourExample:
.parent-class .flex-control-thumbs li {
width: auto;
float: none;
}
Demo:
.sample-class {
height: 50px;
width: 50px;
background: red;
}
.inner-page .sample-class {
background: green;
}
<div>
<div class="sample-class"></div>
</div>
<div class="inner-page">
<div class="sample-class"></div>
</div>
Solution 7 - Html
You can add your styles in the required page after the external style sheet so they'll cascade and overwrite the first set of rules.
<link rel="stylesheet" href="allpages.css">
<style>
.flex-control-thumbs li {
width: auto;
float: none;
}
</style>