O CSS (Cascading Style Sheets) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como o HTML. O CSS3 (a mais nova versão) é capaz de construir animações tanto em 2 como em 3 dimensões, como efeitos de rotação, movimento e transição.
Quando um navegador lê uma folha de estilo, ele irá formatar o documento HTML de acordo com as informações na folha de estilo. Existem três maneiras de inserir uma folha de estilo:
- Arquivo externo (external)
Forma mais indicada. É possível controlar o estilo de todo site com apenas um arquivo. Basta incluir no cabeçalho (dentro da tag “head”) de todas as páginas a tag “link” indicando o local do arquivo, conforme segue:
<head> <link rel="stylesheet" type="text/css" href="estilo.css"> </head>
O arquivo não deve conter tags HTML, somente os seletores (detalhes mais a frente).
- No mesmo arquivo (internal)
O código CSS, escrito da mesma forma que no arquivo externo, pode vir dentro de tags “style”, que por sua vez ficam dentro das tags “head”.
- Em linha (inline)
Utilizado quando se deseja aplicar o estilo somente a um elemento pontualmente. O conteúdo CSS dever ser escrito no atributo “style” entre aspas:
<p style="color:blue;text-align: center;">Texto de exemplo</p>
O exemplo acima aplica os estilos “cor: azul” e “alinhamento de texto centralizado” para a tag “p” de parágrafo.
Caso um mesmo elemento tenha diferentes estilos, a hierarquia será, em ordem de prioridade mais alta: inline > folhas de estilo externas e internas > padrão do navegador. Assim, um estilo inline substitui o que estiver empregado em uma folha de estilo, por exemplo.
Um comentário em CSS começa com /* e termina com */, podendo ter múltiplas linhas dentro.
Sintaxe “seletor {propriedade:valor;}”
O conjunto de regras CSS consiste em um seletor e um bloco de declarações, que pode conter uma ou mais declarações terminadas por ponto e vírgula dentro de chaves. O seletor é o elemento HTML que o estilo será aplicado, sendo que as declarações contém o nome da propriedade e seu valor, separados por dois pontos. Por exemplo:
p {
color: blue;
text-align: center;
}
Nesse exemplo, todos os parágrafos “p” do documento que conter ou linkar esse código devem ter cor azul e estarem centralizados. Mas e se quisermos mudar somente um parágrafo em vez de todos? Então podemos usar outros seletores além desse que identifica somente pelo nome do elemento (tag) HTML.
O “id selector” é útil para utilizar o estilo somente para os elementos cuja id tenha o nome informado. Por exemplo, somente os parágrafos identificados por “texto” terão o estilo aplicado. Segue o código HTML:
<p id="texto">Texto de exemplo</p>
E o código CSS, onde o nome da id fica no logar da tag html, antecedido por uma hashtag:
#texto {
color: blue;
text-align: center;
}
O “class Selector” a princípio tem o mesmo efeito, só que a diferença é que pode ser aplicado para mais de um tipo de elemento HTML ao mesmo tempo. Veja como fica o código HTML:
<p class="texto">Texto de exemplo</p>
O código CSS continua o mesmo do exemplo anterior, sendo utilizado um ponto em vez da hashtag. Para todos os elementos (p, h1, etc) que tiverem essa classe, eles terão o mesmo estilo definido no CSS. No entanto, se quiser restringir o efeito somente aos parágrafos, basta incluir o nome do elemento HTML antes do ponto:
p.texto {
color: blue;
text-align: center;
}
Agrupando e encadeando seletores
Para usar duas ou mais classes em um mesmo elemento HTML, basta colocar o nome de todas separadas por espaço dentro do campo “class” da respectiva tag. Já para agrupar os seletores, isso deve ser feito no código CSS. Por exemplo, se os elementos p e h1 tiverem o mesmo estilo, é possível identificá-los como “p, h1” em vez de somente “p” no CSS, ou seja, basta separar os elementos por vírgula.
Caso deseje aplicar um estilo somente para um elemento dentro de outro, é possível encadear seletores. Por exemplo, se quiser que somente o link (identificado por “a”) mude para cor vermelha quando estiver dentro de um parágrafo, use a seguinte sintaxe:
p a {
color: red;
}
Outros encadeamentos mais complexos podem ser consultados na documentação do CSS3.
