[Projeto] Lista de exercícios: Seletores e posicionamentos

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="titulo-blog">Lorem ipsum dolor, sit amet consectetur adipisicing elit. </h1>
    <p class="texto-destaque">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias nisi tenetur quisquam aliquam ducimus cumque reprehenderit voluptatem, aspernatur officia quidem eveniet aliquid maiores quas fugit adipisci rem facere deserunt non!
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut optio magni delectus vitae quo quibusdam illum possimus provident maiores, quia cumque dolores pariatur ea fugiat mollitia ipsa natus. Voluptatum, ipsa!
         </p>

         <p class="urgente">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas architecto ipsam cum delectus cumque reiciendis et maxime necessitatibus, consectetur temporibus minima ab dolorum dolor omnis pariatur quo sunt deserunt voluptate?
         </p>

         <p class="aplica-estilo">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias minima incidunt dignissimos tenetur voluptas hic! Nostrum aspernatur quas perspiciatis quam quidem, nisi saepe ipsum laborum! Minima ipsam nam laborum accusantium.
            Atque hic cumque distinctio id eveniet dignissimos odio delectus dolorum eius, consequuntur ipsum, nulla ab omnis at minima tempora. Laboriosam quas incidunt, libero at minus minima? Id nobis ducimus deserunt?
         </p>
</body>
</html>

* {
  margin: 0;
  padding: 0;
}

body {
  background: linear-gradient(to right, #a0e0e9, #28e61b);
}

.titulo-blog {
  color: #0b5e10;
}

.texto-destaque {
  color: #0d317f;
}

.urgente {
  color: #ff0000;
}

.aplica-estilo {
  margin: 200px 400px;
  border: 2px solid #000;
  padding: 10px;
}

5... Inspecionando elementos e entendimento do modelo de caixa Como quem trabalha com front-end, você precisa entender como os estilos são aplicados aos elementos da sua página. Use as ferramentas de desenvolvimento (DevTools) do navegador para inspecionar o modelo de caixa de um elemento do seu site. Preste atenção nas propriedades margin, border, padding e content. Descreva como essas propriedades estão afetando o elemento selecionado.

Margin: Define uma área externa à borda, criando espaço ao redor do elemento. Essa área é transparente e não afeta o conteúdo interno. Border: É a borda que circunda o conteúdo e o preenchimento do elemento. Pode ter cor, estilo e largura personalizáveis, e serve como um contorno visível. Padding: Define o espaço interno entre o conteúdo do elemento e sua borda. Assim como a margem, é transparente e ajuda a criar espaçamento dentro do elemento. Content: Refere-se ao conteúdo real do elemento, como texto, imagens ou outros elementos visíveis que estão dentro da caixa. É o núcleo da estrutura do elemento. Essa explicação segue a ordem do box model e torna o conceito mais claro e objetivo.