1. Estilizando elementos con clases CSS:
- En el archivo HTML, agrega la clase "texto-destacado" a un elemento
<p>. - En el archivo CSS, crea una regla para la clase ".texto-destacado" y personaliza el color del texto, eligiendo un color vibrante pero legible.
2. Destacando títulos con CSS:
- En el archivo HTML, agrega la clase "titulo-blog" a los elementos
<h1>que representan los títulos de las publicaciones. - En el archivo CSS, define la regla para la clase ".titulo-blog" y personaliza el color del texto, eligiendo un color llamativo.
3. Estilos situacionales con clases CSS:
- En el archivo HTML, agrega la clase "urgente" a los elementos
<p>que contienen noticias urgentes. - En el archivo CSS, crea la regla para la clase ".urgente" y establece el color del texto en rojo para llamar la atención.
4. Entendiendo y aplicando el Reset CSS:
- Crea un nuevo archivo CSS (por ejemplo, "style.css") para tu proyecto.
- En el archivo "style.css", agrega el código de Reset CSS universal
* { margin: 0; padding: 0; }. - Asegúrate de que el archivo CSS esté correctamente vinculado a tu archivo HTML.
- Observa los cambios en el diseño de tu sitio web después de aplicar el Reset CSS.
5. Inspeccionando elementos y entendiendo el modelo de caja:
- Utiliza las herramientas de desarrollo (DevTools) del navegador para inspeccionar un elemento de tu página.
- Presta atención a las propiedades de margen, borde, relleno y contenido, y observa cómo afectan al elemento seleccionado.
- Describe cómo cada una de estas propiedades altera la posición y apariencia del elemento.
6. Aplicando el modelo de caja en la práctica:
- Selecciona un elemento específico en tu HTML, como un párrafo (
<p>). - En tu archivo CSS, agrega estilos para ese elemento, ajustando las propiedades de margen, borde, relleno y contenido.
- Observa cómo los cambios en estas propiedades afectan la posición y apariencia del elemento en la página.
