What is CSS?

CSS es un acrónimo en inglés de (Cascading Style Sheets) u hojas de estilos en cascada, es el principal lenguaje para dar apariencia y formato a las páginas web a través del Internet y documentos de etiquetas de hipertexto (e.j. HTML y XML) en general.

El lenguaje de marcado HTML fue inicialmente diseñado para proveer información acerca de formato y apariencia por si mismo, pero pronto se hizo claro que haría mas sentido separar todo en dos capas: Contenido del Documento y Presentación del Documento, CSS cumplio con este propósito después. Historicamente es por esto que HTML tiene tags como font, cuyo único propósito es ajustar la familia fuente, el color y tamaño localmente, una tarea que hoy se maneja con CSS. Esto permite al desarrollador el reusar reglas de formato a través de varios lugares en el mismo documento e incluso en multiples documentos. A continuación hay un ejemplo que prueba este punto, y no se preocupen si no es del todo claro en lo que hace - todos los aspectos serán explicados a lo largo de este tutorial:

Antiguo texto de formato de estilo, usando solo HTML:

This is a piece of
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>text</b></i></font> with
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>highlighted</b></i></font> elements in
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>it</b></i></font>.

Un enfoque mas moderno con CSS:

<style type="text/css">
.highlight {
	color: Blue;
	font-style: italic;
	font-weight: bold;
	font-size: 120%;
	font-family: Tahoma, Verdana, Arial;
}
</style>

This is a piece of
<span class="highlight">text</span> with
<span class="highlight">highlighted</span> elements in
<span class="highlight">it</span>.

Observa como simplemente reuso el mismo conjunto de reglas a través de varios tags HTML. Esto ya es una ventaja cuando se usa 3 veces, como lo hicimos en el ejemplo, pero no termina ahí - pon el CSS en un archivo externo de estilos (veremos esto después) y puedes usar las mismas reglas en todo tu sitio web. ¿Qué ocurre cuando decides que el texto resaltado debe ser rojo en lugar de azul? Con el primer enfoque, tendrias editar los tags en donde sea que los uses - con CSS, ¡simplemente cambia la regla '.highlight'!

En resumen

CSS te permite aplicar reglas de formato y diseño fácilmente a tus elementos HTML y luego reusar esas reglas a través de multiples elementos e incluso paginas. En esta introducción, observamos algo de código CSS, pero no hablamos acerca de como funciona y porque luce como luce - esto será el tema para el siguiente par de capitulos, donde partiremos desde cero y explicaremos todo en detalle.