HTML5: Adding Style

Dive in HTML5 styling!

In part 2 of a look at HTML5, Nancy will show you how to add CSS to the previously unstyled document from part 1 and why there are some differences you need to watch out for. In this week’s article, we are going to dive into styling the document created in part 1 and show a couple of ways styling can be done without breaking the rules.

Styling Choice #2: Do It With Class

Another solution to the styling quandary is to forget adding the divs and use classes instead. As I mentioned in the first article, the Dreamweaver group changed the example pages from version CS4 to version CS5 by changing the use of DIV IDs in CS4 to using classes in CS5. I am not too sure about the wisdom of so doing, but we'll give it a shot. The nice thing about classes is that you can have as many as you want and you can apply a given class to anything. The really nice thing about classes is that you can apply more than one to the same tag, although Dreamweaver by default doesn't support more than one. However, if you are looking to create a unique style that will apply to only one thing, then it is more appropriate to use an ID on a div. The rule of thumb is that IDs mean unique and classes mean reusable. That said, let's make the same page but this time we'll use classes instead of divs.

We will still need to create a few divs because we need some structure to apply the classes to. The most important div we still need is the container but we'll create the css as a class this time around. We'll have the same background color on the body and we'll use the same specifications on the container div only the styles will be assigned to a class rather than an ID.

The code for the container class is as follows:

.container {
      background-color: #FFF;
      width: 760px;
      margin: 0 auto;
      border-left: solid #000 1px;
      border-right: solid #000 1px;
      padding: 0px 10px 0px 15px;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 14px;
}

From this point on, the technique is very similar to the first example, only this time, rather than creating divs to wrap the code elements in, we are applying classes to specific markup and styling those classes. The complete html for the class styled page is as follows:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>My HTML5 Document</title>

<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
<link href="class.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="container">
<header class="mainhead">
<h1>My Home Page</h1>
</header>
<nav class="sidebar">
<ul>
<li>About Me</li>
<li>My Blog</li>
<li>Contact Me</li>
</ul>
</nav>
<section class="content">
<article>
<header>
<h2>My First Article: Football!</h2>
</header>
<p>I have a lot of interests but one of my biggest and most surprising is that I LOVE FOOTBALL! For those of you outside the United States, I'm not talking about soccer. I'm talking about good old American NFL, College and whatever Football! There is nothing like spending a Saturday glued to the television while you keep track of 18 college knock-down, dragouts on 6 channels.Then you follow that up on Sunday with the amazing, one-of-a-kind NFL (National Football League). Go, Brett Favre! </p>
</article>

<article>
<header>
<h2>My Second Article: Cooking with Flair</h2>
</header>
<p>I have been a mom for a pretty long time and every day for the last 20 some years of my life, I have prepared, in varying degrees of tirelessness, thousands of meals of all kinds and all nationalities for the brood that are my children. However, recently, thanks in no small part to my daughter Amy, I have taken a new interest in cooking via the Food Network. Whenever possible, Amy and I spend our lunch hours grabbing a bite while we watch some great Italian feast being prepared and, more often than not, we have to try this new wonder out ourselves within the next couple of days. We love it!</p>
</article>
</section>
<br clear="all">
<footer class="bottom">
© 2010 Nancy
</footer>
</div>
</body>
</html>

The CSS page for this example looks like this:

@charset "utf-8";
/* CSS Document */

body {
      background-color: #09C;
      margin: 0;
      padding: 0;
}

.container {
      background-color: #FFF;
      width: 760px;
      margin: 0 auto;
      border-left: solid #000 1px;
      border-right: solid #000 1px;
      padding: 0px 10px 0px 15px;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 14px;
}
.sidebar {
      float: left;
      width: 180px;
}
.sidebar ul {
      list-style-type: none;
      padding: 5px 10px;
}
.sidebar li {
      margin-bottom: 5px;
}
.content {
      float: left;
      width: 560px;
      padding-left: 10px;
}
.bottom {
      background-color: #FFC;
      font-size: 10px;
}
.mainhead {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      text-align: center;
}

This creates a page that looks basically the same as the first one. You can see if below:

The same page created with CSS classes.

This discussion shows you a couple of ways to basically create the same thing and there are others as well. Current practice suggests that one should not put style classes directly on the html5 structural tags, but you may have noticed in the second example that I did so on the footer with desired results. If you're thinking this raises some questions about doing it one way or another, I agree with you. The answers to those questions will be the subject for a future article. Count on it.

One note if you have begun to use the HTML5 pack from Adobe Labs. There are two HTML5 layouts included in the HTML5 pack that has some improper use of HTML5, specifically using h1 and h2 tags outside the header to which they apply. This is improper use of HTML5 structure and I will be bringing this to their attention. My advice is either to not use them or correct them in your pages by moving the h1 or h2 inside the header tag.

Nancy Gill

In early 1996, Nancy Gill picked up her first book on HTML and permanently said goodbye to the legal field. She has been busy ever since developing web sites for businesses, organizations and social groups in Central California and occasionally beyond. Nancy has served as a member of Team Macromedia since late 2001, first with UltraDev and then moving to Dreamweaver when the programs were consolidated in 2002. She also serves as Assistant Manager for the Central California Macromedia User's Group.
Nancy is the co-author of Dreamweaver MX: Instant Trouble-Shooter and technical editor for several Dreamweaver and Contribute related books, including the well-known Dreamweaver MX 2004: A Complete Reference. She also penned the first ever Contribute article for Macromedia's Own Devnet "Getting Up to Speed with Contribute in 10 Minutes".

Nancy has three children, two in college and one in high school. Offline, she enjoys various sporting activities, is a wild NFL football fan and sings in the church choir.

See All Postings From Nancy Gill >>

Reviews

Be the first to write a review

You must me logged in to write a review.