1 - Estilizando elementos con clases CSS
html
<p>¡Hola! <strong class="texto-destacado">Soy Ana García, desarrolladora Front-end</strong> con
especialización en React, HTML y CSS. Ayudo a pequeños
negocios y diseñadores a llevar a cabo buenas ideas.
¿Hablamos?
</p>
.texto-destacado{
color: #FFF078;
}
2 - Destacando títulos con CSS
html
<strong class="titulo-blog">tu negocio digital a otro nivel con un Front-end de calidad!</strong>
</h1>
css
.titulo-blog{
color: #FF4191;
}
3 - Estilos situacionales con clases CSS
html
<p> <strong class="urgente"> NOTICIAS URGENTES </strong></p>
css
.urgente{
color: #ff0000;
}
4 - Entendiendo y aplicando el reset CSS
css
*{
padding: 0;
margin: 0;
}
5 - Inspeccionando elementos y entendiendo el modelo de caja al inspeccionar nos damos cuenta que todo el sitio web se comporta de acuerdo a los valores del reset - pero al manipular estos valores asignandoles unos nuevos en el body este cambia su margin de acuerdo al valor que le asigné.
6 - Aplicando el modelo de caja en la práctica
css
*{
padding: 0;
margin: 0;
border: 0;
}
body{
background-color: #000000;
color: #F6F6F6;
padding: 50px;
margin: 30px;
border: 10px;
font-size: 50px;
}
.texto-destacado{
color: #FFF078;
}
.titulo-blog{
color: #FF4191;
}
.urgente{
color: #ff0000;
}