General explanations of the CSS layout process, which will illustrate to readers how to layout a web page using various tools available in CSS.
In this article we are going to know the web layout using Cascading Style Sheets (). We will see how to do the layout in various ways, with general explanations and descriptions of the advantages and disadvantages of each tool. For many readers it will still be a field to explore. Although we are not going to go into great detail, we are going to try to make the layout with CSS known, in order to cover possible gaps for the reader. In subsequent chapters we will expand the information and offer more practical tutorials.
As you have been able to learn in the , cascading style sheets help to separate the content of the presentation. That is, the elements that make up a page (the content) in the way they are displayed (presentation). In addition, CSS greatly helps the definition of styles on the page, since it allows to adjust in a much more precise way any aspect of any element of the page.
Layout with CSS is one of the tasks where cascading style sheets can be used the most, since it allows applying positioning of elements on the page, radically changing the layout of the page only by altering the style declarations. To do this, various CSS attributes are used that allow us to apply positioning in as detailed and personalized a way as needed.
How to specify the content you want to layout
As we already know, the content is expressed using HTML. It really doesn’t matter which tags you use to define your content, but most commonly the
tag is used, which defines a content division.
The
tag doesn’t really have a specific meaning, it’s just a block of content. Sometimes we call this block of content by the term layer. In the layers the elements that we want to appear on the page are introduced.
Each content block will be placed in its own division. For example the header, footer or main content will be specified in their own
tags. Elements inside
s can also be nested, which is quite normal because generally to specify the header content you’ll need a logo, with an image, and perhaps a number of links in a list. By placing some elements inside others we also manage to inherit the properties and positioning of the parent layers.
With the arrival of another series of elements were introduced to specify the content, more semantic. For example
