Este documento discute três métodos para aplicar CSS a documentos HTML: inline, incorporado e externo. O método inline adiciona estilos diretamente aos elementos no HTML, o que dificulta a manutenção. O método incorporado usa tags <style> no cabeçalho para definir os estilos. O método externo armazena os estilos em um arquivo CSS separado e o vincula ao HTML via tag <link>, o que é mais organizado para projetos maiores.

1. Utilização Inline,
Incorporado e Externo –
CSS
Style Sheet
Professor: Jolvani
Aula 03

2. Utilização Inline, Incorporado e Externo - CSS
 Olá, lembrem-se que em CSS existem seletores, declaração
formado pelas propriedades e valores, regras, conceitos estes
que devem ser entendidos da aula passada...
 Nesta aula vamos aprender a vincular folhas de estilos a
documentos xhtml.
 Então vamos criar nossa aula 03... Aula03.html

3. Utilização Inline, Incorporado e Externo - CSS
 Vamos eliminar alguns marcadores da aula passada reduzindo para a
tag <p>.
 Primeiro, podemos usar css de três formas diferentes: No próprio
documento html como é o caso da aula02 e aula03, podendo ser
aplicadas direto na tag (<p style=“color:#FF0000”>) ou com style
dentro da tag head, contendo todas as marcações, e por fim em um
documento aparte, formato .css...
 Então, temos marcações inline,
 Esse tipo de aplicação dificulta a manutenção dos estilos nos
elementos (não aconselhável) isso tira o poder do CSS que possui o
controle centralizado da apresentação.
 Outras formas são as formas incorporadas era o modo como usávamos
anteriormente, e sua vantagem é...

4. Utilização Inline, Incorporado e Externo - CSS
 O estilo incorporado permite localizar e fazer as alterações de todas as
marcações css num mesmo lugar. Obrigatório usar atributo type (validar)
 Porem usando css direto no documento html torna-o um código “grande”
e se tivermos muitas páginas com os mesmo estilo termos que abrir todas
as páginas e fazer as alterações em todas elas menos organizado que em
um arquivo externo, a terceira forma de criar CSSs.

5. Utilização Inline, Incorporado e Externo - CSS
 Outro atributo usado no <style> é media que define o tipo de media que
é usado aquele css, então temos:
 screen: monitores
 tty: teletipo
 tv: dispositivos de televisão, google tv, lumis.com.br (portal)
 projection: usado para projetores
 hendheld: dispositivos moveis.
 print: para impressoras
 brille: dispositivos táteis
 aural: sintetizadores de voz
 all: css que será aplicado para todos os dispositivos (podendo ser
acessados por todos os dispositivos.

6. Utilização Inline, Incorporado e Externo - CSS
 Para testar experimente usar media=“tv”... Veja o resultado...
 Agora vamos aos estilos externos recomendação da W3C
 É um arquivo fora do html, com extensão .css vinculado ao arquivo html.
 Então vamos criar outro diretório (css) e criar um arquivo css dentro dele.
 Copiamos a regra do html e colamos no css sem as marcações <style>
 Adicionamos, no arquivo html, um link ao css...
 Chamamos de Folhas de estilo linkada. Temos outra forma...

7. Utilização Inline, Incorporado e Externo - CSS
 Folhas de estilo importada, vejamos o exemplo...

8. Próxima Aula: Seletores Simples