Benefits and advantages of using CSS combined with HTML

This language allows you to link HTML elements with "document templates" (style sheets or stylesheets), which , in addition to containing the topographic information of the visual elements of the page, they allow to completely separate the structure of contents from their current representation and presentation, not only in the monitor but in any imaginable screen (mobile, PDA, etc.), technology of support (screen readers, Braille lines) or printed paper. The language (x) HTML itself has been reinforced for the construction of the logical structures of the page.

However, there are still many Web pages that are created through table designs, even though the tables were never intended for this purpose.

What does it mean to separate the structure of the design?

Less code and more transparent

1. Clean documents
2. Composition of logical blocks Dramatically
3. shortens loading times

Facilitates updates:

1. All modifications can be made in a centralized manner

Accessibility

1. Websites with fewer obstacles
2. Access to your content from any system
3. From any platform

Usability

CSS contains many functions and methods with which to provide expanded features to your visitors.

Search engines

The lower source code and the ordered structure also make reading for search robots easier and faster. The most important keywords in texts and titles are processed together and there is no danger, therefore, that the search engine throws in the towel in the nth nesting of the table.

The factor of costs

The economic advantages are clear already in the points mentioned so far. One saves, above all, time in all processes. The contents can be created together for all documents without worrying about the format and form. Style sheets are created and maintained centrally. Any collaborator, still oblivious to the creation of the same documents, can carry out without problems the modifications, updates and, even, the total re-launching of them.

The source code, when occupying a minimum space, represents an immediate saving, especially in the websites of many pages, where the cost of data traffic will be drastically reduced.

Facts

It is evident that the pages developed according to a standard and with maximum reduction of barriers, transmit an intelligent business image. Why give up a large number of potential clients, or a faster page, with a better search engine ranking? And, of course, it will also have a greater effect on the general public, since the word will spread that your page is very easy to manage, the information of the products is easily found, and no one is excluded by having a browser " inadequate".

An example

In this section a small fragment will be shown, that is, a small fragment of a badly structured page, in order to show you a small code example. Next a table will be shown in which the real work that implies a source code of those characteristics is calculated.

Excerpt from source code

Sure you have ever encountered a monstrosity like the one we will see next, especially with WYSIWYG editors, unique creators of similar constructions full of nests and redundant attributes. An immense display for a simple three-entry nested menu:

And now imagine how you will create this source snippet when we add more menu options and, therefore, more nests are needed. Not forgetting the various details about fonts and color, and MouseOver effects of the JavaScript language. Each page of your website will show in some way the weight of all that code. Let's think now what would happen if, instead of the previous code, we had the following:

<ul>
<li>Company
                <ul>
                <li>Contact</li>
                <li>Printed</li>
                </ul>
</li>
</ul>

That's all we need in the source code. The rest (color, fonts, indents, paragraphs, script icons and the famous MouseOver effect) will be done through CSS. In addition to the simplicity of the structure and the ease of extending it, you can make creations much more freely: with a couple of taps on the style sheet you can change the menu completely, from the color adaptations to the spatial distribution of the elements.

Analysis of a classical web page

Here is a comparison in the form of tables of the actual state of a badly encoded page (a rare case) and the ideal state of a well-coded page.

Before	After
Tables
49 design tables, with up to five levels of nesting, overloaded with redundant attributes.	Zero design tables; 4 tables without nestings for data really typical of a table
Source code
38 kb (without images) 850 Lines Without structure (difficult to read) No comments	16 kb (without images) 320 lines Clean structure (more readable) Commented
The main menu
7.5 kb 180 lines JavaScript Guion_GIFs Tablas confusamente anidadas	1.3 kb (without images) 17 líneas Sin JavaScript Sin Guion_GIFs Lista, limpia
JavaScript
Hover effect in the main menu is ineffective when you disable JavaScript	Hover effect from the main menu managed by CSS
Imagen
The code is full of Guion_GIFs and navigation charts (arrows)	CSS instructions instead of Guion_GIFs, the navigation arrows are downloaded (CSS)
Style Sheet
The CSS used so far is rudimentary and practically only includes instructions on color and fonts	The consistent use of CSS "thins" the source code and eliminates redundancies

The interesting thing starts when we calculate the comparison with a certain number of pages. Compare a small website, about 100 pages, with a large site of about 10,000 pages.

	100 pages		10,000 pages
	without CSS	wit CSS	without CSS	wit CSS
Source Code MB	3,8	1,6	380	160
Lines of source code	85,000	32,900	8,500,000	3,2000,000
Tables	4,900	400	490,000	40,000

Thanks to this we have been able to reduce the source code 60 %, the number of tables even in a substantial 90%. Hence, there is a clear saving in the cost of data traffic and loading times, as well as a considerable simplification when updating contents.

On the other hand, the source code now only includes references to images and graphics relating to the products. All Guion_GIFs and navigation symbols have been deleted or downloaded. In this way readability is increased and the possibility of error in the references is reduced.

Naturally, not all pages are susceptible to optimization like this. Even the design tables can be written with something more grace than we have seen here. Anyway, this example is not a capricious invention, but the faithful reflection of a real Web page.