Benefits and advantages of using CSS combined with HTML

Cascading style sheets defined for the first time in 1996, offer properties to extend HTML in the visual representation of the web page.


Benefits and advantages of using CSS combined with HTML | Learn CSS | Cascading style sheets defined for the first time in 1996, offer properties to extend HTML in the visual representation of the web page

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.

Did you like it or was it useful?

Help us share it in Social Networks

Professor at the University of Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Professional in Web Development and SEO Positioning for more than 10 continuous years.
We have more than 200 certificates and recognitions in the Academic and Professional trajectory, including diploma certificates certified by Google.

IT ALSO DESERVES TO PAY TO VISIT:

PREVIOUS


Learn CSS

Not finding what you need?

Use our internal search to discover more information
Sponsored content:
 

Leave your Comment

SPONSOR

Your business can also appear here. More information