Introducción

CSS (Cascading Style Sheets) es el lenguaje que usamos para darle estilo y formato a una página web escrita en HTML. Mientras que HTML organiza y estructura el contenido (como texto, imágenes y enlaces), CSS se encarga de la apariencia visual: colores, tamaños, fuentes, alineaciones y disposición de los elementos.

Usando CSS, podemos cambiar cómo se ve cada elemento en la página sin tocar el HTML. Esto permite separar el contenido de su presentación y mantener un diseño consistente en toda la web.

HTML + CSS

Guía de uso de CSS

Los siguientes pasos te permitirán ofrecer un estilo a tus páginas web mediante CSS:

Cómo Usar CSS en un Documento HTML

Existen tres maneras principales de aplicar CSS en un documento HTML:

CSS en Línea (inline): Se aplica directamente dentro de una etiqueta HTML. No es la mejor opción para páginas grandes, pero es útil para cambios rápidos.
```
<p style="color: blue; font-size: 16px;">Este es un párrafo con CSS en línea.</p>
```
CSS en el <head> (CSS Interno): Se escribe en la sección <head> del archivo HTML dentro de una etiqueta <style>. Es más organizado y fácil de gestionar.
```
<head>
    <style>
   p {
  color: blue;
  font-size: 16px;
   }
    </style>
</head>
```
CSS Externo: Es la mejor opción para proyectos grandes, ya que el CSS se coloca en un archivo separado (por ejemplo, estilos.css). Luego, se enlaza al HTML con la etiqueta <link>.
```
<head>
    <link rel="stylesheet" href="estilos.css">
</head>
```

Cambios Básicos con CSS

Una vez que decides cómo aplicar CSS, puedes comenzar por cambiar el estilo de los elementos en tu página. Aquí tienes algunos ejemplos básicos:

Cambiar el color del texto de los párrafos:
```
p {
    color: green;
}
```
Ajustar el tamaño del texto de las cabeceras H1:
```
h1 {
    font-size: 24px;
}
```
Modificar el fondo de la página:
```
body {
    background-color: #f0f0f0;
}
```
Añadir bordes a las imágenes:
```
img {
    border: 2px solid black;
}
```

Guardar y Ver los Cambios

Guarda el archivo HTML (y el archivo CSS, si estás usando uno externo).
Abre el HTML en el navegador o refresca la página para ver los cambios aplicados.

Página con Estilo

Experimenta con CSS

CSS es muy flexible y te permite experimentar. Prueba diferentes propiedades y valores para ver cómo cambian los estilos en tu página.

💻 <h1>Los Constructores de la Web</h1> 🛠️💻

1.2. 📖 Hojas de estilo en cascada (CSS)