CursosEmpresasBlogLiveConfPrecios

Implementación Básica de CSS en HTML

Clase 23 de 56 • 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:

  1. Crea una carpeta: Organiza tu proyecto creando una carpeta llamada, por ejemplo, clases-css.
  2. Genera el archivo HTML: Dentro de la carpeta, crea un archivo llamado index.html.
  3. 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:

  1. 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">

  2. 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>

  3. 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:

  1. Selectores de elementos: Modifican etiquetas HTML directamente, como un párrafo.

    p {
    color: blue;
}

  2. 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;
}

  3. 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!