O documento explica os conceitos básicos de CSS, incluindo sua função de estilizar elementos HTML, a sintaxe CSS com seletores, propriedades e valores, e como aplicar folhas de estilo externas, internas e inline em documentos HTML.

1. Profa.Andrea Dalforno

2. CSS
CSS é a abreviação
de Cascading Style
Sheets (Folhas de
Estilo em Cascata).
Enquanto o documento HTML
informa ao navegador a estrutura e a
função de um determinado
elemento, o CSS fornece as
instruções ao navegador sobre como
exibir certo elemento: cores,
tipografias, espaçamentos, larguras
e alturas, cores, etc. Isto é possível
através de um conjunto de regras.

3. Estilos
 Estilos estão normalmente
armazenados em folhas de estilo;
 Estilos separam a apresentação da
estrutura;
 Folhas de Estilo Externas podem
economizar o seu tempo;
 Folhas de Estilo Externas são
armazenadas em arquivos CSS.
CSS não é uma linguagem de
programação como JavaScript, e
não é uma linguagem de marcação
como HTML.
Por exemplo, uma regra CSS pode
afirmar:
Encontrar todos os elementos <h2> em uma página, e
mudar a cor do texto para verde.
Encontrar todos os elementos <p> com um atributo
class=”author-name”, e apresentar o fundo em vermelho,
o texto com o dobro do tamanho do texto do parágrafo
normal, e adicionar 10 pixels de espaçamento em torno
de cada um.

4. SintaxeCSS
A sintaxe CSS é composta de três partes: seletor, propriedade e valor. No código fonte
da folha de estilo a sintaxe é escrita da seguinte forma:
seletor {propriedade: valor;}
As chaves contêm a(s) propriedade(s) e seus valor(es), separada(s) por um ponto e
vírgula.
As propriedades definem as características do elemento ou atributo que você
selecionou, tais como: cor do texto, cor de fundo, posição na página, fonte, entre
outras.
Os valores são atribuídos a cada propriedade de cada elemento/atributo. Por
exemplo, a propriedade “color” (cor) pode ter valor atribuído em código hexadecimal
(ex.: #336699), ou RGB (ex.: rgb (12,134,22)), ou ainda utilizando nomes de cores (ex.:
red (vermelho), green (verde) ou blue (azul)). Propriedades que afetam posição,
margens, largura ou altura podem ser medidas em pixels (px), ems, percentagens,
centímetros ou outras unidades desse tipo.

5. ComentáriosCSS
Você pode adicionar comentários na folha de estilos, basta escrever entre os
caracteres /* e */.
/* ESTE É UM COMENTÁRIO. */
Comentários podem ocupar várias linhas, pois o navegador vai ignorar tudo
que estiver escrito entre os caracteres /* */.
Os comentários são usados para explicar o código, e pode ajudar na edição do
código fonte antigo.

6. Seletores
Existem vários seletores diferentes, cada um combinando uma parte
diferente da marcação.Os três seletores básicos são:
 Elemento seletor
 Seletor class
 Seletor id

7. Seletores:Elementoseletor
Elemento seletor pode ser qualquer tag/elemento HTML.
Exemplos: body { }
p { }
a { }

8. Seletores:Seletorclass
Com o seletor class é possível definir estilos diferentes para o mesmo tipo de
elemento HTML. Porém, é necessário definir no seu documento HTML os dois tipos
do mesmo elemento, utilizando atributos class diferentes. O seletor class é definido
com um ponto antes do nome/valor.
Exemplo: HTML
CSS
Se a tag não for mencionada no seletor para definir um estilo, então este será usado
por todos elementos do documento HTML que possuem um determinado atributo
class.
<p class=”right”> Este texto deverá aparecer alinhado à direita.</p>
<p class=”center”>Este texto deverá aparecer centralizado.</p>
p .right {text-align: right;}
p .center {text-align: center;}
.right {text-align: right;}
.center {text-align: center;}

9. Seletores:Seletorid
Você também pode definir estilos para elementos HTML utilizando o seletor id. O
seletor id é definido com o símbolo cerquilha/cardinal (#) antes do nome/valor
Exemplos: HTML
CSS
<div id=”verde”>O texto desta seção aparecerá na cor verde.</div>
#verde {color: green;}

10. Seletorescombinados
Os seletores podem ser combinados para definir regras mais específicas.
Por exemplo, vamos supor que o documento HTML tem um elemento <p
id=“para1”>, e que este deverá aparecer com o texto centralizado em
vermelho, então o estilo será:
p #para1{
text-align: center;
color: red;
}

11. Agrupamento
É possível também agrupar diferentes seletores para aplicar o mesmo estilo.
Separe cada seletor com uma vírgula. No exemplo abaixo foram agrupados
todos os elementos de título, pois todos serão exibidos em cor de texto
verde.
Veja as referências daW3C para seletores:
http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-seletores
h1,h2,h3,h4,h5,h6 {
color: green
}

12. CSSabreviada
É possível combinar várias propriedades CSS relacionadas em uma única
propriedade para economizar tempo e esforço de sua parte.
A abreviação pode ser bem interessante para propriedades como margin e
padding.
Por exemplo, vamos supor que você precisa definir a propriedade margin do
elemento <div id=”col”></div>:
Para simplificar, esta regra também pode ser escrita da seguinte forma:
#col {
margin-top: 1px;
margin-right: 1.5px;
margin-bottom: 2px;
margin-left: 2.5px;
}
#col {
margin: 1px 1.5px 2.5px 2px;
}

13. AplicandoCSSaumdocumentoHTML
Existem três maneiras de aplicar CSS a um documento HTML: estilos inline,
estilos incorporados, e folhas de estilo externas. É recomendável que utilize
folhas de estilo externas, salvo quando as outras opções se fazem
necessárias.
Todos os estilos legam "cascata" pela seguinte ordem de prioridade:
1. Estilos inline (dentro de um elemento HTML)
2. Estilos internos ou incorporados (dentro da <head>)
3. Folhas de estilo externas
4. Padrão do navegador

14. Estilosinline
Um estilo inline perde muitas das vantagens das folhas de estilo externas,
pois mistura conteúdo com apresentação. Então, use esta opção raramente,
com muito critério, quando um estilo for aplicado somente a uma ocorrência
de um elemento.
Para usar estilos inline você usa o atributo style na tag relacionada.O atributo
style pode conter qualquer propriedade de CSS. O exemplo mostra como
mudar a cor e a margem esquerda de um parágrafo específico:
<p style="color: sienna; margin-left: 20px;">
Este é um parágrafo específico.
</p>

15. Estilosinternosouincorporados
O estilo interno ou incorporado é pertinente apenas ao documento HTML a
que pertence.Você define estilos internos dentro da tag <head> usando a tag
<style>:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>

16. Folhasdeestiloexternas
A folha de estilo externa é a opção mais recomendada para definir a apresentação de
um website. Vantagens:
1. os estilos serão aplicados a todas as páginas do site; e
2. permitem alterar o layout e toda a apresentação do site sem interferir no
conteúdo.
Atenção! Cada página do site deve conter uma ligação para a folha de estilos externa
usando a tag <link> ou a tag <style>, que deve ser inserida dentro da tag <head>:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<head>
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

17. Folhasdeestilosmúltiplas
Se algumas propriedades fossem fixadas para o mesmo seletor em folhas de estilo
diferentes, os valores serão herdados da folha de estilo de acordo com o nível de
prioridade:
1. Estilos inline (dentro de um elemento HTML)
2. Estilos internos ou incorporados (dentro da <head>)
3. Folhas de estilo externas
4. Padrão do navegador

18. Propriedades
Cores e fundos
A propriedade background de CSS
permite que você controle a cor de
fundo de um elemento, imagem de
fundo, repetição da uma imagem
verticalmente ou horizontalmente, e
posicionamento da imagem na
página.
Veja as referências daW3C para
cores e fundos:
http://www.w3c.br/divulgacao/guias
referencia/css2/#mod-cores
Unidade Descrição
nome da
cor
Utiliza-se apenas o nome da cor. Apenas 16
nomes de cor são suportados pelo padrão da
W3C (aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal,
white, e yellow).
rgb (x,x,x) Define-se um valor RGB (ex.: rgb(255,0,0)).
rgb(x%,x%,
x%)
Define-se valores de porcentagem do RGB (ex.:
rgb(100%,0%,0%)).
#rrggbb Define-se um valor hexadecimal (ex.: #ff0000).
As cores utilizam as seguintes
regras:

19. Propriedades
Textos
A propriedade text do CSS permite
que você controle a aparência do
texto. É possível mudar a cor de um
texto, aumentar ou diminuir o
espaço entre caracteres, alinhar e
decorar um texto, recuar a primeira
linha, etc.
Veja as referências daW3C para
textos:
http://www.w3c.br/divulgacao/guias
referencia/css2/#mod-texto
Fontes tipográficas
A propriedade font do CSS permite
que você mude a família de
tipográfica, largura e tamanho da
fonte, e o estilo de um texto.
Veja as referências daW3C para
fontes tipográficas:
http://www.w3c.br/divulgacao/guias
referencia/css2/#mod-fontes

20. Propriedades
Bordas
A propriedade border do CSS permite
que você especifique o estilo e cor de
borda do elemento. Em HTML nós
usamos tabelas para criar bordas ao
redor um texto, mas com a
propriedade border do CSS nós
podemos criar bordas com efeitos,
além de poder aplica-las a qualquer
elemento.
Veja as referências daW3C para
bordas:
http://www.w3c.br/divulgacao/guiasre
ferencia/css2/#mod-bordas
Margens
A propriedade margin do CSS define o
espaço ao redor elementos. É possível
usar valores negativos para sobrepor
conteúdos. As margens topo, direita,
inferior, e esquerda são independentes
e podem receber valores diferentes. A
propriedade margin (shorthand)
também pode ser usada para mudar
todas as margens de uma vez.
Veja as referências daW3C para
margens:
http://www.w3c.br/divulgacao/guiasre
ferencia/css2/#mod-margens

21. Propriedades
Espaçamento
As propriedades de padding do CSS
definem o espaço entre a borda e o
conteúdo de elemento. Os valores
negativos não são permitidos. O padding
superior, direito, esquerdo e inferior são
independentes e podem receber valores
diferentes.A propriedade padding
(shorthand) também pode ser usada para
mudar todos os espaçamentos de uma vez.
Veja as referências daW3C para
espaçamento:
http://www.w3c.br/divulgacao/guiasrefere
ncia/css2/#mod-espacamento
Depois veja o modelo de caixa e entenda
como você deverá definir as bordas,
margens e espaçamentos.
http://www.w3c.br/divulgacao/guiasrefere
ncia/css2/#mod-caixa
Agregador de conteúdo, numeração
automática e listas
As propriedades content e list do CSS permitirem
que você agregue conteúdos de pseudo-
elementos e insira numeração/marcadores em
itens de lista respectivamente.
Veja as referências daW3C para agregador de
conteúdo, numeração automática e listas:
http://www.w3c.br/divulgacao/guiasreferencia/cs
s2/#mod-agregador

22. Propriedades
Modelo de formatação visual
Reúne propriedades do CSS que
definem dimensões, classificação e
posicionamento. Por exemplo,
permitem que você controle a altura
e largura de um elemento, aumente
o espaço entre duas linhas, controle
a exibição de um elemento, posição
de um elemento em relação a outro,
posição de um elemento usando um
valor absoluto, controle a
visibilidade de um elemento, bem
como especifique a posição de um
elemento.
Veja as referências daW3C para
modelo de formatação visual:
http://www.w3c.br/divulgacao/guias
referencia/css2/#mod-formatacao
Veja também:
Detalhes do modelo de formatação
visual e os efeitos visuais:
http://www.w3c.br/divulgacao/guias
referencia/css2/

23. Propriedades
Tipos de mídia
Os tipos de mídia permitem que você
especifique como documentos serão
apresentados em mídias diferentes.
Por exemplo, como um documento
pode ser exibido com um estilo
diferente no monitor, dispositivo
móvel, impressão etc.
A regra @media, que permite definir
estilos diferentes para mídias
diferentes na mesma folha de estilo.
Veja as referências daW3C para tipos
de mídia, a sintaxe, e as unidades de
medidas:
http://www.w3c.br/divulgacao/guiasre
ferencia/css2/#mod-tipos
<style>
@media screen{
p.test{
font-family:verdana sans-serif;
font-size:14px}
}
@media print{
p.test, {
font-family:times serif;
font-size:10px}
}
@media screen,print{
p.test {
font-weight:bold
}
}
</style>