Tutorial CSS3: El uso de reglas

En el tutorial de introducción al CSS aprendimos algo sobre la historia de CSS y también cómo incluirlo en nuestro HTML, pero va siendo hora de entrar en materia poco a poco.

Es importante saber que CSS funciona mediante reglas que aplicamos a los diferentes selectores de nuestro sitio web.

No importa que lo que estoy diciendo te suene a chino, coreano o cualquier idioma de símbolos; lo explicaré todo aquí lo más sencillo posible para que cualquiera sea capaz de entender el funcionamiento de CSS.

Así como HTML se basa en etiquetas que encierran contenidos (párrafos, títulos…) CSS asigna a estas etiquetas unos atributos visuales mediante reglas.

Para entender esto vamos a explicar cómo es una regla CSS por partes:

• Selector: Es la referencia a la etiqueta, id o clase HTML.
• Declaración: Incluye las propiedades a aplicar al selector indicado.
  • Propiedad: Indica el atributo a modificar.
  • Valor: El valor asignado a la propiedad.

De esta manera, podemos ver algunos ejemplos:
Asignamos color negro a todas las etiquetas h1:

h1 {color:black;}

Le quitamos el subrayado a los enlaces y les damos color rojo:

a {text-decoration:none; color:red;}

Aplicamos el tamaño de fuente a 20 pixeles a la clase «.resaltado»:

.resaltado {font-size:20px;}

Aplicamos un margen izquierdo de 50px al ID «bloque1» y a la clase «clase33»:

#bloque1, .clase33 {margin-left:50px;}

Como se ve en los ejemplos, CSS permite:

• Hacer varias declaraciones para un mismo selector.
• Hacer una misma declaración para varios selectores.
• Hacer varias declaraciones para varios selectores.

En la próxima entrega veremos los selectores CSS a fondo, para sacar el mayor potencial posible de nuestras reglas CSS.