Back to Top
The nuts and bolts for
Creative web development

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 Differences

As we saw last week in Part 1, the HTML5 specification allows for new tags like header and footer, where previously we used to create divs with IDs having those names.  With tags named for those pieces, we see that now a "header" can now be the header of a document, but also a header of a section or an article or even a footer which means one important difference when it comes to styling.  THERE CAN BE MORE THAN ONE!  The same is true with footer, article, section and even nav.  Since the tag "nav" , for example, is used to contain any navigation on our page, if we were to create CSS specifically for the "nav" tag, we would end up with all of our navigation on the page looking exactly the same.  That is surely not desirable where one form of navigation may be a display list and another may be text navigation displayed horizontally. 

The same is true for header, footer and other tags.  Since different headers are often different sizes, colors and perhaps even fonts, we don't want them looking all the same, so we do NOT want to create CSS for the tag "header" or the other structural tags.  So how do we do it?  I'll show you a couple of options and you can decide what works best for you.

First, let's start with last week's document.  I have copied the code in here for you so you won't have to go back and find the other article.  Make a new document and copy the code in the code box below into it.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>My HTML5 Document</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
 
<body>
<header>
<h1>My Home Page</h1>
</header>
<nav>
<ul>
<li>About Me</li>
<li>My Blog</li>
<li>Contact Me</li>
</ul>
</nav>
<section>
<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>
<footer>
&copy; 2010 Nancy
</footer>
</body>
</html>

You will remember from last week that there are already a couple of styling notations in this document.  One is a link to the HTML5 Shiv on Google Code, which is used to display HTML5 tags in Internet Explorer.  This will probably not be necessary once Internet Explorer 9 becomes available at the end of 2010, but as that version is still in development, we'll develop a "wait and see" attitude to see what comes out at release time.  We also have included in the document a display: block instruction for the new html tags that are currently not recognized in all but the up and coming browsers in order to get those browsers to display those new tags.  It's your choice whether to move this second instruction to the CSS style sheet or keep it in the document.  Either way is acceptable.  I'm going to keep it here, but I will create all the other styles in an external style sheet so that I can switch them easily in this article.

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

Share this Article