207

Aula 7º

Fundamentos em CSS

Nesta aula, conheceremos mais uma tecnologia importante e

essencial que deve ser dominada pelos desenvolvedores web, as CSS.
Conforme vimos, o HTML é responsável pela disposição/inserção
do conteúdo. O CSS, por sua vez, formata a informação entregue pelo
+70/(VVDLQIRUPDomRSRGHVHUOD\RXWLPDJHPWH[WRYtGHRiXGLRRX
qualquer outro elemento criado. Grave isso: CSS formata a informação.
$YHUVmRDWXDOR&66WURX[HPXGDQoDVGUiVWLFDVSDUDDPDQLSXODomR
visual dos elementos HTML. Praticamente tudo o que vemos hoje nos
web sites no que diz respeito ao layout e formatação do conteúdo é CSS.
CSS permite adaptar a apresentação a diferentes tipos de
dispositivos, como telas grandes, telas pequenas ou impressoras. O CSS
é independente do HTML e pode ser usado com qualquer linguagem de
marcação baseada em XML. A separação do HTML do CSS torna mais
fácil a manutenção de sites, compartilhe folhas de estilo em páginas e
adapte páginas a diferentes ambientes. Isso é referido como a separação
da estrutura (ou: conteúdo) da apresentação.
É fundamental que haja dedicação e motivação nos estudos desta
aula a fim de identificar e reconhecer as particularidades, principalmente
no que diz respeito à criação e aplicação do CSS.
E então? Vamos a leitura da aula!?
Iniciemos conhecendo os objetivos da aprendizagem.
Bons estudos!

Objetivos de aprendizagem

Ao término desta aula, vocês serão capazes de:

‡ FRQFHLWXDU&66
‡ FRPSUHHQGHUVXDVLQWD[H
‡ HQWHQGHUFRPRHUDIHLWDDIRUPDWDomRGRFRQWH~GRDQWHVGDV&66
‡ GLIHUHQFLDUDVWUrVIRUPDVGHLQFOXVmR&66H[WHUQRLQWHUQRHLQOLQH
‡ UHFRQKHFHUDVYDQWDJHQVGHXVDU&66QDFRQVWUXomRGHZHEVLWHV
‡ DSOLFDUR&66QDSUiWLFDHVWLOL]DQGRSiJLQDVZHE
208 Desenvolvimento Voltado à Web I 60
DWXDOL]DomRPDQXWHQomRWRUQDVHPXLWRPDLVUiSLGRGHL[DQGR
Seções de estudo o trabalho do desenvolvedor e do webdesigner muito mais fácil
e eficiente.
Projetar um site que seja navegável em qualquer browser,
1 - Introdução ao CSS independentemente de plataforma, dimensão e da resolução
2 - Formas de inclusão de estilos CSS de tela, é possível, desde que seja projetado de acordo com a
3 - CSS na prática Web Standards.

1 - Introdução ao CSS
9RF¬FRQKHFHHVWHWHUPR"6DEHRTXHVLJQLȴFD"
Nosso ponto de partida é a apresentação do conceito
de CSS: Web Standards, pode ser traduzida como Padrões Web
e tem por objetivo a criação de uma Web universal cujo foco
Conceito
principal é a acessibilidade e boas práticas de desenvolvimento.
CSS é a sigla em inglês para Cascading Style Sheet,
em português, Folha de Estilo em Cascata e é definida como Web Standards é um conjunto de normas,
sendo: diretrizes, recomendações, notas, artigos,
WXWRULDLVHDÀQVGHFDUiWHUWpFQLFRSURGX]LGRV
Um mecanismo simples para adicionar estilos pelo W3C e destinados a orientar fabricantes,
SH[IRQWHVFRUHVPDUJHQVHVSDoDPHQWRV desenvolvedores e projetistas para o uso de
ERUGDVGHQWUHRXWUDVLQÀQLGDGHVGHUHFXUVRV
aos documentos Web de forma a se obter
o controle absoluto da aparência da página
(MAUJOR, 2017).
As CSS seguem o padrão Tableless. Como o próprio
nome indica, trata-se de um padrão de desenvolvimento de
páginas com layouts NÃO baseados em tabelas. Esse padrão
GHIHQGHRXVRGHWDEHODVH[FOXVLYDPHQWHSDUDWDEXODUGDGRV
RXVHMDSDUDRSURSyVLWRRULJLQDOGDWDJWDEOH!FRQIRUPHMi
estudamos na aula 04.
9RF¬VDEHTXDO«DSULQFLSDOIXQ©¥RGR&66"
CSS apresenta diversas funções que fazem com que ela
seja adotada pela maioria dos webdevelopers (desenvolvedores
de páginas para a internet). Porém, sua principal função
consiste em:
([WUDLU D IRUPDWDomR GH XPD SiJLQD GR
código HTML, separando-a do conteúdo
propriamente dito. Além de aumentar o nível
de organização, isso indica que elas podem
GHÀQLUGHDQWHPmRDIRUPDWDomRGHWRGRVRV
elementos de uma ou várias páginas. Com isso,
torna-se muito mais fácil manter um padrão
de fontes, cores e estilos, na medida em que
VHUiPDLVSUiWLFRPRGLÀFDUWDLVDWULEXWRVSRLV
WDO DWLYLGDGH VHUi H[HFXWDGD D SDUWLU GR WLSR
de elemento ou classe (e não da informação).
Toda alteração nos elementos e atributos das
&66 PRGLÀFDP WRGD D SiJLQD TXH D XWLOL]D
sem a necessidade de fazer a alteração tag a
tag (MIYAGUSKU, 2007, p. 8).
Resumindo, a grande vertente do uso de CSS é a de
separar a marcação HTML da apresentação do site. Em outras
palavras, vale dizer que o HTML destina-se unicamente a
estruturar e marcar o conteúdo, ficando por conta das CSS
toda a responsabilidade pelo visual do documento, tornando
nosso trabalho mais eficiente e padronizado, e o processo de
práticas que possibilitem a criação de uma
Web acessível a todos, independentemente dos
dispositivos usados ou de suas necessidades
especiais (MAUJOR, 2017).
Com o surgimento da HTML5, as tags e atributos para
definir cores, fontes, alinhamentos e outros itens de formatação
foram descontinuadas. As CSS proporcionam mais recursos e
são mais precisas e mais sofisticadas.
A partir de agora, conhecerão as técnicas CSS que
possibilitará a formatação das nossas páginas.
Para quem é novo nesse advento de desenvolvimento web,
não faz ideia de quão trabalhoso e entediante era realizar esta
formação visual via HTML. Só para terem uma noção, vamos
DXPUiSLGRHVLPSOHVH[HPSOR8PUHFXUVRPXLWRXWLOL]DGR
até certo tempo atrás era a aplicação de imagens de fundo às
páginas HTML.
Vamos entender como funcionava este processo? Como uma imagem
era atribuída como fundo (background) ?
$VLQWD[HHUDDVHJXLQWHbody background=”imagem.jpg”!
A imagem era inserida diretamente dentro da tagERG\!
do documento, através do obsoleto atributo background. Este
método implicava no seguinte: se o site era composto de 10
páginas, todas com a mesma imagem de fundo, a imagem teria
que ser inserida página por página, uma a uma, atribuindo-a
na tag ERG\! GDV  SiJLQDV GH IRUPD PDQXDO RX VHMD
reescrevendo ou copiando e colando. E se futuramente, a
página passasse por uma atualização, para a alteração desta
imagem, as 10 páginas deveriam ser abertas e modificadas
manualmente, uma a uma. E o mesmo ocorria com todos os
elementos e recursos de formatação que eram aplicados às
páginas.
Percebeu o quão trabalhoso era este processo e o tempo de trabalho
que esta técnica requeria?
 61 209
Com o uso de CSS, pode-se criar um único arquivo CSS definidos no CSS 2, preservando a compatibilidade
contendo o estilo com a definição dessa imagem. E em todas as com versões anteriores. O trabalho no nível 3 do
10 páginas HTML, faz-se a vinculação a este. CSS e as mesmas CSS começou na mesma época da recomendação
passam então a conter e apresentar a imagem, conforme original do CSS 2, ou seja, os primeiros rascunhos
definido no estilo. E em caso de atualização futura, apenas o da CSS 3 foram publicados em junho de 1999.
arquivo CSS seria modificado e automaticamente aplicado (em Devido à modularização, diferentes módulos têm
cascata) a todas as páginas que vinculam o estilo. estabilidade e status diferentes. A partir de junho de
Diante do que foi estudado até agora, começamos a 2012, há mais de cinquenta módulos CSS publicados
entender a ideia e as vantagens do uso das CSS. pelo Grupo de Trabalho CSS. Quatro deles foram
publicados como recomendações formais:
1.1 - Um pouco de história
‡ 2012-06-19: consultas de mídia
De acordo com o site Wikipédia (2017), o primeiro código ‡ 2011-09-29: Namespaces
CSS foi proposto em 1994 por Håkon Wium Lie e Bert Bos, ‡ 2011-09-29: Seletores Nível 3
os mesmos levam os créditos como desenvolvedores originais. ‡ 2011-06-07: Cor
A trajetória das CSS está dividida em níveis também
chamadas de gerações: Figura 7.1: Logo oficial CSS3
‡ CSS1 – Conhecida também como CSS nível 1 ou
ainda, primeira geração. Um ano após a criação
do W3C, em 17 de dezembro de 1996, o CSS1 se
tornou uma recomendação oficial do W3C. Entre as
suas capacidades estão o suporte para: Propriedades
GHIRQWHFRPRWLSRGHOHWUDHrQIDVH&RUGHWH[WR
IXQGRV H RXWURV HOHPHQWRV $WULEXWRV GH WH[WR
como espaçamento entre palavras, letras e linhas
GH WH[WR $OLQKDPHQWR GH WH[WR LPDJHQV WDEHODV H
RXWURV HOHPHQWRV 0DUJHP ERUGD SUHHQFKLPHQWR
H SRVLFLRQDPHQWR SDUD D PDLRULD GRV HOHPHQWRV
Identificação única e classificação genérica de grupos
de atributos.
Fonte: WIKIPEDIA, 2017.
‡ CSS2 – nível 2, ou segunda geração, foi desenvolvida
pelo W3C e publicada como uma recomendação
oficial em maio de 1998. Um superconjunto do CSS A principal função do CSS3 é abolir as imagens de plano
1, CSS 2 incluindo uma série de novas capacidades de fundo, bordas arredondadas, apresentar transições e efeitos
FRPRRSRVLFLRQDPHQWRDEVROXWRUHODWLYRHIL[RGH para criar animações de vários tipos, como um simples relógio
HOHPHQWRV H ]LQGH[ R FRQFHLWR GH WLSRV GH PtGLD de ponteiros até animações, tanto em 2 como em 3 dimensões.
suporte para folhas de estilo aural (que foram Os mais comuns são os efeitos de rotação, movimento e
posteriormente substituídas pelos módulos de fala transição.
&66HWH[WRELGLUHFLRQDOHQRYDVSURSULHGDGHVGH
fonte, como sombras.
‡ CSS2.1 - A revisão 1 do nível 2 do CSS, muitas
vezes referida como “CSS 2.1”, ou ainda, terceira
geração, corrige erros no CSS 2, remove recursos
mal suportados ou não totalmente interoperáveis e
DGLFLRQD H[WHQV}HV GH QDYHJDGRU Mi LPSOHPHQWDGDV
à especificação. Para cumprir com o Processo do
W3C para padronizar as especificações técnicas, o
CSS 2.1 foi de um lado para o outro entre o status do
Projeto de Trabalho e o Estatuto da Recomendação
do Candidato por muitos anos. O CSS 2.1 tornou-
se primeiro uma recomendação de candidatos em
25 de fevereiro de 2004 e finalmente foi publicado
como uma recomendação do W3C em 7 de junho de
2011. CSS 2.1 foi planejado como a primeira e última
revisão do nível 2.
‡ CSS3 – CSS nível 3 ou quarta geração. Ao contrário
do CSS 2, que é uma grande especificação única que
define vários recursos, o CSS 3 é dividido em vários
documentos separados chamados de “módulos”. Cada
De acordo com Maujor (2017), desde Setembro de 2011,
o W3C vem trabalhando no rascunho do módulo de Seletores
Nível 4 (Selectors Level 4) para a especificação do CSS, o que
não significa necessariamente que o CSS 4 está em progresso,
pelo menos por enquanto.
$VHJXLUYDPRVFRQKHFHUDVLQWD[HGDV&66
1.2 – Sintaxe
%DVLFDPHQWHDVLQWD[H&66pIRUPDGDSRUXPDUHJUDFRP
LWHQVVHOHWRUSURSULHGDGHHYDORUYHMDDVLQWD[HDVHJXLU
seletor {
SURSULHGDGHYDORU
}
'HVFUHYHQGR D VLQWD[H DFLPD WHPRV XPD IROKD GH
estilo consiste de uma lista de regras. Cada regra ou conjunto
de regras consiste de um ou mais seletores e um bloco de
declaração. Uma declaração de bloco é composta por uma
lista de declarações entre chaves. Cada declaração em si é uma
propriedade, dois pontos (:), um valor, e então um ponto e
módulo adiciona novos recursos ou amplia recursos YtUJXOD
210 Desenvolvimento Voltado à Web I 62
tags HTML, o estilo é aplicado automaticamente ao documento
Vamos entender e ver como funciona na prática? que contém a tag com o mesmo nome do seletor.
([HPSOR
Figura 7.3: seletor tag
9DPRV H[HPSOLILFDU DWUDYpV GD LPDJHP DEDL[R $VVLP
VHQGR R WH[WR GH XP SDUiJUDIR GHILQLGR SHOR HOHPHQWR
HTML p (seletor), possui uma propriedade de cor denominada
color. Já o valor atribui valor a uma propriedade escolhida para background-color:
o elemento selecionado. O valor da propriedade color para o propriedade CSS
elemento p, é redYHUPHOKRRXVHMDRWH[WRGRSDUiJUDIR SDUDGHȴQLUFRUGH
terá cor vermelha. fundo.
Fonte: o autor
)LJXUD6LQWD[H&66

Seletor Classe - É possível a criação de classes de

seletores com qualquer nome, de forma a não limitar-se
somente às tags. As classes tornam-se muito úteis pelo fato
de que se pode aplicá-las quantas vezes forem necessárias a
um mesmo seletor. Porém, logo ficaríamos limitados quanto à
nomeação dos mesmos.
6XDVLQWD[HpIRUPDGDSRUXPHOHPHQWR+70/DJUHJDGR
de mais um nome qualquer procedido de um ponto final (.).
([HPSOR
Fonte: https://www.chiefofdesign.com.br/css/. Acesso em: 27 out. 2017.
Figura 7.4: seletor class

Um seletor pode receber uma ou mais propriedades. As propriedades color: propriedade

devem ser separadas por ponto e vírgula (;). &66SDUDGHȴQLUFRU
de fonte.

Fonte: o autor
&RQIRUPHSRGHPRVYHUQDHVSHFLILFDomRGDVLQWD[HXP
estilo é composto por: seletor, propriedade e valor. Passamos
então, a seguir a compreensão dos elementos que compõem
DVLQWD[H Nesse caso, podemos aplicar dois tipos de parágrafos a
um documento, um com fonte azul e o outro com fonte verde.
1.1.1 - Seletor No documento HTML aplica-se a classe da seguinte
O seletor, podemos assim dizer, é a identificação (o forma:
QRPH GR HVWLOR ([LVWHP IRUPDV GLIHUHQWHV GH VHOHWRUHV
os seletores simples são: seletor elemento ou tag, seletor
classe, seletor ID e o seletor atributo. Vamos à definição e
diferenciação entre eles.
Seletor elemento ou tag – É possível criar e nomear os
seletores, com o mesmo nome de tags HTML. Porém, sem
RVLQGLFDGRUHVGHWDJVH!XVDQGRDSHQDVRQRPH$EDL[R
VHJXHPDOJXQVH[HPSORVGHVHOHWRUHVDVVRFLDGRVjtags: Quando criamos uma classe e queremos que ela seja
‡ SDUiJUDIRVS aplicada a qualquer elemento, devemos omitir o nome do
‡ WDEHODVWDEOH HOHPHQWR+70/DQWHVGDFODVVH([
‡ IRUPXOiULRVIRUP
‡ OLQNVD
‡ FDEHoDOKRV²KKK
‡ FRUSRGRGRFXPHQWRERG\
Quando se utiliza seletores com os mesmos nomes de
 63
Dessa forma, podemos aplicar a cor azul a vários
elementos, outros além dos parágrafos, como cabeçalhos,
OLQNVHWF([
Seletor ID - O seletor ID diferencia-se da classe por
ser único, ou seja, pode ser aplicado a somente um elemento
HTML dentro do documento. Seletores com um ID próprio
e único. Geralmente, usado para definir: topo, cabeçalhos,
rodapé, menus, ou seja, os elementos que não se repetem no
decorrer do escopo do documento..
211
Seletor atributo – Este tipo de seletor associa a um
atributo utilizado em um elemento HTML baseado no valor
GHFODUDGRQRVHOHWRU([LVWHPIRUPDVGLIHUHQWHVGHGHFODUDU
um seletor de atributo. Podemos selecionar os elementos
cujo valor do atributo seja EXATAMENTE, COMECE
COM, TERMINE COM ou CONTENHA o valor buscado.
9HMDPRVDVHJXLUDVLQWD[H
‡ EXATAMENTE - E[atributo=“valor”]:
elementos do tipo E cujo “atributo” seja igual a
“valor”.
‡ COMECE COM - E[atributo^=“valor”]:
6LQWD[HXPQRPHTXDOTXHUSUHFHGLGRGHFHUTXLOKD elementos do tipo E cujo valor do “atributo” comece
([HPSOR com a palavra “valor”.
‡ TERMINE COM - E[atributo$=“valor”]:
Figura 7.5: seletor id elementos do tipo E cujo valor do “atributo” termine
com a palavra “valor”.
‡ CONTENHA - E[atributo*=“valor”]: elementos
do tipo E cujo valor do “atributo” contenha a palavra
Fonte: o autor “valor”.

Sua aplicação no documento HTML ocorre da seguinte 2 VHOHWRU WLSR DWULEXWR WURX[H LQ~PHUDV SRVVLELOLGDGHV
forma: H IDFLOLGDGHV &RPR SRU H[HPSOR HVWLOL]DU RV ERW}HV GH
um formulário, antes isso só era possível através do uso de
JavaScript.

Figura 7.6: seletor_atributo.html

Fonte: o autor
212 Desenvolvimento Voltado à Web I 64
Veja na Figura 7.6 (linhas 13 e 14), um botão para envio de
dados de formulários. Podemos usar o atributo type com valor Também poderão buscar conhecimentos nas duas principais fontes de
submit e reset para estilizar os botões. As linhas 2 a 6 contém UHIHU¬QFLDTXDQGRRDVVXQWR«&66RVLWHRɝFLDOGD:&HRVLWHGRGR
a declaração do estilo que faz a formatação dos botões. Nas 0DXMRU3RGHPVHUDFHVVDGRVQRVUHVSHFWLYRVOLQNV
linhas 7 e 8, também consta a declaração ao atributo href, KWWSZZZPDXMRUFRPDOYR
sendo aplicado a todos os links. O resultado desses estilos KWWSZZZZFEU&XUVRV&XUVR&66
aplicados aos elementos HTML pode ser visto a seguir:
Figura 7.7: seletor atributo 1.1.3 - Valor
eDFDUDFWHUtVWLFD TXHVHDSOLFDDXPDSURSULHGDGH([
WDPDQKR GD IRQWH  IXQGR YHUPHOKR LPDJHP GH IXQGR
PDUJHPVXSHULRUS[FRUGHIRQWH
As unidades de medida consistem em valores muito
utilizados em CSS para definir as dimensões dos elementos.
([LVWHP LQ~PHURV YDORUHV HVSHFtILFRV SDUD SURSULHGDGHV 6y
que alguns são de uso comum para muitas propriedades e são
Fonte: o autor utilizados com frequência. Veja uma pequena relação a seguir:
‡ px ²pDXQLGDGHGHSL[HOV0XLWRXVDGDHPGLPHQV}HV
$OpPGHVWHVWLSRVGHVHOHWRUHVTXHYLPRVDLQGDH[LVWHP de blocos e fontes.
outros:
‡ 6HOHWRUXQLYHUVDO ([HPSOR
‡ 6HOHWRUGHHOHPHQWRVILOKR font-size: 14px;
‡ 6HOHWRUDGMDFHQWH width: 200px;
‡ 6HOHWRUFRQWH[WXDO
‡ 6HOHWRUHVWLSRSVHXGRHOHPHQWRV ‡ em – Indicada para tamanhos de fontes. Ao usarmos
‡ Seletores tipo pseudo-classe. o tamanho padrão do dispositivo do usuário podemos
H[SUHVVDU R WDPDQKR GD IRQWH GH RXWURV HOHPHQWRV
através dessa unidade. Assim um elemento com
Para conhecer mais sobre os seletores CSS3, consulte o Guia completo
tamanho de fonte de 2em (font-size:2em} tem duas
GHVHOHWRUHVQRVLWHGR0DXMRU
vezes o tamanho padrão. Caso o tamanho padrão for
KWWSZZZPDXMRUFRPWXWRULDOJXLDFRPSOHWRVHOHWRUHVFVVSKS
SL[HOVXPDIRQWHGHHPHTXLYDOHUiDSL[HOV
([HPSOR
font-size: 1.25em;
1.1.2 - Propriedade font-size: 0.5em;

É o atributo do elemento HTML ao qual será aplicada ‡ % – consiste em uma unidade de porcentagens. Ela
D UHJUD ([ IRQW FRORU PDUJLQ EDFNJURXQG ERUGHU WH[W é relativa ao bloco onde o elemento está contido. Se
margin, padding, . XPEORFRWHPSL[HOVHIRUDWULEXtGRDRXWUREORFR
Novas propriedades foram inseridas na CSS3, como por contido nele uma largura de 50%, equivalerá a 75
H[HPSOR SL[HOV
‡ VHOHFLRQDUSULPHLURH~OWLPRHOHPHQWR
‡ VHOHFLRQDUHOHPHQWRVSDUHVRXtPSDUHV ([HPSOR
‡ selecionarmos elementos específicos de um font-size: 120%;
GHWHUPLQDGRJUXSRGHHOHPHQWRV width: 50%;
‡ JUDGLHQWHHPWH[WRVHHOHPHQWRV ‡ Hexadecimal – é um sistema de numeração que
‡ ERUGDVDUUHGRQGDGDV representa os números em base 16, empregando
‡ VRPEUDVHPWH[WRHHOHPHQWRV assim 16 símbolos. Este sistema é composto por
‡ PDQLSXODomRGHRSDFLGDGH 10 números, de 0 a 9, e seis letras adicionais de A
‡ FRQWUROHGHURWDomR a F. Usamos no CSS para atribuir valores para
‡ FRQWUROHGHSHUVSHFWLYD propriedades de cor para fontes (color), cor de fundo
‡ DQLPDomR'H' (background-color), cor de borda (border-color)
‡ estruturação independente da posição no código entre outras.
HTML.
([HPSOR
1RVVDDXODILFDULDPXLWRH[WHQVDSDUDDERUGDUDTXLWRGDV background-color: #cccccc;
as propriedades CSS, visto que a relação é imensa. Sendo color: #ff0000;
assim, na plataforma de ensino em: Material de Aula ȺArquivo
ȺPropriedades CSS está listada as principais propriedades CSS 1HVWHFDVRWHPRVDFRUYHUPHOKDSDUDWH[WRV2YDORUHP
H[LVWHQWHV KH[DGHFLPDOHP&66pSUHFHGLGRGRVtPEROR2YDORUHP
 65
KH[DGHFLPDOpIRUPDGRSRUWUrVSDUHVGHFDUDFWHUHV$RUGHP
dos pares, da esquerda para direita, representa o sistema de
cores RGB (Red, Green, Blue) reproduzindo cores através da
“mistura” em certa quantidade das cores aditivas Vermelha,
Verde e Azul. Para entender melhor, pesquise sobre o sistema
de cores RGB.
Assim, finalizamos a seção 1 e vamos iniciar à seção 2,
213
$GHILQLomRDFLPDpDSOLFDGDXQLFDPHQWHjWDJS!HP
questão. Portanto, ao adotar essa prática perdem-se muitas das
vantagens do CSS.
Além das três formas de inclusão CSS que acabamos de
conhecer, há ainda, outra forma de inserir uma folha de estilos
CSS. Vamos conhecer?
Uma folha de estilos que é importada por outra folha de
estilos (isso é diferente daquela que é vinculada ao HTML,
onde aprenderemos quais são as formas de incluir os estilos GHQWURGHXPOLQN!8PDIROKDGHHVWLORVH[WHUQDDUTXLYR
CSS em um documento web. Vamos conhecê-las? CSS) pode ser importada de dentro de outra folha de estilos
RXWURDUTXLYR&66RXEORFRVW\OH!QR+70/XVDQGRXP
comando especial @import.
2 - Formas de inclusão de estilos CSS Ou seja, a vinculada você chama através da tag link
GHQWURGR+70OHQWUHDWDJKHDG!KHDG!
([LVWHEDVLFDPHQWHWUrVIRUPDVGHLQFOXLULQVHULUHVWLORVD
um documento Web. São elas:
CSS Externo - é a maneira mais indicada e mais usual de
inserir o CSS em um documento. Consiste em desenvolver o 2LPSRUWDGRYRFrFKDPDGHQWURGRDUTXLYRFVVH[WHUQR
código CSS e salvá-lo em um arquivo .css. RX HQWmR GHQWUR GR EORFR VW\OH W\SH µWH[WFVVµ! TXH
A folha de estilos CSS será inserida através de um link. consiste no CSS interno.
Esse método permite que múltiplas páginas ou todas as páginas
de seu site utilizem a mesma folha de estilos. Evita-se assim ter
que reescrever os mesmos estilos em cada documento.
O link GDSiJLQDGHYHVHULQVHULGRHQWUHREORFRKHDG!
HKHDG!
([
CSS interno ou incorporado - consiste em declarar
ORFDOPHQWHGHQWURGDVHomRKHDG!GRGRFXPHQWRDWUDYpVGD
WDJVW\OH!$XWLOL]DomRGHVWHPpWRGRSHUPLWHTXHRVHVWLORV
sejam aplicados unicamente em uma página, na página de
definição. Um atributo type informa o tipo de arquivo utilizado:
([ combinação de estilos definidos de várias maneiras, ou seja,
CSS inline - onde as regras são inseridas diretamente
dentro da tag do elemento. Para isso, deve-se usar o atributo
STYLE em quase qualquer descritor. Esse método não
FRUUHVSRQGH H[DWDPHQWH D XPD ´IROKDµ GH HVWLORV SRLV RV
estilos aplicados não são reaproveitáveis, já que são aplicados
diretamente em um descritor, alterando somente um único
descritor ou de um bloco de informações da página.
([
Podemos usar e mesclar todas as formas no mesmo
GRFXPHQWR 2X VHMD XPD SiJLQD KWPO SRU H[HPSOR SRGH
conter um link de referência a um arquivo CSS, pode também
conter o bloco style, CSS interno, e ainda, se necessário, criar
estilos inline. Porém, deve-se ter cautela e precauções nesta
prática. Para entendermos o que isto significa, vamos à leitura
GRSUy[LPRWySLFRGDDXODHIHLWRFDVFDWD
2.1 – Efeito cascata
Os estilos definidos determinam que a aparência final do
documento apresentado ao usuário seja o resultado de uma
podendo ser feito através da combinação entre os estilos:
H[WHUQR LQWHUQR H LQOLQH H DLQGD SHORV HVWLORV SDGU}HV GR
navegador.
O efeito cascata acontece quando um estilo é definido
mais de uma vez a uma mesma propriedade, ocorrendo
também o chamado conflito de estilo. Pois, permanece sempre
o último estilo criado, um sobrescreve o outro.
Uma folha de estilos definida pelo usuário (ou leitor
da página) – a maioria dos browsers permite que o usuário
estabeleça uma folha de estilos própria, permite que se escolha
GLIHUHQWHVFRUHVSDUDIXQGRWH[WRHOLQNVSRUH[HPSOR
A folha de estilos default do browser - todos os browsers
SRVVXHPUHJUDVFRPXQVHGHILQLGDVSDUDIRUPDWDUXPWH[WR
Assim sendo, as definições estabelecidas pelo usuário
têm prioridade em relação a aqueles definidos pelo browserMi
os estilos definidos pelo autor (desenvolvedor) da página, tem
prioridade sobre as definições do browser.
O conflito também ocorre nas definições realizadas
dentro do documento pelo desenvolvedor. Assim sendo, as
SURSULHGDGHV GHFODUDGDV QR EORFR 67</(! VREUHS}HP
quaisquer propriedades anteriores do elemento (inclusive as
de uma folha de estilos importada, se houver). Para um melhor
214 Desenvolvimento Voltado à Web I
HQWHQGLPHQWRWRPDPRVFRPRH[HPSORDVHJXLQWHVLWXDomR
Têm-se uma folha de estilos CSS, na qual foi definido um
estilo que define que a página que receberá este estilo terá a
cor de fundo amarela. Na página, inseri o link para vincular o
CSS e também, criei um estilo interno, onde especifiquei que
a cor de fundo será verde. O CSS interno é definido após o
H[WHUQRHQWmRRHVWLORLQWHUQRVREUHVFUHYHXRH[WHUQRPLQKD
página agora tem a cor de fundo verde. Ainda nesta página,
inseri um estilo inline, local, na tag <body! DSOLFDQGR XP
background azul. Qual é a cor de fundo agora? AZUL.
66
2 VHUYL©R GH YDOLGD©¥R GD :& HVW£ GLVSRQ¯YHO HP KWWSYDOLGDWRU
ZRUJ
Para maiores detalhes de como validar seu site e obter o selo de
YDOLGD©¥RYHMDRY¯GHRKWWSZZZ\RXWXEHFRPZDWFK"Y GWBGY'SQN
E então? Como está o seu processo de aprendizagem? Muita informação
para assimilar?
Mas, vamos em frente, na próxima seção, veremos um pouco de prática,
isso irá facilitar o entendimento da teoria vista até agora.

Portanto, dando continuidade na nossa aula, os convido a conhecer as

principais vantagens do uso de CSS. Vamos lá!!??
3 - CSS na prática
Passamos agora para a prática para que possam assimilar
tudo o que foi dito até agora nesta aula.
São inúmeras as vantagens do uso de CSS nos
documentos web, portanto, destaca-se a seguir, as principais
vantagens citadas por Macedo (2006): CSS é executado no lado cliente, ou seja, no computador do usuário. As
‡ HVFUHYHVHRHVWLORXPD~QLFDYH] CSS não são case sensitive, sendo assim, é indiferente se são escritas
‡ SDGURQL]DomR em letras maiúsculas ou minúsculas, porém é aconselhável que se
‡ IiFLOPDQXWHQomR adote um padrão. Uma vez iniciado com tags minúsculas, todas devem
‡ diferentes estilos podem ser aplicados no mesmo ser minúsculas e vice-e-versa.
GRFXPHQWR
‡ consistência do documento, o CSS pode garantir
que todos os documentos terão o mesmo desenho e A partir de agora, a primeira coisa que vocês precisam
DUUDQMR entender: uma folha de estilos css, não é uma página HTML,
‡ páginas mais leves, visto que reduz o tempo de RXVHMDQmRSRVVXLDHVWUXWXUDGHWDJV+70/FRPRKWPO!
carregamento e diminui o tamanho total dos KHDG!WLWOH!ERG\!HWF
DUTXLYRV Uma folha de estilos inicia-se com a declaração das
‡ aumento considerável na portabilidade dos propriedades, sem que nada mais seja inserido. Esse é um
documentos Web. H[HPSORGHXPDIROKDGHHVWLORV

3RGHVH GL]HU TXH QR &66 QmR H[LVWHP GHVYDQWDJHQV

SRUpP H[LVWHP DOJXPDV OLPLWDo}HV H FXLGDGRV HVVHQFLDLV
que se deve ter na hora de projetar seus estilos de forma que
se tenha uma página apresentável de maneira correta, sem
“estourar” o layout, enfim, deve-se atentar a:
‡ escrever estilos de forma que funcionarão em todos
os browsers independente da resolução de tela, ou
seja, layouts responsivos
Para isso, devem ser seguidos os padrões de
O segundo passo que vocês precisam entender: a página
desenvolvimento (web standards) e submeter seu site ao
de estilos por si só não representa nada. Ela é somente a
processo de validação, a fim de obter o selo de certificação de
definição da aparência visual que as páginas a ela vinculadas
validação da W3C.
terão. Pois quem irá interpretar esses estilos é o HTML.
Figura 5.2: Selo de validação CSS Dessa forma, na página html você deve dizer a ela quais
folhas de estilos ela irá utilizar. Então, na página html, na seção
KHDG!VHLQFOXLDIROKDGHHVWLORV,VVRpIHLWRQDOLQKD
FRQIRUPHPRVWUDGRDEDL[R

Fonte: http://validator.w3.org/. Acesso em: 14 out. 2017.

 67 215
A TERCEIRA coisa: até o momento, se visualizar a Para testar e entender passo a passo o que acabamos de
página, terá apenas uma página de cor azul, pois eu tenho YHUIDoDRH[HUFtFLRDVHJXLU
DSHQDV D WDJ ERG\! HP PLQKD SiJLQD H IRL FULDGR R HVWLOR  &ULHXPDSiJLQDH[HPSOR&66FRQIRUPHRPRGHOR
para ela na folha de estilos. DEDL[R

body { &yGLJRH[HPSORFVV
EDFNJURXQGFRORU&&))GHILQLQGRFRUGHIXQGRD]XO
}

Para a criação de estilos, quando se refere a uma tag html,

pode ser declarada diretamente iniciando com o nome da tag,
VHPRVVLQDLVH!DSHQDVDVVLP

h1{...;}
h2{...;}
p{...;}
a{...;}
body{...;}

E quando eu defino um nome que não corresponde a uma Fonte: o autor

WDJ KWPO H[LVWHQWH FRPR SRU H[HPSOR HX TXHUR GHILQLU XP
HVWLOR FKDPDGR 7(;72 FRPR QmR H[LVWH XPD WDJ FKDPDGD  $JRUDFULHXPDSiJLQDFRQIRUPHDSiJLQDDEDL[RH
7(;72HXGHYRHQWmRGHILQLUXPDFODVVHFXMDVLQWD[HLQLFLDVH VDOYHDFRPDH[WHQVmRKWPO
FRPXPSRQWRILQDOH[
Código: pagina.html
.texto {font-size: 12px;}

Outra opção é criar um identificador, id. O id precede o

QRPHGRHVWLORFRPRVtPEROR([

#texto {font-size: 18px;}

Na página, html, para visualizar os estilos criados, você

SUHFLVDWrORVLQVHULGRVQRFRUSRGDVXDSiJLQD([
Para os estilos que foram definidos com o nome de tag,
basta colocar a tag. Na folha de estilos eu criei um estilo p{ font-
VL]HS[`LVVRVLJQLILFDTXHWRGRVRVSDUiJUDIRVGDPLQKD
página terão tamanho de fonte 14. Basta criar os parágrafos no
corpo da página html:
Fonte: o autor

<p> Fonte de tamanho 14 </p>

Feito isso, abra o seu navegador e visualize a pagina.html,
Quanto às classes e id, a forma de chamar é um pouco WHUiRUHVXOWDGRPRVWUDGRDEDL[R
diferente, conforme está especificado no guia de estudos. Para
Figura 5.3: Resultado no browser da pagina.html – com
os estilos do tipo classe, que iniciam com o . pode se usar a tag
css
VSDQ!RXGLY!SDUDFKDPiOR

<span class= “texto” > Texto de tamanho 12 <span> ou então

<div class= “texto”> Texto de tamanho 12 </div>

E para definir os estilos que começam com o símbolo #,

GHYHVHXVDURLG([

<span id= “texto” > Texto de tamanho 18 <span> ou também

<div id= “texto”> Texto de tamanho 18 </div>.
Fonte: o autor
216 Desenvolvimento Voltado à Web I
Agora faça um teste: na pagina.html, comente a linha
4, que contém a vinculação da folha de estilos. Em seguida,
visualize a página, agora sem os estilos, o resultado será:
Figura 5.4: Resultado no browser da pagina.html – sem
css
Fonte: o autor
Dica:SURFXUHVHPSUHXWLOL]DUQRPHVLQWXLWLYRVQDGHȴQL©¥RGHVHXV
estilos, nomes que lembram sua função e objetivo, isso facilita bastante
em uma futura manutenção, ou ainda insira comentário dentro do
FµGLJRRVFRPHQW£ULRVHP&66V¥RGHOLPLWDGRVSHODVPDUFD©·HV

H
 ‹ DFRQVHOK£YHO DLQGD R XVR GH XPD OLQKD SDUD FDGD XPD GDV
propriedades do seletor. E, principalmente, teste suas páginas em
diversos navegadores e use também o CSS Validador do W3C como
forma de garantir que suas folhas de estilo funcionem em diversos
navegadores.
&KHJDPRVDRȴQDOGHPDLVXPDDXOD(HQW¥RHQWHQGHXGLUHLWLQKRR
FRQWH¼GR" )LFRX FRP DOJXPD G¼YLGD" (P FDVR DȴUPDWLYR DFHVVH R
ambiente virtual e utilize as ferramentas indicadas para interagir e sanar
VXDVG¼YLGDV3DUWLFLSH9RF¬«RSURWDJRQLVWDGHVXDDSUHQGL]DJHP
Retomando a aula
&RPRID]HPRVHPWRGDVDVDXODVDQWHVGHȴQDOL]DU
vamos relembrar os principais pontos abordados na
aula?
1 - Introdução ao CSS
Na seção 1, vimos que CSS é um mecanismo simples para
DGLFLRQDUHVWLORVSH[IRQWHVFRUHVPDUJHQVHVSDoDPHQWRV
bordas, dentre outras infinidades de recursos) aos documentos
Web de forma a se obter o controle absoluto da aparência da
página. Seu principal benefício é prover a separação entre a
formatação e o conteúdo de um documento. Vimos que a
VLQWD[HGHXPHVWLORpFRPSRVWDSRUVHOHWRU^SURSULHGDGH
YDORU`
2 - Formas de inclusão de estilos CSS
Na seção 2, conhecemos as 3 formas de inclusão de
HVWLORV &66 HP GRFXPHQWRV ZHE H[WHUQR LQWHUQR H LQOLQH
$ IRUPD H[WHUQD FRQVLVWH HP GHVHQYROYHU R FyGLJR &66 H
salvá-lo em um arquivo .CSS, e posteriormente vincular o
estilos .css no documento (.html) através de um link. Esta
forma permite que várias ou todas as páginas utilizem o estilo
68
criado. O CSS interno consiste em declarar localmente, dentro
GDVHomRKHDG!GRGRFXPHQWRDWUDYpVGDWDJVW\OH!(VWD
forma faz que somente a página atual seja afetada. E o CSS
inline, as regras (estilos) são inseridas diretamente dentro da tag
do elemento html. Para isso, deve-se usar o atributo style. Esta
forma faz com que com que apenas o elemento em questão
seja afetado. Vimos ainda a forma importada, que consiste em
vincular um arquivo CSS dentro de outro CSS ou ainda dentro
GDVHomRKHDG!DWUDYpVGDWDJVW\OH!&RQKHFHPRVDLQGDR
que é o efeito cascata e as principais vantagens do uso de CSS.
3 - CSS na prática
Na última seção da aula, seção 3, vimos a aplicação de um
H[HPSORGR&66QDSUiWLFD
Vale a pena
Vale a pena ler
LOUDON, Kyle. Desenvolvimento de Grandes Aplicações
Web. São Paulo: Novatec, 2010.
MACEDO, Marcelo da Silva. CSS (Folhas de Estilos):
dicas e truques. Rio de Janeiro: Ciência Moderna, 2006.
MIYAGUSHU, Renata. Desvendando os recursos do CSS:
aprenda passo a passo a criar folhas de estilo. São Paulo:
Digerati Books, 2007.
SILVA, Maurício Samy. CSS3 - Desenvolva aplicações
web profissionais com o uso dos poderosos recursos de
estilização das CSS3. São Paulo: Novatec, 2011.
_____. Web Design Responsivo. São Paulo: Novatec, 2014.
_____. Fundamentos de HTML5 e CSS3. São Paulo:
Novatec, 2015.
SOMERA, Guilherme. Treinamento prático em CSS. São
Paulo: Digerati Books, 2006.
Vale a pena acessar
HTML.NET. Tutorial de CSS. Disponível em: <http://
SWEUKWPOQHWWXWRULDOVFVV!. Acesso em: 14 out. 2017.
MAUJOR. Introdução às CSS. Disponível em: <http://
ZZZPDXMRUFRPWXWRULDOLQWUWXWSKS!. Acesso em: 14 out.
2017.
_____. Guia completo dos seletores CSS3. Disponível
em: <http://www.maujor.com/tutorial/guia-completo-
seletoresFVVSKS!. Acesso em: 14 out. 2017.
TABLELESS. Tableless. Disponível em: <https://
WDEOHOHVVFRPEUFDWHJRULHVFVV!. Acesso em: 14 out. 2017.
W3C. Cascading Style Sheets - home page. Disponível
em: KWWSVZZZZRUJ6W\OH&662YHUYLHZHQKWPO!
Acesso em 27 out. 2017.
 69 217

Vale a pena assistir

YOUTUBE. Criando a estrutura do site com HTML

e CSS. Disponível em: <http://www.youtube.com/
ZDWFK"Y OH2N1BH-,= 15 !. Acesso em: 14 out. 2017.
____. CSS. Disponível em: <http://www.youtube.
com/watch?v=LDqZLbg8clIhttp://www.youtube.com/
ZDWFK"Y /'T=/EJFO,!. Acesso em: 14 out. 2017.
____. Curso de CSS – Aula 1 (Introdução ao
CSS). Disponível em: <http://www.youtube.com/
ZDWFK"Y 5%=F1L%$9Z0!. Acesso em: 14 out. 2017.
____. Curso de CSS – Aula 2. (Estilizando
7H[WRV 'LVSRQtYHO HP <http://www.youtube.com/
ZDWFK"Y <0%3J(!. Acesso em: 14 out. 2017.
____. Curso de CSS – Aula 3 (Imagens de fundo e
DWULEXWR WH[W 'LVSRQtYHO HP <http://www.youtube.com/
ZDWFK"Y P3+:28-DI(!. Acesso em: 14 out. 2017.
____. Curso de CSS – Aula 4 (Links e Div’s). Disponível em:
KWWSZZZ\RXWXEHFRPZDWFK"Y *'Y*8H(!.
Acesso em: 14 out. 2017.
____. Curso de CSS – Aula 5 (Classe, ID e
span). Disponível em: <http://www.youtube.com/
ZDWFK"Y W.86E:QE:UF!. Acesso em: 14 out. 2017.
____. Curso de CSS - Aula 6 (Margin, Padding e
Float). Disponível em: <http://www.youtube.com/
ZDWFK"Y 3QOD$YP[8!. Acesso em: 14 out. 2017.
____. Curso de CSS - Aula 7 (Posicionamento de
(OHPHQWRV %RUGDV H =,QGH[ 'LVSRQtYHO HP <http://
ZZZ\RXWXEHFRPZDWFK"Y D%1G3KY(0!. Acesso em:
14 out. 2017.
____. Curso de CSS - Aula 8 (Efeitos com o Atributo
Hover). Disponível em: <http://www.youtube.com/
ZDWFK"Y 9RPZVUM=-%Z!. Acesso em: 14 out. 2017.
____. Curso de CSS - Aula 9 (Herança). Disponível em:
KWWSZZZ\RXWXEHFRPZDWFK"Y \G8=K]R!.
Acesso em: 14 out. 2017.
____. Curso de CSS - Aula 10 (Criando um Menu com
Listas CSS). Disponível em: <http://www.youtube.com/
ZDWFK"Y +P=K61<8!. Acesso em: 14 out. 2017.
____. Curso de CSS - Aula 11 (Menu Drop-
Down). Disponível em: <http://www.youtube.com/
ZDWFK"Y H<PHBM]'V!. Acesso em: 14 out. 2017.
____. Curso de CSS - Aula 12 (Validação e Web
Standars). Disponível em: <http://www.youtube.com/
ZDWFK"Y GWBGY'SQN!. Acesso em: 14 out. 2017.

Minhas anotações