Implementación Básica de CSS en HTML

Clase 22 de 55 • Curso Definitivo de HTML y CSS

Resumen

¿Cómo empezar con CSS en nuestro proyecto de HTML?

CSS, o Hojas de Estilo en Cascada, es una herramienta fundamental en el desarrollo web que nos permite dar estilo a nuestros documentos HTML. Para integrarlo adecuadamente en un proyecto, sigue estas buenas prácticas y métodos al trabajar con CSS.

Estructura básica del proyecto

Antes que nada, debemos asegurarnos de tener una buena organización de las carpetas y archivos de nuestro proyecto. Aquí te comparto un enfoque recomendado:

Crea una carpeta: Organiza tu proyecto creando una carpeta llamada, por ejemplo, clases-css.
Genera el archivo HTML: Dentro de la carpeta, crea un archivo llamado index.html.
Organiza CSS y HTML: Mantén tus documentos HTML y CSS en archivos separados para mejorar la organización y mantenimiento.

¿Cómo enlazar CSS al proyecto HTML?

Para que el HTML pueda "ver" y utilizar nuestros estilos en CSS, necesitamos crear una referencia adecuada. Aquí te muestro las diferentes formas de hacerlo:

Enlace de archivo externo: Esta es la forma más recomendada y profesional.
- Crea un archivo CSS, por ejemplo, style.css.
- En el index.html, dentro de la etiqueta <head>, usa la etiqueta <link> para enlazar el CSS:
```
<link rel="stylesheet" href="style.css">
```
Uso de la etiqueta <style>: Puedes incluir estilos directamente en el archivo HTML, dentro de la etiqueta <style>, aunque no es la mejor práctica debido a la sobrecarga y dificultad de mantenimiento.
```
<style>
    p {
        color: red;
    }
</style>
```
Estilo embebido: Esta es la forma menos recomendada, ya que podrías perder control sobre la apariencia y coherencia visual general. Se utiliza directamente en los elementos HTML:
```
<p style="color: red;">Soy un texto</p>
```

¿Cómo usar selectores CSS en HTML?

Una vez que hemos establecido la conexión entre CSS y HTML, la personalización de estilos se realiza mediante selectores. Aquí te muestro los más comunes:

Selectores de elementos: Modifican etiquetas HTML directamente, como un párrafo.
```
p {
    color: blue;
}
```
Selectores de clase: Se utilizan para aplicar estilos a múltiples elementos con el mismo atributo class.
```
<p class="miClase">Texto con clase</p>
```
```
.miClase {
    color: green;
}
```
Selectores de ID: Aplican estilos a un único elemento con el atributo id, indicado con #.
```
<p id="miId">Texto con ID</p>
```
```
#miId {
    color: yellow;
}
```

¿Cómo practicar aplicando CSS?

Para afianzar estos conocimientos, se sugiere realizar ejercicios como dar estilo a una lista de productos que podrías tener en un archivo HTML. Algunos consejos para practicar:

Experimenta con colores: Cambia el color de texto u otros elementos visuales.
Modifica el tamaño: Ajusta el tamaño de fuente o imágenes para observar el efecto.

Comparte tus avances y resultados para aprender del intercambio de experiencias y mejorar tu comprensión del CSS. Con esto como base, estarás listo para explorar más allá con otros elementos avanzados como clases y pseudoclases en CSS. ¡El siguiente paso aguarda!