en CSS

CSS para surferas II – Entendiendo el código CSS

css-para-surferas

En el post anterior de esta serie CSS para surferas ya introdujimos el CSS explicando qué era y cómo funcionaba.

En este post vamos a explicar lo necesario para poder entender un código CSS. Si bien de primeras no entenderemos todo al detalle, si que sabremos lo qué es cada cosa y donde podemos encontrar más información si queremos profundizar.

Es decir que después de leer este post vas a ser capaz de entender esto

¿No te lo crees? Sigue leyendo 🙂

Empecemos por la parte más fácil de detectar en cualquier código CSS: Los comentarios

Los comentarios

Los comentarios son contenidos de texto que son insertados para añadir información sobre el propio código y que se entienda mejor.

Estos comentarios son ignorados por el navegador por lo que se utilizan para añadir explicaciones y estructurar el código CSS.

El inicio de un comentario en CSS se indica con /* y el final del comentario se indica con */

Los comentarios pueden ocupar varias lineas

Una vez, tenemos localizados los comentarios podemos utilizarlos para entender mejor el código CSS que tenemos delante. Normalmente se utilizan para agrupar reglas CSS que estén relacionadas (las reglas CSS que definen los estilos de la home, los estilos de la página de contacto, los estilos de la cabecera, etc…)

Fijate en este CSS cómo el código está estructurado utilizando los comentarios

Los selectores

Cómo vimos en el post anterior CSS funciona a base de reglas, y en estas reglas lo primero que definimos es el elemento (o los elementos)

O sea que una regla CSS funciona asi:

  1. seleccionamos con los selectores el elemento o el grupo de elementos sobre los que queremos definir las propiedades para modificar el diseño
  2. le damos un valor personalizado a todas aquellas propiedades de estilo (colores, margenes, etc…) que queramos personalizar para estos elementos HTML que hemos seleccionado

¿Cómo seleccionamos los elementos?

Hay muchas maneras de seleccionar elementos HTML pero las más comunes son:

X

Podemos seleccionar elementos HTML directamente indicando el tag que queremos modificar.

Por ejemplo, si quisiéramos cambiar el color de todos los enlaces de la pagina haríamos algo así:

#X

Los tags HTML pueden tener una propiedad id con un nombre personalizado. Este id deberia ser único, así que con la almohadilla # podemos seleccionar elementos HTML por su id

Para un HTML asi

podríamos modificar sus estilos con una regla CSS como esta

.X

Los tags HTML también pueden tener otra propiedad class con un nombre de clase. Estos nombres de clase se utilizan para definir estilos compartidos por tanto pueden ser utilizados en varios tags HTML. Podemos seleccionar aquellos elementos que tengan una clase concreta utilizando el punto .

Para un HTML así

podríamos modificar los estilos de los 2 p al mismo tiempo con una regla CSS como esta

X, Y

Podemos agrupar selectores separándolos por comas. De esta manera podemos customizar los estilos de varios elementos a la vez

Según este HTML

podríamos definir estilos de varios elementos a la vez de esta manera

Con esta regla CSS le decimos al navegador que a todos los elementos div y input que encuentre los coloque un borde azul con un grosor de 2px

X Y

Otro tipo de selección que encontraras con frecuencia es el llamado selector descendiente. Con este tipo de selectores especificamos el contenedor sobre el que estamos seleccionando

Según este HTML

podriamos definir los estilos sólo de los p que estan dentro del tag div de esta manera

Las propiedades CSS

Una vez seleccionados los elementos HTML, definimos los estilos que queremos que tengan en un bloque de declaraciones

Cada bloque de declaraciones consta de un par propiedad-valor como ya vimos en el post anterior

Hay un montón de propiedades CSS que podemos utilizar para definir nuestros estilos. Y cada propiedad podrá tomar unos valores concretos.

Por ejemplo según este HTML

sin estilos se vería así

HTML sin estilos CSS

Y con estos estilos

Se vería así:

HTML con estilos CSS

La lista completa de propiedades CSS la puedes encontrar por internet.

Aquí tienes una lista de todas las propiedades CSS listadas alfabéticamente. Y aquí una lista de propiedades CSS ordenadas por categorías. Otra lista por aqui y otra más por aquí

Asi que cuando te encuentres un CSS puedes buscar en cualquiera de estas listas las propiedades que veas en el código para saber qué estilos están modificando y qué valores pueden tomar


Y con esto terminamos este post. Después de leerlo deberías ser capaz de entender “a grosso modo” un CSS como este que es el que está definiendo los estilos de esta pagina

Ya sabes kung-fu!! 😉