HTML5 and CSS - custom tags?

I am working on a straight HTML 5 website for learning.

Before my CSS might look like:

div.BoxHouse {
  margin-left: 72px;
  margin-right: 20px;
}

#content {
  width: 90%;
  background: url(transwhite.png);
  border: 1px solid #3F4933;
  margin-left: 72px;
  margin-right: 20px;
  margin-top: 20px;
  padding: 5px;
  z-index: 1;
  margin-bottom: 40px;
  overflow:auto;
  top: 10em;
  padding-top: 10px;
  }

I thought t开发者_如何学Chat with HTML5 I could just do this in code:

<header>  
<hgroup>
    <content>
    <BoxHouse>
        <h1>HTML 5</h1>  
        <h2>The mark-up language for fun and profit</h2>
    </BoxHouse>
    </content>
</hgroup>  

Given this as new CSS:

BoxHouse {
  margin-left: 72px;
  margin-right: 20px;
}

content {
  width: 90%;
  background-image: url('../transwhite.png');
  border: 1px solid #3F4933;
  margin-left: 72px;
  margin-right: 20px;
  margin-top: 20px;
  padding: 5px;
  z-index: 1;
  margin-bottom: 40px;
  overflow:auto;
  top: 10em;
  padding-top: 10px;
  }

But it clearly doesn't work. What am I doing wrong?

---

You can't use custom tags in HTML5. You should be either selecting the h1, h2 etc directly in your CSS or using classes on them.

<header class="content">  
<hgroup class="BoxHouse">
    <h1>HTML 5</h1>  
    <h2>The mark-up language for fun and profit</h2>
</hgroup>

Also, is the background-image: url(transwhite.png); image a semi transparent white background? If so you can use RGBA colours in CSS3. The is for alpha. So you can use background-color: rgba(255,255,255,0.5); for a 50% transparent white box. The advantage of this over using opacity is the text isn't transparent, it's still clear and solid.

---

What you are trying to do makes perfect sense. But it is not how CSS works.

You can hijack grandfathered tags like <em> and <strong> to keep your html concise, but you cannot create new ones. Instead use the user friendly <span class="myclass"> ...