Css cascading style sheet

Apresentação de CSS criada para ministrar em uma aula para crianças e adolescentes entre 8 e 18 anos.

1. CSS
Cascading Style Sheet

2. CSS
é a abreviatura para
Cascading Style Sheets.
— Folha de Estilos em
Cascata

3. é uma "folha de estilo" composta por
“camadas” e utilizada para definir a
apresentação (aparência) em páginas
da internet

4. O que eu posso fazer com CSS?

5. Sendo uma linguagem para estilos que
define o layout de documentos HTML, é
possível com CSS controlar fontes,
cores, margens, linhas, alturas, larguras,
imagens de fundo, posicionamento e
muito mais.

6. Qual é a diferença entre CSS e HTML?

7. HTML
é usado para
estruturar conteúdos.

8. CSS
é usado para formatar
conteúdos
estruturados.

10. Por que o CSS foi criado?

11. Com a evolução dos recursos de programação
as páginas da internet estavam adotando cada
vez mais estilos e variações para deixá-las mais
elegantes e atrativas para os usuários. Com isto,
foram criadas novas tags e atributos de estilo
para o HTML e em resumo ele passou a exercer
tanto a função de estruturar o conteúdo quanto
de estiliza-lo.

12. Entretanto, isto começou a
trazer um problema para
os desenvolvedores, pois
não havia uma forma de
definir, por exemplo, um
padrão para todos os
cabeçalhos ou conteúdos
em diversas páginas.

13. A partir destas complicações, nasceu o CSS.
Primariamente, foi desenvolvido para habilitar
a separação do conteúdo e formato de um
documento (na linguagem de formatação
utilizada) de sua apresentação, incluindo
elementos como cores, formatos de fontes e
layout.

14. Esta separação proporcionou
uma maior flexibilidade e
controle na especificação de
como as características
serão exibidas, bem como
permitindo que as mesmas
marcações de uma página
sejam apresentadas em
diferentes estilos

15. Como funciona CSS?

16. A regra CSS e
sua sintaxe
Uma regra CSS é uma
declaração que segue uma
sintaxe própria e que define
como será aplicado estilo a um
ou mais elementos HTML. Um
conjunto de regras CSS formam
uma Folha de Estilos.

17. Uma regra CSS, na sua forma mais elementar,
compõe-se de três partes: um seletor, uma
propriedade e um valor e tem a sintaxe conforme
mostrado abaixo:

seletor { propriedade: valor; }

18. seletor { propriedade: valor; }
genericamente, é o
elemento HTML
identificado por sua tag,
ou por uma classe, ou por
uma ID, ou etc., e para o
qual a regra será válida
(por exemplo: <p>, <h1>,
<form>, .minhaclasse,
etc...);
é o atributo do elemento
HTML ao qual será
aplicada a regra (por
exemplo: font, color,
background, etc...).
é a característica
específica a ser
assumida pela
propriedade (por
exemplo: letra tipo arial,
cor azul, fundo verde,
etc...)

19. Na sintaxe de uma regra CSS, escreve-se o
seletor e a seguir a propriedade e valor
separados por dois pontos e entre chaves { }. O
ponto-e-vírgula é facultativo no caso de
propriedade única e também após a
declaração da última propriedade quando
houver mais de uma.

20. No entanto é de boa técnica usar-
se sempre o ponto-e-vírgula após
cada regra para uma propriedade.

21. Para maior legibilidade das
folhas de estilo, é de boa
prática usar linhas
distintas para escrever
cada uma das declarações
— propriedade e seu valor
—, como mostrado a
seguir.

22. Agrupamento de Seletores
Uma regra CSS quando válida
para vários seletores, estes
podem ser agrupados. Separe
cada seletor com uma vírgula. No
exemplo abaixo agrupamos todos
os elementos cabeçalho. A cor de
todos os cabeçalhos será verde.

23. Inserindo CSS
Existe 3 métodos que
podemos usar para inserir
estilos CSS em uma
página.

24. Método 1: Atributo style
Utilizando o atributo style, podemos aplicar estilos a um
elemento específico. Exemplo:
Este é o método que deve ser menos utilizado, pois mistura o
código CSS com o HTML e dificulta a manutenção do site e
por ir contra a divisão de um página em camadas.

25. Método 2: TAG style
Com este método, aplicamos estilos apenas na página onde
o elemento está inserido. Para isso, utiliza-se a tag style.
Exemplo:
Todos os elementos style devem ficar dentro do elemento
head de uma página. Os estilos em uma tag style tem
precedência sobre os estilos em um arquivo externo.

26. Método 3: Arquivo externo CSS
Este é o método que apresenta maior versatilidade. Um
arquivo externo CSS pode ser ligado a quantas páginas
desejarmos, desta forma deixando a manutenção de um site
muito mais fácil (apenas um arquivo CSS pode controlar o
visual de um site inteiro). Para este método, utilizamos o
elemento link, da seguinte forma:

27. A tag link é uma tag que auto-fecha, assim como br e
meta. O atributo href indica o endereço do arquivo
CSS (hiper-referência), neste exemplo um arquivo
chamado "arquivo.css" dentro de uma pasta "css". O
atributo rel determina a relação deste "link" com a
página, aqui sendo stylesheet ou folha de estilos. Se
estivéssemos utilizando a sintaxe XHTML, também é
necessário o atributo type com o valor text/css.

28. Classes e IDs
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.

29. 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.

30. 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).

31. Ao escolher nomes para classes não use nomes
que lembrem a apresentação. Prefira nomes que
lembrem a estrutura. Para o exemplo mostrado
nomear as classes .cor-preta e .cor-azul é uma
péssima escolha. Se no futuro você resolver
alterar a cor dos elementos azuis para verde vai
ficar com uma regra CSS sem sentido.

32. Você pode inserir comentários nas CSS para explicar seu
código, e principalmente ajudá-lo a relembrar de como você
estruturou e qual a finalidade de partes importantes do
código. O comentário introduzido no código, será ignorado
pelo navegador. Um comentário nas CSS começa com o
"/*", e termina com " */". Veja o exemplo abaixo:

33. Divs e Spans
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.

34. Os elementos div e span foram criados com o HTML 4 com
a finalidade de fornecer um mecanismo genérico para
agrupar e prover estrutura aos documentos. O elemento div
é um container nível de bloco e span é um elemento inline.
Uma id e/ou class é em geral usada para fornecer uma
identidade a uma div ou span com o propósito de fornecer
uma referência para estilização por CSS ou captura por um
script.

35. 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.

36. Enquanto <span> é usado
dentro de um elemento nível
de bloco, <div> é usado para
agrupar um ou mais
elementos nível de bloco.

37. Conclusão

Como tudo na vida, aprender bem HTML e CSS vem de
prática, ou seja, quanto mais praticar, melhor você vai
ficando e ganhando conhecimentos sobre as linguagens.
Há vários sites e tutoriais que podem auxiliar e te ajudar
com exemplos e dicas, tudo depende de você.

Então agora é mãos na massa e praticar! =)

38. Bibliografia e referências

Tecmundo - O que é CSS?
HTML.net - Tutorial CSS
Maujor - A regra CSS e sua sintaxe, Div Mania
HTML e CSS na prática - Inserindo CSS, Sintaxe e Seletores CSS