Sintaxis CSS y selectores

❮ AnteriorSiguiente ❯

---

Sintaxis CSS

Un conjunto de reglas CSS consta de un selector y un bloque de declaración:

El selector apunta al elemento HTML que desea estilizar.

El bloque de declaración contiene una o más declaraciones separadas por punto y coma.

Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.

Una declaración CSS siempre termina con un punto y coma, y ​​los bloques de declaración están rodeados por llaves.

En el siguiente ejemplo, todos los elementos <p> se alinearán en el centro, con un color de texto rojo:

Ejemplo

p {
    color: red;
    text-align: center;}

Inténtalo tú mismo "

---

Selectores de CSS

Los selectores de CSS se utilizan para "buscar" (o seleccionar) elementos HTML en función de su nombre de elemento, id, clase, atributo y más.

---

El selector de elementos

El selector de elementos selecciona elementos en función del nombre del elemento.

Puede seleccionar todos los elementos <p> en una página como esta (en este caso, todos los elementos <p> estarán alineados en el centro, con un color de texto rojo):

Ejemplo

p {
    text-align: center;
    color: red;}

Inténtalo tú mismo "

---

El selector de id

El selector de id utiliza el atributo id de un elemento HTML para seleccionar un elemento específico.

El ID de un elemento debe ser único dentro de una página, por lo que el selector de ID se utiliza para seleccionar un elemento único.

Para seleccionar un elemento con un ID específico, escriba un carácter de hash (#), seguido del ID del elemento.

La siguiente regla de estilo se aplicará al elemento HTML con id = "para1":

Ejemplo

#para1 {
    text-align: center;
    color: red;}

Inténtalo tú mismo "

Nota: ¡ Un nombre de identificación no puede comenzar con un número!

---

El selector de clase

El selector de clase selecciona elementos con un atributo de clase específico.

Para seleccionar elementos con una clase específica, escriba un carácter de punto (.), Seguido del nombre de la clase.

En el ejemplo a continuación, todos los elementos HTML con class = "center" estarán en rojo y alineados en el centro:

Ejemplo

.center {
    text-align: center;
    color: red;}

Inténtalo tú mismo "

También puede especificar que solo los elementos HTML específicos deben verse afectados por una clase.

En el ejemplo a continuación, solo los elementos <p> con clase = "centro" se alinearán en el centro:

Ejemplo

p.center {
    text-align: center;
    color: red;}

Inténtalo tú mismo "

Los elementos HTML también pueden referirse a más de una clase.

En el siguiente ejemplo, el elemento <p> se diseñará de acuerdo con class = "center" y class = "large":

Ejemplo

<p class="center large">This paragraph refers to two classes.</p>

Inténtalo tú mismo "

Nota: ¡ Un nombre de clase no puede comenzar con un número!

---

Selectores de agrupación

Si tienes elementos con las mismas definiciones de estilo, así:

h1 {
    text-align: center;
    color: red;}

h2 {
    text-align: center;
    color: red;}

p {
    text-align: center;
    color: red;}

Será mejor agrupar los selectores, para minimizar el código.

Para agrupar los selectores, separe cada selector con una coma.

En el siguiente ejemplo, hemos agrupado los selectores del código anterior:

Ejemplo

h1, h2, p {
    text-align: center;
    color: red;}

Inténtalo tú mismo "

---

Comentarios CSS

Los comentarios se usan para explicar el código, y pueden ayudar cuando edite el código fuente en una fecha posterior.

Los comentarios son ignorados por los navegadores.

Un comentario CSS comienza con / * y termina con * /. Los comentarios también pueden abarcar múltiples líneas:

Ejemplo

p {
    color: red;
    /* This is a single-line comment */
    text-align: center;}

/* This is
a multi-line
comment */

Inténtalo tú mismo "

---

¡Ponte a prueba con los ejercicios!

Ejercicio 1 »Ejercicio 2»Ejercicio 3 »Ejercicio 4»

❮ AnteriorSiguiente ❯