How can I override inline styles with external CSS?

Question

I have markup that uses inline styles, but I don\'t have access to change this markup. How do I override inline styles in a document using only CSS? I don\'t want to use jQu

Answer 1

inline-styles in a document have the highest priority, so for example say if you want to change the color of a div element to blue, but you've an inline style with a color property set to red

   Hello World, How Can I Change The Color To Blue?

div {
   color: blue; 
   /* This Won't Work, As Inline Styles Have Color Red And As 
      Inline Styles Have Highest Priority, We Cannot Over Ride 
      The Color Using An Element Selector */
}

So, Should I Use jQuery/Javascript? - Answer Is NO

We can use element-attr CSS Selector with !important, note, !important is important here, else it won't over ride the inline styles..

    This is a test to see whether the inline styles can be over ridden with CSS?

div[style] {
   font-size: 12px !important;
   color: blue !important;
}

Demo

Note: Using !important ONLY will work here, but I've used div[style] selector to specifically select div having style attribute