how to overwrite css style

Question

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?

Answer 1

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; } 

Answer 2

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 */