Apply CSS to a specific region in Dreamweaver templates

I'm using a template in dreamweaver to control the look of my website. The template has several images. On every page I have an editable region where the main content goes. I'd like for the IMG tag in the CSS to only control images in this region. How can I make this automatic, without altering the images on the rest of the page (template)?
baadayakaziAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineDon't talk to me.Commented:
Hi baadayakazi,

This isn't really a Template issue so much as a basic CSS issue.  Because they styles cascade (the C in CSS) you can isolate things to a specific area of your page by using IDs.

#content img {
    declaration:property;
}

will affect all img tags contained in the ID content.  So

<div id="notcontent">
<img src="someimage.png" />
</div>

is not affected whereas

<div id="content">
<img src="someimage.png" />
</div>

is affected.
Dave BaldwinFixer of ProblemsCommented:
That should really be 'class's and not 'id's.  'id' is supposed to be unique on a page and 'class' is for styling multiple items.
Jason C. LevineDon't talk to me.Commented:
Dave,

Since the asker wants all images in a certain area affected and if the area is a unique div (content), then my code affects all images within the div, right?

If only certain images are to be affected and there is no structural relation between them, then classes applied per image would be the way to go.
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Dave BaldwinFixer of ProblemsCommented:
@jason1178, yes, that's right.  I assumed that there would be more than one element in the region he's talking about.  If it can be encompassed by a single <div>, then an 'id' will work...  except that tables don't always inherit CSS.  An oddity in all browsers.
Jason C. LevineDon't talk to me.Commented:
Good point re: tables.  I never use them for layout anymore so I tend to forget that they behave in wacky ways with CSS
baadayakaziAuthor Commented:
If I wanted to use tables, how should I proceed?
Jason C. LevineDon't talk to me.Commented:
>> If I wanted to use tables, how should I proceed?

<snark>Don't.  Switch to using divs for layout if you plan on doing this for a living</snark>

<notsnark>Change my advice from using IDs to Dave's advice of using classes and the apply the class to the table cell(s) that hold images that are to be affected

.something img {
    declaration:property;
}

<table>
<tr>
<td class="something">
<img src="someimage.png" />
</td>
</tr>
<tr>
<td class="something">
<img src="someimage.png" />
</td>
</tr>
<tr>
<td class="something">
<img src="someimage.png" />
</td>
</tr>
</table>
Dave BaldwinFixer of ProblemsCommented:
<snark>...</snark>  I like that, Jason.  I think that's 'semantic markup'.  ??  Meaningful at the very least.
Jason C. LevineDon't talk to me.Commented:
I'm writing specs for HTML6.   Think of the clarity we could introduce into the online world!

<snark></snark>
<n00b></n00b>
<opinion></opinion>
<fact></fact>
baadayakaziAuthor Commented:
I'm afraid my lack of CSS knowledge makes it a bit difficult to understand how this looks in practice. Below is a sample section of HTML code. Could you tell me how I would apply the IMG style to image1.jpg and image2.jpg only? Also, should I also change the IMG style name in the CSS file (see below)?



<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Images</title>

<link href="styles/interiorpages.css" rel="stylesheet" type="text/css">

</head>

<body>
<img src="images/image1.jpg">
<p>&nbsp;</p>
<img src="images/image2.jpg">
<p>&nbsp;</p>
<img src="images/image3.jpg">
</body>
</html>




img {
      background-color: #fff;
      border: 1px solid #a9a9a9;
        clear:right;
      float: right;
      margin:5px;
      padding: 4px;
        -moz-box-shadow:1px 1px 5px #a7a7a7;
        -webkit-box-shadow:1px 1px 5px #a7a7a7;
        box-shadow:1px 1px 5px #a7a7a7;
Dave BaldwinFixer of ProblemsCommented:
I got carried away.  Here are three ways to do it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Images</title>
<style type="text/css">
<!-- 
.bxshdw img {
      background-color: #fff;
      border: 1px solid #a9a9a9;
      clear:right;
      float: right;
      margin:5px;
      padding: 4px;
      -moz-box-shadow:1px 1px 5px #a7a7a7;
      -webkit-box-shadow:1px 1px 5px #a7a7a7;
      box-shadow:1px 1px 5px #a7a7a7;
			}
img.bxshdw2  {
      background-color: #fff;
      border: 1px solid #a9a9a9;
      clear:right;
      float: right;
      margin:5px;
      padding: 4px;
      -moz-box-shadow:1px 1px 5px #a7a7a7;
      -webkit-box-shadow:1px 1px 5px #a7a7a7;
      box-shadow:1px 1px 5px #a7a7a7;
			}
#bxshdw3  {
      background-color: #fff;
      border: 1px solid #a9a9a9;
      clear:right;
      float: right;
      margin:5px;
      padding: 4px;
      -moz-box-shadow:1px 1px 5px #a7a7a7;
      -webkit-box-shadow:1px 1px 5px #a7a7a7;
      box-shadow:1px 1px 5px #a7a7a7;
			}
-->
</style>
</head>

<body>
<div class="bxshdw"><img src="images/image1.jpg"></div>
<p>&nbsp;</p>
<div id="bxshdw3"><img src="images/image2.jpg"></div>
<p>&nbsp;</p>
<div><img class="bxshdw2" src="images/image3.jpg"></div>
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
baadayakaziAuthor Commented:
Worked great - Thanks!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.