So far we have seen how to style text,
links, images, individual blocks. We
have tried to position them at different
locations in our web pages. We have learnt
many ways to style parts of our web pages.
Now, we will now see how to put them all
together to design full web pages.
Given below is an example of a
most common web page structure:
The header, navigation bar
and
footer occupy 100% width of the page.
The sidebars
and
main content are placed next to each other
using the float property. Individual blocks
are styled using width, height, margin,
padding and background-color. The
line-height property is used to
vertically center the text in each block.
Go to full screen mode in the above
editor
and
resize the output panel. This is
similar to viewing the web page on
different devices and screen sizes.
Notice how the blocks shrink
and
expand automatically adjusting to
the window width. This makes the sidebars
and
main content become too small
to display text on small screens.