How to override CSS inside a DIV?

Here is what I have:

      <div id="sub_main">
         blah blah blah blah blah <h2>MEGA BLAH</h2>blah blah blah
      </div>

In the styles.css, it contains:

#sub_main h2 {
      font-family: Arial, Helvetica, sans-serif;
      font-size:16px;
      color: #82021c;
      padding: 15px 70px 0px 80px;
      font-weight:200;
      margin: 20px 0 0 0;
      text-transform:uppercase;
}

HOWEVER, for this H2, I just want a simple display: inline, grey, same font size text.

I've tried doing a manual STYLE="" inside the H2 tag, as well as creating a new class and doing <h2 class="h2class">MEGA BLAH</h2>  but no matter what I do, it inherits the settings for H2 inside that div

How can I "start fresh"?   Or do I have to manually reset each parameter set in the CSS block above PLUS what I want?  In other words, if I don't change every attribute, then that attribute inherits?

Any clean way to do this or do I have to set them all?

Thanks
LVL 1
drgdrgAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

s8webCommented:
would h2 happen to be a link?
0
drgdrgAuthor Commented:
No, just an H2.  

I've sort of gotten around it doing something like this:

      <div id="sub_main">
          <p>blah blah blah <h2 style="display: inline; font-family: Arial, Helvetica, sans-serif; font-size:12px; color: #757575; padding: 0px 0px 0px 0px; font-weight:200; margin: 0px 3px 0px 0px; text-transform:none;">MEGA BLAH</h2> blah2 blah2 blah2</p>
       </div>

The "MEGA BLAH" now looks OK, but the "blah2 blah2 blah2" that follows the H2 - inside the same <P></P> section as the initial "blah blah blah" seems to have lost the css settings of the <P> and appear as regular unformatted body text...

Of course, I still have the open issue of needing to know how to take my "fix" and drop it into the CSS sheet and call it properly.
0
s8webCommented:
Is there any way you can post a link? That would make this easier. The first thing that comes to mind is an open tag elsewere hosing things up.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

drgdrgAuthor Commented:
Thanks.  If you could look at this:

http://designs.drg1.com/cssproblem/

The second "paragraph" should be one line going across with all grey text.

1 - the line break before "H2 H2 H2 H2" should not be happening

2 - the text following "H2 H2 H2 H2" should be the same as the phrase "The company does"

Finally, once that is tweaked, I need to know what I can set in CSS style sheet so that I can do the "H2 H2 H2 H2" thing elsewhere throughout the site without manually putting in a long string of CSS each time.

THANK YOU !!!!
0
s8webCommented:
Sorry about the delay, I had to go sit in traffic for a while.

The problem you are encountering is caused by nesting your h2 tag in paragraph tags. This doesn't work out so well.

Do it as a span instead.

In the below example, you can cut everything between the <style type="text/css"></style> tag trimming and paste it to your external stylesheet if you want to use it globally. display:inline is unnecessary in this case.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link href="style.css" rel="stylesheet" type="text/css" media="screen">
	<script type="text/javascript" src="inc/menu_header.js"></script>
	<title></title>
	<style type="text/css">
	.likethis{
	font-family: Arial, Helvetica, sans-serif; 
	font-size:12px; 
	color: #757575; 
	padding: 0px 0px 0px 0px; 
	font-weight:200; 
	margin: 0px 3px 0px 0px; 
	text-transform:none;
	}
	</style>
</head>
<body class="turnkey_products">
<div id="sub_wrapper">
<div id="sub_inner">
      <div id="sub_main">
        <h1>Main Heading</h1>

		<p>The company does
			<span class="likethis">H2 H2 H2 H2</span> 
			as evidenced by our history of doing it.</p>
        <p>We also do other things and more other things.  We also do other things and more other things.  We also do other things and more other things.  We also do other things and more other things.  We also do other things and more other things.  We also do other things and more other things.  We also do other things and more other things.  </p>
        <p><strong>Finally, we do these things.  Finally, we do these things.  Finally, we do these things.  Finally, we do these things.  Finally, we do these things.  </strong></p>
      </div>
    </div>
</div>

</body>
</html>

Open in new window

0
dwaynecharringtonCommented:
A cool trick to force a style and override all other styles is to append an '!important' to the end of your CSS declaratiion.

For example, the below example will force a black bottom border even if other CSS is placed after it overriding it.

p {
border-bottom: 1px solid #000 !important;
}

p {
border-bottom: 1px solid #999;
}

The second declaration will not work because an important has been placed after the first declaration.
0
drgdrgAuthor Commented:
The span won't work ... for SEO reasons, I need h2 tags.

I found the reason on another forum, and I'll share it here for anyone else who comes across this issue.

See:  http://osdir.com/ml/org.w3c.validator/2002-07/msg00081.html

To quote from that page:

The current development validator does give you a link to a page which
says:

"A subtle variation of this is <P><H4>fake font change</H4></P>. <H4>'s
aren't allowed inside <P>'s, but since HTML allows you to omit the </P>
end tag for paragraphs, the validator assumes that you meant
<P></P><H4>fake font change</H4></P>, in which case the final </P> is
indeed superfluous. "

So what was happening to me was the <P> tag was being implicitly closed by the <H2> tag, and then following the </h2> tag was "regular" text that was not part of the <P> and therefore did not inherit the traits.

My solution?  I created a second class:

p {
    whatever it was
}

p.p2 {
    whatever it was;
    display: inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

Then my HTML became:

<p>bah blah blah <h2 class="cpu">h2 h2 h2 h2 </h2><p class="p2">blah2 blah2 blah2</p>

and this did the trick
0

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
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.