Styling the HTML5 Tags
Styling the HTML5 HEADER Tags
The styling for our first HEADER tag is this:
height: 100px;
margin: 5px auto;
border: 1px solid #000000;
text-align: center;
background-color: blue;
You'll also see that the HEADER has a background colour set:
The CSS code for the second pair of HEADER tags was this:
height: 60px;
background-color: #DCDCDC;
Styling the HTML5 FOOTER Tags
For the FOOTER area, the code is similar to the HEADER:
height: 40px;
margin: 5px auto;
border: 1px solid #000000;
text-align: center;
background-color: yellow;
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:
margin-left: 20px;
margin-right: 20px;
margin-bottom: 50px;
The second SECTION has the following CSS:
height: 400px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
background-color: #F8EBEB;
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).
height: 500px;
background-color: #ADAAAA;
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.
Friday 10 July 2015
Styling the HTML5 Tags
HEADER#Banner {
width: 940px;
}
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.
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
HEADER#Header_Article_1 {
width: 900px;
}
This second HEADER has a different ID than the first one. It's more of a subheading, really, so needs to be styled differently.
FOOTER {
width: 940px;
}
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.
SECTION#Wrapper {
margin-top: 100px;
}
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.
SECTION#Section_Article_1 {
width: 850px;
}
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.
ARTICLE#Article_1 {
width: 900px;
}
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.
0 comments:
Post a Comment