CSS font-size not working for h1 only in one block
I've looked around for a solution for this but it must be something a tad odd isnce bith the CSS and html verify with the w3c checker.
CSS Snippet:
body{
background-color: #ffffff;
color:#000000;
text-align: left;
height:100%;
}
h1{
font-size: 250%;
font-weight: normal;
text-align: center;
}
h2{
font-size:150%;
}
h1{
font-size:120%;
}
#MainHeader{
background-color:#efefef;
background: url("http://www.wou.edu/images/spotlight/wounews.png") no-repeat;
padding:15px 0px 15px 0px;
}
#MainContent{
background: url("http://stuff.bodestone.net/jr/construction.gif");
padding: 8px 8px 8px 8px;
clear:both;
background-color:#ff00ff;
overflow:auto;
height: auto;
}
#MenuBar{
background-color:#dfdfff;
float:left;
开发者_运维知识库 padding: 15px 0px 15px 0px;
overflow: auto;
height: 100%;
}
#PageContent{
float:left;
background-color:#dedebe;
overflow: auto;
padding: 15px 15px 15px 15px;
overflow: auto;
}
And the HTML:
<body>
<div id="MainHeader">
<h1>A random template site to work some stuff out</h1>
</div>
<div id="MainContent" class="clearfix">
<div id="MenuBar">
<a href="index.html" class="here">Page 1</a><br>
<a href="page2.html">Page 2</a><br>
<a href="page3.html">Page 3</a><br>
</div>
<div id="PageContent">
<h2>This is page 1</h2>
<p>lar</p>
</div>
</div>
<div id="Footer" class="clearfix">
<span style="float:left">And here we have a footer.</span><span style="float:right">Style info for left and right defined separately in the html.</span>
</div>
</body>
If I change the font-weight of h1 it changes. If I change the font-size it does not. I can change weight and size of the h2 in the PageContent DIV.
As an aside, I have used * before for global definitions at the start of the style sheet. Is this the same as root?
You appear to define font size for h1 twice:
h1{
font-size: 250%; /* Here */
font-weight: normal;
text-align: center;
}
h2{
font-size:150%;
}
h1{
font-size:120%; /* And here */
}
Depending on which you're changing, you might not see results, because the second h1 rule is overriding that of the first. If you're modifying the first declaration, then it will be overridden by the second declaration.
The validator does not warn about rules with identical selectors that may override one another, so you'll have to watch out for that yourself, or check with a tool like Firebug to see the computed style for an element.
As an aside, I have used * before for global definitions at the start of the style sheet. Is this the same as root?
No, * is the universal selector that matches any element. The root element is html, but even by applying styles to that element, not every style will be inherited by body elements inside it.
You seem to have h1 defined twice in your CSS - above and below h2.
Both of them seem to have font-size defined. Delete the second one.
You appear to have defined h1 twice in your css.
h1{
font-size: 500%;
font-weight: bold;
text-align: center;
}
h1{
font-size:120%;
}
First value gets overridden by the second value. So the size doesn't change :)
加载中,请稍侯......
精彩评论