-1

My HTML5 presents a list of bookmarks, like this:

    <h1>Bookmarks</h1> <!-- Big text -->
    <ul class='bookmarks-list'>
      <li>
        <article class='bookmark'>
          <h1> <!-- Small text, not desired. :( -->
            <a href='/bookmarks/show/4ed230552357a3f96907fb5f'>Google</a>
          </h1>
          <p>...</p>
        </article>
      </li>
      <li>
        <article class='bookmark'>
          <h1> <!-- Small text, not desired. :( -->
            <a href='/bookmarks/show/4ed235562357a3f96907fb60'>Stack Overflow</a>
          </h1>
          <p>...</p>
        </article>
      </li>
    </ul>

The problem is that the h1 tags in the bookmarks have a smaller font-size than the h1 which is not in an article (the title of the web page for example).

Screenshot.

I could of course class every h1 and style it with the same font-size, but I would like to style all h1s in all levels at once without adding a class to them. Is this possible?

  • @Šime Vidas I tried that already, but the result is the same. (All get bigger, but `h1`s inside articles are still smaller than `h1`s not inside articles.) –  Nov 27 '11 at 13:37
  • Can you post the CSS code that is bound to that web-page? – Šime Vidas Nov 27 '11 at 13:39
  • @Šime Vidas haha, you were right. I accidentally had an `article h1 {font-size 1.5em;}` in my CSS. I removed it, added what you suggested and it works now. –  Nov 27 '11 at 13:41

2 Answers2

1

If you check (for example) Firefox's default stylesheet (try visiting resource://gre-resources/html.css in Firefox) you'll see there are rules like this:

h2,
:-moz-any(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin: .83em 0;
}

h3,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin: 1em 0;
}

An h1 that appears at one level of nesting has the same default style as h2, at two levels of nesting it has the same default as h3. Your problem is that these rules are more specific than the rules you are using. To fix it, write rules which are more specific than those in the default stylesheet (Replico's answer should work, I think), or hack it with !important.

robertc
  • 74,533
  • 18
  • 193
  • 177
0

is .bookmark h1 a {font-size:100px;} any good to you?

burning_LEGION
  • 13,246
  • 8
  • 40
  • 52
jamiescript
  • 1,284
  • 1
  • 11
  • 18