Lista de exercícios

• 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.*

Html:
<p class="titulo-destaque">Um titulo bem destacado necessita de um css!</p>

Css:
.titulo-destaque{
    color: greenyellow;
}

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

Html:
<h1 class="titulo-blog">Uma nova era de responsividade para seus blog's.</h1>

Css:
.titulo-blog{
    color: rosybrown;
}

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

Html:
    <p class="urgente">Neymar acaba de desembarcar em São Paulo e está proximo de assinar contrato com Santos!</p>

Css:
.urgente{
    color: red; 
}

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

Css:
*{
    margin: 0;
    padding: 0;
}

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

Ao analisar as propriedades ditas acima percebi que a margem cria espaços ao redor do elemento sem bordas,o border seria semelhante a margem so que como seu nome ja diz com bordas,o padding seria um preenchimento de espaço ao redor do elemento e o content seria criar classes estilizadas.

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

Html:
<p> usando margin border e padding</p>

Css:
p{
    margin: 15px;
       border: 1px solid black;
       padding: 5px;
}