html
<!-- 1) Estilizando elementos con clases CSS -->
<p class="texto-destacado">Este es un párrafo con texto destacado que resalta por su color.</p>
--ccs--
.texto-destacado {
color: #FF6347;
font-weight: bold;
background-color: #F0F8FF;
padding: 5px;
border-radius: 5px;
}
html
Título de la Publicación del Blog
css .titulo-blog { color: #2C3E50; font-size: 36px; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; } html¡Noticia urgente! Este es un aviso importante para todos los usuarios.
css .urgente { color: red; font-size: 18px; font-weight: bold; background-color: yellow; padding: 5px; border: 2px solid red; } /* 4) Entendiendo y aplicando el reset CSS */ * { margin: 0; padding: 0; box-sizing: border-box; } Inspeccionando elementos y entendiendo el modelo de caja Usa las herramientas de desarrollo del navegador para inspeccionar el modelo de caja de un elemento y las propiedades margin, padding, border, y content. htmlEste párrafo tiene ajustes en el modelo de caja.
css .ajustar-caja { margin: 20px; padding: 15px; border: 3px solid #3498db; background-color: #f4f4f4; }
