You can think of nav as a special div, and you can see that the style section lists it just as we did the div in the previous example. As you should also note, the style has some extra specifications which need to be explained.
First, the position of the nav in this example is specified as "fixed". This means that the blue area and its text or image will not move and will remain visible even if we go down to the bottom of the page. If you prefer your nav-area text and images to move with the rest of the page, omit position: fixed, which must be specified if you want it since fixed is not the default postion. The area is also specified to be placed zero from the top of the screen and zero from the left and to occupy 100% of the screen width and be 80 pixels high. If the zero specification were omitted or other values were used, the blue area would be located differently.
We have already discussed padding, and setting the padding on the left to 40 pixels means that the text within the blue area will be 40 pixels from the left side of the screen. Text-align: left was unnecessary since that is the default alignment, but you might want to try text-align: center, which will center the text in its parent element. Note that in the style, I have done this for the heading h2.
Since I wanted the text in the navigation area to be a bit larger than normal and to be darker than normal, I specified font-size as 24 pixels. 16 pixels appears to be the usual default font for many devices, but you must do a lot of experimenting to find the font size that looks right to you. Bold text is available just as easily by placing a "b" enclosed in <> before the desired bold text and a "/b" in <> after.
As I mentioned earlier, an HTML file can have more than one div, and this file has a nav and a div, which I have given the id of "textbox." Note that it has a top margin of 100 pixels so that it isn't behind the blue area, which is 80 pixels high. The HTML code for the textbox is div id = "textbox", all enclosed in <>.
Style:
nav {position: fixed; top: 0; left: 0; width: 100%; height: 80px;
width: 100%; height: 80px;
padding-left: 40px; text-align: left;
font-size: 24px; font-weight: bold;
background-color: DodgerBlue;
}
html {margin-left: 50px; margin-right: 50px;}
h2 {text-align: center;}
div#textbox {margin-top: 100px;}