Ahora es el momento de aprender qué es una regla de estilo CSS, cuál es su sintaxis correcta y cómo utilizar los selectores, que son fundamentales para apuntar y seleccionar elementos HTML específicos y aplicarles estilos con CSS.
Aunque ya hemos visto algunos ejemplos de código CSS, es importante definir qué es una regla de estilo y aclarar sus partes. Esto nos permitirá escribirlas correctamente y, en las próximas lecciones, profundizaremos en el corazón de CSS sin enfrentar problemas.
Qué es la sintaxis CSS
Cuando aplicamos estilos a un elemento HTML, debemos definir las reglas de estilo que se le asignarán. Imagina que en un documento HTML hay una amplia variedad de elementos, como textos, multimedia, formularios, listas y enlaces. Todos estos elementos tienen un estilo, ¿verdad? ¿Dónde se encuentran esos estilos? Generalmente, se almacenan en un documento CSS.
La sintaxis se refiere al orden y la relación de los elementos que conforman una instrucción CSS correcta, así como a las funciones que desempeñan.
Por lo tanto, un documento CSS contiene todas las reglas establecidas para cada elemento HTML.
¿Qué es una regla CSS?
Una regla CSS es la manera correcta de redactar una instrucción en código CSS, es decir, la forma en que se debe estructurar el código para que el navegador web lo interprete y lo aplique de manera adecuada.
Partes de una regla CSS
Una regla CSS está formada principalmente por un sector y una declaración, dentro de la declaración se encuentran las propiedades con su respectivo valor.
- El selector.- el selector es quien indica a que elemento HTML se aplica el código CSS (el estilo)
- La propiedad.- es la característica que se desea definir, por ejemplo: color (el color).
- Valor.- es el valor que tomará la propiedad, por ejemplo: green (verde).
- Punto y coma (;).- una declaración siempre se debe terminar con un punto y coma simple (;)
Ejemplo de una regla CSS
h1 {color: red;}
En el ejemplo podemos identificar las partes:
- El selector apunta aún elemento de HTML, en este caso un <h1>.
- La declaración siempre va dentro de llaves y contienen a la propiedad y su valor cerrada por un punto y coma, en nuestro caso (color:red;).
- En el ejemplo se define la propiedad de color, o color de letra (color).
- El valor del color es red en ingles, rojo en español.
Selectores de CSS
Como mencionamos anteriormente, para poner estilo a un determinado elemento debemos emplear el lenguaje de CSS ¿pero cómo lo hacemos? La respuesta es: ¡muy fácil!
Básicamente existe una sintaxis, es decir una manera de expresar mediante código y eso aprenderemos a continuación.
La sintaxis siempre tiene la siguiente forma: el selector, seguido del grupo de declaraciones encerrada en llaves.
Selector {grupo de declaraciones}
Las declaraciones tienen la siguiente forma: Las declaraciones están formadas por la propiedad, seguido de dos puntos para continuar con un valor y cerrado con un punto y coma (;)
Propiedad: valor;
Veamos en un ejemplo de cómo se emplea la sintaxis CSS.
Imagina que deseamos ponerle un color verde al color de los subtítulos de nuestro documento HTML, entonces la sintaxis CSS adecuada para ello será:
h2 {color: Green;}
- El selector siempre va antes que las declaraciones.
- Las declaraciones van dentro de llaves y se separan con un “;”
Selectores de tipo
Los selectores de tipo en CSS se refieren a los electores que apuntan a un tipo de elemento HTML como puede ser:
- Los títulos: h1
- Los subtítulos: h2
- Párrafos: p
- Los enlaces: a
- Tablas: table
Por poner un ejemplo, imagina que deseamos poner de color azul, todos los párrafos de la página; para ello el código será:
p {color: blue;}
Selectores de id y clase
Este tipo de selectores en CSS apuntan a un elemento HTML identificado, es decir a un elemento HTML que tenga el atributo id o class.
Como vimos en el curso de HTML, es posible marcar un elemento para ponerle un estilo en especial, si no lo has visto, puedes ir a repasar.
Ejemplo de Código HTML:
<div id="producto"> <h2> Nombre de producto</h2> <p> descripción del producto fantástico </p> </div>
Código CSS para ponerle letras azules y un fondo de color amarillo al elemento con id=»producto».
#producto {color: blue;
background-color: yellow;}
Tanto el selector de tipo id y class funcionan de la misma manera; única diferencia es que para los selectores de tipo id se le antepone el signo de numeral (#) y a los de tipo class un punto (.)
No utilices solo números para identificar un elemento HTML, tampoco inicies con números.
Selectores descendientes
Los selectores descendientes en CSS sirven para apuntar elementos que se encuentran dentro otros elementos mayores, de esta manera se puede colocar un estilo específico a un elemento que se encuentra contenido en otro elemento HTML mayor.
Por ejemplo si tenemos un elemento <em> dentro de un párrafo y este párrafo a la vez está dentro de una sección “primero” (bloque <div>)
HTML
<div id="grande"> <p class="interior"> esto es un <em>párrafo hermoso</em></p> <p> este es otro párrafo genial </p> </div> <p> este párrafo ya no está dentro de la sección con id grande</p> <p> este es otro párrafo que ya no está en la sección o bloque grande</p>
CSS para poner de color rojo solo el elemento que está dentro de <em> y fondo azul.
#grande .interior em {
color: red;
background-color: blue;}