1 - Estilizando elementos con clases CSS
.texto-destacado {
color: #ff6600; /* Naranja vibrante */
font-weight: bold;
font-size: 18px;
}
2 - Destacando títulos con CSS
.titulo-blog {
color: #2c3e50; /* Azul oscuro elegante */
text-transform: uppercase;
letter-spacing: 2px;
border-bottom: 3px solid #e67e22;
padding-bottom: 5px;
}
3 - Estilos situacionales con clases CSS
.urgente {
color: red;
font-weight: bold;
}
4 - Entendiendo y aplicando el reset CSS
/* Reset básico */
- {
margin: 0;
padding: 0;
box-sizing: border-box;
}
5 - Inspeccionando elementos y entendiendo el modelo de caja
.caja-ejemplo {
margin: 20px;
border: 3px solid blue;
padding: 15px;
background-color: lightyellow;
}
6 - Aplicando el modelo de caja en la práctica
.parrafo-modelo {
margin: 30px;
border: 2px dashed green;
padding: 20px;
width: 300px;
background-color: #f0f8ff;
}