Sintaxis de CSS y selectores básicos

Las reglas CSS le dicen al navegador cómo debe verse el HTML. Cuando entiendes la estructura básica de una regla, puedes controlar colores, tamaño del texto, botones, tarjetas y muchas otras partes visuales de una página.

Cómo se ve una regla CSS

Una regla CSS tiene dos partes principales:

• Un selector, que le dice al navegador qué HTML debe recibir estilos.
• Un bloque de declaraciones, que le dice al navegador cómo debe aplicarlos.

El bloque de declaraciones se escribe entre llaves {}.

Selector, propiedad y valor

Dentro del bloque de declaraciones, CSS usa declaraciones. Esto significa cada parte:

• La propiedad es la característica visual que quieres cambiar, como color o font-size.
• El valor es la configuración que eliges para esa propiedad, como blue o 32px.
• Los dos puntos : separan la propiedad del valor.
• El punto y coma ; marca el final de la declaración.

Una declaración se escribe así:

Los puntos y coma son importantes porque ayudan al navegador a entender dónde termina una instrucción CSS y dónde empieza la siguiente.

Primer ejemplo de código

<h1 class="page-title">Mi primera página con estilos</h1>
<p>Este párrafo usa un selector de elemento.</p>
<button id="main-button">Inicio</button>

<style>
  h1 {
    color: blue;
  }

  .page-title {
    font-size: 32px;
  }

  #main-button {
    background-color: green;
  }
</style>

Explicación del código

El bloque <style> contiene tres reglas CSS.

La primera regla usa el selector h1 para encontrar el encabezado y hacer que su texto sea azul.

La segunda regla usa .page-title para encontrar elementos con la clase page-title y cambiar el tamaño de fuente a 32px.

La tercera regla usa #main-button para encontrar el elemento con el ID main-button y cambiar el color de fondo del botón a verde.

Selectores de elemento

Los selectores de elemento apuntan directamente a etiquetas HTML.

Por ejemplo, esta regla aplica estilos a todos los párrafos de la página:

<p>Primer párrafo</p>

<p>Segundo párrafo</p>

<style>
  p {
    color: green;
  }
</style>

Los selectores de elemento son útiles para definir estilos básicos, pero afectan a todas las etiquetas que coinciden.

Selectores de clase

Los selectores de clase te permiten aplicar estilos a elementos específicos sin cambiar todos los elementos del mismo tipo.

Un selector de clase empieza con un punto ..

<p class="highlight">Este párrafo está resaltado.</p>

<p>Otro párrafo.</p>

<style>
  .highlight {
    color: orange;
  }
</style>

Puedes reutilizar la misma clase en muchos elementos.

Selectores de ID

Los selectores de ID se usan para un elemento único de la página.

Un selector de ID empieza con #.

<button id="main-button">Inicio</button>

<style>
  #main-button {
    background-color: yellow;
  }
</style>

En HTML normal, el mismo ID debe usarse solo una vez por página. Si necesitas aplicar el mismo estilo a muchos elementos, usa una clase.

Selectores agrupados

Los selectores agrupados permiten que varios selectores compartan el mismo estilo. Separa cada selector con una coma.

<h1>Encabezado 1</h1>

<h2>Encabezado 2</h2>

<p>Otro párrafo.</p>

<style>
  h1,
  h2,
  p {
    color: blue;
  }
</style>

Esta regla aplica el mismo color de texto azul a los elementos h1, h2 y p.

Mini tarea

Mira esta regla CSS:

Identifica el selector, la propiedad y el valor.

Respuesta:

• El selector es button.
• La propiedad es color.
• El valor es white.

Quiz corto

Pregunta 1: ¿Qué símbolo inicia un selector de clase?

Respuesta: Un punto ..

Pregunta 2: ¿Qué símbolo inicia un selector de ID?

Respuesta: Una almohadilla #.

Pregunta 3: ¿Por qué las declaraciones CSS suelen terminar con punto y coma?

Respuesta: Para marcar dónde termina una instrucción antes de que empiece la siguiente.

Pequeño desafío

Prueba a aplicar estilos a la tarjeta de práctica:

• Cambia el color del encabezado usando el selector de clase.
• Cambia el tamaño del párrafo usando el selector de clase.
• Dale al botón un nuevo color de fondo usando su ID.

<h2 class="card-title">Tarjeta de práctica</h2>
<p class="card-text">Aplica estilos a este texto con CSS.</p>
<button id="practice-button">Haz clic</button>

<style>
  /* escribe tu CSS debajo */

</style>

Resumen

• Una regla CSS tiene un selector y un bloque de declaraciones.
• Las declaraciones se escriben como property: value;.
• Los selectores de elemento aplican estilos a todas las etiquetas HTML que coinciden.
• Los selectores de clase empiezan con . y se pueden reutilizar.
• Los selectores de ID empiezan con # y deben ser únicos en una página.
• Los selectores agrupados usan comas para aplicar el mismo estilo a varios selectores.