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"> ...