Can I do this with Class instead of ID?

HTML & CSS
1

Hi,

I’ve been using IDs more than classes but have built a little ad box that may be used more than once on a page so when I use an ID, I can’t validate it with the CSS validator because I can use an ID only once on a page.

What’s the most efficient way to do this as a class? Is there a way without adding a class attribute to each h1, h2, and p?

Here’s the page:
http://acr.virtualpinpoint.com/templates/contentcenter/

Here’s the CSS:


#ad {width:165px; 
	background-color:#FFF; 
	border:1px solid #6F2C11; 
	margin:25px 10px; 
	padding:5px;}

#ad h1 { text-transform: uppercase; 
	font-size: 1.3em;
	font-weight: bold;
	text-align: center; 
	padding: 0 0 10px 0;}

#ad h2 {padding:0; 
	font-size:.9em;}

#ad p {font:.8em tahoma, arial, sans-serif; 
	text-align:left; 
	padding:0; 
	margin:0;
	color:#000;}

Here is the markup:


<div id="ad">
<h1>Sample Ad</h1>
<h2>Special 1</h2>
<p>Ad text here describing special number 1.</p>
<hr />
<h2>Special 2</h2>
<p>Ad text here describing special number 2. You can link to <a href="/contact/">another page</a> or even <a href="http://google.com/" target="_blank">off the site</a>.</p>
</div><!--end ad-->
2

You need to add a class to the HTML if you need to reference the CSS for that multiple times :). There’s no getting around it (if you kept as IDs then you’d have invalid markup and it would begin to show with weird stuff going on in your page :))

3

What’s the most efficient way to do this as a class? Is there a way without adding a class attribute to each h1, h2, and p?

Hi,
As you noted, you should be using a class for the ad selector since it is being used more than once on the page.

No, you need to use the descendant selector for all the children of the ad div if you want them to have specific styles. Otherwise they will get the default styles you have set up for those elements in your css.

You have it set up right, just change it all to class instead of ID.