Exercício um) 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

``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.

Conteúdo HTML

        <p class="texto-destaque">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>

Conteúdo CSS

.texto-destaque {
    color: #FFD700;
}

Exercício dois) 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

no seu arquivo HTML. Em seguida, personalize essa classe no arquivo CSS para mudar a cor do texto, para dar mais destaque.

Conteúdo HTML

        <h1 class="titulo-blog">Eleve seu negócio digital a outro nível <strong class="titulo-destaque"> um Front-end de qualidade!</strong></h1>

Conteúdo CSS

.titulo-blog {
    color: #F5F5DC;
}

Exercício três) 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

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.

Conteúdo HTML

        <p class="urgente">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>

Conteúdo CSS

.urgente {
    color: #FF0000;
}

Exercício quatro) 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.

Conteúdo CSS

* {
    margin: 0;
    padding: 0;
}

Exercício cinco) 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: Espaço externo ao redor da borda do elemento.

border : A borda que envolve o conteúdo e o padding.

padding : Espaço interno entre o conteúdo e a borda.

content : O conteúdo propriamente dito do elemento (texto, imagens, etc.).

Exercício 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.

Conteúdo CSS

.urgente {
    margin: 10px;
    border: 2px solid black;
    padding: 4px;
}