O documento descreve Cascading Style Sheets (CSS), um padrão para estilizar elementos HTML mantido pelo W3C desde 1996. CSS permite separar a formatação visual da estrutura do conteúdo, facilitando a manutenção de páginas e maior flexibilidade na apresentação dos documentos em diferentes dispositivos.

2. • Cascading Style Sheets;
• Folhas de estilo em cascata;
• 1996 - Mantida pela World Wide Web Consortium (W3C);
• Padrão para a declaração de propriedades de exibição de elementos HTML;
• Altera a forma/maneira de como os objetos são exibidos;
• Separação do conteúdo (HTML) e formatação (CSS);

3. Com CSS Sem CSS

4. • Facilidade de manutenção:
- Pode-se alterar várias páginas com apenas um arquivo
• Maior gama de possibilidades de apresentação visual
- HTML possui propriedades mais restritas
• Maior flexibilidade na disponibilização dos documentos em outras mídias que não o
monitor:
- Locais de quebra de página na hora da impressão
- Leitura da página por sintetizadores de voz
• Maior flexibilidade na expansão das funcionalidades;
- Pode-se utilizar de novas opções do CSS sem necessidade de alteração dos arquivos HTML

5. • Ainda nenhum navegador suporta todas as especificações de style sheets definidas pelo
W3C e alguns implementam estilos de forma diferente.

7. • Zen Garden - (http://www.csszengarden.com/)
• Zen Garden - Under the sea! (http://www.csszengarden.com/213/page0/)
• Zen Garden - Oceanscape (http://www.csszengarden.com/210/page0/)

8. • Folha de estilo externa (3)
<link rel="stylesheet" type="text/css" href="estilo.css">

9. • Folha de estilo incorporada (2)
<style rel="stylesheet" type="text/css">
body {
background: #000 url(imagens/minhaimagem.gif);
}
</style>

10. • Folha de estilo inline (1)
<p style="color:#000; margin: 5px;">
Aqui um parágrafo de cor preta e com 5px nas 4 margens.
</p>

13. • Seletor(es): um dos mais poderosos aspectos CSS, permite que selecionemos
qualquer elemento na página. (p)
• Chaves ("{" e "}"): contém as declarações CSS.
• Declaração: cada declaração aplica um estilo específico para o elemento ou
elementos selecionados. Uma declaração é composta de:
• Propriedade: Sempre a propriedade é seguida de dois pontos ":". (color)
• Valor: Aplica a cor vermelha para a fonte em parágrafo. (red)

14. body {
background: #000;
color: #FFFFFF;
}
h1 {
color: #F00;
}

15. • Para possibilitar uma organização melhor da página e da seleção de elementos
por CSS, podemos utilizar classes e/ou ids para identificar tags.
• Uma id, como o nome diz, é uma identificação única: só pode ser utilizada
uma vez no documento inteiro. Normalmente é utilizada para identificar
elementos estruturais da página.
• Uma classe é reutilizável: pode se repetir na página e também combinar-se
com outras (podemos pôr mais de uma classe em um elemento).

16. • Para possibilitar uma organização melhor da página e da seleção de elementos
por CSS, podemos utilizar classes e/ou ids para identificar tags.
• Uma id, como o nome diz, é uma identificação única: só pode ser utilizada
uma vez no documento inteiro. Normalmente é utilizada para identificar
elementos estruturais da página.
• Uma classe é reutilizável: pode se repetir na página e também combinar-se
com outras (podemos pôr mais de uma classe em um elemento).

17. <div id="cabecalho">
<h1>Título</h1>
</div>
<div id="conteudo">
<p class="paragrafo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
gravida nec nunc sit amet consectetur.</p>
<p class="paragrafo destaque">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean gravida nec nunc sit amet consectetur.</p>
</div>
<div id="rodape">
<address>
Rua Qualquer, 2001 - SMOeste, SC - BR
</address>
</div>

18. • Seletor de tipo: utilizando este seletor, selecionamos todas as tags de um
mesmo tipo. Exemplo: a, p, h1
• Seletor de classe: utilizando este seletor, selecionamos os elementos com a
classe aplicada. Exemplo: .destaque seleciona todos os elementos com a
classe "destaque".
• Seletor de id: utilizando este seletor, selecionamos a tag com id especificada.
Exemplo: #cabecalho irá selecionar o elemento com a id "cabecalho".
• Seletor descendente: utilizando este seletor, podemos escolher um ou mais
elementos que estão dentro de outro. Exemplo: body div .paragrafo (body -> div
-> .paragrafo)

19. • CSS Zen Garden (http://www.csszengarden.com/)
• As vantagens das CSSs (http://www.pinceladasdaweb.com.br/blog/2006/05/13/as-
vantagens-das-css/)
• W3Schools (http://www.w3schools.com/css/)
• HTML E CSS NA PRÁTICA –
(http://guilhermemuller.com.br/pt/elearning/html_css_basico/índice)
• Globo.com - (http://www.globo.com)
• Maujor – (http://www.maujor.com)