Mesmo apesar do CSS3 estar chamando a atenção de muitos ultimamente, ainda não há muitos tutoriais sérios, específicos e diretos, resolvi escrever uma série de artigos voltados exclusivamente para CSS3, ensinando o passo-a-passo do seu funcionamento.
O que é CSS3?
Sei que você talvez tenha lido em diversos websites o significado da sigla mas é importante salientar isso, que CSS é Cascading Style Sheets, traduzindo Folhas de Estilo em Cascata, pois esse pode ser o primeiro artigo que alguns de vocês param para ler a respeito do assunto. E a propósito o 3 é referente a versão de desenvolvimento da linguagem.
Onde Fica o CSS3?
O CSS3 pode estar interno ou externo.
O interno fica dentro das Tag's <head> e </head>, e também é necessário usar as Tag's <style> e </style>;
Exemplo:
O interno fica dentro das Tag's <head> e </head>, e também é necessário usar as Tag's <style> e </style>;
Exemplo:
<!doctype html>
<html>
<head>
<title>Título</title>
<style>
p{color:red;}
</style>
</head>
<body>
<p>Um Parágrafo</p>
</body>
</html>
O externo fica em um arquivo separado do HTML5 e chamado com um link:
<!doctype html> <html> <head> <title>Título</title> <link rel="stylesheet" type="text/css" href="theme.css"> </head> <body> <p>Um Parágrafo</p> </body> </html>
Pra que Serve o CSS3?
Como você pode imaginar, o CSS3 cuida da parte de estilos do website, webapp, blog e tudo que aparece no seu monitor quando navega na internet. Enquanto a estrutura, ou seja o "esqueleto", é definido com o HTML5.
Saiba mais sobre HTML5 no artigo:
Criando um Site - #2 HTML
Criando um Site - #2 HTML
O CSS3 e Sua Estrutura
Vamos falar um pouco sobre o funcionamento e da estrutura da linguagem em si. O funcionamento da linguagem é bem simples, você seleciona um elemento com um Seletor, você define o que quer alterar ou criar com uma propriedade e um valor, que são separados por : (dois pontos).Ao final de cada valor de propriedade deve-se utilizar o ; (ponto e vírgula) para separar as propriedades.
O conjunto de uma pripriedade e seu valor, chama-se declaração. E deve estar sempre entre chaves - abre chaves { e fecha chaves }.
Exemplificando
Para facilitar a compreensão, nada melhor que um exemplo, então vamos a um simples exemplo:
p{
color:red;
}
Seletor: p - tag que define um parágrafo.
Propriedade: color - define a cor do elemento, que pode estar em hexadecimal, nomeado em inglês ou em rgba (combinação de Red Gree Blue e Alpha (opacidade)).
Valor: red - valor em inglês da propriedade color.
Propriedade: color - define a cor do elemento, que pode estar em hexadecimal, nomeado em inglês ou em rgba (combinação de Red Gree Blue e Alpha (opacidade)).
Valor: red - valor em inglês da propriedade color.