Be the first to write a review
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 #1: Keep It On the DIV
In the initial surge to get everyone to dump tables as design elements, we were all urged to create divs and lots of them. We made divs for everything, we added names to them and we then used those divs to set up CSS to style our pages. There is good and bad about that. The good is that we ended up with a unique area for everything that we could very highly customize. The bad about that is that we ended up with a unique area for everything that we had to highly customize. The other "bad" about that is that you ended up with a lot of </div> tags and you found yourself wondering which div you had ended and which one you still had to deal with. So we put comments before the closing tag which identified the end tag with something like this: <!--end mydiv --> </div> That worked for identification purposes, but if you use Dreamweaver Design View extensively, you will have noticed that Dreamweaver invariably adds future code between the comment and the tag which defeated the purpose of the comment. You could put the comment inside the tag, but that made for a messy tag and slowed you down if you were using Dreamweaver's code completion. Nevertheless, divs are a great way to break up your content for styling purposes and is recommended for keeping the new HTML5 tags "clean" so let's dive in and style our page accordingly.
The example page is very simple with a title, very simple navigation and two articles for content that are enclosed in a section tag. At the bottom of the page is one simple footer for the page. Since this example is using divs to style the page, I'm going to start by dividing the page into basic sections. I know I want the main page header at the top, the navigation on the left, the content to the right of it and the footer at the bottom of the page. I'll draw those divs and give them appropriate id's to indicate those functions.
First, I want to be able to display the page in the center of the browser and I don't want it to go be too wide, so I'll create a div around the entire content of the page and label it with an id of "container". My next div is going to be around the header of the page, so I create a div around the first header tag on the page and give this div an id of header. Notice that I did not use the "header" tag to style the page header because my page contains header tags as headers of each of the two articles as well. My next div is around the nav element and is given an id of "sidebar". I use this label because I'm used to it when I create navigation on the left or the right side. I then create a div around my section tag (which includes my two articles) and I give this div an id of "content". This is where my content of the page lies. I also want to make sure my sidebar and content will float well together so I'm going to create another div that wraps around both of them and give it an id of "contentwrapper". In that way, I can apply styles that I want to apply to all of that section and still be able to style the two sections individually. My final section is the footer and while I don't have more than one footer on this page, I could have so I want to establish a best practice here and not use the html5 footer tag to style the footer section. Therefore, I will create one more div and give it an id of "footer" for the styling of this section.
The divided but still unstyled page code looks like this:
<!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>
<div id="container">
<div id="header">
<header>
<h1>My Home Page</h1>
</header>
<!--end header --> </div>
<div id="contentwrapper">
<div id="sidebar">
<nav>
<ul>
<li>About Me</li>
<li>My Blog</li>
<li>Contact Me</li>
</ul>
</nav>
<!--end
sidebar --> </div>
<div id="content">
<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>
<!--end content --> </div>
<!--end contentwrapper --> </div>
<div id="footer">
<footer>
© 2010 Nancy
</footer>
</div>
<!--end container --></div>
</body>
</html>
I like to keep my CSS separate from my document so I'm going to begin by creating a new document that I will call divs.css because I am using divs to style the document in this case. I will then attach the newly created stylesheet to the document so that I can see the changes as I create them. The first thing I will do is put a few basic styles on the body tag of the document to change the background color of the document and to zero the margins and padding so that the document as a whole isn't affecting styles I will create later on various divs. My CSS sheet code looks like this so far:
@charset "utf-8";
/* CSS Document */
body {
background-color: #09C;
margin: 0;
padding: 0;
}
While I like the bluish color I have put on the page, I don't really want the content to sit on this color so I'll style the container div next, giving it a white background and a black border to make it look sharp and read well. I'll also add some margins and padding and give the container a width of 760px that will sit in the center of the browser. Here is the code:
#container {
background-color: #FFF;
width: 760px;
margin: 0 auto;
border-left: solid #000 1px;
border-right: solid #000 1px;
padding: 0px 10px 10px 15px;
}
NOTE: I used separate border-left and border-right attributes with identical styling to style the left and right borders rather than just the border attribute because I don't want those borders on the top or bottom. If the border is needed all the way around, these two could be consolidated into one rule using just border as the attribute.
The next thing I want to do is to divide up the content sections within the contentwrapper div so they display correctly. I do this now because I want my page to look more or less like my page is going to look before going much further. This allows me to make decisions about other styles to the page with better information and keeps styling "trial and error" time to a minimum.
The sidebar div is the navigation so I want it to display to the left of the content area. I'll give it a width of 180px which leaves 580px left for the right (content) side of the page. I'll also float both the sidebar and the content divs left so they will display side by side. The code and screenshot of the page follow.
CSS Code for the sidebar and content divs:
#container #contentwrapper #sidebar {
float: left;
width: 180px;
}
#container #contentwrapper #content {
float: left;
width: 560px;
}
The page is beginning to take shape as shown in the screenshot on the following page:
Please note that the contentwrapper will sit at the top of the sidebar and content wrappers instead of enclosing the interior divs unless a break is added to the bottom of the html code just before the closing contentwrapper tag. Some people just use the break tag and set it equal to all and others create a class for the break tag to do the same thing, but this needs to be added to force the content wrapper to contain its contents. The code is <br clear="all"> or create a class with the following:
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
The div styled page thus far
The final steps are to style the type and headers of the various divs with the styles that look good to you. There isn't a lot of magic here; it's just text styles and a bit of margin manipulation to get what you want.
The exception to this would be the navigation which has list-type set to none to get rid of the bullets and some margin and padding applied to make it look and behave more like a menu. I haven't added the "A" tags and the styling to the links in this example, but in a working page, those would be added as well.
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.