Las hojas de estilo CSS facilitan el diseño y el acceso a nuestra web

Reloj decorativo CSSHoy es posible crear páginas web sin tener conocimientos de HTML ni CSS pero siempre es aconsejable saber, al menos, unos conceptos básicos de estos lenguajes para poder modificar y mejorar nuestras páginas web o nuestros blogs.

Todas las páginas web están hechas en código HTML que no tiene nada que ver con lo que aparece cuando entras en ella. Si quieres ver el código HTML de tu página solo tienes que posicionarte sobre ella y pulsar el botón derecho del ratón, en el listado que aparecerá pulsas sobre “ver código fuente de la página” y podrás ver todo el contenido de tu página en código HTML. Verás que es todo texto aunque un poco farragoso, sobre todo si no estas familiarizado con este lenguaje.

Este código es el que tiene las órdenes de cómo deben estar distribuidos los textos, las imágenes y todos los objetos que hayamos colocado así como sus formatos dentro de nuestra página.

Ejemplo de código:

  • <h1><font color=”blue” face=”Arial” size=”10”> Título</font></h1>
  • <p><font color=”black” face=”courier” size=”5”> Un párrafo de texto </font></p>

En estas dos líneas le decimos que el formato de la palabra “Título” estará definido en el elemento de HTML <h1> con una etiqueta <font> que tiene tres atributos que definen que el texto sea de color azul, con letra arial y de un tamaño 10 y que el elemento <p> “Un párrafo de texto” sea de color negro, con letra courier y de un tamaño de 5.

Pero la complejidad radica en que, para cada elemento que queramos poner, debemos definir el aspecto de sus elementos y, si en una página tuviéramos 30 elementos habría que insertar 30 etiquetas <font> con sus tres atributos, si tuviéramos en nuestra web 20 páginas con 30 elementos cada una el total de atributos sería de 20x30x3=1800.

Además las páginas web, aunque sean estáticas, requieren cada poco tiempo de actualizaciones de su contenido y apariencia por lo que si decidimos cambiar los atributos de la etiqueta <font> habría que actuar sobre los 1800 atributos.

El organismo W3C (World Wide Web Consortium), encargado de crear los estándares de la web propuso crear un lenguaje de hojas de estilos para HTML y en 1995 se unieron las dos propuestas presentadas para crear CSS (Cascading Syle Sheets) que tomaba lo mejor de cada propuesta.

CSS  permite separar el diseño, del contenido de cada página, así, por un lado se crean los contenidos en HTML mientras que por otro, en CSS, se diseña cómo aparecerá cada elemento en la página y, además, todo el diseño puede estar en un archivo separado.

En el ejemplo anterior quedaría por un lado los atributos de las etiquetas :

  • h1 {color: blue; font-family:Arial; font-size:10px; }
  • p {color:black; font-family:courier: font-size:5px; }

y por otro el contenido en HTML

  • <h1>Título</h1>
  • <p> Un párrafo de texto </p>

Si definimos los atributos para todas las etiquetas ya no será necesario repetirlos para cada elemento, y si lo hacemos en un archivo externo con la extensión (.css) ya nos servirá para todas las páginas de nuestra web.

Solo tendremos que hacer una llamada desde la página HTML mediante un enlace <link> que colocaremos en la cabecera <head> del documento, cuando el navegador carga la página primero descarga el archivo CSS que nos dará el formato de nuestra página.

A partir de ese momento, si queremos cambiar la apariencia de cualquiera de los elementos de nuestra web, solo tenemos que realizar la modificación en nuestro archivo externo CSS y automáticamente cambiará en todas las páginas.

Las páginas de estilo CSS no solo ahorran mucho trabajo en el diseño y posteriores modificaciones, sino que además reducen considerablemente el tiempo de carga de nuestra página.

Anuncios

Acerca de Ricardo Rubio Simón

Transporte y logística, Marketing, Comunicación 2.0, Gestión flotas, Redes sociales, Marca, Reputación, Comunity, Responsabilidad Social
Esta entrada fue publicada en comunity manager y etiquetada , , . Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s