Uma breve histria do CSS

Formatar informao dos sites no algo novo. Por volta de 1970, no comeo da trajetria do SGML, j se falava em algo parecido. Quando o HTML foi criado, a inteno no era de forma alguma, formatar informao. medida que o HTML foi se popularizando e evoluindo, foram includas em suas qualidades, o domnio de controlar algumas aparncias para o documento. Isso fez com que a linguagem ficasse muito complexa, mais difcil para entender e manter. Outro problema era que os browsers tinham diferenas de implementaes, o que dificultava a visualizao dos sites, trazendo menos controle na navegao pela web. Por esse tempo apareceu o salvador da ptria. Hakon Wium Lie, vendo toda essa dificuldade, resolveu criar um jeito mais fcil para formatar a informao. Foi a que ele props a criao do CSS ou Cascading Style Sheets Esse era o ano de 1994. Aceitando o convite feito pelo prprio Hakon, Bert Bos que naquele tempo estava trabalhando em um browser chamado Argo comeou a trabalhar no projeto. Os dois ento, trabalharam juntamente no comeo do desenvolvimento do CSS. Em 1995 eles apresentaram sua proposta e finalmente, o W3C World Wide Web Consortium que estava acabando de nascer, se interessou pelo projeto e resolveu criar uma equipe, obviamente liderada por Hakon e Bert Bos. O resultado apareceu logo, em 1996, eles lanaram a recomendao oficial pelo W3C do CSS Level 1 (CSS 1). Dois anos depois, no dia 12 de Maio de 1998, eles lanaram a recomendao do CSS de nvel 2. A segunda verso das Folhas de Estilo para web. O nvel 3 do CSS ainda est em desenvolvimento. Mas, sabemos que as facilidades sero muitas, como por exemplo, criar bordas arredondadas sem o uso de imagens, ou definir duas imagens como background de um mesmo objeto. Do jeito que as coisas vo indo, o CSS 3 no demorar tanto quanto as outras. Os browsers esto mais compatveis, os desenvolvedores mais espertos. A comunidade em si est muito mais madura e rigorosa sobre esses assuntos. CSS tem uma sintaxe simples e utiliza uma srie de palavras em ingls para especificar os nomes de diferentes estilos de propriedade de uma pgina. Uma folha de estilo consiste de uma lista de regras. Cada regra ou conjunto de regras consiste de um ou mais seletores e um bloco de declarao. Uma declarao de bloco composta por uma lista de declaraes entre chaves. Cada declarao em si uma propriedade, dois pontos (:), um valor, ento um ponto e vrgula (;). Em CSS, seletores so usados para declarar s quais elementos de marcao um estilo se aplica, uma espcie de expresso correspondente. Os seletores podem ser aplicados a todos os elementos de um tipo especfico, ou apenas aqueles elementos que correspondam a um determinado atributo; elementos podem ser combinados, dependendo de como eles so colocados em relao uns aos outros no cdigo de marcao, ou como eles esto aninhados dentro do objeto de documento modelo. Pseudo-classe outra forma de especificao usada em CSS para identificar os elementos de marcao, e, em alguns casos, aes especficas de usurio para o qual um bloco de declarao especial se aplica. Um

exemplo frequentemente utilizada o :hover pseudo-classe que se aplica um estilo apenas quando o usurio 'aponta para' o elemento visvel, normalmente, mantendo o cursor do mouse sobre ele. Isto anexado a um seletor como em a:hover ou #elementid:hover. Outras pseudo-classes e pseudoelementos so, por exemplo, :first-line, :visited or :before. Uma pseudo-classe especial :lang(c), "c". Uma pseudo-classe seleciona elementos inteiros, tais como :link ou :visited, considerando que um pseudo-elemento faz uma seleo que pode ser constituda por elementos parciais, tais como :first-line ou :first-letter. Seletores podem ser combinados de outras formas tambm, especialmente em CSS 2.1, para alcanar uma maior especificidade e flexibilidade. Aqui est um exemplo que resume as regras acima:
selector [, selector2, ...][:pseudo-class] { property: value; [property2: value2; ...] } /* comment */

Seletores
Definio de estilo um conjunto de propriedades visuais para um elemento, o CSS define regras que fazem as definies de estilo casar com um elemento ou grupo de elemento, o documento pode conter um bloco de css em um elemento style ou usando o element link apontando para um arquivo externo que contenha o bloco CSS. Para uso com o CSS foi criado o atributo class que todo elemento pode conter. As regras de casamento para o css so chamadas de seletores, uma definio de estilo pode ser casada com um seletor ou um grupo de seletores separados por vrgula, um seletor pode casar um elemento por:

Elemento do tipo : element_name { style definition; } Elemento do tipo com a classe : element_name.class_name { style definition; } Todos os elementos com a classe : .class_name { style definition; } O elemento com o id : #id_of_element { style definition; } Casamento de um grupo : element_name_01, element_name_02, .class_name { style definition; }

Exemplos
p {text-align: right; color: #BA2;} p.minhaclasse01 { color:#ABC; } .minhaclasse02 { color:#CAD; } #iddomeuelemento { color:#ACD; } p.minhaclasse03 .minhaclasse04 { color:#ACD; }

Exemplos
/* comentrio em css, semelhante aos da linguagem c */ body

{ font-family: Arial, Verdana, sans-serif; background-color: #FFF; margin: 5px 10px; }

O cdigo acima define fonte padro Arial, caso no exista substitui por Verdana, caso no exista define qualquer fonte sans-serif. Define tambm a cor de fundo do corpo da pgina. Sua necessidade adveio do fato de o HTML (Hyper Text Markup Language) aos poucos ter deixado de ser usado apenas para criao de contedo na web e, portanto havia uma mistura de formatao e contedo textual dentro do cdigo de uma mesma pgina. Contudo, na criao de um grande portal, fica quase impossvel manter uma identidade visual, bem como a produtividade do desenvolvedor. nesse ponto que entra o CSS. As especificaes do CSS podem ser obtidas no site da W3C "World Wide Web Consortium", um consrcio de diversas empresas que buscam estabelecer padres para a Internet. importante notar que nenhum navegador suporta igualmente as definies do CSS. Desta forma, o web designer deve sempre testar suas folhas de estilo em navegadores de vrios fabricantes, e preferencialmente em mais de uma verso, para se certificar de que o que foi codificado realmente seja apresentado da forma desejada.
Exemplo de CSS aplicado em XML

Arquivo *.XML com ligao para uma folha de estilos em cascata:

<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="css.css"?> <schedule> <date>Tuesday 20 June</date> <programme> <starts>6:00</starts> <title>News</title> With Michael Smith and Fiona Tolstoy. Followed by Weather with Malcolm Stott. </programme> <programme> <starts>6:30</starts> <title>Regional news update</title> Local news for your area. </programme> <programme> <starts>7:00</starts> <title>Unlikely suspect</title> Whimsical romantic crime drama starring Janet Hawthorne and Percy Trumpp. </programme> </schedule>

O arquivo de exemplo XML renderizado no Mozilla Firefox.

O arquivo *.CSS que formata o XML anterior:

@media screen { schedule { display: block; margin: 10px; width: 300px; } date { display: block; padding: 0.3em; font: bold x-large sans-serif; color: white; background-color: #C6C; } programme { display: block; font: normal medium sans-serif; } programme > * { /* All children of programme elements */ font-weight: bold; font-size: large; } title { font-style: italic; } }