Page layout

text with layout

Text with styling for layout

Not only can CSS be used to style individual elements, but it can also be used to specify how the elements are laid out on a page. By using styling for layout, it is possible to transform plain text into text enhanced with extra space and shaping to make it more readable, or at least better looking.

text without layout

Plain text


Glimpse of the future

Most of this module will focus on styling of individual elements rather than their relative placement. The upcoming module on positioning will consider such issues in much greater detail.


box model illustrated

The box model

In laying out a page, it helps to think of each element as a box. Not surprisingly, this is commonly known as the box model. A box has four components, which can be styled individually. We will consider each of the components in more detail:

  • The content is the information in the element.
  • The padding is empty space that acts as a buffer between the contents and the border.
  • The border shows the boundary of the box.
  • The margin is empty space outside the border that acts as a buffer between the borders of adjacent elements.

In the illustration of the box model for one of our paragraphs, the size of the border has been increased and the colours changed to make each component more visible.