www.argosoft.com.

br

Web Design Responsivo com HTML5 e CSS3

Por Alberto Risucci

Edição: 1ª Edição de 23/10/2017

Qualquer parte deste livro só pode ser reproduzida ou transmitida de qualquer

forma, por meio eletrônico ou mecânico se tiver autorização por escrito da Argosoft,
exceto para resumos em revisões e análises.

© 2017 Argosoft Softwares e Treinamentos Ltda. Todos os direitos reservados

www.argosoft.com.br
[email protected]

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Sumário

Capítulo 1 - Introdução..................................................................................................4
1.1 Ambiente de desenvolvimento................................................................. 4
1.2 O projeto do curso......................................................................................6
Capítulo 2 - Introdução ao HTML5................................................................................ 8
2.1 Estrutura básica..........................................................................................8
2.2 Estrutura do projeto...................................................................................9
2.3 Viewport................................................................................................... 10
2.4 Elementos inline e block.......................................................................... 11
2.5 Página inicial: cabeçalho.......................................................................... 13
2.6 Página inicial: navegação......................................................................... 14
2.7 Página inicial: produtos............................................................................15
2.8 Página inicial: rodapé............................................................................... 16
2.9 Página de contatos................................................................................... 18
Capítulo 3 - Introdução ao CSS3, metodologia BEM e container do Bootstrap........ 21
3.1 Estrutura básica do CSS............................................................................21
3.2 Apresentação da metodologia BEM........................................................ 25
3.3 Apresentando o container do Bootstrap.................................................27
3.4 Estilizando a página inicial: cabeçalho e menu....................................... 27
3.5 Estilizando a página inicial: navegação................................................... 35
3.6 Estilizando a página inicial: produtos...................................................... 37
3.7 Estilizando a página inicial: rodapé......................................................... 42
3.8 Estilizando a página de contatos............................................................. 43
Capítulo 4 - Conclusão................................................................................................. 47
4.1 Próximos passos....................................................................................... 47

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Capítulo 1 - Introdução
Seja bem-vindo! Estou muito feliz por você ter baixado esse livro digital. Espero
que ele sirva para alavancar a sua carreira profissional como desenvolvedor
front-end. Neste capítulo inicial, mostraremos como preparar o ambiente de
desenvolvimento e apresentaremos a proposta final do projeto que vamos
desenvolver.

Não é necessário ter qualquer conhecimento profundo em Tecnologia da

Informação, você só precisará ter uma noção sobre navegação de sites na Internet e
conhecer um pouco sobre o gerenciamento de arquivos do seu sistema operacional
(criar, excluir, editar e/ou mover arquivos e diretórios).

Nesse material, desenvolveremos do zero, um projeto de um site que abrangerá

as linguagens HTML5 e CSS3, noções da metodologia BEM e noções do container do
Bootstrap.

O código-fonte está disponível no GitHub e poderá ser baixado, através do link

https://github.com/ArgosoftTI/web-design-responsivo-com-html5-e-css3/tree/mast
er/ebook, para estudo. Sugerimos também que você pratique os exemplos desse
material para uma melhor fixação do conhecimento abordado, comparando seu
código-fonte com os exemplos de cada capítulo.

1.1 Ambiente de desenvolvimento

Vamos conhecer os aplicativos que auxiliarão no desenvolvimento e
renderização das páginas web que vamos construir no decorrer desse curso.

O Google Chrome é um dos navegadores mais utilizados atualmente para

acessar sites web, assim, utilizaremos esse browser para renderizar as páginas que
serão criadas no decorrer desse curso. Além disso, ele tem uma ferramenta muito
importante que auxiliará no entendimento e desenvolvimento de páginas web,
chamada DevTools (ferramentas do desenvolvedor).

O Google Chrome pode ser baixado, através do link:

https://www.google.com.br/chrome/ e para instalar, basta seguir as orientações do
seu instalador. Depois de instalar, será semelhante à figura 1.1.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Figura 1.1: Google Chrome.

Para acessar ou fechar o DevTools do Google Chrome, basta ir no menu: Mais

ferramentas > Ferramentas do desenvolvedor ou simplesmente, clicar em Ctrl + Shift
+ I.

Perceba que o DevTools, na figura 1.2, aparecerá na parte de baixo do seu

browser, com várias ferramentas que auxiliarão no entendimento e
desenvolvimento do site que será criado nesse curso. Ele contém o código-fonte
HTML à esquerda, na aba de Elements; os estilos CSS à direita; além de muitas outras
funcionalidades que ajudam no desenvolvimento de uma página web.

Outro recurso interessante do DevTools é a simulação de uma página para

dispositivos móveis. Para isso, basta abrir a página normalmente no seu navegador,
abrir o DevTools e em seguida clicar em Ctrl + Shift + M e o mesmo atalho para voltar
à tela normal.

Figura 1.2: DevTools.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Poderíamos criar as páginas do projeto do curso, utilizando qualquer editor de

texto. Porém, o Notepad++ será o editor escolhido por ser customizável, funcional,
livre e auxiliará bastante na codificação dos arquivos HTML e CSS.

O Notepad++ poderá ser baixado através do link: https://notepad-plus-plus.org/,

no menu de download e será instalado, seguindo as orientações do seu instalador.
Depois de concluída a instalação, ele terá a aparência da figura 1.3.

Figura 1.3: Notepad++.

1.2 O projeto do curso

O projeto do curso consistirá em uma loja virtual de chapéus, chamado Hat Shop
que terá uma página inicial, com a exibição de produtos e uma página de contatos,
com um formulário. Ambas serão responsivas, ou seja, as páginas se ajustarão à tela
de qualquer dispositivo, como podemos ver nas imagens abaixo.

Figura 1.4: Página inicial do projeto na tela de um computador.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Figura 1.5: Página de contatos do projeto na tela de um computador.

Figura 1.6: Página inicial e de contatos do projeto na tela de um smartphone

É um projeto simples, porém abrangerá inúmeros conceitos importantes de

HTML5, CSS3 e responsividade que serão destacados no decorrer dos próximos
capítulos.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Capítulo 2 - Introdução ao HTML5

Nesse capítulo vamos apresentar a estrutura e os conceitos básicos do HTML5, a
fim de criar uma página de Internet, utilizando as ferramentas que preparamos no
capítulo anterior.

Vamos criar também a estrutura do projeto do curso e já desenvolver a página

inicial com o cabeçalho, a área de navegação, o conteúdo de produtos e o rodapé,
bem como a página de contatos que terá também um cabeçalho, um rodapé e um
formulário na área principal.

Vale destacar que ao final desse capítulo as páginas não terão a aparência que
foi mostrada no capítulo anterior, pois o que teremos aqui, serão as páginas HTML
sem os estilos CSS, ou seja, construiremos a estrutura e adicionaremos apenas o
conteúdo das páginas. A partir do próximo capítulo, estilizaremos essas páginas com
CSS e elas ficarão idênticas à proposta inicial.

Para baixar o código-fonte e as imagens referentes a esse capítulo, acesse:

https://github.com/ArgosoftTI/web-design-responsivo-com-html5-e-css3/tree/mast
er/ebook/capitulo-02.

2.1 Estrutura básica

O HTML (Hypertext Markup Language) é uma linguagem de marcação de
hipertexto que serve para descrever o conteúdo, a estrutura e a semântica das
páginas web. O HTML5 é apenas a versão mais recente dessa linguagem de
marcação que possui algumas novidades interessantes, em relação à sua versão
anterior, como por exemplo as estruturas semânticas que dão significado próprio a
elementos de um código-fonte HTML.

Figura 2.1: Estrutura básica de um arquivo HTML

A figura 2.1 apresenta a estrutura básica de um documento HTML5 e é

composta de elementos, chamados de tags, que abrem utilizando os símbolos menor
que, o nome da tag e o símbolo de maior que (p. ex.: <tag>); e fecham com os
símbolos menor que, uma barra, o nome da tag e símbolo de maior que (p. ex.:
</tag>). Quando um elemento ocupa uma linha, não tem valor externo e possui
apenas atributos, então poderá ser fechado com uma barra na mesma linha, antes
do fechamento do elemento, como no exemplo da linha 4:

<meta charset="utf-8" />

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

A linha 1, da figura 2.1, mostra o cabeçalho de um documento HTML que deve

ser escrito no arquivo, para informar ao browser que ele está acessando e deve
carregar um documento do tipo HTML5.

<!DOCTYPE html>

As tags de abertura e fechamento do <html>, que se estendem da linha 2 à 10,

formam o elemento principal do documento. Nele, existe o atributo lang que
informa, opcionalmente ao browser, a linguagem na qual esse documento foi escrito,
no nosso caso, português do Brasil.

<html lang="pt-br"></html>

Dentro das tags <html>, existem dois elementos filhos de grande importância: o
cabeçalho <head> e o corpo do documento <body>.

<head>
<meta charset="utf-8" />
<title>Hat Shop - Contato.</title>
</head>

O cabeçalho tem dois elementos filhos. A tag <meta>, na linha 4, informa ao

navegador que esse documento deve ser carregado, utilizando a codificação UTF-8,
enquanto que as tags <title> informam ao navegador que o texto contido nelas deve
ser exibido na barra de títulos da página ou da aba da página.

O elemento <body> terá o conteúdo que será exibido no navegador. Esse

conteúdo pode ser um conjunto de elementos ou apenas uma linha de texto, como
no exemplo abaixo:

<body>
Meu primeiro HTML!
</body>

Esse código HTML deverá ser salvo no seu computador com a extensão .html, p.
ex.: estrutura_basica.html e poderá ser exibido no Google Chrome (figura 2.2),
clicando-se duas vezes sobre o arquivo. Note que a página será renderizada e apenas
o conteúdo do elemento <title> é mostrado na barra de títulos e o conteúdo das tags
<body> é mostrado na área de conteúdo do navegador. As demais tags são
informativas, mas são de extrema importância.

Figura 2.2: Página estrutura_basica.html renderizada no browser

2.2 Estrutura do projeto

No Notepad++, clique no menu Configurações > Preferências..., em seguida,
clique em Novo Documento e marque as opções de Formato: Unix, Linguagem

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

padrão: HTML e Codificação: UTF-8, como apresentado na figura 2.3. Essa última
configuração é importante para que todos os documentos criados pelo editor sejam
gravados com a mesma codificação UTF-8 que informamos ao browser, por meio do
atributo charset, da tag <meta>, no arquivo HTML. Se essa configuração não for
realizada, o browser pode não entender corretamente alguns caracteres específicos
da língua portuguesa, como cedilhas e acentos, substituindo-os por caracteres
desconhecidos.

Figura 2.3: Configurações do Notepad++

Separe uma pasta no seu computador para colocar o projeto do curso. Em

seguida, pelo Notepad++, crie e salve nessa pasta dois documentos HTML com os
nomes de index.html e contato.html com o conteúdo da estrutura básica de HTML
descrita no tópico 2.1. O nome index.html é dado, geralmente, para a página
principal ou inicial de um site.

Crie também duas subpastas, uma para armazenar as imagens dos produtos e a
logomarca da nossa loja fictícia e outra para arquivos CSS que será útil no próximo
capítulo. Se tiver alguma dúvida compare o que você já fez com o projeto pronto no
GitHub.

Figura 2.4: Estrutura do projeto

2.3 Viewport
Como mencionamos anteriormente, o HTML é uma linguagem de marcação que
é interpretada e renderizada por navegadores e sua função é de descrever o
conteúdo, a estrutura e a semântica das páginas de Internet, logo, não vamos nesse
capítulo, mostrar estilização de cores, fontes, caixas de texto etc, pois essas
responsabilidades são do CSS, que veremos no próximo capítulo.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Figura 2.5: Página index.html

Além da estrutura básica que definimos anteriormente, incluímos um novo

elemento <meta>, na linha 5 da figura 2.5, com dois atributos: o primeiro,
name="viewport", define a área visível da página a ser renderizada e o segundo,
content="width=device-width, initial-scale=1", informa ao navegador que ele deve
renderizar a área visível, com escala padrão de 100% e do tamanho da resolução do
dispositivo que está acessando a página, seja ele uma smartTV ou um smartphone.
Aqui está a primeira informação que nos ajudará a tornar esse site responsivo.

<meta name="viewport" content="width=device-width, initial-scale=1" />

2.4 Elementos inline e block

No HTML existem, basicamente, dois tipos visíveis de elementos: inline e block.
Elementos em bloco são caixas que, por padrão, ocupam 100% do comprimento da
tela e, geralmente, podem ser configuradas com altura e largura, através de estilos
CSS. São exemplos de elementos em bloco:
Caixa de cabeçalho <header>;
Caixa genérica <div>;
Listas não ordenadas e ordenadas <ul> e <ol>;
Tabelas <table>;
Parágrafos <p>;
Títulos <h1> a <h6>;
Formulários <form>;
E muitas outras.

Antes do HTML5, os programadores utilizavam o elemento genérico <div> para

representar áreas importantes em uma página, mas essa versão trouxe o conceito de
estruturas semântica, em que outros elementos nominados têm a mesma função do
elemento <div>, mas que podem ser utilizados semanticamente para definir áreas
importantes e específicas de uma página, são eles:
Cabeçalho: <header> é o mesmo que a caixa genérica <div id=”header”>;
Navegação de links: <nav> é o mesmo que a caixa genérica <div id=”nav”>;
Seção: <section> é o mesmo que a caixa genérica <div id=”section”>;
Artigo: <article> é o mesmo que a caixa genérica <div id=”article”>;
Conteúdo relacionado: <aside> é o mesmo que a caixa genérica <div
id=”aside”>;
Conteúdo principal de um documento: <main> é o mesmo que a caixa
genérica <div id=”main”>;
Rodapé: <footer> é o mesmo que a caixa genérica <div id=”footer”>;
E outros.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Figura 2.6: Exemplo de uma representação de estrutura de um página HTML5

Elementos estruturais podem parecer sem sentido, mas pense que o seu arquivo
HTML pode ser grande e essa nominação dos elementos facilitará bastante a
compreensão sobre do sentido das áreas de sua página para qualquer desenvolvedor
que esteja lendo seu código-fonte.

Figura 2.7: Representação de elementos block

Abra a página index.html do exemplo pronto desse capítulo no navegador e com

o botão direito do mouse sobre a área de cabeçalho, selecione a opção de
inspecionar elemento ou Ctrl + Shift +I e perceba, como mostrado na figura 2.7, que
o elemento header (em destaque azul) é criado, ocupando todo o comprimento da
página e tem altura de acordo com o conteúdo que faz parte dele, pois nesse caso
não temos ainda estilização CSS.

Elementos inline são caixas que ocupam apenas a área específica de seu
conteúdo e não podem ter a definição de altura e largura por estilização CSS. São
exemplos de elementos inline:
Span <span>;
Link <a>;

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Imagem <img>;
Negrito <b>;
Itálico <i>;
Dentre outras.

Figura 2.8: Representação de elementos inline

Novamente usando o DevTools, na figura 2.8, podemos notar que o elemento

<img> é inline, pois ocupa o comprimento específico de seu conteúdo (destaque azul)
e não o comprimento da tela inteira. Além disso, essas dimensões não podem ser
alteradas via CSS, a não ser que mudemos o status desse elemento, mas isso é
assunto apenas para o próximo capítulo.

2.5 Página inicial: cabeçalho

Retornando ao nosso projeto, dentro das tags <body> inserimos um elemento
<header> que começa na linha 10 e termina na linha 29 da figura 2.9. Esse é um
elemento que delimita uma área para o nosso cabeçalho e cria um bloco responsável
por envolver suas tags filhas. Ele tem as mesmas características do seu elemento
filho <div>, mas semanticamente foi adiciona no HTML5 para definir uma área de
cabeçalho, onde colocaremos a logomarca e os botões de menu na nossa página
inicial.

Na linha 14 temos uma tag <img> que é responsável por adicionar a logomarca
na página, localizada no caminho src="imagens/logo.png". Definimos que essa
imagem tem um comprimento de 99 pixels e altura de 68 pixels e um texto auxiliar
alt="Hat Shop", caso haja algum problema no seu carregamento.

<img src="imagens/logo.png" width="99" height="68" alt="Hat Shop" />

O elemento <a> (linhas 13 a 15) cria um link para a imagem, através atributo
href, logo se o usuário clicar nele, será redirecionado para a própria página inicial, ou
seja, o index.html

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

<a href="index.html">
<img src="imagens/logo.png" width="99" height="68" alt="Hat Shop" />
</a>

Figura 2.9: Menu

Mais abaixo, nas linhas 17 a 26 criamos outra caixa genérica <div> que contém
uma lista não ordenada <ul> com dois elementos (linhas 18 a 25) com um link <a>
para cada item da lista <li> de HOME e Contato, respectivamente.

Quando o item HOME for clicado, o navegador carregará a página index.html,

conforme href="index.html" e caso o item Contato seja clicado, carregará a página
contato.html, conforme o href="contato.html".

<div>
<ul>
<a href="index.html">
<li>HOME</li>
</a>
<a href="contato.html">
<li>Contato</li>
</a>
</ul>
</div>

Por fim, criamos um elemento <div>, na linha 27, para armazenar o nome do site
que ficará abaixo da logomarca depois que aplicarmos estilos CSS no próximo
capítulo.

<div>Hat Shop</div>

2.6 Página inicial: navegação

Logo abaixo do elemento <header>, definimos o elemento <nav> cuja função é
prover uma área de navegação para o site, ou seja, aqui você poderá colocar menus,
chamadas que levam a alguma área promocional do site etc.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

No nosso caso, utilizaremos esse elemento para criar uma área de publicação do
site, com um banner para levar o cliente a fazer o cadastro e ganhar 50% de
desconto na sua primeira compra.

Figura 2.10: Banner promocional

Dentro do elemento <nav>, na figura 2.10, teremos um cabeçalho <h1>

contendo o texto da propaganda (linha 34) e uma caixa <div> (linha 35) com um link
que poderia levar a uma página de cadastro.

2.7 Página inicial: produtos

A área que contém os produtos da nossa loja virtual é denominada
semanticamente de <section>. Da mesma forma do <nav> do tópico anterior, o
<section> tem a mesma função da caixa genérica <div>, porém, semanticamente,
fica mais claro para quem escreve e quem lê que o código nessa área é uma seção de
produtos.

Dentro de <section> há três produtos dentro de uma caixa genérica <div>, sendo
que cada produto está dentro de uma estrutura semântica <article>.

Cada <article> contém um cabeçalho <header> onde colocamos uma imagem do

produto; uma <section> que contém as informações do produto, como: descrição,
valor, forma de pagamento; e um rodapé <footer> com o botão para comprar.

<article>
<header>
<img src="imagens/bowler.png" alt="Bowler" />
</header>
<section>
<div>Bowler</div>
<div>R$39,90</div>
<div>em até 5X sem juros!</div>
</section>
<footer>
<a href="#">Comprar</a>
</footer>
</article>

Essa estrutura <article> se repete para cada produto e essa semântica de caixas
que separam o conteúdo torna mais fácil o entendimento de quem está escrevendo
ou lendo o código-fonte, como mostrado na figura 2.11.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Figura 2.11: Produtos.

Perceba também que para cada <article>, temos estruturas semânticas que
delimitam as áreas de cada item informativo, dentro dele mesmo, como: um
cabeçalho, uma seção e um rodapé, da mesma forma que estamos definindo
semanticamente os espaços na página inicial.

2.8 Página inicial: rodapé

A tag <footer> é outra caixa semântica para representar o rodapé da página e
nesse caso, temos uma caixa genérica que contém um parágrafo com a descrição do
rodapé, conforme a figura 2.12.

Figura 2.12: Rodapé.

É interessante frisar que existem símbolos no HTML que podemos representar

através de códigos pré-determinados. Por exemplo: &copy; representa ©. Existem
inúmeros símbolos que você pode pesquisar na Internet e utilizá-los em sua página
HTML. Alguns deles, podemos ver na tabela 2.1:

Char Entity

© &copy;

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

® &reg;

€ &euro;

™ &trade;

← &larr;

↑ &uarr;

→ &rarr;

↓ &darr;

♠ &spades;

♣ &clubs;

♥ &hearts;

♦ &diams;

Tabela 2.1: Símbolos HTML.

Fonte: https://www.w3schools.com/html/html_symbols.asp

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Figura 2.13: Página renderizada pelo browser.

Se você abrir pelo navegador a página index.html, terá a imagem da figura 2.13.
Note que não parece em nada com a proposta do capítulo de introdução, mas não
desanime, pois como falei, o HTML é responsável pela estrutura e conteúdo da
página, mas a estilização de cores, fontes e caixas virá quando trabalharmos com CSS
no próximo capítulo.

2.9 Página de contatos

Na página de contatos, o cabeçalho com a logomarca e menu, bem como o
rodapé são os mesmos da página index.html. A diferença está na descrição do
elemento <title> e nas tags <main>, entre as linhas 31 a 68 da figura 2.14, que
semanticamente são as caixas responsáveis por conter o formulário da página.

<title>Hat Shop - Contato.</title>

As tags de abertura e fechamento de <h1>, apresentadas na linha 33, são um

cabeçalho. Elementos do tipo <h1><h2><h3><h4><h5><h6> são de titulação e
devem ser usadas para destacar um título de um tópico, sendo <h1> o destaque de
maior fonte e o <h6> o destaque de menor fonte.

<h1>Entre em contato conosco!</h1>

Em seguida, temos o elemento <form> (linhas 34 a 67 da figura 2.14) que é

responsável por delimitar a área que abrangerá o formulário. Ele contém o atributo
action="#" (fora do escopo desse livro digital) que envia as informações do
formulário para alguma página de processamento de dados, logo após o usuário
clicar em um botão de submissão (linha 63). Há também o atributo method que
pode ser do tipo GET ou POST.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Utilizamos requisição via GET quando submetemos dados não sigilosos, pois eles
aparecerão na URL do página após a submissão. Enviamos requisições via POST
quando precisamos transmitir dados sensíveis, como login e senha.

<form action="#" method="get">

...
<button type="submit">Enviar</button>
</form>

O elemento <label> (linhas 36, 41, 46, 51, 56) é um campo informativo para cada
campo de texto a ser preenchido no formulário, assim, sabemos que a primeira caixa
é destinada a colocar o nome do usuário (linha 35 a 38), a segunda para colocar o
e-mail e assim sucessivamente.

<div>
<label for="nome">Nome</label>
<input id="nome" name="nome" type="text" />
</div>

O elemento <input> é a caixa de texto que o usuário poderá escrever seus dados.
Ele tem 3 atributos principais: o id que identifica o elemento por um nome. Se ele
tiver o mesmo nome do atributo for do elemento <label>, fará o browser entender
que esses elementos são integrados, de forma que se você clicar no nome do <label>,
ativará a caixa de texto para ser preenchida. O segundo atributo é o name que é
responsável por passar o nome desse campo, quando o formulário for submetido. O
terceiro atributo é o type que pode ter os seguinte nomes:
Campo de texto simples: text;
Botão: button;
Senha: password;
Oculto: hidden;
Arquivo: file;
E muitos outros.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Figura 2.14: Página de contatos.

No final do formulário temos o elemento <textarea> que é um campo de texto

com linhas e colunas, diferentemente das tags <input ... type="text"> que ocupam
apenas uma linha. No nosso exemplo, ela terá um limite de até 120 caracteres.

<textarea id="textarea" name="mensagem" maxlength="120"></textarea>

Por fim, temos as tags <button> que podem ser do tipo reset, para limpar todos
os campos do formulário e submit para submeter todas as informações preenchidas
no formulário para a página de processamento de informações, definida no
argumento action do elemento <form>.

<button type="reset">Limpar</button>
<button type="submit">Enviar</button>

Figura 2.15: Página de contatos renderizada pelo browser

Note que se abrirmos a página de contato.html no browser também parece

pouco com a proposta inicial do projeto, descrita no primeiro capítulo, porém da
mesma forma do index.html, o formulário precisa ser estilizado com CSS e isso
veremos no próximo capítulo.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Capítulo 3 - Introdução ao CSS3, metodologia BEM e

container do Bootstrap
Nesse capítulo apresentaremos os conceitos básicos de folhas de estilo CSS, a
metodologia BEM e o container do Bootstrap que são indispensáveis para o
entendimento e a finalização do projeto do curso.

Por fim, estilizaremos a página inicial e a página de contatos. Para baixar o

código-fonte HTML, CSS e as imagens referentes ao projeto final do curso, acesse:
https://github.com/ArgosoftTI/web-design-responsivo-com-html5-e-css3/tree/mast
er/ebook/capitulo-03.

3.1 Estrutura básica do CSS

CSS (Cascading Style Sheets) são folhas de estilo em cascata, responsáveis por
definir a aparência de páginas HTML, através da estilização de cores, fontes,
tamanhos de caixas, planos de fundo etc.

O CSS3 é a versão mais nova do CSS e assim como o HTML, tem compatibilidade
com sua antecessora, bem como foram adicionadas novas propriedades para bordas
de caixas, planos de fundo, cores, textos, seletores etc. Existem, basicamente, três
formas de inserir estilização em páginas HTML:

1-Estilo inline: trata-se de inserir o estilo diretamente na linha de código do

elemento HTML. Embora seja simples, não é recomendado, pois você estará
misturando o código HTML com o CSS e não poderá reutilizar o estilo para outros
elementos HTML, ou seja, o estilo inline é válida apenas para o elemento HTML no
qual o CSS está sendo declarado.

A sintaxe para definir esse tipo estilo é colocar dentro da tag de abertura o
nome style, seguido dos atributos e seus valores, entre aspas e separados por ponto
e vírgula: "atributo1: valor1; atributo2: valor2; atributoN: valorN;".

Abaixo temos um comentário HTML entre os símbolos <!-- --> e uma tag <p> de
parágrafo que está sendo estilizada com a cor azul, através do atributo style="color:
blue;".

<!--Isto é um estilo inline-->

<p style="color: blue;" >Meu parágrafo</p>

2- Estilo incorporado: é uma estilização realizada no cabeçalho da página HTML,

através da tag <style> e tem a vantagem do código CSS ser reutilizado em qualquer
parte da página, mas nunca em outra página. Todas as declarações de estilos
incorporados serão realizadas dentro do elemento <head> da página.

<head>
...
<!--Isto é um estilo incorporado a um elemento HTML-->
<style>
p{

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

color: red;
}
</style>
...
</head>

Nesse caso, estamos estilizando qualquer elemento parágrafo <p> definido na

página, com a cor vermelha. A sintaxe para estilizar elementos está descrita abaixo:

seletor {
atributo1: valor1;
atributo2: valor2;
atributoN: valorN;
}

3-Estilo externo: essa é forma mais recomendada de se estilizar páginas web,

pois você cria um arquivo externo e o referencia no cabeçalho no arquivo HTML. A
grande vantagem é a separação total do arquivo HTML e do CSS, além de toda
estilização poder ser reutilizada em qualquer outra página, bastando referenciar o
arquivo CSS, dentro do elemento <head>.

<head>
...
<!--Isto é um estilo externo referenciado dentro do HTML-->
<link rel="stylesheet" href="estilos.css" />
...
</head>

A tag <link> possui o atributo rel que define o tipo de arquivo que será
referenciado (stylesheet) e o atributo href terá o caminho do arquivo CSS.

A sintaxe do arquivo CSS externo é a mesma do CSS interno, a única mudança é

que todo o código CSS estará em outro arquivo independente, como pode ser visto
no arquivo estilos.css, abaixo:

/* Arquivo estilos.css */
body {
margin: 0;

font-family: Arial, Helvetica, sans-serif;

font-size: 1.0rem;
}

Comentários em CSS podem ser inseridos entre os símbolos /* e */. No exemplo

acima, estamos informando que o corpo do HTML <body> deve estar estilizado sem
margem em todos os lados; utilizar uma família de fontes, sendo a primeira,
chamada Arial e conforme não for encontrando em algum dispositivo, tentar usar
outras até a mais genérica possível, chamada de sans-serif; e por fim, utilizar uma

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

fonte de tamanho 1.0 para o todos os elementos filhos de <body>, em relação à

fonte padrão do seu elemento pai, que nesse caso seria o elemento <html> que por
sua vez herda do próprio navegador que geralmente tem tamanho de fonte padrão
de 16 pixels.

Outro conceito importante é o tipo de seletor. Até agora falamos de seletores de

elementos do HTML, mas existem ainda muitos outros seletores, como: seletores de
elementos, de classe e ID.

Seletores de elementos são aqueles que estilizam um tipo de elemento HTML,

por exemplo, estilizar todos os elementos do tipo parágrafo <p>, título <h1>,
cabeçalho <header> etc. Esses seletores estilizam todo e qualquer elemento do tipo
presentes no código-fonte.

No exemplo abaixo, estamos estilizando todos os elementos parágrafo <p>, com

a cor de fonte vermelha; todos elementos de título <h1>, com cor de fundo azul; e
todos os elementos de cabeçalho <header> com espaçamento de 20 pixels no topo e
na base, cor de fundo #454545, cor do texto #fff e alinhamento centralizado de
conteúdo.

p{
color:red;
}

h1 {
background-color:blue;
}

header {
padding: 20px 0;
background-color: #454545;
color: #fff;
text-align: center;
}

Seletores de classe são aqueles que podemos nominar e utilizar em qualquer

elemento que tenha o nome da classe definida, por exemplo:

<!--Código-fonte do HTML-->
<p class="personalizado" >Meu parágrafo</p>

/* Código-fonte do CSS */
.personalizado {
color: red;
}

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Para declarar um seletor de classe em um arquivo CSS, devemos colocar um

ponto, seguido do nome da classe com seus atributos e valores, separados por ponto
e vírgula.

Nesse caso, estamos personalizando apenas para esse parágrafo cuja classe está
definida para receber a cor vermelha, os demais parágrafos de um documento HTML
não serão estilizados com esse código CSS.

Seletores ID são semelhantes aos seletores de classe, porém recomenda-se

utiliza-los apenas uma vez no código-fonte, ou seja, você poderá ter apenas um
elemento identificado com o ID criado.

Para declarar um seletor ID em um arquivo CSS, basta digitar uma cerquilha,

seguida do nome identificador com seus atributos e valores, separados por ponto e
vírgula.

<!--Código-fonte do HTML4-->
<div id="header" >Meu cabeçalho</div>

/* Código-fonte do CSS */
#header {
color: red;
}

Antes do HTML5, programadores front-end utilizavam seletores ID para nominar

caixas <div> de áreas da página. Hoje essa condição é opcional, pois podemos criar
nossa página com estruturas semânticas e não utilizar seletores ID para essa situação,
embora seja útil para outras ocasiões. Acompanhe o exemplo abaixo já no HTML5:

<!--Código-fonte do HTML5-->
<header>Meu cabeçalho</header>

/* Código-fonte do CSS */
header {
color: red;
}

Há outra forma importante de personalizar estilos CSS, suponha o exemplo

abaixo:

<!--Código-fonte do HTML-->
<div>
<p>Esse filho direto de DIV poderá ser afetado por qualquer estilo abaixo,
vermelho ou azul, quem for declarado por último, pois ele é filho direto de
DIV.
</p>
<span>Span filho de DIV

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

<p>Esse parágrafo é filho de SPAN e filho indireto de DIV, logo será

afetado apenas com a cor azul</p>
</span>
</div>

/* Filho de DIV */
div p {
color: blue;
}

ou

/* Filho direto de DIV */

div > p {
color: red;
}

Considere que um parágrafo <p> é filho de uma caixa genérica <div> e existem
dois estilos que podem ser aplicados, o primeiro é o div p{...} que estilizará todos os
filhos <p> diretos e indiretos do elemento <div> e o segundo é o div > p {...} que
significa que esse estilo será aplicado para o elemento <p> filho direto de <div>.

3.2 Apresentação da metodologia BEM

Se você ou sua equipe de desenvolvimento já criou um sistema web
relativamente grande, deve ter percebido que arquivos CSS podem se tornar uma
dor cabeça, quando não se usa nenhuma metodologia de nomes de classes de folhas
de estilo.

O caos geralmente começa quando percebemos que não podemos entender as

prioridades de classes em cascata e colocamos sorrateiramente o !important para
dar preferência àquilo que está estilizando naquele momento em vários trechos do
código CSS.

/* Uso de preferência da cor azul sobre todo e qualquer outro estilo que esteja
em conflito */
div p {
color: blue !important;
}

Uma das soluções para esse problema é o uso de metodologias que servem para
padronizar os nomes das folhas de estilo, a fim de criar uma cultura de organização
dentro de uma equipe de desenvolvimento, por isso vamos falar um pouco sobre a
metodologia BEM (block, element e modifier). Essa metodologia consiste em criar
dentro de uma página, áreas de bloco que são entidades independentes na página
web e elementos que dependem do bloco para existir. Ambas, podem ser
modificadas em algum momento por uma situação particular, denominado
modificador.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

A sintaxe consiste em criar classes CSS de forma que o nome do bloco venha
primeiro, seguido de dois underscores (__) para seus elementos ou dois traços (--)
para seus modificadores, como nos exemplos das seguintes estruturas:
Bloco X qualquer: blocoX;
Elemento A de um bloco X: blocoX__ElementoA;
Modificador 1 de um blocoX: blocoX--modificador1;
Modificador 1 de um elemento A: elementoA--modificador1;
Modificador 1 do elemento A de um blocoX: blocoX__ElementoA--modificador1.

Perceba que no exemplo do projeto do curso, criaremos blocos (em amarelo)

para o header, o nav, o section e para o footer que estruturas independentes uma
das outras.

Para o bloco o header, temos um modificador que tornará essa área da página
fixa, mesmo que se role o conteúdo para baixo (block-header--fixed) e ainda dois
elementos filhos direto desse bloco: block-header__logomarca e
block-header__descricao. Temos ainda um bloco específico para o menu
(block-header__menu) e dentro dele seus elementos: header-menu__item. Nesse
último caso, basta apenas um estilo para ser utilizado em todos os ítens do menu,
pois seus estilos serão os mesmos.

Figura 3.1: Separação do cabeçalho em elementos BEM.

Seguindo o mesmo raciocínio, temos o bloco nav (block-nav) sem nenhum

modificador e dentro dele, dois elementos filhos: nav-promocional__titulo e
nav-promocional__button.

Essa organização tratá ao código mais clareza quando for necessário editar ou
compreender o que está escrito. Vale salientar que a Metodologia BEM é flexivel
quanto ao que você define como bloco, elemento e modificador, ou seja, você pode
ter uma ideia diferente da proposta desse curso. O mais importante é manter a
organização do código-fonte CSS e da equipe de desenvolvimento, a fim de evitar
problemas futuros na compreensão do seu site.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

3.3 Apresentando o container do Bootstrap

Bootstrap é um framework para desenvolvimento front-end que auxilia na
codificação de estilos CSS. No nosso projeto, vamos simplesmente falar um pouco
sobre uma pequena parte do Bootstrap, de fundamental importância para páginas
web responsivas, chamada container.

A classe container pertence ao grid system e é responsável por criar uma caixa
adaptável que se ajusta, a medida que mudamos a tela do dispositivo sem gerar
barra de rolagem horizontal.

Para usar o componente container do Bootstrap você pode acessar a página:

https://getbootstrap.com/docs/3.3/ ou simplesmente baixar o arquivo
bootstrap.min.css no GitHub e colar na pasta css do projeto do curso.

No site do Bootstrap, você também pode baixar o arquivo bootstrap.min.css

clicando no menu Customize e selecionando apenas os estilos referentes ao grid
system.

Figura 3.2: Site do Bootstrap.

Importante destacar que estamos utilizando nesse projeto a versão 3.3 do

Bootstrap, pois a versão 4 ainda está na versão Beta.

3.4 Estilizando a página inicial: cabeçalho e menu

Agora que temos uma noção sobre HTML5, CSS3, BEM e o container do
Bootstrap, vamos iniciar a estilização dos arquivos HTML, criados no capítulo
anterior. A primeira estilização será do cabeçalho que servirá tanto para o index.html
como para o contato.html.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Figura 3.3: Cabeçalho do arquivo index.html.

Figura 3.4: Cabeçalho do arquivo contato.html.

Podemos observar, nas figuras 3.3 e 3.4, que estamos importando dois arquivos
CSS externos (linhas 9 e 10), o primeiro é o arquivo CSS do Bootstrap que contém as
estilizações de container do grid system que falamos no tópico anterior e o segundo
é o estilo que estamos criando. É importante frisar que o estilo do Bootstrap deve
ser declarado primeiro, pois qualquer estilização que seja feita no seu CSS pessoal,
poderá sobrescrever o CSS do Bootstrap.

<link rel="stylesheet" href="css/bootstrap.min.css" />

<link rel="stylesheet" href="css/estilos.css" />

Partindo para a figura 3.5, veremos como ficou a estilização do cabeçalho das
nossas páginas index.html e contato.html.

Figura 3.5: Cabeçalho das páginas index.html e contato.html.

Utilizando a metodologia BEM, criamos o bloco do cabeçalho com um

modificador e um bloco para o menu:
block-header: classe que estiliza a caixa que envolve o cabeçalho das
páginas;
block-header--fixed: classe modificadora para o bloco de cabeçalho,
tornando fixo na tela, mesmo após a rolagem vertical;
header-menu: classe para o bloco que define a estilização do menu.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Inserimos uma classe do Bootstrap:

container: classe do Bootstrap para tornar responsivo o conteúdo do
cabeçalho.

Por fim, definimos os elementos que fazem parte dos blocos de cabeçalho e de
menu:
block-header__logomarca: classe de estilização específica para o elemento
logomarca da bloco header;
block-header__descricao: classe de elemento para estilizar a descrição da
logomarca do bloco header;
block-header__menu: classe de bloco para estilização da lista de menu;
header-menu__item: classe de elemento para estilizar os itens da lista
(botões Home e Contato).

Só definir classes nos arquivos HTML não fará as páginas serem estilizadas,
exceto a classe container do Bootstrap, para isso vamos conhecer como ficaram as
estilizações no arquivo estilos.css.

Figura 3.6: estilos.css: configurações gerais e blocos Header e Header-Menu

Antes de estilizar, precisamos entender que todo browser tem um estilo próprio
de formatações de fontes. No caso do Google Chrome o padrão das fontes é 16
pixels para resolução de 100%. Essa unidade fixa não é recomendada para nosso site
que será responsivo, por isso vamos transformar a fonte fixa do navegador em uma
fonte variável, equivalente 10 pixels, pois quando precisarmos aumentar ou reduzir
as fontes do documento, poderemos multiplicar facilmente de dez em dez. Com uma
regra de três simples, notaremos que 16 pixels equivale a 100% e 10 pixels
equivalem a 62,5%.:

html {
font-size: 62.5%;
}

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Uma outra configuração muito importante é definir margin: 0, para que todos os
elementos estruturais, filhos de body, possam ocupar toda área da tela do
navegador, com margens zeradas, em todas as direções.

Precisamos definir as fontes padrão. Para isso, foi declarado que o navegador
use a fonte Arial, mas se o dispositivo não tiver essa fonte, tentará usar a Helvetica e
senão tiver nenhuma delas, usará a genérica sans-serif.

O atributo font-size informa ao browser que os filhos de body terão o tamanho

de fonte 1.4rem, ou seja, significa informar que as fontes terão a referência do
elemento pai de body (html de 10 pixels), multiplicados por 1.4, exibindo 14 pixels
para a fonte relativa dos elementos filhos de body.

body {
margin: 0;

font-family: Arial, Helvetica, sans-serif;

font-size: 1.4rem;
}

Todos os elementos do HTML são caixas com as propriedades de content,

padding, border e margin que fazem parte da sua estrutura. Mesmo que muitas
vezes elas não tenham uma função a ser definida, como é o caso da altura e largura
de elementos inline.

Figura 3.7: componentes dos elementos HTML.

A parte em azul, da figura 3.7, equivale a área definida para conteúdo da caixa e
ele pode ser uma imagem, um texto ou até outro elemento de bloco ou inline.

O padding é o espaçamento entre o conteúdo e a borda da caixa. A borda é a

área que delimita a parte interna e externa da caixa e por fim a margem, é o
espaçamento entre a caixa e outros elementos HTML.

As propriedades de padding, border e margin se estendem nas quatro direções

de uma caixa, logo podemos configurar, via CSS, os valores diferentes para cada
direção e propriedade.

A classe block-header, entre as linhas 14 e 19 da figura 3.6, define que a sua

caixa nominada <header> terá um padding no topo de 8 pixels, com altura fixa de
110 pixels (altura do cabeçalho) e cor de fundo hexadecimal #454545.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

<!-- Código HTML -->

<header class="block-header block-header--fixed">

/* Código CSS */
.block-header {
padding-top: 8px;
height: 110px;

background-color: #454545;
}

Logo abaixo temos um modificador (linha 21 a 27) para o nosso cabeçalho que
será responsável por informar ao navegador que o cabeçalho será fixo e seus pontos
extremos de referência são: top: 0; left: 0; right: 0. Como estamos usando o
container do Bootstrap, temos de colocar o elemento z-index com um valor alto,
para dar preferência ao menu em relação a outros containers (nav, header, main,
footer etc).

<!-- Código HTML -->

<header class="block-header block-header--fixed">

/* Código CSS */
.block-header--fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
}

O bloco de menu (linha 30 a 36) será definido com margem zero em todos os
lados, fonte de 16 pixels, pois é 1.6rem, ou seja, 1.6 vezes o tamanho do elemento
pai que é o HTML, com valor de 62,5% (10 pixels) do valor da fonte do navegador (16
pixels). Por fim, informamos ao navegador que o nosso menu (lista) não terá
nenhum marcador, através do list-style.

<!-- Código HTML -->

<div class="block-header__menu">
<ul class="header-menu">
<a href="index.html">
<li class="header-menu__item">HOME</li>
</a>
<a href="contato.html">
<li class="header-menu__item">Contato</li>
</a>
</ul>
</div>

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

/* Código CSS */
.header-menu {
margin: 0;

font-size: 1.6rem;

list-style: none;
}

Terminadas as configurações de bloco, vamos estilizar os elementos do bloco de

cabeçalho e os elementos de bloco do menu, apresentados na figura 3.8.

Figura 3.8: estilos.css: Elementos do Header e do Header-Menu

Dentro do cabeçalho, precisamos colocar uma estilização para posicionar

corretamente a caixa <div> que contém a logomarca.

<!-- Código HTML -->

<div class="block-header__logomarca">
<a href="index.html">
<img src="imagens/logo.png" ... />
</a>
</div>

/* Código CSS */
.block-header__logomarca {
float: left;
width: 99px;
height: 68px;

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Nessa estilização (linha 100 a 104), forçamos o tamanho da caixa com as

dimensões definidas para a imagem, através dos atributos width e height, além de
jogar a caixa da logomarca para o canto esquerdo com a declaração do argumento
float.

Na caixa que contém o nome da nossa loja virtual (linha 106 a 114), definimos
um comprimento de 98 pixels, alinhado ao centro, com fonte fixa de 21 pixels, de cor
branca #fff e formatação de texto em negrito, através do valor bold. Estamos
utilizando uma fonte fixa, pois quando essa página for renderizada em telas
pequenas, o nome da empresa deve ficar com o mesmo tamanho para destaque.

<!-- Código HTML -->

<div class="block-header__descricao">Hat Shop</div>

/* Código CSS */
.block-header__descricao {
width: 98px;

font-size: 21px;
font-weight: bold;
text-align: center;

color: #fff;
}

O menu dentro do cabeçalho da página (linha 116 a 119) foi definido com um
elemento block-header__menu que contém um o bloco header-menu (já falamos
anteriormente) e o seu elemento header-menu__item (linha 122 a 132). Perceba
que estamos jogando a caixa block-header__menu para a direita, com um padding
no topo de 25 pixel a fim de centralizar, de cima para baixo, os botões HOME e
Contato, no meio do cabeçalho.

<!-- Código HTML -->

<div class="block-header__menu">
<ul class="header-menu">
<a href="index.html">
<li class="header-menu__item">HOME</li>
</a>
<a href="contato.html">
<li class="header-menu__item">Contato</li>
</a>
</ul>
</div>

/* Código CSS */
.block-header__menu {

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

float: right;
padding-top: 25px;
}

Anteriormente mencionamos que uma lista é um elemento do tipo block, ou

seja, quando é definida ocupa 100% do comprimento da tela, porém o menu do
cabeçalho só deve ocupar o lado direito, pois a logomarca e a sua descrição já
ocupam o lado esquerdo.

Para resolver isso, podemos alterar o status de um elemento HTML através da

propriedade display do CSS. Tornamos um elemento block em inline, inline em bloco
ou ainda um elemento misto com valor inline-block. Nesse último caso, o elemento é
do tipo inline e se comporta como um block, ou seja, podemos reconfigurá-lo com
altura, largura e outras propriedades, como se fosse um elemento em bloco.

.header-menu__item {
display: inline-block;
position:relative;
padding: 10px;
width: 90px;

background-color: #00008b;
color: #fff;
text-align: center;
}

A estilização inline-block, do elemento header-menu__item (linha 122 a 132),

faz com que a lista do menu seja inline e se comporte como bloco, assim podemos
definir o seu comprimento de 90 pixels e o padding de 10 pixels. Adicionamos ainda
uma cor de fundo azul em hexadecimal, uma cor de fonte branca e o alinhamento do
conteúdo para o centro da caixa.

A atributo position define que esse elemento de lista seja posicionado

relativamente em sua posição normal, em relação ao seu antecessor relativo que
nesse caso é o <ul>.

<!-- Código HTML -->

<div class="block-header__menu">
<ul class="header-menu">
...

As pseudo-classes hover e focus (linha 134 a 136) permitem que estilizações

sejam ativadas quando colocamos o mouse sobre o botão de menu ou quando o
focamos, utilizando a tecla TAB. Nesse caso, o browser mudará a cor do botão de
azul para um marrom, de valor hexadecimal #A0522D.

.header-menu__item:hover, .header-menu__item:focus {
background-color: #A0522D;

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

3.5 Estilizando a página inicial: navegação

No capítulo anterior, definimos a caixa <nav> como sendo a área para inserir
propagandas do site, como por exemplo: direcionar o cliente para uma área de
cadastro, a fim de que ganhe 50% de desconto na primeira compra. Agora vamos
aplicar os estilos CSS, utilizando a metodologia BEM.

Figura 3.9: Banner promocional do index.html.

Perceba que criamos um bloco <nav> para toda a caixa e declaramos sua classe
block-nav. Dentro dele, utilizamos o container-fluid do Bootstrap a fim de que
ocupe toda a área horizontal do navegador. Na linha 36, declaramos o bloco <div>
com a classe nav-promocional e os seus elementos <h1> e <div>, de classes
nav-promocional__titulo e nav-promocional__button, respectivamente.

Figura 3.10: Bloco nav do banner promocional do index.html.

Agora vamos declarar os estilos CSS para o bloco promocional (linhas 39 a 44).
Inicialmente declaramos que esse bloco deve começar com 110 pixels de margem de
topo, pois essa é a dimensão já ocupada pela caixa fixa do cabeçalho. Em seguida,
inserimos um espaçamento interno de 40 pixels no topo e na base e uma cor de
fundo hexadecimal #A0522D.

.block-nav{
margin-top: 110px;
padding: 40px 0;
background-color: #A0522D;
}

Iremos estilizar a caixa dentro do bloco <nav>, onde teremos de fato o conteúdo
(linha 46 a 49). Definimos uma fonte de 16 pixels em relação ao <body> com texto
centralizado. Vale salientar que essa configuração é definida para dispositivos

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

pequenos, através da técnica Mobile First que consiste em desenvolver a página

primeiro pensando em dispositivos móveis.

.nav-promocional {
font-size: 1.6rem; /* 1.6 * 10px */
text-align: center;
}

Utilizamos o conceito de Media Queries (linha 51 a 57) que consiste inserir ou

remover estilos, levando em consideração a resolução da página dinamicamente.

Para dispositivos maiores que 760 pixels o CSS alterará o tamanho da fonte e
criará um espaçamento nas laterais de 5% em relação ao tamanho da tela.

@media(min-width: 760px) {
.nav-promocional {
padding: 0 5%;

font-size: 2.3rem;
}
}

Para os elementos, criamos a classe nav-promocional__titulo (linha 139 a 147)

que é responsável por estilizar o título e a classe nav-promocional__button (linha
149 a 154) para estilizar o botão de cadastro.

Figura 3.11: Elementos do bloco nav do banner promocional do index.html.

O título será sem margem e terá cor branca para contrastar com a cor de fundo
do bloco <nav>, além de uma fonte 5 vezes maior em relação ao seu pai, com um
espaçamento superior e inferior de 1em e uma sombra deslocada em 2 pixels para a
direita e para baixo de cor #454545.

.nav-promocional__titulo {

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

margin: 0;

color: #fff;

font-size: 5rem;
line-height: 1em;
text-shadow: 2px 2px #454545;
}

Para o botão, inserimos uma margem de 50 pixels no topo, 20 pixels na base e o

tamanho da fonte de 1em em relação ao seu elemento pai.

.nav-promocional__button {
margin-top: 50px;
margin-bottom: 20px;
font-size: 1em;
}

Para estilizar o link (linha 156 a 164), inserimos um padding de 15 pixels no topo
e na base e 35 pixels nas laterais. Utilizamos o border-radius para arredondar os
cantos da caixa em 10 pixels e inserimos estilo para o texto ser branco e sem
sublinhado, além de uma cor de fundo de #222 para o botão.

.nav-promocional__button > a {
padding: 15px 35px;
border-radius: 10px;
color: #fff;
text-decoration: none;
background-color: #222;
}

Para finalizar, colocamos um efeito que muda a cor do botão, quando o usuário
passar o mouse ou selecionar pelo teclado, através das pseudo-classes hover e focus,
respectivamente (linha 166 a 168).

.nav-promocional__button > a:hover, .nav-promocional__button > a:focus {

background-color: #444;
}

3.6 Estilizando a página inicial: produtos

Agora iremos estilizar os produtos para que fiquem enfileirados em uma linha,
como propomos no capítulo introdutório. Utilizando ainda a metodologia BEM,
criamos o bloco da seção e um bloco para estilizar cada caixa de um produto:
block-section: classe que estiliza a caixa que envolve os produtos;
section-produto: classe para o bloco de um produto.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Inserimos uma classe do Bootstrap:

container: classe do Bootstrap para tornar as caixas dos produtos
responsivas.

Por fim, definimos os elementos que fazem parte do bloco de produto:

section-product__imagem: elemento para estilizar a imagem do produto;
section-product__descricao: elemento para estilizar a descrição do produto;
section-product__valor: classe de estilização do valor do produto;
section-product__pagamento: elemento para estilizar a fonte da forma de
pagamento;
section-product__button: elemento para estilizar o botão de comprar,
localizado no rodapé da do produto.

Figura 3.12: Produtos do index.html.

Todas essas definições de classes de bloco e elemento no arquivo HTML estão

na figura 3.12 e no código-fonte no GitHub. Vamos agora descrever a
implementação da estilização no arquivo CSS.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Figura 3.13: Blocos da seção e dos produtos do index.html.

O bloco block-section, entre as linhas 60 a 62 da figura 3.13, é responsável por

estilizar a caixa de seção que contém todos as caixas de produtos da página, logo ela
terá um espaçamento entre a borda e conteúdo de 20 pixel no topo e na base e zero
nos lados.

<!-- Código HTML -->

<section class="block-section">
<div class="container">
<article class="section-produto">
...

/* Código CSS */
.block-section {
padding: 20px 0px;
}

Em seguida estilizamos o <article>, através da classe section-produto (linha 64 a

73) com um padding de 10 pixels no topo e na base, comprimento de 100%, margem
inferior de 10 pixels, altura de 380 pixels, com o conteúdo alinhado ao centro e com
uma borda de 1 pixel, linha sólida e cor em hexadecimal de #454545.

<!-- Código HTML -->

<section class="block-section">
<div class="container">
<article class="section-produto">
...

/* Código CSS */
.section-produto {
padding: 10px 0;
width: 100%;
margin-bottom: 10px;
height: 380px;

text-align: center;

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

border: 1px solid #454545;

}

Você pode estar se perguntando: o comprimento dessa caixa de produtos está

ocupando 100% da comprimento, como ficarão três produtos em uma mesma linha?
A resposta para essa questão está no uso da técnica Mobile First e das Media
Queries, no código CSS mais abaixo.

No código do projeto, a classe section-produto foi criada inicialmente para

monitores pequenos, ocupando 100% do comprimento, mas se o site ocupar mais de
970 pixels em um monitor, o browser inserirá as estilizações descritas abaixo (linha
75 a 81), ou seja, flutua as caixas para a esquerda, ocupando 30% e com uma
margem de 10 pixels. Dessa forma, se você utilizar em um monitor grande (maior ou
igual a 970 pixels), essa estilização de três produtos por linha terá efeito.

@media (min-width: 970px) {

.section-produto {
float: left;
width: 30%;
margin: 10px;
}
}

Agora, mostraremos os elementos do bloco de produtos que comentamos acima.

Eles são responsáveis por estilizar o elemento de imagem, descrição, valor, forma de
pagamento e botão de comprar de cada um dos produto. Vale ressaltar que aqui
estamos utilizando a reusabilidade de códigos CSS externos, pois declararemos uma
única vez as estilizações que servirão para os três produtos contidos no código
HTML.

Figura 3.14: Elementos dos blocos de produtos.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Dentro de <article>, criamos um cabeçalho <header> para ser preenchido pela

imagem do produto, uma seção <section> para conter a descrição, o valor e as forma
de pagamento e por fim um rodapé <footer> que contém o botão de comprar.

<article class="section-produto">
<header class="section-product__imagem">
<img src="imagens/bowler.png" alt="Bowler" />
</header>
<section>
<div class="section-product__descricao">Bowler</div>
<div class="section-product__valor">R$39,90</div>
<div class="section-product__pagamento">em até 5X...</div>
</section>
<footer class="section-product__button">
<a href="#">Comprar</a>
</footer>
</article>

Para estilizar a imagem, a classe section-product__imagem (linha 171 a 173 da

figura 3.14) foi criada para definir o tamanho da caixa de cabeçalho, com altura fixa
de 150 pixels, que é o mesmo da altura das imagens do site.

.section-product__imagem {
height: 150px;
}

A descrição e o valor (linha 175 a 179) foram configurados com a mesma

estilização, daí as classes ocuparem o mesmo espaço, separadas apenas por vírgula.
Nesse caso estilizamos com margem de 10 pixels no topo e na base, além de
aumentar a fonte padrão em 2.8 em relação ao seu elemento pai. O mesmo
acontece com a estilização da forma de pagamento (linha 181 a 185), porém com
uma fonte um pouco menor.

.section-product__descricao, .section-product__valor {
margin: 10px 0;

font-size: 2.8rem;
}

.section-product__pagamento {
margin: 10px 0;

font-size: 2rem;
}

Para estilizar o botão de comprar (linha 187 a 189), localizado no rodapé da

caixa de produtos, colocamos um padding de 10 pixels no topo e na base e para o
elemento a (linha 191 a 198), filho direto de section-product__button , colocamos

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

um padding de 10 pixels no topo e na base e 15 pixels nas laterais, dando o efeito

para parecer um botão. Também inserimos estilos para a cor branca na fonte do
texto, sem underline e com plano de fundo azul.

.section-product__button {
padding: 10px 0;
}

.section-product__button > a {
padding: 10px 15px;

color: #fff;
text-decoration: none;

background-color: #00008B;
}

.section-product__button > a:hover {

background-color: #8b0000;
}

Quando o usuário colocar o ponteiro do mouse sobre o botão, a cor será

mudada para marrom #8b0000, utilizando a pseudo-classe hover (linha 200 a 202).

3.7 Estilizando a página inicial: rodapé

Para finalizar a página index.html precisamos aplicar estilos CSS ao rodapé da
página, denominado <footer>. Com a metodologia BEM, criamos o bloco da rodapé
que não tem elementos filhos, apenas a estilização do container do Bootstrap:
block-footer: classe que estiliza a caixa que envolve o rodapé;

Inserimos uma classe do Bootstrap:

container: classe do Bootstrap para tornar o rodapé responsivo.

Figura 3.15: Rodapé da página index.html.

Perceba que assim como o cabeçalho e a seção de produtos, o rodapé tem uma
caixa <footer> com 100% do comprimento, mas possui uma caixa filha <div> que é
responsiva, devido ao uso da classe container do Bootstrap.

Figura 3.16: Estilização do rodapé da página index.html.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

No rodapé estilizamos o bloco block-footer (linha 84 a 91 da figura 3.16) com

um padding de 20 pixels no topo e na base da caixa, cor de fundo grafite escuro
#454545 e o texto branco, alinhado ao centro.

Aqui finalizamos a página index.html do projeto do livro digital. Após as

estilizações, ela deve ficar como na figura 3.17, ou seja, bem melhor do que estava
no Capítulo 2, quando não tinha os estilos CSS incorporados ao HTML.

Figura 3.17: Página index.html estilizada.

3.8 Estilizando a página de contatos

Aqui estilizaremos somente o formulário de contatos. Vale lembrar que todas as
configurações em relação ao cabeçalho e ao rodapé são idênticas ao que fizemos na
página index.html.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Figura 3.18: Página contato.html estilizada.

Figura 3.19: classe block-form da página estilos.css.

<!-- Código HTML -->

<main class="block-form">...

/* Código CSS */
.block-form {
margin-top: 110px 0 70px;
padding: 20px 0;
}

O formulário está dentro de uma caixa semântica <main> (figura 3.18) que
consideramos como um bloco com margem no topo de 110 pixels, zero nas laterais,
70 pixels na base e com um espaçamento interno de 20 pixels nas laterais (linha 94 a
97 da figura 3.19):
block-form: classe que estiliza a caixa que envolve todo o formulário.

Inserimos uma classe do Bootstrap:

container: classe do Bootstrap para tornar o conteúdo de formulário
responsivo.

Definimos os elementos que fazem parte do bloco do formulário:

form__titulo: elemento para estilizar o título do formulário;
form__grupo: elemento para estilizar o grupo formado por mais de um
elemento HTML;
form__field: classe de estilização do campos de preenchimento.

Figura 3.20: Estilos do formulário.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Os elementos form__titulo e form__grupo (linha 205 a 207 e linha 209 a 211, da

figura 3.20) estilizam o elemento de título alinhado ao centro e a margem do grupo
de elementos com 10 pixels acima e abaixo, respectivamente.

<!-- Código HTML -->

<h1 class="form__titulo">Entre em contato conosco!</h1>
<form action="#" method="get">
<div class="form__grupo">
<label for="nome">Nome</label>
<input id="nome" ... type="text" class="form__field" />
</div>

/* Código CSS */
.form__titulo {
text-align: center;
}

.form__grupo {
margin: 10px 0;
}

O elemento form__grupo agrupa geralmente dois elementos: um <label> e um

<input> ou dois botões numa mesma área.

O elemento form__field (linha 213 a 225) estiliza o campo de texto com o

comprimento de 100%, de forma que o <label> fique sempre acima dele; a altura
desse campo será três vezes o tamanho da altura de seu elemento pai; com padding
de 5 pixels; e do tipo bloco.

.form__field {
width: 100%;
height: 3em;
padding: 5px;
display: block;

border-radius: 10px;
border: 1px solid #ccc;

font-size: 1.4rem;

background-color: #fff;
}

Ainda no elemento form__field adicionamos raio de borda de 10 pixels, com

borda de 1 pixel, sólida e de cor preta. A fonte corresponde a 14 pixels (1.4rem) e a
cor de fundo branca.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Figura 3.21: Formulário de contato estilizado.

Terminadas as estilizações, a página de contatos ficará bem melhor do que

estava apresentada na figura 2.15 do Capítulo 2, como você pode ver na figura 3.21.

Para você conferir a responsividade da página, pode utilizar o DevTools: Ctrl +

Shift + I e depois Ctrl + Shift + M para simular entre dispositivos com telas grandes e
pequenas, como pode ser observado nas figuras 1.5 e 1.6.

Argosoft - Web Design Responsivo com HTML5 e CSS3

 www.argosoft.com.br

Capítulo 4 - Conclusão
Nesse ebook você aprendeu a criar do zero um site responsivo utilizando HTML5,
CSS3, metodologia BEM e o container do grid system do Bootstrap. Agora você pode
iniciar a sua carreira profissional como desenvolvedor front-end e entrar no mercado
de trabalho. Para isso, continue aprofundando seus conhecimentos, buscando
sempre material relacionado aos temas abordados e treinando com o
desenvolvimento de outros sites.

4.1 Próximos passos

O blog da Argosoft traz temas interessantes sobre os assuntos abordados nesse
material e acompanhe-nos no YouTube, Facebook, Instagram e Linkedin. Fique
atento às nossas publicações, pois em breve estaremos lançando um Workshop
totalmente gratuito, aprofundando ainda mais os temas abordados nesse livro
digital e, em breve, estaremos lançando um curso completo de Web Design
Responsivo com HTML5 e CSS3.

Se você quiser ser um desenvolvedor back-end para trabalhar com

processamento de dados do lado do servidor, estude assuntos como banco de dados
e linguagens de programação.

Argosoft - Web Design Responsivo com HTML5 e CSS3