CSS

Descomplicado

L. Gallerani
 Copyright © 2020 by L. Gallerani

Diagramação L. Gallerani
Capa L. Gallerani
Revisão L. Gallerani

G166c Gallerani L.
CSS Descomplicado / Gallerani L. 2. ed - São Paulo, SP
Está obra é uma produção independente.
Copyright[2020] by Gallerani L.
Todos os direitos desta edição reservados ao autor da obra.
1. Ciência da Computação 2. Tecnologia

Índice para catálogo sistemático:

1. Ciência da Computação CDD 004
2. Tecnologia (ciências aplicadas) CDD 600
Alteração de Cores com CSS ...................................................................... 9

Alterando Cor e tamanho de Textos ....................................................... 12

Alterando Links ......................................................................................... 15

Criando botões ........................................................................................... 19

Estilização de formulários ........................................................................ 22

CSS em arquivo externo ............................................................................ 26

 CSS Descomplicado, por L. Gallerani

Introdução

Depois de conhecer o HTML, o segundo para um

programador ou designer é conhecer o CSS.
O CSS significa Cascading Style Sheets, ou seja,
folhas de estilo em cascata é um mecanismo para
adicionar estilo a um documento web ou páginas da
internet.
Ficando responsável pela formatação de cores,
formas e tamanhos de objetos dentro de páginas de
internet.

7
 CSS Descomplicado, por L. Gallerani

Ambiente de trabalho

Para desenvolver páginas em HTML não é

necessária nenhuma ferramenta especifica, apenas o bloco
de notas, mas é aconselhável utilizar editores de texto
voltado para a programação, para facilitar o entendimento
e releitura do código.
Pode ser utilizado o como já mencionado o bloco de
notas, sublime text, visual studio code, php storm,
notepad++, entre outros.
Nesta obra foi utilizado o sublime text para a
edição e criação do HTML, caso deseje utilizar o mesmo
pode encontrar para download em:
[Link]

8
 CSS Descomplicado, por L. Gallerani

Alteração de Cores com CSS

Para colocar uma cor diretamente em uma tag usa-

se o atributo style.

Fonte: O autor

Desta forma é necessário colocar a formatação em cada

tag, como visto na tag h1 e na tag p.

9
 CSS Descomplicado, por L. Gallerani

O resultado:

Fonte: O autor

Utilizando seletores, seletores é a forma mais

simples de aplicar um estilo em várias partes da nossa
página.

10
 CSS Descomplicado, por L. Gallerani

Fonte: O autor

Ao criar a tag Style dentro do cabeçalho (Head) é

possível utilizar uma formatação padrão para todas que
desejar, como na imagem acima a estilização do h1 e p.

11
 CSS Descomplicado, por L. Gallerani

O resultado:

Fonte: O autor

12
 CSS Descomplicado, por L. Gallerani

Alterando Cor e tamanho de Textos

Veremos como utilizar classes e identificadores dentro

do CSS.
• Classe para utilizar uma classe dento do CSS
utiliza-se “.” antes do nome da classe. Pode
aparecer várias vezes no html.

• Id para utilizar um id dento do CSS utiliza-se “#”

antes do nome da classe. O Id é único então um id
só pode aparecer uma vez na página.

Ao utilizar classes é possível alterar formatos e cores

de diversas tags, que possuem a mesma classe.
Com o ID, acontece o mesmo, mas por padrões de boa
programação o Id deve ser usado em apenas um elemento
por página.

13
 CSS Descomplicado, por L. Gallerani

Fonte: O autor

14
 CSS Descomplicado, por L. Gallerani

O resultado:

Fonte: O autor

15
 CSS Descomplicado, por L. Gallerani

Alterando Links

É possível alterar a disposição de tags através do

CSS, para este exemplo crie uma página com alguns links,
como na imagem abaixo.

Fonte: O autor

Note que foi utilizado apenas HTML e não foi

implementado o CSS, neste momento.

16
 CSS Descomplicado, por L. Gallerani

O resultado:

Fonte: O autor

Ao implementar o Style, estamos aplicando o

display em linha apenas no li dentro de uma ul e dentro
de uma nav.
E foi retirada a margem externa(margin) e margem
interna(padding) de todo ul, dentro de um nav.

17
 CSS Descomplicado, por L. Gallerani

Fonte: O autor

18
 CSS Descomplicado, por L. Gallerani

O resultado:

19
 CSS Descomplicado, por L. Gallerani

Criando botões

Utilizaremos algumas propriedades do CSS para criar

um menu.
• Background é a cor do fundo.

• Color é a cor principal.

• Margin é a margem externa.

• Padding é a margem interna.

• Border é a espessura da borda.

• Border-radius: arredondamento das bordas.

• Display é o tipo de orientação na tela.

• Text-decoration: decorações do texto.

• a:houver é quando o elemento estiver com o mouse

sobre ele.

20
 CSS Descomplicado, por L. Gallerani

Fonte: O autor

21
 CSS Descomplicado, por L. Gallerani

O resultado:

Fonte: O autor

22
 CSS Descomplicado, por L. Gallerani

Estilização de formulários

Crie o formulário abaixo:

Fonte: O autor

O resultado:

Fonte: O autor

Estilizando o formulário.

23
 CSS Descomplicado, por L. Gallerani

• “ * ” é o seletor para selecionar todos os elementos

da nossa página html.
box-sizing: border-box ira corrigir possíveis erros
de formatação do css do próprio navegador

• Border é a propriedade para colocar borda, ela

pode ser solida(solid), tracejada(dashed)

• RGB é um modo que pode variar de 0 a 255, sendo

0 preto e 255 branco.

Ex: rgb(valor do vermelho, valor do verde, valor do

azul)
• #aaaaa é o modo hexadecimal de cores que pode
varias do 0(preto) até o branco(f).

Ex: #00aaff (“00” corresponde ao vermelho, “aa”

corresponde ao verde e “ff” ao azul).

24
 CSS Descomplicado, por L. Gallerani

Fonte: O autor

25
 CSS Descomplicado, por L. Gallerani

O resultado:

Fonte: O autor

26
 CSS Descomplicado, por L. Gallerani

CSS em arquivo externo

CSS Externo, a grande vantagem do CSS e poder

criar um arquivo externo com os estilos de botões,
parágrafos, títulos e referenciar esse estilo em várias
páginas.
Para isto criaremos um formulário em html.

Fonte: O autor

O resultado:

Fonte: O autor

27
 CSS Descomplicado, por L. Gallerani

Criaremos um novo arquivo e colocaremos o CSS

abaixo, salvaremos como [Link] na mesma pasta que
esta o nosso arquivo html.

Fonte: O autor

.btn se refere a uma classe principal onde ficam as

principais atributos de um botão.
.btn-red se refere a uma subclasse onde indica a cor
do botão.

28
 CSS Descomplicado, por L. Gallerani

.btn-red:hover se refere ao evento do mouse sobre o

botão.
Não esqueça de deixar os dois arquivos na mesma
pasta, o HTML e o CSS.

Fonte: O autor

Agora basta voltar no arquivo HTML e referenciar

o CCS acrescentando um link como mostra na linha 5 da
imagem.

29
 CSS Descomplicado, por L. Gallerani

Fonte: O autor

O resultado:

Fonte: O autor

30