Estilo CSS: Enlazar una Hoja de Estilos Externa a HTML

Introducción

¡Bienvenido a tu primer laboratorio de CSS! CSS, que significa Cascading Style Sheets (Hojas de Estilo en Cascada), es el lenguaje que utilizamos para dar estilo a un documento HTML. Describe cómo deben mostrarse los elementos HTML en la pantalla, en papel u otros medios.

Existen tres formas de incluir CSS en un documento HTML: en línea (inline), interno (internal) y externo (external). El método más común y recomendado es utilizar una hoja de estilos externa. Este enfoque separa tu contenido (HTML) de tu presentación (CSS), haciendo que tu código sea más limpio, fácil de mantener y reutilizable en múltiples páginas.

En este laboratorio, aprenderás el proceso fundamental de dar estilo a una página web utilizando una hoja de estilos externa. Harás lo siguiente:

Crear un nuevo archivo CSS.
Vincular ese archivo CSS a un documento HTML existente.
Escribir una regla CSS básica para cambiar la fuente de toda la página.
Ver tus cambios en un navegador web en vivo.

¡Empecemos!

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel intermedio con una tasa de finalización del 79%. Ha recibido una tasa de reseñas positivas del 99% por parte de los estudiantes.

Crea un archivo CSS externo llamado styles.css

En este paso, crearás un archivo dedicado para contener todas tus reglas CSS. Esto se conoce como una hoja de estilos externa. El script de configuración ya ha creado un archivo index.html para ti. Ahora, necesitas crear el archivo CSS que lo estilizará.

Usando el explorador de archivos en el panel izquierdo del WebIDE:

Haz clic derecho en el espacio vacío dentro del área de la carpeta project.
Selecciona "New File" (Nuevo Archivo) en el menú contextual.
Aparecerá un nuevo cuadro de entrada. Escribe styles.css y presiona Enter.

Ahora deberías ver un archivo nuevo y vacío llamado styles.css en tu explorador de archivos. Aquí es donde escribirás tu código CSS en los próximos pasos.

Enlaza el archivo CSS a un documento HTML usando la etiqueta link

En este paso, conectarás tu archivo styles.css con tu archivo index.html. Simplemente crear el archivo CSS no es suficiente; debes indicar explícitamente al documento HTML que lo utilice. Esto se hace usando la etiqueta <link>.

La etiqueta <link> se coloca dentro de la sección <head> de tu documento HTML. Requiere dos atributos importantes:

rel="stylesheet": Esto le dice al navegador que el archivo enlazado es una hoja de estilos.
href="styles.css": Esto especifica la ruta al archivo CSS.

Ahora, agreguémoslo a tu HTML.

Abre el archivo index.html desde el explorador de archivos.
Dentro de la sección <head>, agrega la siguiente línea:

<link rel="stylesheet" href="styles.css" />

Después de agregar la línea, tu archivo index.html debería verse así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First CSS Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph. We will style this page with CSS.</p>
  </body>
</html>

Asegúrate de guardar el archivo (Ctrl+S o Archivo > Guardar).

Añade un selector básico para el elemento body

En este paso, escribirás tu primera regla CSS. Una regla CSS consta de un selector y un bloque de declaración. El selector apunta al elemento HTML que deseas estilizar. El bloque de declaración (dentro de llaves {}) contiene una o más declaraciones, que son los estilos reales que se aplicarán.

Comenzaremos apuntando al elemento <body>. Estilizar el <body> es una práctica común para establecer estilos predeterminados, como el color de fondo y la fuente, para toda la página.

Abre tu archivo styles.css. Todavía debería estar vacío.
Escribe el siguiente código para crear una regla para el elemento body:

body {
}

Este código selecciona el elemento <body> y prepara un bloque de declaración vacío (las llaves) donde agregaremos propiedades de estilo en el siguiente paso.

Establece la propiedad font-family en el selector body

En este paso, agregarás una declaración de estilo a tu regla body. Una declaración es un par propiedad-valor (por ejemplo, property: value;) que define un estilo específico.

Usaremos la propiedad font-family para cambiar el tipo de letra del texto en la página. Al aplicarla al body, todos los elementos de texto dentro del body (como <h1> y <p>) heredarán esta fuente. Es una buena práctica proporcionar una "pila de fuentes" (font stack), una lista de fuentes separadas por comas. El navegador intentará usar la primera fuente y, si no está disponible, intentará la siguiente, y así sucesivamente.

Asegúrate de que tu archivo styles.css esté abierto.
Dentro de las llaves del selector body, agrega la propiedad font-family.

font-family: Arial, sans-serif;

Tu archivo styles.css completo debería verse ahora así:

body {
  font-family: Arial, sans-serif;
}

Esta regla le indica al navegador que renderice todo el texto dentro del <body> utilizando la fuente Arial. Si Arial no está instalado en el sistema del usuario, recurrirá a la fuente sans-serif predeterminada del sistema.

Guarda los archivos y actualiza el navegador para ver los cambios

En este paso final, verás el resultado de tu trabajo. Después de escribir código, necesitas guardar tus archivos y luego ver los cambios en el navegador.

Asegúrate de que tanto index.html como styles.css estén guardados. Puedes usar el atajo de teclado Ctrl+S o ir a File > Save en el menú.
Navega a la pestaña Web 8080 ubicada en la parte superior de la interfaz de LabEx. Esta pestaña muestra la salida del servidor web que se ejecuta en tu entorno.
Es posible que necesites actualizar la pestaña del navegador para ver los últimos cambios.

Observa el texto en la página. Ahora debería mostrarse en la fuente Arial (o una fuente sans-serif similar), que es diferente de la fuente serif predeterminada (como Times New Roman) que los navegadores suelen utilizar. El cambio puede ser sutil, pero confirma que tu hoja de estilos externa está correctamente enlazada y aplicada.

¡Siéntete libre de experimentar! Prueba a cambiar Arial por Verdana o Georgia en tu archivo styles.css, guárdalo y actualiza la pestaña Web 8080 para ver el cambio de fuente al instante.

Resumen

¡Felicitaciones! Has completado con éxito este laboratorio y has dado tu primer paso en el mundo de CSS.

En este laboratorio, aprendiste el método fundamental y más importante para estilizar páginas web:

Cómo crear un archivo CSS externo (styles.css).
Cómo enlazar el archivo CSS a un documento HTML utilizando la etiqueta <link> en la sección <head>.
Cómo escribir una regla CSS básica utilizando un selector de elemento (body).
Cómo aplicar un estilo utilizando una propiedad y un valor (font-family: Arial, sans-serif;).

Esta base de separar la estructura (HTML) de la presentación (CSS) es un principio fundamental del desarrollo web moderno. Ahora estás listo para explorar selectores CSS más avanzados, propiedades y conceptos como el modelo de caja (box model), el diseño (layout) y el diseño adaptable (responsive design).

Introducción y Enlace de CSS