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

User · Answer

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    lt li class  flex-control-thumbs flex-control-thumbs-without-width  gt   lt  li gt    And do remove whenever you don t need for other  lt li gt

User · Answer

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        lt ul class  flex-control-thumbs additional  gt   lt  ul gt     assuming parent is ul

User · Answer

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    lt link rel  stylesheet  href  allpages css  gt   lt style gt   flex-control-thumbs li     width  auto    float  none     lt  style gt

User · Answer

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  lt style gt  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

User · Answer

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

User · Answer

Just add     flex-control-thumbs li   width  auto

User · Answer

Increase your CSS Specificity Example   parent-class  flex-control-thumbs li     width  auto    float  none     Demo   x000D   x000D   sample-class     height  50px    width  50px    background  red      inner-page  sample-class     background  green    x000D   lt div gt     lt div class  sample-class  gt  lt  div gt   lt  div gt    lt div class  inner-page  gt     lt div class  sample-class  gt  lt  div gt   lt  div gt  x000D   x000D   x000D

[html] how to overwrite css style

Examples related to html

Examples related to css