H1 styling

[deansaddigh]

Hi, basically im making a box where i want the h1 tags to take on styling i specify, but whats annoying is it takes on the styling i give it plus the h1 styling i have set for all the other h1 tags,

 

basically i want the h1 tag in the box i have created to have its own attributes.

 

heres the css

 

@charset "utf-8";
/* CSS Document */




/* Heading */
h1{
font: large georgia;
line-height: 45px;
padding:0; margin:0;
color: #FFFFFF;

background: url(../images/devider.png) bottom right no-repeat;

font-weight: normal;
}

h2{
font: large georgia;
line-height: 45px;
padding:0; margin:0;
color: #FFFFFF;
font-weight: normal;
}

p{

	padding:0; margin:0;
	font: strong, times, Times New Roman, times-roman, georgia, serif;
	font-size: 14px;


	color: #000000;
}		






a:link { 
color: #FFFFFF;
font-weight: 600; 
  	font-size:14px;
  	text-decoration: none;
}
a:visited { 
color: #FFFFFF;
font-weight: 600; 
  	font-size:14px;
  	text-decoration: none;
}
a:hover { 
font-size:14px;
font-weight: bolder;
color: #000080;
text-decoration: underline;

}
a:active { 
color: #333333;
text-decoration: none;
}

        


a img {
    border: none;
    
}


body {

margin: 0;
padding: 0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #1372ce;
background-image: url(../images/pagebg.jpg); 
background-repeat: no-repeat;
background-attachment:fixed;
}

#wrapper {
/*Wrapper dont automatically expand to contain floated elements you have you use
over flow:auto to do this */
width: 940px;

  	margin-left: auto ;
  	margin-right: auto ;
overflow:hidden;
}

#headerlinks{
width: 940px;

 background-image:url(../images/tiled.png) ;
}

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}            

#header {
background-image:url(../images/logo.png); background-repeat :no-repeat;
width: 800px;
height: 100px;


}

#left {
margin-top: 20px;
width: 200px;
float:left;


}

#main {

margin-top: 20px;
margin-left: 10px;
width: 500px;
float:left;
margin-bottom:2cm;
background-image:url(../images/tiled.png) ; 
overflow:auto;

}

#right
{ 
width:200px; 
margin-top: 20px;
float:right;


}

#footer{

width: 940px;
  	margin-left: auto ;
  	margin-right: auto ;
  	
clear:both;
background-image:url(../images/tiled.png) ; 	
}


/*****Forms******/
form {
    margin: 1em;
    width: 90%;

}

label
{
width: 10em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;

}

.submit input
{
margin-left: 4.5em;

}

legend
{
color: #fff;
background: #4169E1;
border: 1px solid #007FFF;
padding: 2px 6px;
}

fieldset
{
border: 1px solid #FFFFFF;

}

input {
padding:0.15em;
width:10em;
border:1px solid #ddd;
background:#fafafa;
font:bold 0.95em arial, sans-serif;
-moz-border-radius:0.4em;
-khtml-border-radius:0.4em;
}

select {
background-color: #FFFFFF;
color: #000000;
font:bold 0.95em arial, sans-serif;
-moz-border-radius:0.4em;
-khtml-border-radius:0.4em;
}

textarea {
width: 300px;
height: 120px;
color:#FFFFFF;
font:bold 0.95em arial, sans-serif;
-moz-border-radius:0.4em;
-khtml-border-radius:0.4em;
background-image: url(../images/formb.jpg);
background-position: bottom right;
background-repeat: no-repeat;
}

.submit {
font:bold 0.95em arial, sans-serif;
 border:none;

height: 25px;
background-color: #63D1F4;
}








.floatleft
{
float:left;
padding:0px 5px 5px 5px;
}

.cleardescription
{
clear:left;
}


.newproducts
{
float:left;
}


   
ol {  
        margin:0; 
        padding:0;  
        list-style:none;  
   }   
   
li {  
	        
        list-style:none;
        margin-left: 20px ;
   } 
   
/* Boxes */

.box {
        width: 180px;
        border: solid #884400;
        border-width: 8px 3px 8px 3px;
        background-color: #ccaa77;
}

.box ul {
        margin: 0px;
        padding: 0px;
        padding-top: 50px; /* presuming the non-list header space at the top of
                              your box is desirable */
}

.box ul li {
        margin: 0px 2px 2px 2px; /* reduce to 1px if you find the separation
                                    sufficiently visible */
        background-color: #ffffff;
        list-style-type: none;
	padding-left: 2px;
}

h1.box  {
	background-color: #33657c; 


}

 

 

So basically i want this line in the css

 

h1.box  {
	background-color: #33657c; 


}

 

to be uses within the box contrainer what am i doing wrong

 

heres the php

 

<div class="box">
    	<h1 class="box">Menu</h1>
    	
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
   </ul>
</div>

[FaT3oYCG]

try

 

.box h1 {

 

}

 

you want to style h1 in the box class so be more specific, your current styling says to style any h1's with the box class

[Chezshire]

Hi  deansaddigh,

  I think that FaT3oYCG got the solution down-pat. I just went through something like this regarding specificity and if i'm understanding things correctly, your current styling doesn't work because it's called out to the h1 tags in the box div vs class which is attached to a specific h1 tag. By using the revised code FaT3oYCG suggests, it would move the styling to the specific h1 vs. all the h1's in the box div. You also might consider using different names for you classes then you divs. I find that that helps to keep things straighter in my mind. Like 'Div=" box"' and class="h1_box" or class="h1Box" or class="FirstBox". Just some thoughts, mostly I'm just reading this to understand

 

I hope that FaT3oYCG's suggestion works.

[JustLikeIcarus]

If their are properties in the h1{} css statement that you dont want to take affect on a specific h1 tag you have to override them all in the .box h1{} css Or else they will "Cascade" down to it. So if you have a background color set for h1 but dont want it for .box h1 then you have to state that in the css.