Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

09 Haga lo que hicimos

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;
}
1 respuesta

Hola Jonhatan, espero te encuentres bien!

Gracias por compartir tu ejercício práctico con nosotros! Tu contribución es fundamental para el crecimiento de nuestra comunidad en Alura. Sigue comprometido y no dudes en regresar al foro en caso que tengas alguna duda o dificultad.

¡Abrazos y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!