Curso de CSS / qué es CSS y en qué se diferencia de HTML

CSS (Hojas de Estilo en Cascada) controla la apariencia y el diseño de un documento HTML, incluyendo colores, fuentes, espaciado y ubicación de los elementos. HTML describe el contenido y su estructura; CSS determina cómo se presenta esa estructura.

Cómo HTML y CSS dividen responsabilidades

Imagina que estás creando una página de información sobre jardines. El hecho de que «Small Garden» (Pequeño Jardín) sea el título más importante de la página está representado por h1 en HTML. CSS determina si el título se muestra en verde y cuál es el tamaño de la fuente. Que el color sea verde no significa que un párrafo normal tenga el significado de un título.

JavaScript es un lenguaje de programación que agrega comportamiento a las páginas web. CSS también puede cambiar la forma o mostrar animación cuando se pasa el ratón por encima, por lo que cambiar la pantalla no significa necesariamente que se haya usado JavaScript. Aquí nos enfocamos primero en separar contenido y apariencia.

Por qué una página tiene estilos antes de que escribas CSS

Los navegadores tienen estilos predeterminados. Por esto los títulos aparecen grandes, hay espacio entre los párrafos y los enlaces aparecen subrayados sin tener que escribir CSS directamente. Las fuentes y márgenes predeterminados pueden variar según el navegador y la configuración del usuario. Al agregar CSS, puedes personalizar el aspecto que necesites.

Pega el siguiente HTML en un editor de texto, guárdalo como index.html en formato UTF-8 y ábrelo en tu navegador. Asegúrate de que el nombre del archivo no sea index.html.txt. Si la extensión del archivo está oculta, verifica la extensión en el formato de guardado del editor y en las propiedades del archivo.

<main>
    <h1>Small Garden</h1>
    <p>A place to grow plants and take a break.</p>
    <p class="notice">We open at 9 a.m. every day.</p>
    <a href="#visit">Visitor Information</a>
    <h2 id="visit">What to bring</h2>
    <p>Bring a water bottle and comfortable shoes.</p>
  </main>

Este fragmento es un ejemplo de la estructura del texto. Si quieres comenzar de inmediato, usa el ejemplo completo a continuación. Si lees el título y el texto de la guía primero, es fácil distinguir si el contenido real o solo la apariencia ha cambiado al cambiar el CSS.

Lee selectores, propiedades y valores

h1 {
  color: #087f5b;
}

h1 es el selector, color es la propiedad y #087f5b es su valor. Una propiedad y un valor unidos por dos puntos forman una declaración, como color: #087f5b;. El color hexadecimal de seis dígitos representa los componentes rojo, verde y azul. Para más detalles, consulta Sintaxis CSS: Selectores, Declaraciones, Comentarios y Errores.

Esta regla cambia el color del texto del elemento h1 en HTML a verde. No traduce oraciones ni agrega párrafos. Para distinguir y decorar solo el texto de orientación, añade class="notice" al HTML y selecciona .notice desde CSS. El punto es una notación de selector de clase en CSS y no se incluye en el nombre de la clase en HTML.

La introducción a CSS de MDN también explica cómo CSS controla la presentación de los documentos web.

Ejecuta el ejemplo completo de Small Garden

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body {
      margin: 24px;
      color: #333;
      background-color: #f4f7f5;
      font-family: sans-serif;
      line-height: 1.7;
    }
    main { max-width: 640px; }
    h1 { color: #087f5b; }
    .notice {
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<main>
    <h1>Small Garden</h1>
    <p>A place to grow plants and take a break.</p>
    <p class="notice">We open at 9 a.m. every day.</p>
    <a href="#visit">Visitor Information</a>
    <h2 id="visit">What to bring</h2>
    <p>Bring a water bottle and comfortable shoes.</p>
  </main>
</body>
</html>

Cuando abras el archivo guardado, verás un título verde sobre un fondo claro, y la información del horario de atención tendrá un borde y espacio. El contenido dentro del elemento style es CSS. La siguiente tabla proporciona una descripción mínima para leer las propiedades utilizadas en los ejemplos.

No necesitas memorizar cada propiedad en esta etapa. Primero identifica qué elemento coincide con el selector y qué aspecto de ese elemento cambia cada declaración. Una hoja de estilo externa te permite reutilizar el mismo diseño en varias páginas. Para más detalles, consulta Aplicar CSS con Estilos en Línea, Internos y Externos.

Cambia tres valores y compara los resultados

1. Reemplaza color en h1 con #1d4ed8. Si guardas y recargas, solo el título grande será azul. Los colores del h2 y de los párrafos generales de la guía del visitante no están sujetos a esta regla.
2. Cambia line-height de body de 1.7 a 2. La altura de línea del cuerpo será mayor. Puedes ver las diferencias más fácilmente insertando un párrafo con más de dos líneas o reduciendo el tamaño de la ventana.
3. Reemplaza background-color en .notice con #fff4cc. Solo el fondo de la información del horario de atención se vuelve amarillo. El fondo de toda la página se especifica por separado en el cuerpo, por lo que permanece igual.

En lugar de cambiar los tres valores a la vez, guarda y verifica cada vez que modifiques un elemento. Si los resultados son diferentes, comprueba si el archivo modificado y el archivo abierto en el navegador son los mismos y si las llaves y los dos puntos permanecen. Cuando termines el ejercicio, restablece los tres valores a su estado original, actualiza y compara con la pantalla original. Durante este proceso, la clave es mantener la estructura del título, párrafo y enlace en HTML.