CSS | Resumen

♠ Introducción a CSS3:

CSS es un lenguaje que trabaja junto con HTML para proveer estilos visuales a los elementos del documento, como tamaño, color, fondo, bordes, etc…  

Oficialmente CSS nada tiene que ver con HTML5. CSS no es parte de la especificación y nunca lo fue. Este lenguaje es, de hecho, un complemento desarrollado para superar las limitaciones y reducir la complejidad de HTML. 

Al comienzo, atributos dentro de las etiquetas HTML proveían estilos esenciales para cada elemento, pero a medida que el lenguaje evolucionó, la escritura de códigos se volvió más compleja y HTML por sí mismo no pudo más satisfacer las demandas de diseñadores. En consecuencia, CSS pronto fue adoptado como la forma de separar la estructura de la presentación. 

CSS externo

Un CSS externo es cuando el CSS se encuentra en un archivo separado con una extensión .css, y lo referenciamos desde HTML con un elemento <link>

Este método es sin duda el mejor, pues podemos usar un único documento de estilos en múltiples documentos y, si queremos cambiarlo, solo necesitaremos actualizar el CSS desde un sitio.

CSS interno

En un CSS interno no tenemos un CSS externo, sino que lo ubicamos dentro de un elemento <style>, en el apartado HTML head.

Este método puede ser práctico en algunas ocasiones, pero no es tan eficiente como el CSS externo — en una web, el CSS estará repetido en todas las páginas y si se necesita hacer cambios, estos deberán ser hechos en múltiples sitios diferentes.

Estilos en linea

Los estilos en una línea son declaraciones CSS que afectan solo a un elemento que está contenido dentro de un atributo style

Solamente está justificado el uso de estilos en la misma línea cuando los entornos de trabajo son muy restrictivos (el CMS solo permite editar el cuerpo del HTML).

♠ Elementos básicos en CSS

El siguiente esquema muestra las partes que forman un estilo CSS muy básico:

Los diferentes términos se definen a continuación:

• Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de «selectores», un símbolo de «llave de apertura» ({), otra parte denominada «declaración» y por último, un símbolo de «llave de cierre» (}).
• Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
• Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS.
• Propiedad: característica que se modifica en el elemento seleccionado, como por ejemplo su tamaño de letra, su color de fondo, etc.
• Valor: establece el nuevo valor de la característica modificada en el elemento.

Los elementos básicos CSS: reglas, selectores y propiedades

El concepto fundamental de las hojas CSS son las reglas.

Con las reglas podemos definir cosas como éstas:

• “El título principal de cada página (<h1>) debe estar centrado, ser de color gris oscuro y usar la fuente “Montserrat” con un tamaño de 40 pixeles”
• “Los subtítulos de cada página de nivel dos (<h2>) deben estar alineados a la izquierda, color negro ligeramente más claro y usar también el tipo de letra “Montserrat”, pero con un tamaño de 32 pixeles.”
• “Las imágenes dentro de la columna principal deben expandirse siempre al ancho máximo de dicha columna.”

Estas reglas de arriba concretamente traducidas al lenguaje CSS real tendrían este aspecto:

Las reglas

En primer lugar fíjate cómo esta hoja de estilos se divide en tres bloques diferenciados, envueltos en llaves, “{…}”.

Esto son las reglas. Cada una implementa una directiva concreta de la pequeña lista de reglas que había formulario de una manera redactada un poco más arriba.

Los selectores

Para especificar a qué partes de la página HTML se aplica cada regla en cuestión, le precede un selector. Este selector especifica el ámbito de aplicación de la regla, es decir, a qué partes de la página aplica.

Si nos imaginamos un documento HTML como sus elementos como un árbol (recuerda que están organizados de manera jerárquica), este ámbito de aplicación van a ser una o varias ramas de ese árbol.

En las dos primeras reglas (selectores “h1” y “h2”) el ámbito de aplicación es muy amplio porque los selectores son elementos HTML. Es decir, estamos diciendo que la primera regla se aplique a todos los elementos <h1> y que la segunda se aplique a todos elementos <h2>.

El último selector hila un poco más fino: éste nos está diciendo que la tercera regla se aplica solamente a elementos <img> que sean hijos de un elemento <div>. Esto se hace con la posición de los elementos, es decir, al poner “img” a la derecha de “div” estamos diciendo que img tiene que tener un <div> como padre.

Las propiedades

Por último están las propiedades, esto es lo que vemos encerrado dentro de las llaves de una regla.

Las reglas siguen la sintaxis de [propiedad]:[valor].

Por ejemplo:

font-size: 40px;

Aquí estamos diciendo que a los elementos que entran dentro del ámbito de la regla se les aplique un tamaño de letra de 40 pixeles. Los elementos deben ser por tanto elementos tipo texto, es decir, elementos como <h1>, <h2>, <p>, etc. Pero aunque entre algún elemento dentro del ámbito de la regla que no sea tipo texto, no pasa nada. En ese caso, se ignora esa propiedad concreta y listo.