1) Estilizando elementos com classes CSS

Você está trabalhando no desenvolvimento de uma página web e precisa aplicar estilos específicos a diferentes elementos usando classes CSS. Seu desafio é criar uma classe chamada texto-destaque no arquivo HTML para um elemento <p> e, em seguida, estilizar essa classe no arquivo CSS para alterar a cor do texto. Use sua criatividade para escolher cores que tornem o texto destacado, mas ainda legível e harmonioso com o design geral da página.

index.html
    <p class="texto-destaque">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum leo ac justo cursus, in fermentum velit tincidunt. Sed vitae neque eget lacus fringilla sagittis.</p>

style.css
    .texto-destaque {
    color: #000000 ;
    }

2) Destacando títulos com CSS

Imagine que você está desenvolvendo um blog e precisa destacar os títulos das postagens. Crie uma classe CSS chamada "titulo-blog" e aplique-a a elementos <h1>no seu arquivo HTML. Em seguida, personalize essa classe no arquivo CSS para mudar a cor do texto, para dar mais destaque.

index.html
<h1 class="titulo-blog">Blog do ROCH@<h1>

style.css
.titulo-blog {
    color: #191970 ;
    }

3) Estilos situacionais com classes CSS

Você está trabalhando em um site de notícias e precisa aplicar um estilo diferente para notícias urgentes. Crie uma classe CSS chamada "urgente" e aplique-a a elementos <p> que contêm notícias urgentes. No CSS, faça com que o texto desses parágrafos seja vermelho, para chamar a atenção do leitor.

index.html
    <p class="urgente">Leia abaixo as notícias URGENTES<p>

style.css
    .urgente {
    color: #red ;
    }

4) Entendendo e aplicando o reset CSS

Você está trabalhando em um projeto de site e notou que o layout está um pouco desorganizado devido aos estilos padrões aplicados pelo navegador. Sua tarefa é aplicar um "reset CSS" para remover esses estilos padrão. Comece criando um arquivo CSS e utilize o seletor universal * para definir a margin e o padding de todos os elementos para 0. Teste o efeito dessa mudança no layout do seu site.

style.css
    *{
    margin: 0 ;
    padding: 0 ;
    }

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.

****REALIZADO E ANALISADO

6) Aplicando o modelo de caixa na prática

Agora que você entendeu o modelo de caixa CSS, aplique esse conhecimento no seu projeto. Selecione um elemento específico (por exemplo, um parágrafo) e ajuste as propriedades de margin, border, padding e content. Observe como cada alteração afeta o posicionamento e a aparência do elemento na página.