CSS - Web Dev - Felipe Kenzo Shiraishi

Penas do Arauto - Felipe Kenzo Shiraishi
Web-Dev - Front End

20 de Outubro, 2018
CSS 3
O Que Esperar Deste Documento

Este documento busca ensinar o processo de estilização de uma página HTML com a descrição de
CSS. Será preciso ter passado pelo documento de HTML desta mesma série.

1

CSS

Especificando Referências
Estamos partindo de uma página em que os elementos constitutivos do site estão presentes,
mas estão horrorosos. Caracteres estranhos aparecem por não reconhecer assentos. O site parece
amador. A barra de navegação não parece uma vaga de Navegação. Para torná-la mais palatável,
utilizaremos a Cascade Style Sheet, o CSS. Ele será a nossa paleta de cores para atribuir estética à
página e torná-la bonita.
Para isso, precisaremos primeiro puxar referências para 3 coisas:
● Especificar o documento de estilo css que utilizaremos para a nossa página HTML;
● Especificar a codificação de caracteres que estaremos utilizando;
● Especificar a fonte que utilizaremos.
Essas referências são feitas na tag de <head> do nosso HTML. Vou adicionar a tag <meta> e
especificar que o código de caracteres que eu vou utilizar é o UTF-8. Esta tag meta é utilizada para
especificar informações externas para o navegador ou ferramentas de busca. É possível adicionar
palavras chaves do seu site no meta para auxiliar a filtragem de engines de busca da internet.
Agora, eu pegarei referências externas às minhas descrições. Quero utilizar um fonte da
Google Fonts (Caso contrário eu posso carregar uma fonte do meu computador para a pasta do site) e
quero vincular o meu CSS à página HTML. Para fazer esse vínculo, uso a tag <link>. Esta tag possui
argumentos importantes como rel, que especifica a relação que este vínculo terá com o meu HTML,
href, que é a url aonde a página deverá buscar pelo recurso e type, que especifica o tipo de arquivo
será esse vínculo.
Você pode escolher por uma fonte neste site: https://fonts.google.com/ e obter o código de
vínculo para poder usar esta fonte em seu site.
2

CSS

Estilizando a Barra de Navegação

Agora, irei descrever no meu documento de estilo css style.css a forma como desejo estilizar a
minha barra de navegação.
Um documento css funciona descrevendo como quero que se comporte cada tag ou classe
presente em meu arquivo HTML. Então se eu quiser, por exemplo, especificar que a única fonte
utilizada pelo meu site seja a fonte que eu importei de referência da google, a Quicksand e que os
elementos não tenha borda ou margem de ajuste, eu descrevo isso desta forma por CSS:
Note como essa descrição resultou que todos os elementos HTML da tag <body> passam a ter
as características descritas.
Fonte linda né não?
3

CSS

Agora eu quero que a minha barra de navegação tenha os seguintes comportamentos:
● Ocupe a parte superior do meu site;

● Ocupe toda a largura do site;
● Tenha uma altura pequena;
● Sua posição seja fixa na página, independente do usuário rolar o scroll.
Para alcançar este objetivo, devo fazer o CSS do compartimento <nav> alterar esses valores.
4

CSS

Agora vamos descrever a logo da nossa barra de navegação. Agora para descrever tags
específicas. Além de especificar a tag maior hierarquicamente, precisamos descrever as tags menores.
Agora, vou fazer uma descrição específica que altere somente a minha Logo. para isso, quero
especificar a tag <nav> com a classe “logo”.
Basicamente, quero que ela ocupe a parte esquerda do barra de navegação e tenha
determinadas dimensões.
Agora finalmente, falta descrever a aparência da minha lista de Links.
5

CSS

Com isso, terminamos de descrever todos os elementos de nossa lista de links da barra de
navegação. Vejamo como ficou:
6

CSS

Estilizando as Seções
Agora chegou a hora de descrevermos as seções de conteúdo. Vamos começar descrevendo a
seção de imagem. Eu vou adicionar uma foto jpg à pasta destes arquivos. Então farei a seguinte
descrição:
Agora temos um resultado que está ficando bem interessante:
7

CSS

8

CSS

Agora finalmente, editar a seção de texto:
9

CSS

E assim, finalizamos a descrição do CSS do nosso site e ele terá a seguinte aparência:
10

CSS - Web Dev - Felipe Kenzo Shiraishi

Enviado por

Dados do documento

Descrição 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

CSS - Web Dev - Felipe Kenzo Shiraishi

Enviado por

Direitos autorais:

Formatos disponíveis

Penas do Arauto - Felipe Kenzo Shiraishi

Web-Dev - Front End

O Que Esperar Deste Documento

Para isso, precisaremos primeiro puxar referências para 3 coisas:

Estilizando a Barra de Navegação

Fonte linda né não?

Agora eu quero que a minha barra de navegação tenha os seguintes comportamentos:

● Ocupe a parte superior do meu site;

Agora finalmente, falta descrever a aparência da minha lista de Links.

Agora temos um resultado que está ficando bem interessante:

Agora finalmente, editar a seção de texto:

Você também pode gostar