Qué es CSS3 y por qué me interesa en HTML5
Como siempre, podemos ver una definición de CSS en Wikipedia:
Las hojas de estilo en cascada o (Cascading Style Sheets, o sus siglas CSS) hacen referencia a un lenguaje de hojas de estilos usado para describir la presentación semántica (el aspecto y formato) de un documento escrito en lenguaje de marcas. Su aplicación más común es dar estilo a páginas webs escritas en lenguaje HTML y XHTML, pero también puede ser aplicado a cualquier tipo de documentosXML, incluyendo SVG y XUL.
En otras palabras más llanas, cuando entramos en una página web vemos que existen colores de fondo, que la información se muestra en columnas, que los enlaces tienen un color y al pasar sobre él con el ratón cambian de color, que existen menús desplegables, etc etc. Todo esto se consigue con CSS3.
Aunque es cierto que las etiquetas HTML tienen atributos para indicar cómo se debe mostrar el contenido, la filosofía que hay detrás de HTML5 nos indica que HTML5 debe ser tratado como un lenguaje de marcas de tipo descriptivo, esto quiere decir que se debe limitar a estructurar la información, pero no encargarse de su presentación visual. Para eso tenemos el lenguaje CSS.
CSS3 no es más que la versión 3 del lenguaje CSS, está estrechamente ligado a HTML5 y es vital conocer tanto la forma correcta de utilizarlo como la forma correcta de incluirlo en nuestros documentos HTML5.
Norma para incluir nuestro CSS3
Al igual que pasa con JavaScript, no tenemos una única manera de incluir nuestro código CSS3 dentro de los documentos HTML5, sí… al igual que pasa con el JavaScript, el código CSS3 se va a incluir dentro de nuestro fichero HTML.
Para ello, el lenguaje HTML incluye una etiqueta, sin embargo ni es la única forma de incluirlo ni existe una única implementación de esta etiqueta… y ahí es donde empieza nuevamente el calvario particular de todo desarrollador web: Cada hijo de vecino hace lo que le da la gana.
Diferentes formas de incluir nuestro CSS3
Con el paso de los años y el aumento de la cualificación de los profesionales que nos dedicamos a la programación web (tanto por la llegada de profesionales de otros entornos de desarrollo como a la experiencia acumulada de los ya existentes), ha ido cogiendo fuerza la idea de que es necesario utilizar una única forma para incluir nuestro código CSS3, independientemente de que tengamos varias formas de hacerlo.
Actualmente, existe una norma clara que casi todos utilizamos de forma general, pero es muy común ver el resto de formas aparecer en los códigos HTML ya sea por arreglos de última hora, como por problemas que no se han sabido resolver de otra forma… motivos hay muchos para explicar el por qué no siempre colocamos nuestro CSS3 como es debido, pero razones ninguna… la realidad es que debemos escapar de todos las formas menos de una, que es la aceptada como el estándar.
Si eres de los que piensa que el estándar es una tontería… no me cansaré de recordar una de esas grandes frases que mi gran amigo Iñaki me hizo hace muchos años y que, sin duda, fue el punto de inflexión en mi evolución hacia la calidad en la creación de software, más o menos venía diciendo:
¿Acaso eres tan importante? ¿Realmente te consideras mejor que las cientos de personas que trabajan para crear los estándares?
No ¿verdad? pues eso, los pies en la tierra y a hacer caso de los que son mejores que tú.
Estilo inline
Una de las primeras formas de incorporar CSS en nuestras páginas web y, sin duda, la primera forma a evitar a toda costa… bueno es saber que existe y más bueno aún no usarla 😉
Esta forma se basa en utilizar el atributo style que las etiquetas HTML permiten. Dentro de este atributo style se colocaría nuestro código CSS3.
Pongamos que tenemos un listado de elementos no ordenados y queremos que el texto salga de color rojo, usando el estilo inline tendríamos este código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Incluyendo CSS3 en HTML5</title>
</head>
<body>
<section>
<ul>
<li style="color: red;">Un elemento</li>
</ul>
</section>
</body>
</html>
Nuestro elemento de lista con fuente roja
Bien, funcionar funciona… pero compliquemos un poco más el estilo. Además de color rojo lo queremos en negrita. Simple, sólo hay que acordarse de poner el ; para separar una declaración de otra.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Incluyendo CSS3 en HTML5</title>
</head>
<body>
<section>
<ul>
<li style="color: red;font-weight: bold;">Un elemento</li>
</ul>
</section>
</body>
</html>
Nuestro elemento con fuente roja y en negrita
Seguramente ya sepas los problemas de usar esta forma de incluir el CSS3… de hecho aunque no lo sepas, sólo con verlo seguro que te das cuenta, pero vamos a comentarlos, sólo por si acaso 😉
¿Qué pasa si en vez de un elemento en el listado tengo 20? Pues sí, a copiar el style a cada uno de los 20… ¿y si dentro de X meses quiero cambiar el color? Pues ale a cambiarlo en los 20.
Es más, qué ocurre si tengo una página web que está compuesta de varias páginas HTML? Pues nada, que tienes que ir poniendo los correspondientes estilos en cada etiqueta de cada una de las páginas HTML que tengas… y ya no digo nada si hablamos de páginas dinámicas donde tenemos un, por ejemplo, PHP generando las páginas.
Sí, mantener una página con los estilos inline es muy doloroso… lleva mucho tiempo y, además, puede ser extremadamente complicado localizar el trozo de código HTML que quieres modificar. Esto puede parecer una exageración, pero no lo es. La realidad es que no vamos a tener un documento .html por página con todo nuestro código ahí, lo que tendremos será, seguramente, una aplicación hecha en PHP, ASP, Java, Python, etc que se encarga de llamar a una serie de plantillas HTML que incluyen porciones de código específicas (e incluso auto-generadas por el propio lenguaje), por lo que no es nada sencillo localizar el código HTML al que queremos meterle un estilo inline… sobre todo si no la hemos creado nosotros o han pasado tantos años desde la última vez que se tocó que vete tu a saber cómo funciona.
Primera aproximación a la separación del HTML y del CSS3
Para dar solución a los problemas del estilo inline, se empezó a generalizar el uso de la etiqueta style. La etiqueta style permite poner en su interior todo el código CSS3 que necesitamos. Puede ser colocada en cualquier parte de nuestro documento HTML y será interpretada por los navegadores, pero tiene que colocarse en nuestro head. Es muy común verla dentro del body, ya sea al principio o en algún extraño lugar dentro de toda la maraña de etiquetas, pero esa es una mala, malísima práctica; debe estar dentro del head por varios motivos, dos principalmente:
- Legibilidad: Aunque fuese el único motivo, es más que suficiente. Si vas a ver un documento HTML (ya sea por que lo tienes o porque ves el código fuente) saber que en el head vas a tener los estilos te ahorra mucho tiempo a la hora de localizar las cosas. El resto del mundo te lo agradecerá mucho.
- Definición de lenguaje: En la definición del lenguaje HTML se deja muy claro que la etiqueta HEAD está destinada a contener la información del documento HTML y el BODY está destinado a contener los elementos web a visualizar. Nuestro código en CSS3 informa de cómo debe verse el documento HTML en el navegador, no contiene jamás ningún elemento web a visualizar. Por lo tanto, por definición, su lugar es dentro del HEAD.
Bueno, pues transformamos nuestro código HTML a esta nueva forma, quedando así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Incluyendo CSS3 en HTML5</title>
<style>
li {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<section>
<ul>
<li>Un elemento</li>
</ul>
</section>
</body>
</html>
Con esta forma de poner nuestro código CSS3 podemos cambiar el estilo de todas las etiquetas li modificando sólo la línea dentro de nuestra etiqueta style, en vez de ir a cada atributo style de cada li ganando así facilidad a la hora de gestionar nuestro documento.
Sin embargo sigue siendo costoso mantener proyectos que tienen los estilos aplicados de esta forma ya que podemos tener múltiples plantillas HTML o diferentes generadores de cabeceras, por lo que tendríamos que ir realizando los cambios en todas estas plantillas ya que el código CSS3 sigue estando dentro de nuestro HTML. También trasladar los estilos a otros proyectos se hace más complicado, al tener que andar a recuperar nuestro CSS3 de los respectivos HTML, etc etc.
Al igual que el estilo inline, esta forma de usar el CSS3 en nuestro HTML debe evitarse a toda costa.
Separación real de nuestro código HTML y CSS3
Y por fin empezamos a hacer las cosas como es debido! Si mal no recuerdo, fue con HTML4 cuando llegó a nuestras manos la etiqueta de HTML link. La etiqueta link sirve para informar de muchas cosas en nuestro HEAD, una de ellas es para indicar al navegador web que tenemos un código CSS3 en un fichero externo que debe ser utilizado para pintar nuestra página.
Así pues, nuestra página HTML5 quedaría así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Incluyendo CSS3 en HTML5</title>
<link rel="stylesheet" href="./style.css" type="text/css" media="all" />
</head>
<body>
<section>
<ul>
<li>Un elemento</li>
</ul>
</section>
</body>
</html>
y tendríamos un fichero style.css con el siguiente código:
li {
color: red;
font-weight: bold;
}
Con esto conseguimos la independencia entre el HTML y el CSS3, de forma que podemos utilizar el mismo fichero .css para múltiples páginas HTML y cualquier cambio en este fichero CSS se aplicaría a todas las páginas a la vez. Esto sí que es eficiencia 😉
Expliquemos un poco los atributos que hemos usado en la etiqueta link:
- rel: Utilizamos este atributo para indicar qué tipo de relación existe entre el fichero que se carga con la etiqueta link y el documento HTML dónde se carga. En nuestro caso le ponemos el valor de stylesheet porque la relación es de hoja de estilos, o sea, el fichero que cargamos es una hoja de estilos a aplicar en el documento html.
- href: En este atributo pondremos la URL del fichero externo a incluir. Podemos poner una URL absoluta o relativa.
- type: El contenido de este atributo es el valor mime-type del fichero que cargamos. Como nuestro fichero es una hoja de estilos, su mime-type es text/css
- media: El gran desconocido por muchos desarrolladores web (aunque cada vez menos). Sirve para informar cuando debe utilizarse este fichero. Nosotros hemos puesto all porque queremos que se utilice siempre, pero si quisiéramos tener un CSS que sólo se interpretaría a la hora de imprimir una página (suuuuuuuuuuuuuper útil), el media sería print en vez de all.
Incluir CSS3 en nuestro HTML5
La forma correcta de incluir nuestro código CSS3 en los documentos HTML5 es prácticamente igual que el método anterior. Sólo existe una pequeña diferencia:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Incluyendo CSS3 en HTML5</title>
<link rel="stylesheet" href="./style.css" media="all" />
</head>
<body>
<section>
<ul>
<li>Un elemento</li>
</ul>
</section>
</body>
</html>
Hemos eliminado el atributo type. HTML5 es muy listo y entiende que si estamos cargando una hoja de estilos el type es text/css por lo que no tenemos por qué informar de ello. Ojo, por poder podemos hacerlo y no dará ningún error, de hecho en otras aplicaciones de la etiqueta link hay que ponerlo, pero en el caso del CSS ya lo da por supuesto.
Importante: Podemos incluir varias hojas de estilo en el mismo documento HTML, sólo tendremos que tener una etiqueta link por cada uno.
Objetivo conseguido
Pues ya está, ya sabemos cómo incluir nuestro código CSS3 en HTML5. Ahora nos falta otro tema no menos importante: Optimizar la carga de nuestro CSS3, pero de esto hablaré en el próximo artículo que ya tengo muy avanzado 😉
Me gusto, muy bueno y actualizado, ademas bastante didáctico.
Gracias.
yo tengo una duda lo que pasa es que quiero hacer un mapa de procesos en html5 y quisiera saber como hacerlo si es necesario usar canvas o solo Css
Hola yohana. ¿Puedes comentar un poco al detalle lo de mapa de procesos? No entiendo a qué te refieres con ello sorry
Puede darme algun error haciendolo como enseñas aqui el enlace del archivo css con el archivo html? porque trate y no me esta haciendo los cambios, favor si hay algun detalle que pueda estar omitiendo te agradeceria me dejaras saber, gracias de todas maneras.
Asegúrate de que no sean los temporales o un problema de rutas
saludos
Hola, gracias por tu «post». Harías bien en actualizar la cita de CSS en Wikipedia (en http://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada). La referencia a «describir la presentación semántica» que usas todavía hoy para encabezar el post era francamente mejorable. En otras palabras, llamarla presentación _semántica_ me parece incorrecto.
Muy buen artículo. Gracias
Yo se que este articulo es algo antiguo y que a lo mejor la pagina ya no es tan activa, pero por una búsqueda en google llegué hasta aquí. Solo me queda dar las gracias por este gran trabajo que ofreces abiertamente, tu metodología es perfecta.
MUY BUEN ARTICULO .. EL MEJOR QUE ENCONTRE Y SUPERA A LOS VIDEOS DE YOUTUBE EXPLICANDO