Home/ Questions/Q 4029146
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T11:18:30+00:00

I’ve looked around for a solution for this but it must be something a

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0