¿Qué es CSS?

Introducción

CSS significa Cascading Style Sheets (Hojas de estilo en cascada). Es el lenguaje que se usa para dar estilo a las páginas web.

HTML le da estructura a una página. CSS controla cómo se ve esa estructura: colores, espacios, fuentes, fondos, bordes y layout.

Una página web puede existir sin CSS, pero normalmente se verá simple y sin estilo. CSS convierte el contenido estructurado en una página más clara, más legible y más útil visualmente.

La palabra cascading significa que varias reglas de estilo pueden aplicarse al mismo elemento. Cuando las reglas entran en conflicto, el navegador decide cuál gana según la cascada, la especificidad y el orden.

HTML vs CSS

HTML y CSS son lenguajes diferentes, pero trabajan juntos.

HTML crea el contenido y la estructura, como encabezados, párrafos, listas, botones y secciones.
CSS controla el diseño visual, como colores, tamaños de fuente, espaciado y layout.

Piensa en construir una casa:

HTML es la base, la estructura, las habitaciones y las paredes.
CSS es la pintura, los muebles, la iluminación y la decoración.

Primero necesitas la estructura. Luego CSS puede dar estilo a esa estructura.

CSS y HTML semántico

CSS puede dar estilo a cualquier elemento HTML, pero funciona mejor cuando tu HTML tiene significado.

Por ejemplo, usar elementos como <main>, <section>, <h1>, <p> y <button> hace que la página sea más fácil de entender antes de agregar estilos.

Luego CSS puede mejorar el diseño sin cambiar el significado del contenido.

Regla básica de CSS

Una regla CSS le dice al navegador cómo debe verse el HTML seleccionado.

Cada regla CSS tiene tres partes principales:

Selector: el elemento HTML o grupo de elementos que quieres estilizar.
Propiedad: la característica visual que quieres cambiar.
Valor: la configuración que eliges para esa propiedad.

Aquí tienes un ejemplo corto:

Solo lectura

En esta regla:

h1 es el selector.
color es la propiedad.
blue es el valor.

Selector, propiedad y valor en CSS

Formas de agregar CSS

Hay tres formas comunes de agregar CSS a un documento HTML.

CSS inline: escribes estilos directamente dentro de un elemento HTML usando el atributo style.
CSS interno: escribes reglas CSS dentro de una etiqueta <style> en el documento HTML.
CSS externo: escribes CSS en un archivo separado, como style.css, y lo conectas con la página HTML.

CSS externo es el mejor enfoque a largo plazo para sitios reales porque muchas páginas pueden compartir la misma hoja de estilos.

Ejemplo ejecutable

Aquí tienes un pequeño documento HTML que usa una etiqueta interna <style>.

Haz clic en Mostrar salida para ver cómo CSS cambia la página.

Se puede editar

<!doctype html>
<html>
  <head>
    <style>
      h1 {
        color: darkblue;
      }

      p {
        font-size: 18px;
      }

      button {
        background-color: green;
        color: white;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>¡Bienvenido a CSS!</h1>
      <p>Este es mi primer párrafo con estilo.</p>
      <button>Haz clic</button>
    </main>
  </body>
</html>

Mini ejercicio

Edita el ejemplo ejecutable de arriba.

Intenta hacer estos cambios:

Cambia el color del encabezado h1 a purple.
Cambia el tamaño del párrafo p a 22px.
Cambia el color del texto del button a black.
Cambia el color de fondo del button a yellow.

Luego haz clic en Mostrar salida y revisa la vista previa.

Resumen

CSS significa Cascading Style Sheets.
HTML crea la estructura de la página, mientras CSS controla el diseño visual.
Una regla CSS normalmente tiene selector, propiedad y valor.
CSS se puede agregar inline, internamente con <style> o externamente con una hoja de estilos.
Las hojas de estilo externas son la mejor práctica para sitios más grandes.

Sigue aprendiendo

Continúa aprendiendo CSS paso a paso practicando con ejemplos pequeños y cambiando un estilo a la vez.