Conceito de CSS
O CSS (Cascading Syle Sheets) ou folhas de estilos em cascata, em português, é uma linguagem de folhas de estilo utilizada para a formatação de documentos no formato HTML ou XML.
As duas principais vantagens da utilização de ficheiros CSS são a separação dos ficheiros de estrutura/conteúdo (HTML e XML) dos de formatação (CSS); e a possibilidade de alterar a formatação de elementos repetidos na mesma página ou presentes em páginas diferentes através de um único procedimento. A primeira vantagem acima mencionada permite modificar a formatação de determinada página(s) ou documento(s) sem alterar o ficheiro da estrutura /conteúdo. A associação do CSS ao ficheiro de estrutura é efetuada através da inserção de uma ligação que possui o nome do ficheiro CSS. Apesar de ser recomendável que as sintaxes CSS estejam inseridas apenas nos ficheiros CSS, é usual encontrar-se algumas nos próprios ficheiros de estrutura/conteúdo.
A interpretação do CSS é variável de acordo com os navegadores (browsers) utilizados e as suas versões. Ou seja, ainda que pequenas, existem divergências quanto à formatação proveniente de um ficheiro CSS de acordo com o browser utilizado e a sua versão: por exemplo, o espaçamento entre dois objetos, no Internet Explorer, pode variar de acordo com a versão utilizada, como também é provável que este difere se estivermos a visualizar um documento com o Google Chrome.
Evolução do CSS
Contrariamente ao que acontece com os softwares, a evolução do CSS não é desenvolvida em novas versões. O CSS é sim realizado por níveis, sendo que os mais recentes incluem sempre os mais antigos, sendo compatíveis entre si. Ou seja, o CSS1 é um subconjunto do CSS2, e o CSS2, um subconjunto do nível 3 (CSS3), e assim sucessivamente.
O CSS1 foi publicado em dezembro de 1996 e definia cerca de 50 propriedades de formatação relativas sobretudo à tipografia: tipo de letra, cores, tamanho, grossura, espaçamentos, marcadores de listagens e contornos. O primeiro CSS oferecia muitas limitações para os designers web principalmente em termos de posicionamento de objetos.
Em 1998 é publicado o segundo nível do CSS, CSS 2, o qual tentou resolver algumas lacunas do nível anterior através da apresentação de 70 propriedades de formatação suplementares, das quais se destacam as novas sintaxes de posicionamento e a possibilidade de download de tipos de letras específicos. De notar, que este nível encontrou alguns obstáculos devido à sua incompatibilidade com alguns navegadores, tendo sido aperfeiçoada através do CSS 2.1.
O desenvolvimento do CSS 3 surgiu, paralelamente ao CSS 2.1, em 1999. O CSS3 foi desenvolvido por módulos para facilitar a sua atualização. Em 2008, o W3C – comunidade internacional World Wide Consortium – considerou ambos os níveis inacabados.
O CSS4 surge em 2010, sendo desenvolvido em simultâneo com o CSS3.
Vantagens da utilização de CSS
- Estrutura de um documento e a sua formatação podem ser geridos em ficheiros separados ;
- A conceção de um documento é realizada numa fase inicial com ausência dos pormenores estéticos o que permite uma maior eficácia e eficiência;
- O mesmo documento pode permitir a escolha entre diferentes ficheiros CSS de acordo com a finalidade de utilização: caso o ficheiro seja para impressão ou para visualização no monitor;
- Simplificação e melhor organização do código HTML;
- Uniformização de formatação: os documentos que remetem para os mesmos ficheiros CSS possuem a mesma formatação.
Definição do estilo de apresentação de acordo com o recetor
O nível 2.1 do CSS permite distinguir os diferentes médias de destino, ajustando-lhe assim o tipo de formatação mais adequada:
- all: todo o tipo de media ;
- screen: para monitores de PC ;
- print: para a impressão em papel ;
- handheld: para monitores de pequenas dimensões;
- projection: para documentos projetados ;
- tv: quando o documento é apresentado através de um suporte do tipo televisão;
Sintax
O CSS possui uma sintaxe simples e recorre a palavras em inglês para a definição dos estilos.
Uma style sheet detém um conjunto de regras, em que cada uma é por sua vez, composta por seletores e declarações. Cada declaração define uma propriedade, sendo composta pela seguinte sintaxe: propriedade: valor;. A título de exemplo: color: red;.
As declarações podem ser associadas a diferentes elementos (seletores), caso se pretenda a mesma formatação. No caso abaixo, o H2 (seletor nº1) está formatado a vermelho (declaração nº 1) e com uma margem de 10 pixéis (declaração nº 2); e sempre que se passar com o cursor em cima de um link (seletor nº 2), ele ficará também a vermelho (declaração nº1) e com um margem de 10 pixéis (declaração nº2). Os seletores quando combinados devem ser separados de uma vírgula.
- h2, a:hover { color: red; margin: 10px}
Existem ainda class (.) e id (#), os quais permitem identificar determinados elementos e atribuir-lhes uma formatação através das respetivas declarações. As chamadas pseudo-classes consistem num conjunto de ações padronizadas, nomeadamente, o hover (acima referido), first-line, visited e before.
