asked on

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

s8web

would h2 happen to be a link?

drgdrg

ASKER

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.

s8web

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.

drgdrg

ASKER

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

s8web

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

dwaynecharrington

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.

ASKER CERTIFIED SOLUTION

drgdrg

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial