Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
0
respuestas

[Proyecto] Reset CSS

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