Geek Penguin

Bien, por fin terminamos todo lo que es el HTML y pasamos a un paso muy sencillo: el aprendizaje del CSS, esencial para darle algo de color y estructura de la web.

¿Qué es el CSS? Es el acrónimo para Cascading Style Sheets (que significa Hojas de Estilo en Cascada) y es el lenguaje que junto con el HTML nos permitirá hacer una página web estilizada, ordenada y bien estructurada. De una forma más específica, es el que define como deben ser mostrados los elementos HTML.

Si veíamos que la sintaxis del HTML es de la forma

<etiqueta atributo=”valor”>contenido</etiqueta>

El del CSS es de la forma

selector {propiedad: valor; propiedad2: valor2… propiedadn: valorn}

Y así. Estudiémolos parte por parte:

• El selector es la etiqueta que queremos modificar o que queremos que sea afectada por la propiedad y el valor que vamos a definir.
• La propiedad es el atributo que queremos que sea modificado del elemento HTML que hayamos definido como selector.
• El valor es eso, el valor que tomará la propiedad.

Definamos estos tres elementos: digamos que el selector será la etiqueta “h1″, la propiedad será “color”, y el valor será
“blue”.

Así, escribimos

h1 {color: blue}

Y todos los elementos h1 que tengamos en nuestro archivo HTML tomarán el color azul.

La agrupación

En una hoja de estilos (un archivo CSS) podemos hacer que varios selectores tengan la misma propiedad y el mismo valor de otros elementos, de la forma

h1 {color: blue}
h2 {color: blue}
h3 {color: blue}

Aunque es de verdad algo molesto tener que hacer eso para todos los que queramos que sean de color azul, de esta forma

h1, h2, h3 {color: blue}

Este método de abreviación se conoce como agrupación. Es muy útil para evitar la tediosa repetición de sus selectores, propiedades y valores.

Las clases en CSS

Una clase define una categoría especial para aplicar el CSS a cualquier tipo de selectores. Me explico, en vez de usar selectores para una etiqueta específica, los usas solo en las etiquetas que quieras. Se usan de la siguiente manera:

selector.clase {propiedad: valor}

Y se usa de la misma forma, aunque con la diferencia que la clase debe agregarse a las etiquetas que queremos cambiar. Por ejemplo:

h3.centrado {text-align: center}

Y en el HTML ponemos

<h3 class=”centrado”>Titulo centrado</h3>

<h3>Como este título no tiene ninguna clase, aparece normal</h3>

Y nos muestra

Titulo centrado

Como este título no tiene ninguna clase, aparece normal

Si queremos podemos usarlo sin selectores de la manera

.clase {propiedad: valor}

Y así la clase no se limita a funcionar solo en la etiqueta que le digamos, si no en cualquier etiqueta que queramos.

Las clases en CSS se pueden usar cuantas veces queramos en la cantidad de etiquetas que deseemos.

Los IDs en CSS

Los IDs se usan de la forma

selector#id {propiedad: valor}

O sin selector de la forma

#id {propiedad: valor}

Y se usan de la misma manera que las clases, aunque con la diferencia que no se pueden usar en varias etiquetas como con las clases, sólo se puede en una sóla etiqueta específica, y que en vez de usar un atributo “class“, usamos el atributo “id“.

Así, si hacemos esto

#centrado {text-align: center}

Y en el HTML escribimos

<p id=”centrado”>Texto centrado</p>

<h2 id=”centrado”>Título centrado</h2>

Funcionaría. Pero como hablé antes, todo está hecho para un fin específico y este el fin de los IDs no es estar en varias etiquetas a la vez.

Los comentarios en CSS

¿Recuerdan los comentarios en HTML? Bien, en CSS también se pueden insertar de la forma

//Esto es un comentario de una sola línea, que sirve para hacer pequeñas aclaraciones

/*Esto es un comentario de varias lineas

Útil cuando quieres ingresar comentarios largos en el archivo CSS

Por ejemplo, diciendo que tu eres el creador y tus datos*/

Bueno, es todo por hoy. ¡Hasta el próximo fin de semana!