CODEWITHSUNDEEP
htmlcss
Randomize
Randomize

Reputation: 9103

Overriding pre-defined CSS style

I have a situation where there are images with predefined style in the css like this:

<html>
<head>
<STYLE TYPE="text/css">
   #content img  {
    -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    -box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
   }
</STYLE>
</head>
<body bgcolor="#dddddd">
   <div id="content">
       <img src="image.gif" />
   </div>
</body>
</html>

For most of the images inside the page it's ok but in some cases I would like display images without the pre-defined style. Is it possible in some way? maybe with an inline style?

Upvotes: 0

Views: 533

Answers (4)

Ben
Ben

Reputation: 13645

You could add a class to images that you do not want to have this style.

#content img.noshadow{
  -moz-box-shadow: 0;
  -webkit-box-shadow: 0;
  box-shadow: 0;
}

then offcourse your image would be <img class="noshadow" src="image.gif" />

Upvotes: 2

Praveen
Praveen

Reputation: 1449

You can define an inline style in such cases. As shown below.

 <img src="image.gif" height="" width="" ... />

Hope this helps you!!

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

Make a more specific CSS selector:

body #content img  {
    ...
}

Upvotes: 1

James Montagne
James Montagne

Reputation: 78730

There are many ways to do this. As you mentioned, an inline style is one option. There are others. You should read a bit about css precedence.

One possible link (first result on google, don't know about this site in general but the article looked okay):

http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Upvotes: 2

Related Questions