Aviso: Para você que é iniciante e está dando seus primeiros passos, este artigo deve ser lido com calma. Não tenha pressa em aprender, alguns conceitos aqui dependem da sua máxima atenção.
No artigo anterior CSS Para Iniciantes I – Atributo style e Regras Básicas, aprendemos as primeiras regras de CSS e como usar o atributo style, agora é importante entender que não devemos confundir o atributo style com a tag style, embora o nome seja o mesmo, o uso é diferente.
O atributo sempre é usando dentro de tag HTML, como já vimos, se quisermos estilizar um parágrafo então teríamos isso; <p style="">, já a tag não vai dentro de nenhuma outra tag, ela é usada no cabeço do nosso documento HTML como veremos a seguir.
Neste novo artigo vamos aprender como organizá-las e a criar regras diferentes para elementos HTML semelhantes.
Neste artigo vamos aprender;
- Como usar a tag <style> em um documento HTML
- Usando a mesma regra CSS para elementos HTML diferentes
- Usando regras CSS diferentes para elementos HTML iguais.
- Conclusão
Como usar a tag <style> em um documento HTML
Para exemplificar vamos considerar dois botões,
Supondo que eu queira adicionar ao estilo destes botões as seguintes regras; fundo preto, fonte branca e quisesse também aumentar um pouco o tamanho do botão e remover a borda padrão que existe nele.
Existem duas regras de CSS novas a serem aprendidas aqui para obtermos o resultado desejado;
- Como aumentar o tamanho do botão
- Como remover a borda do botão
Estes dois estilos podem ser obtidas usando as regras de padding e border-width, aonde o padding é responsável por definir um espaçamento interno do elemento HTML e o border-width define a largura da borda. Ambas as regras são definidas em pixels, então temos o seguinte resultado;
<button style="background-color:black;
color: white;
padding: 10px; /* define o espaço interno do elemento */
border-width: 0px; /* define o tamanho da borda */
">
Quem Sou
</button>
Se você quiser usar a mesma regra para o botão ao lado, então naturalmente você irá copiar e colar o código, certo?
E é justamente aqui este artigo fica interessante. Se quisermos fazer com que o dois botões assumam as mesmas regras de CSS não é necessário copiá-las, podemos simplesmente criar uma regra de CSS dentro do cabeçalho (<head> </head>) no documento usando a tag <style> </style>.
Assista ao vídeo abaixo e entenda como usar;
style dentro de um documento HTML.Agora vamos entender o vídeo;
- Note que eu não copiei o código de estilização de um botão para o outro.
- Ao invés disso eu adicionei uma tag <style></style> abaixo da tag <title> do meu documento.
- Dentro desta tag eu escrevi;
<style>
button {
}
</style>
E o que isso significa? Significa que todas as tags<button>irão respeitar a regra que eu definir dentro do conjunto de chaves {}. - Seguindo o raciocínio, eu preciso agora definir qual será o estilo da tag
<button>e para isso eu usei o código CSS que eu já tinha pronto no primeiro botão. - Ao fazer isso note que o segundo botão automaticamente assumiu a mesma regra de CSS.
- Ao criar um terceiro botão note que ele também automaticamente assumiu a mesma regra, ou seja, todos os botões ficarão exatamente com o mesmo estilo, legal né?
- E por fim, não é necessário mais colocar o atributo
stylepara cada botão, podemos apagar este código.
Agora que você aprendeu este truque, note que você não precisará mais estilizar elemento por elemento para deixar suas páginas bonitas.
Usando a mesma regra CSS para elementos HTML diferentes
Agora vamos supor que você queira que todos os títulos da sua página (H1, H2 e H3 ) fiquem todos na fonte Verdana e o restante do documento na fonte Tahoma.
Já vimos no artigo anterior que é possível estilizar a tag <body>, seguindo o raciocínio desta aula de agora, podemos então criar algo como;
body { /* Todo o documento deverá ficar na fonte Tahoma */
font-family: Tahoma;
}
h1, h2 { /* Mas, Todos os títulos deverão ficar na fonte Verdana */
font-family: Verdana;
}
Note que e adicionei uma vírgula entre o h1 e h2, significa então que a mesma regra servirá para ambas as tags.
Usando regras CSS diferentes para elementos HTML iguais
Da mesma forma que podemos usar uma mesma regra para elementos HTML podemos também fazer ao contrário. Vamos usar como exemplo os botões.
Vamos supor que o terceiro botão deve ser diferente dos outros dois, ele deverá ter o fundo vermelho ao invés de preto.
Você pode resolver isso de duas formas diferentes;
- Acrescentar um atributo style apenas para o botão que deseja alterar, por exemplo;
- Criar um classe CSS dentro da tag <style>. E esta sem dúvida é a forma mais elegante e organizada, vamos entender melhor;
Como usar Classes CSS
As classes CSS é uma forma mais organizada de usarmos estilos em nossas páginas HTML, obviamente podemos resolver muita coisa usando apenas o atributo style como vimos na imagem acima.
Mas esta prática não é muito recomendada, isso dificulta a manutenção do seu site no futuro, você pode reaproveitar seu código com mais facilidade e pode inclusive impactar em questões de performance.
As classes CSS devem ser criadas dentro do tag <style>, junto com as outras regras que criamos nos exemplos acima, a diferença é que a classe pode ter qualquer nome e obrigatoriamente deve ter um ponto no início do nome. Exemplo;
Vamos criar uma classe CSS que deixará o nosso terceiro botão com o fundo vermelho, vamos chama esta classe de .botaoEspecial (lembre-se; nada de espaços em brancos e caracteres latinos).
.botaoEspecial {
background-color: red;
}Pronto! A nossa classe já está pronta. Agora precisamos aplicá-la ao nosso botão e fazemos isso usando o atributo class, ficando assim;
<button class="botaoEspecial">
Mais um botão estilizado…
</button>
Note que ao usar o nome da classe dentro do botão eu não coloquei o ponto, e nem devemos colocar.
Conclusão
Bem, vamos finalizar por aqui para evitarmos o excesso de informação, todos os exemplos usados neste artigo pode ser visto em ação clicando no botão abaixo aonde deixe alguns exemplos extras, bons estudos.
