O documento explica o que é CSS, como funciona e seus tipos. CSS é uma linguagem para aplicar estilos e layout a documentos HTML, definindo como elementos serão exibidos. Há três tipos de CSS: inline, interno e externo. O arquivo externo é o melhor para aplicar estilos a várias páginas de acordo com os padrões da Web.
2. O que é CSS? É pra temperar comida?
CSS é a sigla de Cascade Style Sheet, folha de estilos em
cascata. É uma linguagem que aplica formatações de
estilo e de layout a documentos HTML.
CSS é capaz de definir como os elementos HTML serão
exibidos na página.
Assim com o HTML, você não programa em CSS;
3. Porque e como usar essa nova coisa?
Porque:
Depois de a tag <font> ter sido incluída no HTML, os desenvolvedores passaram a aplicar
cores, tamanhos e diversos outros estilos aos textos das páginas. No entanto, como um
site pode conter muitas páginas, a alteração de cor de um texto que precisasse ser feita
em todo o site necessitava de manutenção em todas as páginas, gastando muito tempo.
Como:
Assim como o HTML há diversos editores (IDEs) que trabalham com documentos CSS,
geralmente são os mesmos do HTML:
Aptana Studio;
Bloco de Notas;
Notepad++;
4. Entendendo
As declarações, que ficam dentro de chaves { },
consistem de uma propriedade e um valor.
A propriedade é o atributo de estilo que será
alterado: color e font-size, no exemplo acima.
O valor da propriedade é o que vai alterar, de fato,
o elemento: blue e 12px.
5. E o código?
No exemplo de código abaixo, por exemplo, o elemento <p> está
sendo estilizado: o atributo color (cor do texto) recebeu o valor red
(vermelho), e o atributo text-align (alinhamento do texto) recebeu o
valor center (centralizado).
O código CSS jamais irá conter tags. Os seletores referem-se apenas ao nome
da tag. O seletor p, por exemplo, referencia a tag <p>
6. Tipos de CSS
Há, basicamente, três maneiras diferentes de inserir CSS a
uma página HTML:
Código CSS inline;
Código CSS interno;
Arquivo CSS externo;
7. Código CSS inline
Para aplicar estilos inline, utiliza-se o atributo style no
elemento que se pretende estilizar. Esse atributo pode
conter qualquer propriedade CSS, por exemplo:
8. Código CSS interno
Códigos CSS internos devem ser declarados na seção <head> do arquivo
HTML utilizando a tag <style>
9. Arquivo CSS externo
Os arquivos CSS externos são ideais para aplicar estilos a muitas páginas. Também são a
maneira mais correta de se desenvolver sites, pois seguem os Web Standards que
recomendam a separação de códigos.
Para utilizar arquivos CSS externos em uma página HTML, o documento HTML deve conter um
link para o arquivo de estilos, utilizando a tag <link> na seção <head>
O href está referenciando outro documento que está na mesma pasta que o nosso HTML;
11. Exercícios
1) Construa uma página HTML utilizando tudo que foi
mostrado na ultima aula para um dos itens:
Sertanejo;
Gospel;
Heavy Metal;
Rock;
Pop;
Reggae;
PS: Sim, é para HOJE!