Medidas utilizadas
Na definição das várias propriedades das folhas de estilo, diversas medidas podem ser usadas, sendo que algumas são relativas e outras absolutas.
px - número de pixels. É relativo à resolução do monitor ou outro dispositivo onde a página será exibida. Exemplo: 100 pixels em uma tela com resolução de 640x480 resulta em um tamanho maior que os mesmos 100 pixels em uma tela com resolução de 800x600.
in - polegadas.
cm -centímetros
mm - milímetros
pt - pontos.
pc - paicas
em - pontos. Esta unidade é igual ao tamanho em pontos de uma fonte. No exemplo abaixo, ela se refere ao tamanho do "elemento pai":
p {font-size: 10pt}
b {font-size: 1.5em}
Neste caso, qualquer texto na tag inclusa numa tag <p> terá um tamanho de 15 pontos (1.5em x 10 pt)
Cores
Nas tags padrão HTML pode-se usar as cores declarando o seu nome: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, etc. ou através de seus códigos RGB em formato hexadecimal.
Além dessas notações que podem ser usadas para a CSS, outras notações estão disponíveis, as quais podem facilitar muito o trabalho do desenvolvedor.
Exemplos:
{color: #ff0000;} - representa FF para vermelho, 00 para verde e 00 para azul
{color: rgb (255,120,60);} - os valores vão de 0 a 255
{color: rgb(100%,15%,40%);} - representa 100% para vermelho, 15% de verde e 40% de azul.
Definindo o tipo de CSS
Você pode escolher como utilizará o CSS. Existem vários tipos como: seletores, classes, redefinir tags, seletores contextuais, seletores de links, etc.
Classes
Todos os elementos dentro do elemento body podem ser agrupados em classes, as quais podem ser ligadas à folha de estilo que aumentam o poder de controle sobre os elementos.
Imagine que em um primeiro parágrafo queira colocar o texto na cor vermelha, no segundo parágrafo verde e no terceiro cinza.
Exemplo:
<html>
<head>
<style type="text/css">
<!--
.primeiro {color:red;font-size: 10pt;}
.segundo {color:green;font-size: 12pt;}
.terceiro {color:gray;font-size: 14pt;}
-->
</style>
</head>
<body>
<p class=" primeiro">Primeiro parágrafo</p>
<p class=" segundo">Segundo parágrafo</p>
<p class=" terceiro">Terceiro parágrafo</p>
</body>
</html>
Exemplo de Classe
Classes Únicas
Em certas situações, apenas um item dentro código é de uma determinada classe (como o topo de um site, por exemplo) e para isso existem um identificação de classe única. A diferença para classe tradicional (declarada com o ".") é que enquanto a classe comum pode ser usada por diversas tags, a classe única só pode ser utilizada uma vez.
Imagine que em um layout exista um parágrafo que serve para identificar o preço de um produto (mostrado apenas uma vez na página) e esse preço é exibido em vermelho
Exemplo:
<html>
<head>
<style type="text/css">
<!--
#preço {color:red}
-->
</style>
</head>
<body>
<p>Notebook HP</p>
<p id="preço">R$ 3500,00</p>
</body>
</html>
Redefinindo Tags
Ao redefinir uma tag HTML em CSS, ela é automaticamente formatada pelos estilos definidos.
Imagine que em um documento html você tenha várias ocorrências da tag <p>, e quer que todos estes parágrafos fiquem com a mesma formatação. Então você redefine a tag <p>.
Exemplo:
<html>
<head>
<style type="text/css">
<!--
p {color:red;font-size: 30pt}
-->
</style>
</head>
<body>
<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
<p>Terceiro parágrafo</p>
</body>
</html>
Exemplo de tag redefinida
As declarações devem ser dadas da mais geral para a mais específica. As tags herdarão as propriedades da declaração geral, tendo como mudança a declaração específica.
Os estilos CSS podem ser combinados, para otimização do código, declarando vários atributos ao mesmo tempo para vários elementos.
Imagine que num determinado documento todo o texto é formatado com a fonte Arial, porém cada tag (h1, h2 e p) possuem uma cor e tamanhos específicos. Imagine ainda que exista um tipo de parágrafo especial que tem a cor diferente (porém ainda possui o valor semântico de um parágrafo comum). Para isso são utilizadas declarações de redefinição de tag e classe, como no exemplo a seguir:
<html>
<head>
<style type="text/css">
<!--
p, h1, h2 {font-family:Arial;}
p{color:black;}
h1{color:red;}
h2{color:blue;}
.destaque {color:red;}
-->
</style>
</head>
<body>
<h1>Css é fundamental</h1>
<p>Todo o texto pode ser formatado com CSS, sem perder a sua função original.</p>
<h2>A semântica é importante para o código</h2>
<p class="destaque">Cada tag tem a sua função específica</p>
<p>Os parágrafos possuem função diferente dos títulos, apesar de poderem dividir propriedades e atributos</p>
</body>
</html>
