Estilizando elementos com classes CSS Para aplicar estilos específicos a elementos usando classes CSS, siga estes passos:

HTML: Adicione a classe texto-destaque ao elemento

. html Copiar

Este é um parágrafo destacado.

CSS: Crie uma classe no arquivo CSS para alterar a cor do texto. css Copiar .texto-destaque { color: #3498db; /* Azul claro para destaque */ font-weight: bold; /* Opcional: Deixa o texto em negrito */ } 2) Destacando títulos com CSS Destaque os títulos das postagens no blog com a classe titulo-blog.

HTML: Aplique a classe titulo-blog aos elementos

. html Copiar

Título do Blog

CSS: Estilize a classe para alterar a cor e destacar os títulos. css Copiar .titulo-blog { color: #e74c3c; /* Vermelho vibrante */ text-transform: uppercase; /* Deixa o texto em maiúsculas */ border-bottom: 2px solid #e74c3c; /* Adiciona uma linha inferior */ } 3) Estilos situacionais com classes CSS Para destacar notícias urgentes, use a classe urgente.

HTML: Aplique a classe urgente a parágrafos com notícias urgentes. html Copiar

Esta é uma notícia urgente!

CSS: Faça o texto desses parágrafos em vermelho. css Copiar .urgente { color: red; /* Vermelho para chamar atenção */ font-weight: bold; } 4) Entendendo e aplicando o reset CSS Um reset CSS ajuda a remover os estilos padrão do navegador.

CSS: Use o seletor universal * para redefinir margens e preenchimentos. css Copiar

{ margin: 0; padding: 0; box-sizing: border-box; } Teste o efeito no layout para ver como ele se torna mais consistente entre navegadores.

Inspecionando elementos e entendimento do modelo de caixa Use as DevTools do navegador (F12 ou Ctrl + Shift + I) para inspecionar elementos:

Margin: Espaço externo ao redor do elemento. Border: Linha ao redor do conteúdo do elemento. Padding: Espaço interno entre o conteúdo e a borda do elemento. Content: Área onde o conteúdo é exibido. Veja como cada uma dessas propriedades afeta o layout e posicionamento do elemento.

Aplicando o modelo de caixa na prática Aplique o modelo de caixa em um elemento específico, como um parágrafo:

HTML: Escolha um elemento para modificar. html Copiar

Exemplo de parágrafo com modelo de caixa.

CSS: Ajuste as propriedades de margin, border, padding e content. css Copiar .box-model { margin: 20px; padding: 15px; border: 2px solid #333; width: 300px; background-color: #f9f9f9; }