1. O que é CSS – benefícios de utilização
O CSS formata a informação entregue pelo HTML. Essa informação pode ser qualquer coisa: imagem, texto, vídeo, áudio ou qualquer outro elemento criado. Essa formatação na maioria das vezes é visual, mas não necessariamente. Ou seja, CSS é um arquivo que contém especificações de como devem ser exibidos (estilizados) os elementos das páginas de um website, ou seja, tags HTML.Ao utilizar o CSS temos os seguintes benefícios:
- SEPARAÇÃO DAS CAMADAS DE DESENVOLVIMENTO: Enquanto a camada de conteúdo vai sendo codificada em HTML, a camada de apresentação, por sua vez, vai sendo feita de forma separada e totalmente independente, via CSS.
- WEBSITES MAIS LEVES: Pelo fato de se utilizar a separação em camadas (e, consequentemente, a apresentação das páginas ficar especificada em um arquivo à parte), a largura de banda fica reduzida, e isso acarreta em diminuição de custos.
Via CSS, é possível criar efeitos sofisticados/arrojados, anteriormente só alcançados com a utilização de tecnologias como Java e Javascript , que são mais “pesadas”.
- CONTROLE TOTAL SOBRE O LAYOUT: Quando se utiliza as folhas de estilo para a estruturação de layouts um menu pode ser deslocado de um lado para outro da página com a mesma rapidez que se altera a cor de todos seus textos: poucos minutos. Assim a manutenção é muito mais fácil.
- DIFERENTES ESTILOS PARA DIFERENTES MÍDIAS: Com as folhas de estilo é possível especificar estilos (aparências) diferenciados para diversos tipos de mídia, tais como o monitor, webTV, handheld, dispositivos braile, dentre outros. Além disso, utilizando determinadas técnicas CSS, pode-se fazer um site cujo layout seja adaptável a qualquer resolução de tela, terminando com o clássico problema de reprodução de páginas para diferentes resoluções e controle destas via scripts incorporados.
E mais: mesmo que alguém esteja navegando com a exibição de estilos e/ou imagens desativada, ou mesmo através de browsers com suporte a somente textos (tais como o Lynx), o conteúdo do site, na íntegra, pode ser visualizado.
2. Formas de utilização (externo, embutido, inline)
CSS Inline - Para se inserir um CSS inline, devemos colocar as declarações como se fossem valores da propriedade HTML “style”. Exemplo:
<p style="background-color: #36F; color: #FFF; width: 150px;">CSS!</p>Pôde-se perceber o motivo pelo qual esse tipo de CSS não é o mais usado: não há tanta flexibilidade para a realização de alterações, haja vista que a regra aplica-se somente ao elemento que recebeu a estilização.
CSS Embutido - Para esse tipo de CSS, as regras são colocadas no próprio documento, na tag “head”. Sua abrangência é tão-somente a própria página em que estão inseridas, ou seja, possui um grau mediano de flexibilidade, já que potenciais alterações aplicar-se-ão ao documento atual, e a nenhum outro. A sintaxe é a seguinte:
<head>
<style type=“text/css”> [regras CSS] </style>
</head>
CSS Externo - Esse é o tipo de inserção de CSS mais usado. Nessa modalidade, as regras CSS são escritas em um arquivo à parte do HTML e “chamados” para as estilizações.
Já que todos os documentos HTML de seu website estarão chamando a mesma folha de estilos, se precisar fazer alguma alteração em CSS, basta editar seu arquivo que, na mesma hora, as mudanças se aplicarão ao site por completo. Basta colocar o seguinte, na tag “head” dos documentos:
<link rel="stylesheet" type="text/css" href="nomeDaSuaFolhaDeEstilos.css" />
3. Tipos de Seletores (elemento HTML, Id ou Classe)
O seletor representa uma estrutura. Essa estrutura é usada como uma condição para determinar quais elementos de um grupo de elementos serão formatados.Segundo o que consta na documentação oficial do W3C “Folhas de Estilo CSS, nível 1”, de 17 de dezembro de 1996, revisada em 11 de janeiro de 1999, “uma regra é composta de duas partes principais: um selector (sic) [...] e uma declaração [...]. Por sua vez, esta declaração também possui duas partes: uma propriedade [...] e seu valor [...]”.
Ou seja, ao se codificar as folhas de estilo em cascata se está falando, tecnicamente, em manipulação de regras. E estas regras, por sua vez, são compostas por 3 partes: seletor, propriedade e valor.
Portanto, a sintaxe genérica de uma declaração CSS simples é a seguinte:
seletor { propriedade: valor; }
Na qual:
- seletor representa, em um primeiro momento, as tags (X)HTML, tais como parágrafos (p) e títulos primários (h1), e, em um segundo momento, divs, spans, ids, classes e pseudo-elementos.
- propriedade assumindo “parâmetros” que podem ser controlados através das folhas de estilo, ou, praticamente falando, o atributo do seletor que será modificado.
- valor como, nas palavras de Maurício Samy Silva, o Maujor, a “característica específica a ser assumida pela propriedade”.
Seletores ID e Classe
Há duas propriedades que elevam bastante as potencialidades das folhas de estilo: classe (class) e identificador (id). Elas permitem que você aproveite mais o que as folhas de estilo têm a oferecer.
Id - Os seletores ID são representados por uma tralha (#). Sua função é estilizar um elemento que tenha um nome em especial, e atente-se à expressão “um elemento”, pois não pode haver IDs com nomes iguais numa mesma página, ou seja, um ID deve ser exclusivo, individual, singular, ou quaisquer outras expressões redundantes que indiquem seu caráter único em um documento.
Veja um exemplo de seletor ID:
#paragrafoDestaque {
color: #F00;
font-size: 120%;
}
Portanto, em uma página (ou conjunto de páginas) que receberá(ão) esta estilização, poderá haver somente um “parágrafo destaque”, e seria algo como:
<p id=“paragrafoDestaque”>Este é um texto com destaque!</p>
Perceba que, na hora de especificar a qual ID um elemento pertence, não é necessário incluir a tralha (#), basta colocar seu nome.
Classe - Diferentemente dos IDs, as classes podem ser atribuídas a elementos diferentes na(s) página(s) de um website.
Pode-se, por exemplo, especificar que haverá dois tipos de parágrafo em seu website: um com a fonte de uma cor vermelha e família de fontes com serifa e outro com a fonte de uma cor verde e família de fontes sem serifa. Para facilitar o entendimento, vou apresentar um exemplo:
p.vermelho {
color: #F00;
font-family: serif;
}
p.verde {
color: #0F0;
font-family: sans-serif;
}
4. Sintaxe:
§ Comentário
Para facilitar o entendimento futuro de um código que está sendo escrito, é possível que se comente suas folhas de estilo, ou seja, você pode, nos pontos que achar conveniente, digitar textos, para si mesmo ou outras pessoas, com explicações, conceitos, ideia, planos de implementação futura, trechos de código que precisem ser isolados para testes, ou qualquer outra coisa que quiser.E, ao fazer isso, suas estilizações não serão prejudicadas, já que quando algum tipo de mídia interpreta um arquivo.css, “desconsidera” o que está comentado, quer dizer, não toma aquele trecho como se fosse alguma intenção de declarar uma regra, ou algo do tipo.
Os comentários, em CSS, vêm envoltos entre o par de caracteres barra-asterisco
(“/*”), asterisco-barra (“*/”).
Isto quer dizer que tudo aquilo que estiver entre este par de caracteres não será interpretado na hora da “montagem” das estilizações.
h2 { font-size: 120%; }
/* estou fazendo um comentário em meu arquivo CSS,
e ele pode, inclusive, ter quantas linhas eu quiser */
p { color: #FF0; }
§ Regras CSS
Agrupamento - Pode ser que você queira especificar as mesmas propriedades para seletores diferentes. Neste caso, é possível que você o faça declarando tão-somente uma regra, separando os seletores por vírgula (“,”). Se, por exemplo, quiser que os textos dos parágrafos e os títulos secundário e terciário sejam de uma cor vermelha, poderia usar o seguinte:
p, h2, h3 { color: #F00;}
Efeito Cascata - Quando temos um documento com várias regras CSS, acontece de determinadas regras terem um “peso” a mais, em detrimento de outras; serem mais específicas ou, como dizem alguns, mais importantes. E, no momento de interpretar um código CSS, o renderizador deve saber qual é o peso de cada declaração, e como as regras se inter-relacionam entre si.Há uma ordem pré-estabelecida para o “efeito cascata”, que é a seguinte:
1. Localizadas todas as regras aplicáveis ao seletor/propriedade, determina-se a especificidade de cada uma delas. A regra mais especifica entre as conflitantes será aplicada. Se não for encontrada uma (ou mais) regra aplicável ao elemento HTML, este herdará as propriedades de estilo de seu elemento pai. Não havendo elemento pai será aplicado o valor inicial default de estilo para aquele elemento.
2. Regras com declaração importante (!important) tem prioridade sobre aquelas sem a declaração. Se o autor e o usuário declaram regras conflitantes com !important, as do usuário têm prioridade sobre as do autor.
3. Regras com mesmo peso (sem !important) e conflitantes, declaradas pelo autor, têm prioridade sobre aquelas declaradas pelo usuário. Regras do usuário com maior especificidade que aquelas do autor, têm a prioridade. Regras com igual especificidade declaradas pelo autor têm prioridade sobre as do usuário. Regras do autor e do usuário têm prioridade sobre as regras default das aplicações do usuário (ex.: o browser)
4. Regras mais específicas têm a prioridade sobre as menos específicas
5. Entre regras de mesmo peso, têm prioridade aquelas declaradas por último na sequência das regras na folha de estilos.
6. Folhas de estilo inline, incorporadas, lincadas e importadas (@import), nesta ordem, têm do maior para o menor peso (estilos inline têm o maior peso). Entre várias folhas de estilo lincadas têm maior prioridade aquela importada por último (mais próxima da tag “head”). O mesmo ocorre entre as folhas importadas (@import).
Herança - Um outro significado para “cascata”, na significação de CSS (“folha de estilo em cascata”), seria herança.
Em CSS, os seletores são tratados como membros de uma família hierarquicamente organizada. Há pais, filhos, netos, irmãos, etc. Mais ou menos como na “vida real”, os descendentes herdam os atributos de seus ascendentes.
Observe o seguinte trecho de código HTML:
<body>
<p> Este é o nosso mundo, o que é demais nunca é o bastante, <br/> A primeira vez: sempre a última chance, <br/> Ninguém vê onde chegamos: <br/> <strong> Os assassinos estão livres, nós não estamos </strong> </p>
</body>
De acordo com a “metodologia CSS”, pelo fato de a tag strong estar “dentro” da tag p, ela é sua descendente direta, sua filha (ou filho, se preferir); por sua vez, a tag p é filha de body (conseqüentemente, strong é neta de body). Logo, temos a seguinte hierarquia nas gerações desta família: body -> p -> strong.
Pelo que foi exposto a pouco, se você especificar que body terá suas letras de uma cor azul e pertencer a uma família de fontes serifadas, automaticamente estará especificando que sua filha, p, e sua neta, strong, terão a mesma cor e serifa.
Os descendentes herdam os atributos de seus respectivos ascendentes.
5. Unidades
§ Relativas (px,
em, ex)
O formato de uma unidade de medida é constituído por um sinal positivo ou negativo opcional ('+' ou '-', sendo o padrão '+') seguido imediatamente por um número (com ou sem ponto decimal - não use vírgulas), com todo o conjunto imediatamente seguido por um identificador de unidade (um código com duas letras). Este identificador é opcional caso o número seja '0'.Existem dois tipos de unidades de comprimento: as relativas e as absolutas. As relativas especificam um número em relação a algum outro. O uso de unidades relativas facilita o redimensionamento da exibição do elemento quando ocorre mudança de mídia de exibição (por exemplo, de um monitor para uma impressora). O emprego de unidades percentuais e palavras-chave (por exemplo, 'x-large') oferecem vantagens similares.
Estas unidades relativas são suportadas:
px – tamanho em pixels (relativo ao dispositivo)
em – tamanho relativo à fonte utilizada no elemento ao qual está inserido
ex – correspondente à altura da fonte ‘x’
As unidades relativas 'em' e 'ex' tomam como base o tamanho da fonte do próprio elemento. A única exceção a esta regra é a propriedade 'font-size', onde estas unidades são relativas ao tamanho da fonte do elemento pai.
A unidade 'px', pixel, usada no exemplo acima, é função da resolução da área de exibição, normalmente um monitor.
O emprego de valores absolutos é conveniente apenas quando as dimensões físicas da mídia de saída são bem conhecidas. As seguintes unidades são aceitas:
in – polegadas (1 polegada = 2,54 cm)
cm – centímetros
mm – milímetros
pt – pontos (1pt = 1/72 polegadas)
pc – picas (1 pica = 12 pontos)
O formato de um valor percentual é composto de caractere de sinal (positivo ou negativo, '+' ou '-', sendo '+' o padrão) seguido imediatamente por um número (com ou sem ponto decimal, não use vírgulas) seguido, também imediatamente, pelo símbolo '%'.
Os valores percentuais sempre são relativos a algum outro valor, por exemplo, uma unidade de medida. Cada propriedade que permita o uso de unidades percentuais também define a qual valor esta unidade se refere. Muito frequentemente é o tamanho da fonte do próprio elemento:
P { line-height: 120% } /* 120% do tamanho da fonte do elemento */
