CSS CASCADING STYLE SHEETS (FOLHA DE ESTILOS EM CASCATA)

(1)

CSS – CASCADING STYLE SHEETS (FOLHA DE

ESTILOS EM CASCATA

)

O QUE É CSS?

Ferramenta para construção do layout de websites;

Linguagem para estilos que define o layout de documentos HTML; Significa Cascading Style Sheets (Folhas de Estilos em Cascata);

Que tal você alterar o layout de um site sem ter que mexer na sua estrutura (conteúdo)?

QUAL A DIFERENÇA ENTRE CSS E HTML?

HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados. Em tempos passados quando um sujeito chamado Tim Berners Lee inventou a World Wide Web, a linguagem HTML era usada somente para estruturar textos. Um autor podia marcar seus textos definindo "isto é um cabeçalho " ou "isto é um parágrafo" usando tags HTML tais como <h1> e <p>.

À medida que a Web ganhava popularidade, os designers começavam a sentir a necessidade de encontrar meios de construir layout para os documentos online. Para suprir estas necessidades os fabricantes de navegadores (àquela época a Netscape e a Microsoft) inventaram novas tags HTML tais como, por exemplo a tag <font> que se diferenciava das tags originais do HTML pelo fato de destinar-se à layout — e não à

estrutura.

Isto adicionalmente teve o efeito de disvirtuar o emprego de tags inicialmente projetadas para estrutura como por exemplo a tag <table> que passaram a ser empregadas para layout. Muitas destas novas tags para layout como a tag <blink> eram suportadas somente por um determinado tipo de navegador. A frase "Você precisa do navegador X para visualizar esta página" tornou-se comum nos websites.

CSS foi inventada para solucionar esta situação, colocando à disposição dos web designers meios

sofisticados de projetar layouts suportados por todos os navegadores. E ao mesmo tempo a separação dos estilos de apresentação da marcação dos conteúdos torna a manutenção dos sites bem mais fácil.

O QUE SÃO FOLHAS DE ESTILOS?

Uma folha de estilos é um conjunto de regras que informa a um programa, responsável pela formatação de um documento, como organizar a página, como posicionar e expor o texto e, dependendo de onde é aplicada, como organizar uma coleção de documentos.

A maior parte dos programas de editoração eletrônica e processadores de texto modernos trabalham com folhas de estilos. O processo consiste em definir um rótulo (nome do estilo) para um determinado parágrafo e em seguida alterar os seus atributos. Todo parágrafo que for rotulado com aquele estilo passará a exibir as características definidas anteriormente. Qualquer alteração nos atributos de um estilo afetará todos os parágrafos que estiverem rotulados com ele.

Esta descrição, que se aplica a estilos em processadores de texto e programas de editoração eletrônica, também vale para a Web. Na Web, os "parágrafos" são blocos marcados por descritores HTML como <H1>,

(2)

<P>, etc. Para fazer com que todos os blocos de textos marcados com <H1> em um documento sejam exibidos em tamanho de 48 pontos, basta definir a regra:

H1 {font-size: 48pt}

dentro de uma "folha de estilos" aplicada ao documento.

A folha de estilos pode ser um arquivo de textos simples (alfabeto ISO-Latin1) com a extensão .css. Para vinculá-lo a uma página HTML, esta deve ter dentro do seu bloco <HEAD> ... </HEAD> o seguinte descritor:

PARA QUE SERVEM AS FOLHAS DE ESTILOS?

Separar apresentação da estrutura

Com isto é possível voltar a suportar browsers antigos que antes estavam condenados por não conseguirem ler a informação sem perdas. Com a informação toda armazenada no HTML (estrutura), a apresentação (estilo) seria uma camada a mais, alterando a disposição do texto, cores, etc. mas sem afetar a estrutura essencial da informação. Isto permite que uma página tenha vários estilos e use scripts (programas

embutidos) para decidir qual carregar (em função do browser e da plataforma). Isto é muito menos trabalho que fazer uma página para cada browser e plataforma, pois a atualização é feita apenas no HTML. Também, com isso, é possível ter uma folha de estilos especial somente para impressão, onde haveria informações de quebra de páginas, etc. (este recurso não faz parte da versão 1 do CSS).

Controle absoluto da aparência da página.

É algo que não se tem com o HTML. Pode-se usar tabelas, GIFs invisíveis de um pixel e mais uma dúzia de "macetes" mas não se consegue fazer o texto fluir suavemente em volta de uma imagem irregular, por exemplo. Além do mais, quanto mais sofisticada a técnica, mais difícil é de codificar e mais "sujo" fica o código, o que o torna mais sujeito a erros. Com CSS, pode-se colocar uma imagem em qualquer lugar da página (até fora dela), usando técnicas de posicionamento absoluto ou relativo. Pode-se escolher a posição exata da imagem de background e fazê-la combinar com algo no foreground. As dimensões e posições são exatas e dadas em unidades conhecidas no mundo da tipografia como pixels, pontos, paicas, milímetros. Páginas mais leves

Com folhas de estilo é possível criar muitas páginas com um layout sofisticado que antes só era possível usando imagens, tecnologias como Flash ou applets Java. Estas páginas eram sempre mais pesadas, pois precisavam carregar imagens, componentes, programas. Com CSS é possível definir texto de qualquer tamanho, posicioná-lo por cima de outros objetos, ao lado ou por cima de texto e conseguir efeitos sofisticados a um custo (banda de rede) baixo. É possível ainda importar fontes (que o usuário talvez não tenha).

Manutenção de um grande site

Uma folha de estilos serve para toda uma coleção de páginas, podendo ser usada para dar um estilo

consistente a todo o site. Sendo aplicada em separado da informação e estrutura, não precisará ser atualizada todas as vezes em que a informação for mudada. A página pode ser atualizada em um editor HTML ou

(3)

gerador de HTML simples, sem recursos de cor ou alinhamento, e ser formatada na hora em que for

carregada pelo browser. É possível também fazer o contrário: mudar o estilo sem alterar a informação, como ter uma página que sempre carrega com um estilo diferente.

O uso das folhas de estilo depende da boa estrutura do HTML. A linguagem CSS (é uma linguagem declarativa) trabalha com os elementos tratando-os como "objetos". Cada parágrafo <P>, cada <H1>, cada <IMG> é um objeto. Objetos podem ser agrupados de várias formas.

A cada objeto ou grupo de objetos podem ser atribuídas propriedades de estilo definidas em regras. Por exemplo, considere a seguinte regra: "todo objeto P da classe 'editorial' será azul, terá tamanho de 12 pontos, espaçamento duplo, alinhamento pela direita e usará a família de fontes Arial, ou, se esta não existir,

Helvetica, ou então a fonte sans-serif default do sistema". Um arquivo CSS com apenas a regra acima conteria o texto: P.editorial {color: 0000ff;

font-size: 12pt; line-height: 24pt; text-align: right;

font-family: arial, helvetica, sans-serif}

Se a folha de estilos acima for aplicada a uma página que possua parágrafos <P> rotulados com o nome "editorial" (atributo 'CLASS=editorial'), eles serão formatados de acordo com as propriedades especificadas se o browser suportar CSS. Se o browser não suportar CSS, a estrutura será mantida (embora a aparência não seja a ideal) e o usuário conseguirá ter acesso à informação estruturada, mesmo em um meio de visualização mais limitado.

Quando se usa CSS, são poucas as modificações necessárias no HTML. Não são necessários novos descritores ou extensões. No exemplo acima, teremos que incluir apenas um atributo a mais (o atributo CLASS, do HTML 4) classificando os parágrafos que fazem parte do nosso 'editorial' (parágrafos que tem uma função diferente dos demais).

A grande vantagem das folhas de estilo é a preservação da estrutura do HTML e um controle muito melhor do autor sobre a sua aparência na tela do usuário final.

COMO CRIAR ESTILOS?

CSS pode ser adicionado com o uso do atributo style;

Por exemplo, você pode definir o tipo e o tamanho da fonte em um parágrafo no slide a seguir: <p style=“font-size:20px;”>Este parágrafo em tamanho de fonte igual a 20 px</p>

<p style=“font-family:courier;”>Este parágrafo em fonte Courier</p>

<p style=“font-size:16px; font-family:cambria;”>Este parágrafo em tamanho de fonte Cambria e tamanho 16 px</p>

(4)

No exemplo acima usamos o atributo style para definir o tipo de fonte usado (com a propriedade family) e o tamanho da fonte (com a propriedade font

definimos tanto o tipo como o tamanho da fonte separado por um ponto e vírgula. Está parecendo que há uma grande quantidade de trabalho a executar

Uma das funcionalidades mais inteligentes das CSS é a possibilidade de controlar o layout de um arquivo central. Em lugar de se usar o atributo style em

layout de todos os textos em uma página:

No exemplo acima inserimos as CSS na seção head do documento, assim ela

fazer isto use a tag <style type="text/css"> que informa ao navegador que você está d exemplo, todos os cabeçalhos da página serão em fonte

fonte Courier tamanho 15. E, todos os textos dos parágrafos serão em fonte Times New Roman tamanho 8.

SINTAXE CSS

Uma regra CSS tem duas partes principais:

O seletor é normalmente o elemento HTML Cada declaração consiste de uma propriedade A propriedade é o atributo de estilo você Declarações CSS sempre termina com

No exemplo acima usamos o atributo style para definir o tipo de fonte usado (com a propriedade family) e o tamanho da fonte (com a propriedade font-size). Notar que no último parágrafo do exemplo definimos tanto o tipo como o tamanho da fonte separado por um ponto e vírgula.

Está parecendo que há uma grande quantidade de trabalho a executar

ma das funcionalidades mais inteligentes das CSS é a possibilidade de controlar o layout de um arquivo central. Em lugar de se usar o atributo style em cada tag, você pode dizer ao navegador como deve ser o

uma página:

mplo acima inserimos as CSS na seção head do documento, assim ela se aplica à página inteira. Para fazer isto use a tag <style type="text/css"> que informa ao navegador que você está d

exemplo, todos os cabeçalhos da página serão em fonte Arial e tamanho 30px. Todos os subtítulos serão em fonte Courier tamanho 15. E, todos os textos dos parágrafos serão em fonte Times New Roman tamanho 8.

principais: um seletor, e uma ou mais declarações:

HTML que deseja estilo. propriedade e um valor.

você deseja alterar. Cada propriedade tem um com um ponto e vírgula, e grupos de declaração

No exemplo acima usamos o atributo style para definir o tipo de fonte usado (com a propriedade font-size). Notar que no último parágrafo do exemplo ma das funcionalidades mais inteligentes das CSS é a possibilidade de controlar o layout de um arquivo

cada tag, você pode dizer ao navegador como deve ser o

se aplica à página inteira. Para fazer isto use a tag <style type="text/css"> que informa ao navegador que você está digitando CSS. No Arial e tamanho 30px. Todos os subtítulos serão em fonte Courier tamanho 15. E, todos os textos dos parágrafos serão em fonte Times New Roman tamanho 8.

declarações:

valor.

(5)

p {color: red; text-align: center;}

Suponha que desejamos uma cor de fundo vermelha para a página web: Usando HTML podemos fazer assim:

Com CSS o mesmo resultado será obtido assim:

body {background-color: #FF0000;}

Comentários CSS

Comentários são usadas para explicar seu código, e pode ajudá-lo quando você editar o código fonte em uma data posterior. Comentários são ignorados pelos navegadores.

Um comentário CSS começa com "/*", e termina com "*/", como este: / * Este é um comentário * /

p (

text-align: center;

/ * Este é outro comentário * / color: black;

font-family: arial; )

Aplicando CSS a um documento HTML

Você pode aplicar CSS a um documento de três maneiras distintas. Os três métodos de aplicação estão exemplificados a seguir. Recomendamos que você foque no terceiro método, ou seja o método externo.

Método 1: In-line (o atributo style)

Uma maneira de aplicar CSS é pelo uso do atributo style do HTML. Tomando como base o exemplo mostrado anteriormente a cor vermelha para o fundo da página pode ser aplicada conforme mostrado a seguir: <html> <head> <title>Exemplo</title> </head> <body style="background-color: #FF0000;">

(6)

<p>Esta é uma página com fundo vermelho</p> </body>

</html>

Método 2: Interno (a tag style)

Uma outra maneira de aplicar CSS e pelo uso da tag <style> do HTML. Como mostrado a seguir:

<html> <head> <title>Exemplo</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body>

<p>Esta é uma página com fundo vermelho</p> </body>

</html>

Método 3: Externo (link para uma folha de estilos)

O método recomendado é o de lincar para uma folha de estilos externa. Usaremos este método nos exemplos deste tutorial.

Uma folha de estilos externa é um simples arquivo de texto com a extensão .css. Tal como com qualquer outro tipo de arquivo você pode colocar uma folha de estilos tanto no servidor como no disco rígido. Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de style.css e está localizada no diretório style. Tal situação está mostrada a seguir:

O "truque" é criar um link no documento HTML (default.htm) para a folha de estilos (style.css). O link é criado em uma simples linha de código HTML como mostrado a seguir:

Notar que o caminho para a folha de estilos é indicado no atributo href.

Esta linha de código deve ser inserida na seção header do documento HTML, isto é, entre as tags <head> e </head>. Conforme mostrado abaixo:

<title>Meu documento</title>

(7)

<body> ...

Este link informa ao navegador para usar o arquivo CSS na renderização e apresentação do layout do documento HTML.

A coisa realmente inteligente disto é que vários documentos HTML podem lincar para uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo será capaz de controlar a apresentação de muitos documentos HTML.

Esta técnica pode economizar uma grande quantidade de trabalho. Se por exemplo, você quiser trocar a cor do fundo de um site com 100 páginas, a folha de estilos evita que você edite manualmente uma a uma as páginas para fazer a mudança nos 100 documentos HTML. Usando CSS a mudança se fará em uns poucos segundos trocando-se a cor em uma folha de estilos central.

Vamos praticar o que aprendemos.

Faça você mesmo

Abra o Notepad (ou qualquer outro editor de texto que queira usar) e crie dois arquivos — um arquivo HTML e um arquivo CSS — com os seguintes conteúdos:

default.htm

<title>Meu documento</title>

<body>

<h1>Minha primeira folha de estilos</h1> </body>

</html>

style.css

body {

(8)

Salve os dois arquivos no mesmo diretório. Lembre-se de salvar os arquivos com a extensão apropriada (".css" e ".htm")

Abra default.htm no seu navegador e veja uma página com o fundo vermelho. Parabéns! Você construiu sua primeira folha de estilos!

Identificando e agrupando elementos (classes e id)

Em alguns casos você deseja aplicar estilos a um elemento ou grupo de elementos em particular. Nesta lição veremos como usar class e id para estilizar elementos.

Como definir uma cor para um determinado cabeçalho, diferente da cor usada para os demais cabeçalhos do website? Como agrupar links em diferentes categorias e estilizar cada categoria diferentemente? Estas são algumas das questões que iremos responder nesta lição.

Agrupando elementos com uso de classe

Vamos supor que temos duas listas de links para diferentes tipos de uvas usadas na produção de vinho branco e de vinho tinto. O código HTML conforme mostrado abaixo:

<p>Uvas para vinho branco:</p> <ul>

<li><a href="ri.htm">Riesling</a></li> <li><a href="ch.htm">Chardonnay</a></li> <li><a href="pb.htm">Pinot Blanc</a></li> </ul>

<p>Uvas para vinho tinto:</p> <ul>

<li><a href="cs.htm">Cabernet Sauvignon</a></li> <li><a href="me.htm">Merlot</a></li>

<li><a href="pn.htm">Pinot Noir</a></li> </ul>

Queremos que os links para vinho branco sejam na cor amarela, para vinho tinto na cor vermelha e os demais links na página permaneçam na cor azul.

Para conseguir isto, dividimos os links em duas categorias. Isto é feito atribuindo uma classe para cada link, usando o atributo class.

Vamos especificar esta classe no exemplo a seguir:

<p>Uvas para vinho branco:</p> <ul>

<li><a href="ri.htm" class="whitewine">Riesling</a></li> <li><a href="ch.htm" class="whitewine">Chardonnay</a></li> <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li> </ul>

(9)

<p>Uvas para vinho tinto:</p> <ul>

<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li> <li><a href="me.htm" class="redwine">Merlot</a></li>

<li><a href="pn.htm" class="redwine">Pinot Noir</a></li> </ul>

Agora podemos definir propriedades específicas para links pertencentes as classes whitewine e redwine, respectivamente. a { color: blue; } a.whitewine { color: #FFBB00; } a.redwine { color: #800000; }

Como mostrado no exemplo acima, pode-se definir propriedades para estilização dos elementos pertencentes a uma determinada classe usando um .nomedaclasse na folha de estilos do documento.

Identificando um elemento com uso de id

Além de agrupar elementos podemos querer atribuir identificação a um único elemento. Isto é feito usando o atributo id.

O que há de especial no atributo id é que não poderá existir dois ou mais elementos com a mesma id, ou seja em um documento apenas um e somente um elemento poderá ter uma determinada id. Cada id é única. Para casos em que haja necessidade de mais de um elemento com a mesma identificação usamos o atributo

class. A seguir um exemplo de possível uso de id:

<h1>Capítulo 1</h1> ... <h2>Capítulo 1.1</h2> ... <h2>Capítulo 1.2</h2> ... <h1>Capítulo 2</h1> ... <h2>Capítulo 2.1</h2> ... <h3>Capítulo 2.1.2</h3> ...

O exemplo acima simula os cabeçalhos de um documento estruturado em capítulos e parágrafos. É comum atribuir uma id para cada capítulo como mostrado a seguir:

(10)

<h1 id="c1">Capítulo 1</h1> ... <h2 id="c1-1">Capítulo 1.1</h2> ... <h2 id="c1-2">Capítulo 1.2</h2> ... <h1 id="c2">Capítulo 2</h1> ... <h2 id="c2-1">CCapítulo 2.1</h2> ... <h3 id="c2-1-2">Capítulo 2.1.2</h3> ...

Vamos supor que o cabeçalho do capítulo 1.2 deva ser na cor vermelha. Isto pode ser feito conforme mostrado na folha de estilo a seguir:

#c1-2 {

color: red; }

Agrupando elementos (span e div)

Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id.

Nesta lição veremos com detalhes o uso dos elementos HTML <span> e <div> no que se refere a sua vital importância para as CSS.

• Agrupando com <span> • Agrupando com<div>

Agrupando com <span>

O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a partes específicas do texto no

seu documento.

Um exemplo deste uso é mostrado na citação abaixo de autoria de Benjamin Franklin:

<p>Dormir cedo e acordar cedo faz o homem saudável, rico e sábio.</p>

Vamos supor que queremos enfatizar na cor vermelha os benefícios apontados por Mr. Franklin pelo fato de não se passar o dia dormindo. Para isto marcamos os benefícios com <span>. A cada span atribuímos uma

class, e estilizamos na folha de estilos:

<p>Dormir cedo e acordar cedo faz o homem <span class="benefit">saudável</span>,

(11)

<span class="benefit">rico</span> e <span class="benefit">sábio</span>.</p> A folha de estilos: span.benefit { color:red; }

É claro que você pode usar id para estilizar o elemento <span>. Mas, como você deve estar lembrado, deverá usar uma única id para cada um os três elementos <span>, conforme foi explicado na lição anterior.

Agrupando com <div>

Enquanto <span> é usado dentro de um elemento nível de bloco como vimos no exemplo anterior, <div> é

usado para agrupar um ou mais elementos nível de bloco.

Diferenças à parte, o agrupamento com <div> funciona mais ou menos da mesma maneira. Vamos ver um

exemplo tomando duas listas de presidentes dos Estados Unidos agrupados segundo suas filiações políticas:

<div id="democrats"> <ul> <li>Franklin D. Roosevelt</li> <li>Harry S. Truman</li> <li>John F. Kennedy</li> <li>Lyndon B. Johnson</li> <li>Jimmy Carter</li> <li>Bill Clinton</li> </ul> </div> <div id="republicans"> <ul> <li>Dwight D. Eisenhower</li> <li>Richard Nixon</li> <li>Gerald Ford</li> <li>Ronald Reagan</li> <li>George Bush</li> <li>George W. Bush</li> </ul> </div>

E na folha de estilos, podemos agrupar a estilização da mesma maneira como fizemos no exemplo acima:

#democrats { background:blue; } #republicans { background:red; }

(12)