Tip:
Highlight text to annotate it
X
In this video, we will place a div element below the navigation bar
to serve as a container for the main content of the web page.
To add the main content area,
place the cursor at the end of the line that has a div tag with the class nav applied to it
and press the Enter key to create a new line.
Then, type , then close it by typing
To define a new class for the main content,
click after the closing curly brace for the class nav and press the Enter key to create a new line,
and then type the CSS rule seen on screen.
Next, a footer will be added to the bottom of the web page
to help give some background information about the page and provide some useful links.
To add a footer,
Place the cursor at the end of the line that has a div tag with the class main applied to it
and press the Enter key to create a new line.
Then type then close it by typing .
To define a new class for the footer,
click after the closing curly brace for the class main and press the Enter key to create a new line.
Then, type the CSS code seen on screen.
The z-index affects the layering of the elements.
With the a z-index of 1, this element will appear infront of every other element on the webpage
that doesn't have a z-index defined.