How do you override a css property?

Question

I'm developing pages, now in my css style I have this line of code

Nội dung chính Show

.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?

Dince12

5,6043 gold badges20 silver badges38 bronze badges

asked Oct 29, 2012 at 6:55

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

answered Oct 29, 2012 at 7:00

DipakDipak

11.7k1 gold badge29 silver badges31 bronze badges

3

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

  /* assuming parent is ul */

answered Oct 29, 2012 at 6:58

Mr_GreenMr_Green

39.9k43 gold badges156 silver badges254 bronze badges

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,

And do remove whenever you don't need for other

answered Oct 29, 2012 at 7:09

Satish BellapuSatish Bellapu

7501 gold badge5 silver badges15 bronze badges

Just add

.flex-control-thumbs li {
width: auto; 
}

answered Oct 29, 2012 at 7:02

VinitVinit

1,80516 silver badges38 bronze badges

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.

answered Oct 29, 2012 at 7:05

MusaMusa

94.7k17 gold badges113 silver badges130 bronze badges

Yes, you can indeed. There are three ways of achieving this that I can think of.