Styling the HTML5 Tags

<< Continued from previous section

 

Styling the HTML5 HEADER Tags

The styling for our first HEADER tag is this:

HEADER#Banner {

width: 940px;
height: 100px;
margin: 5px auto;
border: 1px solid #000000;
text-align: center;
background-color: blue;

}

Notice the first line:

HEADER#Banner

This references the Banner ID in the HEADER tag. A hash/pound symbol separates the two, with no spaces between. You can miss out the HEADER at the start of the line, though, and the code would still work. Leaving it in, however, makes it more readable.

You'll also see that the HEADER has a background colour set:

background-color: blue;

Play around with the colour values, here. You can also experiment with images as your top banner. Just replace color with image. The code is this:

background-image: url(../backgrounds/gradient_1.jpg);

In the code above we have a path to our image file between the round brackets of background-image. The image itself is the same width and height as the ones in HEADER#Banner

The CSS code for the second pair of HEADER tags was this:

HEADER#Header_Article_1 {

width: 900px;
height: 60px;
background-color: #DCDCDC;

}

This second HEADER has a different ID than the first one. It's more of a subheading, really, so needs to be styled differently.

 

Styling the HTML5 FOOTER Tags

For the FOOTER area, the code is similar to the HEADER:

FOOTER {

width: 940px;
height: 40px;
margin: 5px auto;
border: 1px solid #000000;
text-align: center;
background-color: yellow;

}

Notice that with both the HEADER and the FOOTER we don't have to apply an ID or CLASS attribute – they act just like a HTML selector. We only add an ID or CLASS when we want to distinguish one HEADER from another, or one SECTION from another.

Footers are a good place to put any extra information about your site: links to site maps, return policies, copyright info, etc.

 

The Nav Bar

You've met the NAV bar code before in the last section - it's just a HTML list with some CSS formatting applied. It is slightly different, however, so compare this one from the last horizontal navigation bar you added. Notice that this one doesn't need any DIV tags - you can just use the NAV tags in HTML5 to do the same job.

Styling the HTML5 SECTION Tags

Our first SECTION tag is used to hold the contents of the page - it is just used as a wrapper. The only code here is this:

SECTION#Wrapper {

margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 50px;

}

Here, we're just setting a margin for the main contents of the page. But because we have more than one SECTION tag, we use the ID attribute to specify which of the two we want to format.

The second SECTION has the following CSS:

SECTION#Section_Article_1 {

width: 850px;
height: 400px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
background-color: #F8EBEB;

}

This section sets a width and height, and will hold the contents of an article, or any contents, really. We've also set some margins, here, to create some space. The background colour is just so that you can see that particular section. It doesn't have to be there at all.

 

Styling the HTML5 ARTICLE Tags

The ARTICLE tag in our HTML code again acts as a wrapper for other contents. The idea is that you have one pair of ARTICLE tags per article (or whatever contents you have).

ARTICLE#Article_1 {

width: 900px;
height: 500px;
background-color: #ADAAAA;

}

Again, no ID or CLASS needs to be set up – the ARTICLE tag acts like a HTML selector. However, we've added the ID to distinguish it from other ARTICLE tags that may be on the page. That way, you can format each ARTICLE differently, if you wish. We only have one ARTICLE so the ID is not strictly necessary.


Exercise
Try out some different styles, experiment with margins, padding, borders, backgrounds, and anything else that takes your fancy. Try adding a banner image for the top header instead of a colour.

 

In the next lesson, you'll learn how to create a two column layout using HTML5 and CSS.