Noobie questions sorry.... overriding a <p> tag and # on only one page

HTML & CSS
1

Sorry im ne to this, in my last post i was taught to overide

.full-article .module-inner {
padding:0 15px;}

with
.imagearticle .full-article .module-inner
{
padding:0 15px;}

How do i override this CSS just for this page using my class suffix id image_article for these two pieces of CSS??? I’m really struggling with what takes president

#mainmodules2 {
padding-top:15px;}

and

p {
margin-bottom:15px;
margin-top:10px;
}

The P seems to overide
.imagearticle .full-article .module-inner p{
margin-top: 0px;
margin-bottom: 2px;}

Thanks in advance for your time!!! heres the code

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

<div class=“bodycontent”>
<div id=“maincontent-block”>

																											&lt;div class=" imagearticle"&gt;
&lt;div id="page" class="full-article"&gt;

			&lt;div class="module-tm"&gt;&lt;div class="module-tl"&gt;&lt;/div&gt;&lt;div class="module-tr"&gt;&lt;/div&gt;&lt;/div&gt;
	&lt;div class="module-inner"&gt;
	
	&lt;div class="article-rel-wrapper"&gt;
					&lt;h2 class="contentheading"&gt;
			Articles &amp; Publishing			&lt;/h2&gt;
			 	&lt;/div&gt;
			
	
			
	
	
	&lt;p&gt;Read Articles on horse nutrition and horse care published by  These are incomplete sample articles &lt;span class=" "&gt;If you would like to read or publish the full article in your club magazine or newsletter please contact us on the contact page!!&lt;/span&gt;&lt;span class=" "&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;

			&lt;div class="article-ratings"&gt;
				&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="module-bm"&gt;&lt;div class="module-bl"&gt;&lt;/div&gt;&lt;div class="module-br"&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;

</div>
</div>
</div>
<div class=“clr”></div>

	       											       									&lt;div id="mainmodules2" class="spacer w99"&gt;
	       												       										&lt;div class="block full"&gt;
	       												&lt;div class=" bran4"&gt;
	&lt;div class="moduletable"&gt;
		&lt;div class="module-tm"&gt;&lt;div class="module-tl"&gt;&lt;/div&gt;&lt;div class="module-tr"&gt;&lt;/div&gt;&lt;/div&gt;
		&lt;div class="module-m"&gt;&lt;div class="module-l"&gt;&lt;div class="module-r"&gt;
					&lt;div class="module-inner"&gt;
2

Well, no wonder you’re struggling… you have waaaay too many containers, too many names, too many classes… I’m having trouble seeing how to override for the p myself.

In fact, I can’t tell what’s specific to this page, in order to tell you how to make that p different “for this page”.

Ideally, you’d have as few containers as necessary and style the most basic stuff first (with as few selectors as possible). and then try to make a specific thing here and there different.

The P seems to overide
.imagearticle .full-article .module-inner p{
margin-top: 0px;
margin-bottom: 2px;}

It may not be. it might be that nasty nasty <br> sitting inside the empty span sitting inside the p that’s making the space.

This looks like a template. Is it? If so, do you have any way to simplify the HTML in it?

If you can, it will SO save you hair!

3

Hi, I’m not quite sure on your question.

How do i override this CSS just for this page using my class suffix id image_article for these two pieces of CSS???

If you meant the class imagearticle (not ID image_article as you say) then … yeah.

But I still don’t understand waht you want. I gather from Stommy you want the <p> to have overridden margins?

I just tried reading your post over several times and I just saw too many interpretations of what you wanted and it would take ages for me to go over all the permutations of my interpretations :slight_smile:

4

Thanks for trying to help. Sorry about the confused post, it was late and i had been stuck for hours and even i can barely make sense of this post myself now.

I eventually worked it out and it seems i wasn’t understanding the basic principle of refrenceing the class of objects by starting at the Div that my template placed the page class suffix on.
For example i want to change the CSS for this <h2 class=“contentheading”>

This is what worked for me
.imagearticle .full-article .module-inner .article-rel-wrapper h2 {
font-size:180%;
line-height:110%;
margin:0 -15px 0px;
padding:0 95px 12px 15px;

The template restricts me to have to go through many containers is there a simpler way to write this in CSS . (I have place the code at the bottom of the post)

for example

<div class=“main-tm”><div class=“main-tl”></div><div class=“main-tr”></div></div>
<div class=“main-m”><div class=“main-l”><div class=“main-r”>
<div id=“main-body”>
<div id=“main-content” class=“s-c-x”>
<div class="colmask leftmenu "><div class=“wrapper”> <div class=“colmid”>
<div class=“colright”>

					       &lt;!--Begin Main Column (col1wrap)--&gt;   
						    &lt;div class="col1wrap"&gt;
						        &lt;div class="col1pad"&gt;
						            &lt;div class="col1"&gt;
								        &lt;div id="maincol"&gt;
																																					    									&lt;div class="bodycontent"&gt;
	    												    												    										&lt;div id="maincontent-block"&gt;
													
																											&lt;div class=" imagearticle"&gt;
&lt;div id="page" class="full-article"&gt;

			&lt;div class="module-tm"&gt;&lt;div class="module-tl"&gt;&lt;/div&gt;&lt;div class="module-tr"&gt;&lt;/div&gt;&lt;/div&gt;
	&lt;div class="module-inner"&gt;
	
	&lt;div class="article-rel-wrapper"&gt;
					&lt;h2 class="contentheading"&gt;
			Articles &amp; Publishing			&lt;/h2&gt;
			 	&lt;/div&gt;
5

So do you have any more questions? You indicated you got it to work :slight_smile: