O CSS é utilizado para formatar tags do HTML e existem algumas formas de associar uma determinada formatação a uma tag, nessa postagem, vou postar três formas:
A primeira forma é definir um ID para a tag e então associar essa tag para em um CSS, como por exemplo:
HTML:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Um pouco sobre CSS</title> </head> <body> <a id="menu" href="#" title="Menu">Menu</a> </body> </html>
CSS:
#menu {
color: #006699;
text-decoration: none;
}
Com isso eu deixo a cor do meu link diferente da cor padrão e removo o sublinhado também padrão dos links.
Sobre o ID em CSS:
- O símbolo para utilizar no CSS é o # (sustenido, jogo da velha, sharp, etc…)
- Deve obrigatoriamente começar por uma letra
- Ao adicionar um ID para um elemento, nenhum outro elemento poderá ter o mesmo ID nessa página.
- Tem mais “força” que formatações aplicadas através de uma classe e pode sobrescrever formatações da classe.
- É sensitivo, ou seja: Menu é diferente de menu que também é diferente de MENU
OBS: O fato de ele ser sensitivo não significa que você pode ter mais de uma tag com o mesmo ID, mesmo a tag possuindo a diferença de escrita.
A classe funciona diferente do ID, pois permite que mais de uma tag possa receber a mesma formatação. Vamos ao exemplo:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Um pouco sobre CSS</title>
</head>
<body>
<a class="menus" href="#" title="Menu">Menu</a><br />
<a class="menus" href="#" title="Menu">Menu</a><br />
<a class="menus" href="#" title="Menu">Menu</a><br />
<a class="menus" href="#" title="Menu">Menu</a>
</body>
</html>
CSS:
.menus {
color: #006699;
text-decoration: none;
}
Dessa forma, todos as tags que receberem a classe menu irão ficar com as mesmas formatações.
Sobre a Classe em CSS:
- O símbolo para utilizar a classe é o . (ponto)
- Deve obrigatoriamente começar por uma letra
- Também é sensitivo
Por último o CSS INLINE, esse tipo de aplicação não é recomendado (exceto em raros casos), pois é o CSS que você escreve no próprio HTML, como mostrado no exemplo abaixo:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Um pouco sobre CSS</title> </head> <body> <a href="#" style="color: #006699; text-decoration: none;" title="Menu">Menu</a> </body> </html>
Sobre o CSS INLIE:
- Tem mais força que CSS ID e a Classe e pode sobrescrever ambos*
* Desde que não tenha um atributo com a declaração: !important, uma vez que essa declaração passa a dar mais força sobrescrevendo qualquer outro CSS (até mesmo outro !important).
Até a próxima =D
