[Proyecto] Reset CSS | Alura Latam - Cursos online de tecnologia

[Proyecto] Reset CSS

Estilizando elementos con clases CSS: **Lo primero sería darle el atributo de class con el nombre texto-destacado, después de esto en el archivo css se crea el entorno para poder organizar el parrafo y darle los atributos donde el color podría ser #ff5733 para que resalte y como fondo podriamos usar un background-color en tono suave y armonioso #fff3e0 **
Destacando títulos con CSS: Para poder hacerlo seguir los pasos similares en el primer punto, al h1 le doy el atributo class con el nombre titulo-blog, luego en el archivo css se agregan los atributos para el h1 estos pueden ser color: #2c3e50 algo elegante y demaás cambios necesarios
Estilos situacionales con clases CSS: En este caso en el archivo HTML a los parrafos con noticias urgentes les agragamos el atributo class con el nombre urgente para diferenciarlos de los demas y en el archivo css hacemos lo propio dandole atributo al color con un #d32f2f que es un rojo intenso, agregamos un fondo claro para darle contraste con un background-color: #ffebee y le podemos agregar una barra lateral tambien roja border-left: 5px solid #b71c1c de esta manera destacaria mas Entendiendo y aplicando el reset CSS :

* {
    margin: 0;
    padding: 0;
}

Inspeccionando elementos y entendiendo el modelo de caja: **** Abre tu sitio web en Google Chrome (o cualquier navegador con DevTools), Haz clic derecho sobre el elemento que deseas inspeccionar y selecciona "Inspeccionar" (Ctrl + Shift + I en Windows/Linux o Cmd + Opt + I en Mac), Se abrirá DevTools, donde verás el código HTML y los estilos CSS aplicados, Dirígete a la pestaña "Computed" (en Chrome) o "Box Model" (en Firefox). Aquí verás el modelo de caja del elemento seleccionado**** Aplicando el modelo de caja en la práctica:

.caja {
    width: 300px; 
    padding: 20px;
    border: 3px solid black; 
    margin: 30px auto;
    background-color: lightblue; 
    text-align: center;

¡Hola Clever, espero que estés bien!

Sugerencia: compartir tu actividad (caso no tiene duda) en el servidor ONE / Alura Latam en Discord ;)

Gracias por compartir tu actividad sobre el uso de reset CSS y la estilización de elementos con clases CSS. Parece que estás en el camino correcto al aplicar estilos a tus elementos HTML. Aquí te dejo algunos consejos que podrían ayudarte a mejorar tu comprensión y aplicación de estas técnicas.

Reset CSS: El código que has mencionado es un ejemplo básico de reset CSS. Al establecer margin: 0; y padding: 0; en todos los elementos (*), estás eliminando los márgenes y rellenos predeterminados que los navegadores aplican. Esto te da un punto de partida uniforme para aplicar tus propios estilos. Es una práctica común para asegurarte de que tu diseño sea consistente en diferentes navegadores.
Estilización de elementos:
- Para los párrafos destacados, asegúrate de que todos los elementos a los que deseas aplicar el estilo tienen la clase texto-destacado. En tu CSS, puedes definir estilos adicionales como font-size o font-weight para personalizar aún más su apariencia.
- Para los títulos, el uso de la clase titulo-blog es una buena manera de mantener la consistencia en el estilo de tus encabezados. Considera también ajustar el font-size o line-height para mejorar la legibilidad.
Estilos situacionales: La clase urgente es perfecta para resaltar noticias importantes. Además de los estilos que ya has mencionado, podrías considerar añadir font-weight: bold; para hacer que el texto sea aún más prominente.
Modelo de caja: Al inspeccionar elementos, el modelo de caja te muestra cómo se calculan las dimensiones de un elemento, incluyendo padding, border, y margin. Esto es crucial para entender cómo los elementos se distribuyen en la página. En tu ejemplo de .caja, el ancho total sería la suma de width, padding, border, y margin.

Espero que estas sugerencias te ayuden a mejorar tu proyecto. ¡Sigue experimentando y aprendiendo! Espero haber ayudado y buenos estudios.