ProgramacaoWeb Unidade03 PDF

Programação web
Unidade 3
Introdução ao CSS
Programação web
Unidade 3
Introdução ao CSS
Programação web | Unidade 3 - Introdução ao CSS
Unidade 3 Introdução ao CSS
Objetivos de aprendizagem:
• Apresentar o CSS, ou folha de estilo, que permite diferentes tipos de formatações, como bordas,
cores, fundo etc.
• Ensinar os vários tipos de seletores do CSS que podem ser utilizados para personalizar as páginas:
seletor de tags, seletor de classes, seletor de IDs, seletor de atributos e seletores de pseudoclasse e
pseudoelemento.
• Ensinar a solucionar problemas nas formatações das páginas HTML por meio da inspeção das folhas
de estilo pelo navegador.
Tópicos de estudo:
• A sintaxe do CSS;
• Seletores CSS;
• Solução de problemas nas folhas de estilo.
Iniciando os estudos:
CSS (Cascading Style Sheets, em português “Folha de Estilo em Cascata") é uma linguagem que descreve como
os elementos HTML devem ser exibidos no seu navegador. Ele permite controlar fontes, cores, margens,
linhas, alturas, larguras, imagens de fundo, posicionamentos etc. Atualmente a linguagem está na versão 3 e
como você vai ver nas próximas unidades, o CSS simplifica muito a vida dos desenvolvedores web, pois ele
separa o código HTML de sua formatação, além de permitir a reutilização de uma determinada formatação
em mais de uma página web. Essas duas vantagens reduzem a quantidade de código nas suas páginas e
melhora a legibilidade do seu HTML.
3
1 A SINTAXE DO CSS
Como mencionado anteriormente, o HTML é utilizado para indicar o conteúdo da sua página, já o CSS é
uma linguagem para especificar como os documentos são apresentados para os usuários. Repare que
nas suas páginas HTML os cabeçalhos (<h1>) já são maiores que os textos normais dentro dos pará-
grafos (<p>) e os parágrafos geram uma quebra de linha e um espaço entre ele e o próximo elemento
HTML. Os links (<a>) são coloridos e sublinhados para distingui-los do restante do texto. Veja a figura 1
abaixo, por exemplo:
Figura 1 - Exemplo de estilo padrão aplicado pelo navegador.

Fonte: elaborado pelo autor.
4
ED+ Content Hub © 2019
Infográfico 1 - HTML + CSS.

O que você está vendo é o estilo padrão que o navegador aplica ao HTML para garantir que ele seja
legível. Porém, a web seria um lugar sem graça se todos os sites fossem assim. É por esse motivo que é
possível utilizar o CSS para alterar a formatação de todos os elementos da página HTML, como demos-
trado no site abaixo (figura 2):
5
Figura 2 - Exemplo de customização de estilo.

Assista
Acesse na plataforma o vídeo: Introdução ao CSS
Acredite, as imagens acima são da mesma página HTML, porém a última possui um conjunto de estilos
CSS aplicados aos seus elementos. Você pode ver o comportamento dinâmico do site, acessando o ende-
reço https://pagina-com-varios-estilos.tarleylana.repl.co/. Clique em um estilo do menu (Estilo 1, Estilo 2,
Estilo 3 ou Estilo 4) para que um novo conjunto de estilos seja aplicado à página, o que altera completa-
mente o seu formato. Por exemplo, veja o segundo estilo aplicado (figura 3):
6
Figura 3 - Mesma página HTML com outro estilo aplicado.

7
Aprofunde-se
O CSS possui 17 cores nomeadas:
Ou seja, poderíamos escrever a regra CSS acima da seguinte forma:

h1 {
background-color: green;
color: white;
}
Porém, 17 é um número limitado e você vai precisar de uma paleta maior de cores para
sites mais estilizados. Nesse caso, utilize as cores formatadas por um código RGB (Red,
Green, Blue) no seguinte formato:
• Um sinal numérico (#);
• Seguido de três ou seis dígitos hexadecimais na faixa de 0 – 9 e a – f (As letras a – f
representam os valores 10 – 15). No qual 0 significa nenhuma presença da cor e F
significa a intensidade máxima da cor.
Exemplo: #0f0 ou #00ff00
Para saber mais sobre as cores do CSS 3, acesse o endereço: https://www.w3.org/
TR/css-color-3/
As fontes do projeto você encontra no endereço https://repl.it/@TarleyLana/pagina-com-varios-estilos.

Acesse-os e repare que há quatro folhas de estilo (arquivos com a extensão .css). Abra o primeiro style1.
css e veja que existe um conjunto de regras de estilo que devem ser aplicadas a elementos em sua
página. O CSS não é nada mais que uma linguagem baseada em regras. Para explicar melhor, imagine a
seguinte solicitação do seu cliente: “Quero que o cabeçalho principal da minha página seja apresentado
com a cor de fundo verde e as letras na cor branca”. O código a seguir mostra uma regra CSS muito
simples que atenderia o pedido acima:
h1 {
background-color: #4CAF50;
color: #ffffff;
8
Toda regra CSS possui a seguinte sintaxe (figura 4):

Figura 4 - Sintaxe de uma regra CSS.
1) A regra é iniciada com um seletor. Como o próprio nome diz, esse item seleciona o elemento
HTML que será estilizado. Nesse caso, são selecionados todos os elementos <h1> da página.
2) Em seguida há um conjunto de chaves { } que delimitam o estilo CSS. Dentro, você vai declarar
uma ou mais propriedades com os seus respectivos valores (no formato chave:valor).
3) Antes dos dois pontos há a propriedade. Após os dois pontos, o valor. Existe uma lista de
propriedades CSS possíveis, cada uma possui diferentes valores permitidos. Por exemplo, as
propriedades color e background-color, no exemplo acima, podem assumir vários valores de
cores em hexadecimal RGB.
Outro exemplo mais completo: à esquerda a sintaxe, à direita o código implementado:
seletor { body {
propriedade: valor; background-color:#eeeeee;
propriedade: valor; color: #111100;
propriedade: valor; font-family: Arial, Tahoma, Verdana;
propriedade: valor; font-size: 10px;
} }
Este estilo será aplicado ao elemento <body> do HTML, alterando a cor de fundo, a cor, a fonte e o
tamanho da letra.
9
Aprofunde-se
Existem diversos tipos de propriedades CSS, logo você vai entender que é difícil decorar
todos os tipos. Para auxiliá-lo, mantenha nos favoritos do seu navegador a lista de possíveis
propriedades:
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Reference
Você também pode acessar rapidamente as informações de uma determinada

propriedade utilizando o motor de busca do seu navegador. Apenas escreva o texto no
seguinte formato:
“mdn propriedade-css”
Por exemplo:
mdn font-family
mdn border-style
mdn box-shadow
Até agora, foi explicada a sintaxe do CSS, porém você ainda não deve ter entendido como ele pode ser
aplicado às suas páginas HTML. Existem três formas:
1. Método in-line (por meio do atributo style);
2. Método interno (por meio da tag style);
3. Método externo (por meio de um link para uma folha de estilo).
No primeiro método, você utiliza o atributo style (que as tags HTML possuem) para escrever o código
CSS. Por exemplo, caso seja necessário colorir de vermelho uma página HTML, você pode escrever o
seguinte código:
<body style=”background-color: #FF0000;”>
<p>Esta é uma página com fundo vermelho</p>
</body>
Caso seja necessário mais de uma propriedade, você deve utilizar o ponto e vírgula para separá-las. O
exemplo abaixo aplica ao texto uma margem de 50 pixels (50px), um tamanho de 18 pontos (18pt), estilo
negrito e cor de fundo amarelo.
10
<p style=”margin-left: 50px; font-size: 18pt”>
<span style=”font-weight: bold; background: #FFFF00”>
texto diferente
</span>
</p>
A segunda maneira de aplicar o CSS a sua página é pelo uso da tag <style> do HTML:
<html>
<head>
...
<style type=”text/css”>
body {
background-color: blue;
}
</style>
</head>
<body>
<p>Esta é uma página com fundo azul</p>
</body>
</html>
Neste método, você cria um bloco style no cabeçalho do HTML (entre as tags <head> </head>). Dentro
do bloco, você cria as regras CSS. No exemplo acima, foi criada uma regra que se aplica ao elemento
<body> do seu documento, mudando a cor de fundo para azul.
11
O exemplo abaixo mostra como criar mais de uma regra CSS utilizando o método interno:
<html>
<head>
...
<style type=”text/css”>
body {
background-color: #567895;
}
h1 {
font-size: 24pt;
font-family: “Impact, Arial, Sans-Serif”;
background-color: black;
color: white;
}
p {
font-size: 14pt;
font-family: cursive;
color: black;
}
</style>
</head>
<body>
<h1>Método Interno</h1>
<p>Podemos criar mais de uma regra de estilo desta forma</p>
</body>
</html>
12
Veja o resultado do código acima na figura 5.
Figura 5 - Exemplo de criação de mais de uma regra CSS

utilizando o método interno.
Reflita
No exemplo acima, foi utilizada a propriedade font-family para especificar o tipo de letra
que o elemento HTML deve utilizar. Porém, a regra h1 aplica três diferentes fontes:
h1 {
...
...
}
O que seria isso? Por que não foi utilizado apenas um tipo de fonte?
O motivo é que as fontes não são específicas de CSS e precisam ser instaladas no
computador do usuário ou baixadas para que o CSS as aplique. Logo, é possível que você
utilize em seu site uma fonte que não exista na máquina do seu cliente. A solução para
esse problema é utilizar a técnica acima chamada de fallback. A ideia é que o navegador
tentará usar a fonte que você especificou primeiro (Impact), mas se não tiver essa fonte
disponível ele tentará a próxima (Arial), se todas falharem ele tentará a Sans-Serif.
A terceira maneira de aplicar o CSS a sua página é criando um arquivo de estilos externo e, na sua página
HTML, utilizar a tag <link> para referenciar esse arquivo. Por exemplo, no arquivo externo.html, você
utiliza os estilos descritos no arquivo style.css, que está no diretório css.
13
<html>
<head>
...
<link href=”css/style.css” rel=”stylesheet” type=”text/css”/>
</head>
<body>
...
Essa é a estrutura do projeto web, repare que o arquivo de estilo está dentro de um diretório css para
separar arquivos HTML de arquivos CSS. Você pode colocar qualquer nome para esta pasta, porém,
lembre-se de atualizar o atributo href=”<nome do diretório>/style.css”. com o novo nome do diretório,
conforme a figura 6.
Figura 6 - Exemplo de projeto utilizando o método

externo de CSS.
Aprofunde-se
Existem algumas fontes que são consideradas “seguras para a web” – isso significa
que a maioria dos computadores que visitarem o seu site possuem uma dessas fontes
instaladas e, portanto, o navegador vai utilizá-la. Alguns exemplos são: Arial, Times New
Roman, Courier, Geórgia e Verdana. Para ver a lista completa, acesse:
http://web.mit.edu/jmorzins/www/fonts.html
14
O arquivo style.css possui apenas código CSS, conforme demostrado abaixo:
body {
background-color: #567895;
}
h1 {
font-size: 24pt;
background-color: black;
color: white;
}
p {
font-size: 14pt;
font-family: cursive;
color: black;
}
15
Reflita
Existem três formas de se aplicar o CSS. Qual delas é a mais recomendada para sites
profissionais?
O método recomendado é o de referenciar uma folha de estilos externa, pois, ao separar o
código HTML do código CSS, os seus arquivos HTML serão menores e mais legíveis. Outra
grande vantagem desse método é o aumento da produtividade por meio da reutilização
de regras de estilo, pois uma regra CSS pode ser aplicada a N arquivos HTML, como
demonstrado na figura abaixo:
Todas as páginas HTML possuem um <link> para o mesmo arquivo style.css.

Além do aumento de produtividade, a manutenibilidade do seu site também será melhor,
pois mudanças em uma regra geram efeito em todos os documentos HTML.
Mas você pode utilizar as outras duas formas (método in-line e método interno) para
testes rápidos durante o desenvolvimento. Porém, ao final dos testes, lembre-se de migrar
os estilos criados para um arquivo externo.
O CSS resolveu um grande problema do desenvolvimento web, principalmente no desenvolvimento de

grandes sites, pois no início o HTML não pretendia conter tags para a formatação de páginas. Ele foi
criado com o único objetivo de descrever o conteúdo. Porém, a especificação 3.2 do HTML incorporou
tags como <font> ou <center>, e atributos para definição de cores e posicionamento (ex.: bgcolor=”red”,
align=”center”). Foi aí que começou o pesadelo dos desenvolvedores web, pois misturar conteúdo com
fontes, alinhamento e cores, além de não ser muito produtivo e reutilizável, fez com que as páginas
ficassem confusas e a manutenção muito trabalhosa. Para resolver esse problema, o World Wide Web
Consortium (W3C) criou o CSS e esse removeu a formatação do estilo da página HTML.
16
Aprofunde-se
As tags <font> e <center>, além dos atributos bgcolor e align são alguns dos vários
elementos do HTML que se tornaram obsoletos e não estão mais disponíveis no HTML
5, pois suas funções são mais bem desempenhadas pelo CSS. Para ver a lista completa,
acesse o endereço:
https://www.tutorialspoint.com/html5/html5_deprecated_tags.htm
É recomendado não utilizar esses elementos nos seus sites, mesmo que o seu
navegador ainda o suporte, pois a ideia é que o item possa ser removido em uma
versão futura do navegador.
No próximo tópico você vai aprender na prática como aplicar regras CSS aos elementos de um HTML.
Reflita
O que acontece quando mais de um estilo é aplicado ao mesmo elemento HTML?
Quando as propriedades são diferentes, o navegador resolve de forma simples,
adicionando ao elemento as diferentes propriedades de cada regra. Porém, quando
existem conflito de propriedades (ex.: uma regra coloca a cor da letra verde e outra regra
coloca a cor da letra azul), o navegador resolve utilizando uma precedência baseada no
que é mais específico para o mais genérico. Conforme descrito abaixo:
Por exemplo, se a letra azul for aplicada por meio do atributo style (métódo in-line) e a cor
verde por meio de um estilo em um arquivo externo (método externo), o navegador vai
aplicar ao elemento a cor azul.
Lembre-se disso, pois você vai enfrentar situações em que está tentando aplicar um estilo
a um elemento, mas ele não funciona, como se o navegador ignorasse seu código CSS.
17
2 SELETORES CSS
Assista
Acesse na plataforma o vídeo: Introdução ao HTML
Agora você vai aprender a estilizar uma página HTML utilizando:
• Seletor de elemento;
• Seletor combinador descendente;
• Seletor combinador irmão adjacente;
• Seletor universal;
• Seletor de ID;
• Seletor de classe;
• Seletor de estado;
• Media query.
18
A figura 7 abaixo ilustra o resultado desta prática:
Figura 7 - Resultado da prática.

Sua tarefa é construir uma página idêntica à apresentada acima. Durante o desenvolvimento, você vai
aprender técnicas para a construção de páginas estilizadas.
O ponto de partida é o código HTML da página acima:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<meta name=”viewport” content=”width=device-width”>
<title>Seletores CSS</title>
</head>
19
<body>
<h2>Seletores CSS</h2>
<p>
Agora você vai aprender a estilizar uma página HTML utilizando:

</p>
<ul>
<li>seletor de elemento</li>
<li>seletor combinador descendente</li>
<li>seletor combinador irmão adjacente</li>
<li>seletor universal</li>
<li>seletor de ID</li>
<li>seletor de classe</li>
<li>seletor de estado</li>
<li>media query</li>
</ul>
<p>
** Redimensione a janela do navegador para ver o efeito responsivo **.
</p>
<span>
INSCREVA-SE
</span>
<header>
<h1>Cursos de Graduação</h1>
</header>
<section>
<nav>
<ul id=”menulist”>
<li class=”menuitem”>
<a href=”#”>Análise e Desenvolvimento de Sistemas</a>
</li>
<a href=”#”>Jogos Digitais</a>
20
</li>
<a href=”#”>Sistemas de Informação</a>
</li>
</ul>
</nav>
</section>
<article>
<aside>
<h1>Análise e Desenvolvimento de Sistemas</h1>
<p>
O tecnólogo com esta formação desenvolve, analisa, projeta, implementa e
atualiza sistemas de informação. Tem noções de gerenciamento, mas sua especialidade é
a criação de sistemas informatizados: programação de computadores e desenvolvimento de
softwares para ampliar a capacidade dos recursos do equipamento.
</p>
<p>
Ele implanta e desenvolve banco de dados. Conhece a estrutura física dos
equipamentos e seus periféricos, e precisa se manter muito atualizado sobre aplicati-
vos, ambientes operacionais e linguagens de programação. Além disso, precisa ter boa
noção dos negócios da companhia para a qual trabalha.
</p>
</aside>
</article>
<footer>
Newton - 2020 - Todos os direitos reservados.
</footer>
</body>
</html>
Gaste um tempo estudando esse código, pois ele será a base de todos os exemplos de seletores CSS
deste tópico.
Uma dica sobre o aprendizado de programação é que você aprende mais quando coloca a mão na massa,
então acesse o endereço https://repl.it/@TarleyLana/seletores-CSS-pratica e siga os passos descritos aqui.
Lembre-se de autenticar a ferramenta Repl.it para que o código fique salvo no seu perfil.
21
A primeira tarefa seria a escolha de uma das três formas de aplicar o CSS:
• Método in-line (por meio do atributo style);
• Método interno (por meio da tag style);
• Método externo (por meio de um link para uma folha de estilo).
Porém, como já explicado anteriormente, o método externo é o mais recomendado, habitual e útil. Logo,
essa será a escolha da prática.
Para aplicar o método externo, você deve criar um arquivo (pode ser na mesma pasta em que se encontra
o documento HTML) e colocar o nome dele de style.css, conforme a figura 8:
Figura 8 - 1) Clique no botão Add file;

2) Coloque o nome no arquivo.
Para ligar o style.css ao index.html, adicione a seguinte linha em algum lugar dentro do <head> do
documento HTML:
<link href=”style.css” rel=”stylesheet” type=”text/css” />
O elemento <link> informa ao navegador que esse arquivo HTML utiliza o arquivo CSS descrito no atri-
buto href. Para testar se tudo está correto, adicione a regra abaixo ao seu arquivo style.css:
h1 {
color: #84c754;
Execute a sua página (botão no topo da ferramenta). Se sua página estiver conforme a figura
9 abaixo, parabéns! Você aplicou com sucesso o CSS ao documento HTML. Se nada aconteceu, revise
cuidadosamente o seu código para ver se digitou tudo certo.
22
Figura 9 - CSS aplicado ao documento HTML.

O teste acima aplicou o estilo ao elemento <h1> utilizando um seletor de elemento. Esse seletor busca
no HTML elementos pelo tipo descrito no início da regra. Por exemplo, para aplicar um determinado
estilo a todos os parágrafos do documento (tag <p>), você deve escrever a regra no seguinte formato:
p {
/* Informe as propriedades aqui */
}
23
Para alterar a cor e a fonte de todos os parágrafos <p> e dos itens de lista <li>, você deve escrever o
seguinte código:
p {
color: #666;
font: 100% Lucida Sans, Verdana;
}
li {
color: #666;
}
Veja que os estilos acima são idênticos. Quando isso ocorre, você pode simplificar o código agrupando os
seletores. Para isso, você coloca os elementos separados por vírgula, como o código abaixo:
p, li {
color: #666;
}
Como dito no tópico passado, todos os navegadores aplicam estilos básicos no HTML. Veja que os títulos
são grandes e estão em negrito, a lista possui marcadores e os links estão sublinhados.
Contudo, alguns estilos podem não ser o que você deseja para sua página, por exemplo essa lista com
as disciplinas:
Atual Esperado
Tabela 1 - Lista para navegação.

24
Para atender ao desenho solicitado, você deve remover os marcadores da lista, o sublinhado dos textos
e mudar a cor de azul para preto. Você pode fazer isso utilizando as seguintes propriedades:
a {
text-decoration: none;
color: black
}
ul {
list-style-type: none;
}
O valor none das propriedades text-decoration (tag <a>) e list-style-type (tag <ul>) removem toda a
formatação do elemento.
Aprofunde-se
As propriedades text-decoration e list-style-type são excelentes propriedades para
se pesquisar na documentação da MDN. Lá você vai descobrir que, além de remover a
formatação, é possível aplicar outros estilos aos elementos, por exemplo:
text-decoration: none; /* Sem decoração */
text-decoration: underline red; /* Sublinhado vermelho */
text-decoration: underline wavy red; /* Sublinhado ondulado vermelho */
e
list-style-type: disc; /* Um círculo preenchido (valor padrão) */
list-style-type: circle; /* Um círculo oco */
list-style-type: square; /* Um quadrado cheio */
list-style-type: decimal; /* Números decimais começando com 1 */
Para saber mais, acesse:
https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-decoration
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
Você deve ter reparado um problema no seletor de elemento. Veja que ele altera todos os elementos
que coincidem com o tipo informado. Isso pode afetar elementos que você não deseja, como é o caso
da primeira lista do documento.
25
Atual Esperado
Tabela 2 - Primeira lista do documento.

Existem vários seletores que podem resolver esse problema, um exemplo é o seletor chamado combi-
nador descendente, no qual você indica a localização do elemento que você quer aplicar o estilo. Por
exemplo, se você quer alterar somente o estilo padrão da segunda lista, você pode indicar que o seu estilo
deve ser aplicado a toda lista <ul> que está dentro de um elemento <nav>, conforme o código abaixo:
style.css index.html
nav ul { <section>
list-style-type: none; <nav>
} <ul id=”menulist”>
...
</ul>
</nav>
</section>
Desta forma, a primeira lista permanece inalterada, pois ela não está dentro de um elemento <nav>. Já
a segunda recebe o estilo conforme solicitado na prática.
Lembre-se de alterar o arquivo style.css com o estilo acima para a lista.
Reflita
Você notou alguma diferença entre o agrupamento de seletores e o seletor combinador
descendente?
Cuidado para não errar durante a utilização de um ou de outro, pois é um detalhe
muito sutil.
No agrupamento, você escreve os seletores separados por vírgula. Já no seletor
combinador descendente, você separa os seletores por espaço.
26
Outro seletor que você pode gostar de experimentar é o combinador irmão adjacente, que estiliza um
elemento que vem diretamente após um outro no mesmo nível de hierarquia no HTML. Por exemplo, o
texto “**Redimensione a janela do navegador para ver o efeito responsivo.**” deve ter uma fonte menor
que os textos anteriores, além do estilo itálico. Para isso, coloque um + entre os seletores conforme
código abaixo:
style.css index.html
ul + p { <h2>Seletores CSS</h2>
font-style: italic; <p>
font-size: 90%; ...
} </p>
<ul>

...
</ul>
<p>
** Redimensione a janela do navegador
para ver o efeito responsivo **.
</p>
Repare que o texto está dentro de um parágrafo <p> que vem diretamente após uma lista <ul> (os dois
no mesmo nível de hierarquia). Por esse motivo se utilizou o seletor ul + p { ... }.
Agora você vai estilizar o texto “Cursos de Graduação” para dar uma cara mais profissional ao site.
Adicione a seguinte regra ao arquivo style.css.
header {
background-color: black; /* cor de fundo preto */
padding: 30px; /* será explicado a seguir */
text-align: center; /* centraliza o texto */
font-size: 35px; /* tamanho da fonte 35 pixels */
}
27
Para aprender a posicionar elementos em sua página, primeiro você deve entender como funciona as
propriedades padding (utilizada acima) e margin. Veja a figura 10 abaixo:
Figura 10 – Diferença entre as propriedades

padding e margin.
A propriedade padding define uma distância entre o conteúdo de um elemento e suas bordas. Já a
propriedade margin define a área de margem nos quatro lados do elemento. O valor definido é aplicado
aos quatro lados (acima, direita, abaixo e esquerda), porém você pode definir o valor de um determinado
lado utilizando as propriedades: margin-top, margin-right, margin-bottom, margin-left, padding-top, paddin-
g-right, padding-bottom e padding-left.
28
O resultado do estilo é apresentado abaixo (figura 11):
Figura 11 - Página com <header> estilizado.

Até o momento, todos os elementos do site estão um abaixo do outro, pois cada elemento cria uma linha
na página. Para posicionar os elementos em colunas, você precisa conhecer as propriedades:
• float: essa propriedade determina se um elemento deve se posicionar ao lado direito ou

esquerdo do seu contêiner. Ao utilizar essa propriedade, textos e elementos em linha irão se
posicionar ao seu redor.
• clear: essa propriedade especifica que o elemento e os elementos flutuantes a seguir devem
ser movidos para baixo, em uma nova linha.
• width: essa propriedade determina a largura da área de um elemento. Porém para calcular a
largura total ocupada pelo elemento, você deve considerar o tamanho da borda, da margem
e do padding.
• height: essa propriedade determina a altura da área de um elemento. Porém, para calcular a
altura total ocupada pelo elemento, você deve considerar o tamanho da borda, da margem e
do padding.
• box-sizing: essa propriedade é utilizada para alterar a forma de cálculo das larguras (widths)
e alturas (heights) dos elementos.
29
Primeiro, será alterada a forma de cálculo das larguras e alturas de todos os elementos da página. Para
isso, adicione a seguinte regra:
* {
box-sizing: border-box;
}
O seletor acima é chamado de seletor universal; o asterisco indica que todos os elementos do HTML
serão selecionados e terão o box-sizing como border-box. Isso facilitará o posicionamento dos
elementos na página, pois ao informar uma largura (width) e uma altura (height) dos elementos, você
não precisa considerar o padding e a border, devendo apenas considerar na conta o valor da margin.
Agora adicione o estilo ao <nav> para posicionar o menu à esquerda da tela, limitando sua altura em 300
pixels e sua largura ocupando 30% da tela.
nav {
float: left;
width: 30%;
height: 300px;
padding: 20px;
30
O resultado é demonstrado abaixo (figura 12):
Figura 12 - Página com <nav> estilizado.

O próximo passo é fazer com que o conteúdo principal <aside> ocupe os 70% restante da largura da tela
e tenha a mesma altura do menu (300 pixels). Para isso, adicione o estilo abaixo:
aside {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px;
}
31
Figura 13 - Página com <aside> estilizado.

Por fim, o estilo do <footer>, no qual o texto será alinhado à direita, com o tamanho da letra em 80% e
com a propriedade clear, que define que esse elemento e os seguintes devem ser movidos para uma
nova linha:
footer {
color: #272900;
text-align: right;
font-size: 80%;
padding: 5px;
clear: both;
}
32
Figura 14 - Página com <footer> estilizado.

Até agora, você estilizou a página usando somente os nomes e posições dos elementos. Porém, existem
dois outros tipos de seletores que permitem um maior controle, por exemplo o seletor de ID (identifi-
cação) e o seletor de classe. Veja o código abaixo do menu:
<ul id=”menulist”>
<a href=”#”>Análise e Desenvolvimento de Sistemas</a>
</li>
<a href=”#”>Jogos Digitais</a>
</li>
<a href=”#”>Sistemas de Informação</a>
</li>
</ul>
33
Repare que o elemento <ul> possui um atributo id (um identificador único desse elemento em todo
o documento), o valor é livre e você pode defini-lo como bem entender, porém é recomendado que
esse valor não se repita no documento. A identificação de um elemento é única dentro de uma página,
portanto, o seletor de identificação é usado para selecionar um elemento exclusivo. Para selecionar um
elemento pelo id, você utiliza o caractere hash (#) seguido pelo id do elemento, conforme código abaixo:
#menulist {
margin: 0;
padding: 0;
}
O seletor de classe seleciona elementos HTML com um atributo de classe específico. Veja os elementos
<li> com os atributos class. Para selecionar elementos com uma classe específica, escreva um caractere
de ponto (.), seguido pelo nome da classe, conforme código abaixo:
.menuitem {
background-color: #f1f1f1;
border: 1px solid #d4d4d4;
border-radius: 20px;
padding: 10px;
margin-top: 10px;
cursor: pointer;
}
Ao contrário do id, o valor do atributo class pode repetir no HTML, o que permite a reutilização dos
estilos em sua página.
34
O resultado dos dois estilos é exibido abaixo (figura 15):
Figura 15 - Página com menu estilizado.

Você pode aplicar a classe menuitem a qualquer elemento da página para que ele fique com a mesma
aparência dos itens do menu lateral. Por exemplo, você pode desejar que um determinado <span>
também fique com bordas arredondadas e fundo cinza. Experimente adicionar ao <span>INSCRE-
VA-SE</span> a classe menuitem e, em seguida, recarregue a sua página para ver o que acontece.
Vale ressaltar que você pode combinar vários seletores e combinadores. Por exemplo:
li.menuitem {
...
}
Essa sintaxe seleciona somente elementos li que tenham uma classe menuitem. Se você fizer isso, o
<span>, criado anteriormente, não terá mais o estilo aplicado.
35
Outro exemplo:
body h1 + p .menuitem {
...
}
Isso estilizará qualquer elemento com a classe menuitem, a qual está dentro de um <p>, que vem logo
após um <h1>, que, por sua vez, está dentro de um <body>. Ufa! Não se preocupe, com o tempo e
prática, você vai se acostumar a ler e escrever códigos CSS complexos.
Você também tem a opção de estilizar elementos baseados em seus estados. Por exemplo, o elemento
link <a> possui diferentes estados, dependendo se ele foi visitado, se não foi visitado, se o mouse está
acima dele ou se ele foi clicado. Você pode selecionar esses diferentes estados indicando o elemento,
seguido de dois pontos (:), seguido de seu estado, conforme código abaixo:
a:link {
color: darkblue;
}
a:visited {
color: green;
}
a:hover {
color: tomato
}
O CSS acima estiliza o link não visitado com a cor darkblue, já quando o link é visitado, ele fica com a cor
verde, e quando o mouse está em cima do link ele fica vermelho.
O último tipo de estilo que você vai aprender é uma novidade do CSS 3, as media queries. Uma media
query consiste em uma expressão condicional que permite a aplicação de um determinado estilo,
dependendo do dispositivo em que a página será apresentada. Com isso, você vai conseguir adaptar
o conteúdo para um smartphone, tablet, notebook ou uma smart TV. Por exemplo, ative o Responsive
Design Mode do seu navegador.
• No Firefox: pressione Ctrl + Shift + M.
• No Chrome: pressione F12, em seguida Ctrl + Shift + M.
36
Caso o atalho não funcione, tente acessar pressionando F12 e, em seguida, procure o seguinte
ícone .
Veja que em telas menores existe um impacto na disposição dos elementos da página, conforme a figura
16 a seguir:
Figura 16 - Em resoluções menores, os elementos

ultrapassam as suas bordas.
A solução é utilizar a seguinte media query para deixar a sua página adaptada para esses tipos de dispositivos:
@media (max-width: 900px) {

nav, article, aside {
width: 100%;
height: auto;
}
}
37
Essa query especifica que o estilo deve ser aplicado quando o dispositivo tiver uma largura de até 900
pixels. O estilo modifica a largura do menu e do conteúdo para 100%, ocupando assim todo a largura da
tela. O tamanho não está mais fixo em 300 pixels, ocupando o tamanho do conteúdo. O resultado é o
seguinte, conforme a figura 17:
Figura 17 - Página adaptada ao tamanho do dispositivo.

Esse conceito é conhecido no mercado como web design responsivo.
Aprofunde-se
Cada vez mais as pessoas utilizam smartphones para navegar na internet, porém grande
parte das páginas não está preparada para atender esse tipo de dispositivo. O web design
responsivo reage às necessidades dos usuários e seus dispositivos. Para aprender mais
sobre as boas práticas que permitem criar páginas adaptativas às diferentes telas, acesse
o endereço:
https://developers.google.com/web/fundamentals/design-and-ux/responsive?hl=pt_br
38
Você pode criar lógicas mais complexas com as media queries usando operadores lógicos, como:
and
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
not
@media not all and (monochrome) { ... }
only
@media only screen and (color) { ... }
Você também pode combinar múltiplas medias queries em uma lista separadas por vírgulas:
@media (min-width: 700px), handheld and (orientation: landscape)

{ ... }
Aprofunde-se
A media query possui diversas condicionais que podem ser utilizadas, daria mais um
tópico de estudo para tratar desse assunto. Para saber mais, acesse o endereço:
https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries
Neste tópico, você aprendeu várias maneiras de estilizar um documento usando o CSS. Agora, você já
sabe o suficiente para estilizar as suas páginas. Lembre-se sempre de que é possível pesquisar as infor-
mações de propriedades e seus valores na documentação da MDN. Você também pode ver o código
completo do exemplo acima no endereço: https://repl.it/@TarleyLana/seletores-CSS.
No próximo tópico, você vai aprender a corrigir problemas no seu código.
Aprofunde-se
Existem inúmeras opções de seletores CSS. A lista completa, incluindo os novos seletores
do CSS 3, você pode encontrar no endereço:
https://www.w3schools.com/cssref/css_selectors.asp
39
3 SOLUÇÃO DE PROBLEMAS NAS FOLHAS DE ESTILO
Assista
Acesse na plataforma o vídeo: Depurando o CSS
Em alguns casos, você vai se deparar com um código CSS que não faz o que você espera. O problema
pode ser um seletor que não corresponde a um elemento (e o estilo não é aplicado), ou um elemento
tem um tamanho diferente do esperado, ou mais de uma regra está sendo aplicada ao mesmo elemento
(criando um conflito de propriedades). Este tópico fornece orientações sobre a ferramenta DevTools,
que vai permitir depurar seu código HTML/CSS e descobrir o que está acontecendo. Essa ferramenta
permite que você veja o resultado do HTML em execução, bem como o CSS aplicado em cada elemento
da página. Ele também permite realizar mudanças no código HTML e CSS, e toda alteração é imediata-
mente reproduzida na janela do navegador.
Utilize o exemplo anterior para a avaliação das funcionalidades da ferramenta:
https://seletores-css.tarleylana.repl.co/
O DevTools está disponível para Internet Explorer, Firefox, Chrome, Safari e Opera, porém esse tópico
está baseado no Firefox. Não se preocupe, as funcionalidades mais importantes estão disponíveis para
todos os navegadores.
Para ativá-lo, você pode usar:
• O teclado: Ctrl + Shift + I.
• Ou o menu do navegador: Menu > Web Developer > Inspector.
• Ou o mouse: clique com o botão direito na página e selecione Inspect Element no menu que
aparece.
40
Ao ativar, você vai ver uma janela semelhante a esta:
Figura 18 - Inspecionando o HTML com o DevTools.

41
Por padrão, a ferramenta abre o inspetor (figura acima). Ative o modo inspecionar, clicando no botão
, e tente selecionar um dos itens do menu:
Figura 19 - Inspecionando um item do menu.

42
À direita do seu HTML, você pode ver uma aba com o nome Rules:
Figura 20 - Editor de CSS.

Essa aba mostra todas as regras aplicadas ao elemento selecionado. As regras são apresentadas em
ordem de precedência, das mais específicas para as menos específicas.
Abaixo, são descritos alguns dos recursos dessa aba que são especialmente úteis:
• Remover regra CSS: clique nas caixas de seleção ao lado de cada declaração para ver o que
aconteceria se você removesse a declaração.
Figura 21 - Removendo regra CSS.

43
• Expandir propriedades abreviadas: clique na pequena seta ao lado de cada propriedade

abreviada para expandir e mostrar os detalhes dos valores.
Figura 22 - Expandindo propriedades abreviadas.

• Editando uma propriedade: clique no nome ou no valor de uma propriedade para exibir uma
caixa de texto na qual você pode digitar um novo valor. A alteração tem efeito imediato no
navegador.
44
Figura 23 - Editando uma propriedade.

• Adicionando uma propriedade: clique na chave de fechamento de qualquer regra para abrir
uma caixa de texto em uma nova linha, na qual você pode escrever uma declaração completa-
mente nova para a sua página.
Figura 24 - Adicionando uma propriedade.

• Origem da regra CSS: ao lado de cada regra está o nome do arquivo e o número da linha em
que a regra está definida. Se você clicar no link, a ferramenta exibe o conteúdo completo do
arquivo CSS, onde você pode editar as regras.
45
Figura 25 - Origem da regra CSS.

Além da Rules, você notará outras abas na parte superior da ferramenta. Abaixo, uma descrição das
funcionalidades mais úteis para você:
• Computed: exibe todos os estilos que o navegador aplica ao elemento selecionado.
• Layout: exibe as dimensões do componente (margin, border e padding).
• Fonts: exibe as informações da fonte aplicada ao elemento selecionado. Você pode utilizar os
controles para editar de forma fácil as configurações de fonte.
O DevTools pode ser de grande ajuda na resolução de problemas de CSS, portanto, quando você se
encontrar em uma situação em que o CSS não está se comportando conforme o esperado, use todas as
funcionalidades dessa ferramenta para simular a correção do problema. Ao final, lembre-se de aplicar as
correções no seu código, pois as alterações no DevTools são feitas somente em memória.
Aprofunde-se
Os navegadores esperam que os seus CSS e HTML sejam escritos corretamente. No
entanto, os navegadores também perdoam e farão o possível para exibir suas páginas,
mesmo se houver erros no seu código HTML ou no seu CSS. Nesse caso, o navegador
precisa adivinhar o que você quis dizer e pode tomar uma decisão diferente da que você
tinha em mente. Além disso, navegadores diferentes podem lidar com o problema de
maneiras diferentes. Por esse motivo, é muito importante você validar seu HTML ou CSS,
utilizando uma ferramenta de análise sintática, para detectar e corrigir erros.
Para validar o seu código CSS, acesse o endereço:
https://jigsaw.w3.org/css-validator/
Já para a validação de HTML, acesse o endereço:
https://validator.w3.org/
46
CONSIDERAÇÕES FINAIS
Parabéns, você concluiu a unidade 3 desta disciplina e já pode estilizar as páginas do estudo de caso.
Nesta unidade, você se familiarizou com a linguagem CSS e adquiriu um pouco de prática aplicando
alguns estilos às páginas HTML na ferramenta Repl.it. Também aprendeu a utilizar as ferramentas de
depuração para encontrar problemas de formatação. Continue firme nos estudos!
47
GLOSSÁRIO
DOM: o Modelo de Objeto de Documentos (do inglês Document Object Model) é uma API definida pelo
W3C para representar e interagir com qualquer documento HTML ou XML. O DOM é um modelo de
documento carregado pelo navegador, representado por meio de uma árvore de “nós”, na qual cada um
desses “nós” representa uma parte do documento (por exemplo um elemento, texto ou comentário). O
DOM é uma das APIs mais usadas na web porque ele permite que cada código rodando no navegador
acesse e interaja com cada "nó" do documento. Os “nós” podem ser criados, movidos ou modificados.
Listeners de evento podem também ser adicionados aos "nós" para serem disparados quando um dado
evento ocorrer.
HTML: a HyperText Markup Language é utilizada para definir e descrever semanticamente o conteúdo de
uma página da web seguindo um formato bem estruturado. Com o HTML é possível criar documentos
estruturados, constituídos por blocos chamados elementos, que são delineados por tags e escritos
usando os caracteres de menor que (<) e maior que (>). Alguns introduzem conteúdo diretamente na
página, outros fornecem informações sobre o texto do documento e podem incluir outras tags como
subelementos. Obviamente os navegadores não os exibem, pois são usados para interpretar o conteúdo
da página.
Internet: a internet é, na verdade, um agrupamento de diversas redes WAN (alves, 2014).
JavaScript: o JavaScript (JS) é uma linguagem de programação utilizada principalmente no lado do cliente
para scripts de páginas web dinâmicas, mas também é utilizado no lado do servidor.
48
REFERÊNCIAS
ALVES, W. P. Desenvolvimento e Design de Sites. 1. ed. São Paulo: Érica, 2014.
GOOGLE DEVELOPERS. Princípios básicos do Web design responsivo, 2018. Disponível em: https://deve-
lopers.google.com/web/fundamentals/design-and-ux/responsive?hl=pt_br Acesso em: 10 jan. 2020.
MDN. O que é CSS?, 2019. Disponível em: https://developer.mozilla.org/pt-BR/docs/Learn/CSS/First_steps/O_

que_e_CSS Acesso em: 2 dez. 2019.
MDN. How CSS works, 2019. Disponível em: https://developer.mozilla.org/en-US/docs/Learn/CSS/First_

steps/How_CSS_works Acesso em: 26 jan. 2019.
MDN. text-decoration, 2019. Disponível em: https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-deco-

ration Acesso em: 03 jan. 2020.
MDN. list-style-type, 2019. Disponível em: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

Acesso em: 03 jan. 2020.
MDN. Referência de CSS, 2019. Disponível em: https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_

Reference Acesso em: 26 dez. 2019.
MDN. Usando Media Queries, 2019. Disponível em: https://developer.mozilla.org/pt-BR/docs/Web/Guide/

CSS/CSS_Media_queries Acesso em: 10 jan. 2020.
MDN. Glossário de Termos, 2019. Disponível em: https://developer.mozilla.org/pt-BR/docs/Glossario

Acesso em: 24 out. 2019.
MIT. Safe web fonts. Disponível em: http://web.mit.edu/jmorzins/www/fonts.html Acesso em: 26 dez. 2019.
TUTORIALSPOINT. HTML5 - Deprecated Tags & Attributes. Disponível em: https://www.tutorialspoint.

com/html5/html5_deprecated_tags.htm Acesso em: 26 dez. 2019.
W3C. CSS Color Module Level 3, 2019. Disponível em: https://www.w3.org/TR/css-color-3/ Acesso em: 25
dez. 2019.
W3SCHOOLS. CSS Selector Reference. Disponível em: https://www.w3schools.com/cssref/css_selectors.asp

Acesso em: 20 dez. 2019.
49

ProgramacaoWeb Unidade03 PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

ProgramacaoWeb Unidade03 PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Programação web

Unidade 3 Introdução ao CSS

• Solução de problemas nas folhas de estilo.

Figura 1 - Exemplo de estilo padrão aplicado pelo navegador.

ED+ Content Hub © 2019

Infográfico 1 - HTML + CSS.

Figura 2 - Exemplo de customização de estilo.

Figura 3 - Mesma página HTML com outro estilo aplicado.

Ou seja, poderíamos escrever a regra CSS acima da seguinte forma:

As fontes do projeto você encontra no endereço https://repl.it/@TarleyLana/pagina-com-varios-estilos.

Toda regra CSS possui a seguinte sintaxe (figura 4):

ED+ Content Hub © 2019

Outro exemplo mais completo: à esquerda a sintaxe, à direita o código implementado:

propriedade: valor; background-color:#eeeeee;

propriedade: valor; color: #111100;

propriedade: valor; font-family: Arial, Tahoma, Verdana;

propriedade: valor; font-size: 10px;

Você também pode acessar rapidamente as informações de uma determinada

1. Método in-line (por meio do atributo style);

2. Método interno (por meio da tag style);

3. Método externo (por meio de um link para uma folha de estilo).

<body style=”background-color: #FF0000;”>

<p>Esta é uma página com fundo vermelho</p>

<p style=”margin-left: 50px; font-size: 18pt”>

<span style=”font-weight: bold; background: #FFFF00”>

Veja o resultado do código acima na figura 5.

Figura 5 - Exemplo de criação de mais de uma regra CSS

<link href=”css/style.css” rel=”stylesheet” type=”text/css”/>

Figura 6 - Exemplo de projeto utilizando o método

O arquivo style.css possui apenas código CSS, conforme demostrado abaixo:

Fonte: elaborado pelo autor.

Todas as páginas HTML possuem um <link> para o mesmo arquivo style.css.

O CSS resolveu um grande problema do desenvolvimento web, principalmente no desenvolvimento de

Fonte: elaborado pelo autor.

Agora você vai aprender a estilizar uma página HTML utilizando:

• Seletor combinador descendente;

• Seletor combinador irmão adjacente;

A figura 7 abaixo ilustra o resultado desta prática:

Figura 7 - Resultado da prática.

O ponto de partida é o código HTML da página acima:

Agora você vai aprender a estilizar uma página HTML utilizando:

• Método in-line (por meio do atributo style);

• Método interno (por meio da tag style);

• Método externo (por meio de um link para uma folha de estilo).

Figura 8 - 1) Clique no botão Add file;

<link href=”style.css” rel=”stylesheet” type=”text/css” />

Figura 9 - CSS aplicado ao documento HTML.

Tabela 1 - Lista para navegação.

Tabela 2 - Primeira lista do documento.

Lembre-se de alterar o arquivo style.css com o estilo acima para a lista.

ED+ Content Hub © 2019

Figura 10 – Diferença entre as propriedades

O resultado do estilo é apresentado abaixo (figura 11):

Figura 11 - Página com <header> estilizado.

• float: essa propriedade determina se um elemento deve se posicionar ao lado direito ou

O resultado é demonstrado abaixo (figura 12):

Figura 12 - Página com <nav> estilizado.

O resultado é demonstrado abaixo (figura 13):

Figura 13 - Página com <aside> estilizado.

O resultado é demonstrado abaixo (figura 14):

Figura 14 - Página com <footer> estilizado.

O resultado dos dois estilos é exibido abaixo (figura 15):

Figura 15 - Página com menu estilizado.