Estilizando elementos com classes CSS Resposta: No HTML, localizei o elemento
e adicionei class="texto-destaque". No CSS, criei uma regra que deixa o texto vibrante e chamativo: .texto-destaque { color: #FF5733; font-weight: bold; font-size: 1.2rem; text-shadow: 2px 2px #ffc300; /* Brilho elegante */ } Agora o texto está com aquele toque de destaque que combina com meu estilo criativo!
- Destacando títulos com CSS
Resposta:
No HTML, apliquei class="titulo-blog" aos
. No CSS, deixei o título marcante para chamar atenção: .titulo-blog { color: #007BFF; font-size: 2rem; text-transform: uppercase; border-bottom: 2px solid #007BFF; margin-bottom: 10px; } Dá aquele ar profissional e chamativo, perfeito para prender os olhares!
- Destacando títulos com CSS
Resposta:
No HTML, apliquei class="titulo-blog" aos
Estilos situacionais com classes CSS Resposta: Identifiquei os parágrafos de notícias urgentes e adicionei class="urgente". No CSS, deixei o visual gritante para passar a urgência: .urgente { color: red; font-weight: bold; background-color: #ffcccc; padding: 5px; border-left: 5px solid red; } Impossível ignorar! Agora, quem olha, sabe que é coisa urgente mesmo.
Entendendo e aplicando o Reset CSS Resposta: Criei o styles.css com o reset básico:
- { margin: 0; padding: 0; box-sizing: border-box; /* Para não dar confusão com tamanhos */ } Isso deu aquele start clean no projeto. O layout agora está no controle, sem os estilos padrões dos navegadores bagunçando tudo.
- Inspecionando elementos e entendimento do modelo de caixa Resposta: Abri o DevTools e explorei o modelo de caixa de um elemento. Descobri que:
Margin adiciona espaço externo, como se fosse o "respiro" do elemento. Padding aumenta o espaço interno, deixando o conteúdo mais confortável. Border dá contornos e personalidade. Entender isso fez eu ver o HTML como uma estrutura mais clara – meio que o esqueleto da web, e o CSS dá aquele "carão" incrível. 6) Aplicando o modelo de caixa na prática Resposta: Escolhi um
no HTML e estilizei no CSS com tudo o que aprendi: p { margin: 20px; padding: 15px; border: 2px dashed #333; background-color: #f9f9f9; } Agora o
ficou como uma caixinha estilosa e com espaço suficiente para brilhar. Dá para ver margem, borda e conteúdo em perfeita harmonia.
Tudo isso me fez perceber como CSS e o Modelo de Caixa são a base de tudo. Sem eles, seria como tentar criar arte sem moldura. Não dá, né? Com essas ferramentas, dá para deixar qualquer projeto visualmente incrível e funcional.