Introdução
No post anterior, falamos sobre os atributos HTML e como eles podem tornar seu código mais poderoso. Se você ainda não conferiu, dê uma olhadinha aqui. Agora, vamos dar o próximo passo e aprender como estilizar suas páginas HTML usando CSS. Hoje, focaremos nos atributos class e id, que são fundamentais para aplicar estilos específicos aos seus elementos. Vamos começar?
Passo 1: Criando um Novo Arquivo HTML
Para acompanhar este tutorial, vamos criar um novo arquivo HTML. Se você está apenas começando, recomendo que dê uma olhada no nosso post sobre como criar um arquivo HTML básico. Aqui está um exemplo de código HTML que você pode usar como base.
HTML Inicial:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu Primeiro Estilo CSS</title>
</head>
<body>
<h1>Meu Primeiro Estilo com CSS</h1>
<p>Este é um parágrafo de exemplo para aprendermos sobre CSS.</p>
<p>CSS é incrível porque nos permite personalizar nossas páginas HTML!</p>
<a href="https://vivendodeprogramacao.com.br/como-criar-arquivo-html-basico">Leia mais sobre HTML básico</a>
</body>
</html>
Orientações:
Copie o código acima e cole em um novo arquivo no seu editor de texto.
Salve o arquivo com o nome meu_primeiro_estilo.html ou escolha um de sua preferencia com a extensão .html.
Abra o arquivo no seu navegador favorito para ver como ele aparece.
Não se esqueça de salvar o arquivo e recarregar a página no navegador após cada mudança para ver como ficou.
Passo 2: Adicionando Estilos CSS no <head>
Vamos adicionar um pouco de estilo ao nosso HTML usando CSS. Para este exemplo, colocaremos o CSS diretamente dentro da tag <head>. Atenção: Esta prática é apenas para aprendizado! Em breve, veremos a forma correta de separar CSS do HTML.
Adicione o seguinte bloco de <style> dentro da tag <head> abaixo da tag <title>:
<style>
body {
background-color: #f0f8ff; /* Cor de fundo da página */
}
h1 {
color: #2e8b57; /* Cor do texto do título */
font-size: 2.5em; /* Tamanho da fonte do título */
}
</style>Não se preocupe com os formatos aplicados, é importante entender a relação do formato aplicado com o elemento que recebe esse formato.
Passo 3: Usando o Atributo class
Agora, vamos aplicar estilos usando o atributo class. O atributo class permite que você aplique o mesmo estilo a vários elementos.
Atualize o HTML:
No arquivo HTML, adicione o atributo class="texto-formatado" aos parágrafos que deseja estilizar, assim:
<p class="texto-formatado">Este é um parágrafo de exemplo para aprendermos sobre CSS.</p>
<p class="texto-formatado">CSS é incrível porque nos permite personalizar nossas páginas HTML!</p>
Adicione o Estilo no <style>:
No bloco <style> dentro do <head>, adicione o seguinte CSS para estilizar todos os elementos com a classe .texto-formatado:
.texto-formatado {
color: #4682b4; /* Cor do texto dos parágrafos */
font-size: 1.2em; /* Tamanho da fonte dos parágrafos */
}Dica: Agora, quando você salvar e atualizar a página no navegador, verá que ambos os parágrafos têm a mesma cor e tamanho de fonte!
Passo 4: Usando o Atributo id
O atributo id é usado para aplicar um estilo específico a um único elemento. Vamos aplicá-lo a um link no nosso HTML.
Atualize o HTML:
Altere o link adicionando o atributo id="link-estilo":
<a id="link-estilo" href="https://vivendodeprogramacao.com.br/como-criar-arquivo-html-basico">Leia mais sobre HTML básico</a>
Adicione o Estilo no <style>:
Adicione o seguinte CSS ao bloco <style>:
#link-estilo {
color: #ff4500; /* Cor do link */
text-decoration: none; /* Remove o sublinhado do link */
}
Teste: Salve e atualize o navegador para ver como o link mudou!
Conclusão
Agora você já sabe como usar class e id para aplicar estilos CSS aos seus elementos HTML. Isso é só o começo da jornada para se tornar um mestre do design web. Continue praticando e experimentando novas combinações de estilos.
Ficou com alguma dúvida? Confira as perguntas e respostas mais frequentes sobre como usar os atributos class e id para formatar elementos html.
Pergunta: O que são atributos class e id no HTML?
Resposta: Os atributos class e id são utilizados para adicionar estilos CSS a elementos HTML. O atributo class permite aplicar o mesmo estilo a vários elementos, enquanto o id é único e se aplica a apenas um elemento.
Pergunta: Quando devo usar class e quando devo usar id? Resposta: Use class quando quiser aplicar o mesmo estilo a vários elementos e id quando precisar estilizar um elemento específico de forma única.
Pergunta: Por que é considerado uma má prática colocar o CSS dentro da tag <head> do HTML? Resposta: Colocar o CSS dentro da tag <head> é uma má prática porque dificulta a manutenção e a organização do código. O ideal é manter o CSS em arquivos separados para facilitar a leitura e o gerenciamento do código.
Pergunta: Como posso aplicar estilos diferentes a elementos usando o atributo class?
Resposta: Para aplicar estilos diferentes, você pode usar diferentes nomes de classes no atributo class e definir os estilos correspondentes no arquivo CSS. Por exemplo, <p class="estilo1"> e <p class="estilo2"> aplicarão estilos diferentes aos elementos <p>.
Pergunta: Posso usar o mesmo nome de id para vários elementos?
Resposta: Não, o nome de id deve ser único dentro de um documento HTML. Usar o mesmo id para vários elementos pode causar erros e problemas de acessibilidade.
Pergunta: O que acontece se eu não definir um id ou class para um elemento?
Resposta: Se você não definir um id ou class, o elemento não terá estilos específicos aplicados a ele através desses atributos. Ele apenas seguirá o estilo padrão do navegador ou qualquer estilo aplicado a ele através de outras seleções CSS.
Pergunta: Posso usar múltiplas classes em um único elemento?
Resposta: Sim, você pode usar múltiplas classes em um elemento HTML, separando cada nome de classe por um espaço. Por exemplo, <div class="classe1 classe2">.
Pergunta: Qual é a diferença entre o atributo id e class em termos de especificidade do CSS?
Resposta: O atributo id tem maior especificidade que o atributo class. Isso significa que, se ambos os atributos são usados no mesmo elemento com estilos diferentes, o estilo definido pelo id terá precedência sobre o estilo definido pela class.
Pergunta: Por que o meu CSS não está aplicando os estilos ao meu elemento HTML?
Resposta: Existem várias razões possíveis: talvez o seletor CSS esteja incorreto, o nome da class ou id não corresponda ao HTML, o arquivo CSS não esteja sendo referenciado corretamente, ou um estilo com maior especificidade esteja sobrepondo o seu.
Pergunta: Como posso garantir que minhas mudanças de CSS estão refletindo corretamente no navegador?
Resposta: Para garantir que suas mudanças de CSS estão refletindo corretamente, certifique-se de salvar todos os arquivos, limpar o cache do navegador, e recarregar a página. Você também pode usar ferramentas de desenvolvedor do navegador para inspecionar elementos e ver quais estilos estão sendo aplicados.
Espero que tenha gostado!
Até a próxima, e lembre-se: o céu é o limite... e o café é essencial! ☕