Selectores CSS – Reglas y sintaxis

Ahora nos toca aprender qué es una regla de estilo CSS, cuál es su sintaxis CSS correcta, además aprenderemos a utilizar los selectores, muy importantes para apuntar o seleccionar elementos HTML específicos y estilizarlos con CSS.

Aunque hasta ahora ya hemos visto algunos ejemplos de código CSS es importante definirla y dejar en claro de una vez por todas cuáles las partes que posee y cómo escribirla correctamente para en próximas lecciones adentrarnos en el corazón de CSS y no tener problemas.

Qué es la sintaxis CSS

Cuando dotamos de estilo a un elemento HTML debemos establecer las reglas de estilo que se le aplicarán. Imagina que en un documento HTML existen una gran variedad de elementos como: textos, multimedia, formularios, listas, enlaces, etc. todos estos elementos poseen un estilo ¿Verdad? ¿Dónde van esos estilos? Generalmente en un documento CSS.

Se considera sintaxis al orden y relación de los elementos que componen una correcta instrucción CSS así como las funciones que cumples.

Entonces un documento CSS contiene todas las reglas establecidas para cada elemento HTML.

¿Qué es una regla CSS?

Una regla CSS es la forma adecuada de escribir una instrucción mediante código CSS, es decir la manera en que se debe escribir código CSS para que este sea interpretado y aplicado correctamente por el navegador web.

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;}

[popup_anything id=»4273″]