INTRODUÇÃO AO CSS

★ O que é css?
CSS (Cascading Style Sheets) não é uma linguagem de programação é
uma linguagem declarativa para estilização de páginas HTML. Com ela é
possível definir todas as características relacionadas à aparência dos
elementos presentes em uma página, customizando cores, formas, fontes,
etc.

★ Seletores
Os seletores são as regras de aplicação da nossa instrução CSS,
selecionando o objeto que vai será alvo do estilo. O seletor vai dizer ao
meu browser que aquele CSS vai ser aplicado a este elemento ou a uma
gama de elementos.
Existem 3 formas de SELECIONAR o objeto e aplicar o seu estilo:

➢ Seleção por tipo de elemento

Possibilita aplicar regras para determinadas tag's do meu código HTML,

sua sintaxe básica é:

❖ p {regra de estilo};

➢ Seleção por ID

Possibilita aplicar regras para determinados objetos dentro do meu

IDENTIFICADOR (ID atributo do HTML), sua sintaxe básica é :

❖ #nome_do_id {regra de estilo};

 ➢ Seleção por classe

Gera um "código" que eu posso reutilizar em diversas tag's do código

HTML, sua sintaxe básica é:

❖ .nome_da_classe {regra de estilo};

★ Cores e Background
No CSS podemos definir cor usando o RedGreenBlue que são as 3 cores
básicas, que são definidas da seguinte forma:

❖ rgb(red,green,blue)
❖ rgb(255,255,255) = branco \\onde 255 é o valor máximo
❖ rgb (0,0,0) = preto \\e zero é o valor mínimo

No RGB podemos também definir a transparência da cor, usando o alfa

(a), na seguinte forma:

❖ rgba(0,0,0,0.5) = definindo 50% de transparência da cor

preta

Podemos também usar notação hexadecimal, com 3 conjuntos e 2

números, caso minha combinação tenha a mesma sequência posso
encurtar e colocar apenas os 3 primeiros números ou letras:

❖ #000000 = preto \\valor mínimo \\#000 forma reduzida

❖ #FFFFFF = branco \\valor máximo \\#FFF

Background permite definir como será o fundo de um determinado

elemento, através de cores, imagens ou cores mais elaboradas como
degradês e gradientes.
Que podem ser definidas da seguinte forma:

❖ Background-color: #FFF -> usa a mesma definição de cor;

❖ Background-image: url(“imagem.png”) -> vai repetir a img
em toda minha página, no body do HTML;
 ❖ Background-repeat: no-repeat -> não vai deixar repetir a
img, existe outras combinações como:
repetir no eixo “x” repeat-x, no eixo “y” repeat-y e apenas
repeat;
❖ Background-attachment: fixed -> congela a img e por mais
que role a página ela não desaparece, muito pouco usado no
CSS.
❖ Background-position: top -> define o posicionamento da
img, podemos usar várias combinações:

forma reduzida de escrever.

❖ Background: url(“imagem.png”) top center no-repeat;

★ Fontes - systemfonts x webfonts

Depois da cor a fonte (letra) é provavelmente a mais fundamental

propriedade de uma página.
A fonte no css será exibida no padrão do navegador, times new roman,
caso não seja alterada na sua folha de estilo. Temos duas formas de
definir a fonte no CSS:

➢ System fonts

Precisa estar instalado no computador do(s) meu(s) usuário(s), para

visualizar as fontes da mesma forma que foi definido, porém muito
limitada para escolhas. Sua sintaxe é:

❖ p {font-family: "Times New Roman", Times, serif;}

Se o nome de uma família de fontes for mais de uma palavra, ela deverá estar entre aspas
 ➢ Web fonts

Não preciso me preocupar se o usuário tem ou não determinada fonte

instalada em seu computador, pois vou embutir fontes em arquivo web no
meu HTML, posso usar os recursos do Google Fontes, Fonts.com ou Adobe
Edge Web Fonts.

Faço a declaração do link no cabeçalho do HTML:

❖ <link href="https://fonts.googleapis.com/css?
family=Satisfy" rel="stylesheet">

Depois específico o nome é a família dessa fonte no CSS:

❖ p {font-family: 'Satisfy', cursive;}

➢ Famílias de fontes

A família compreende o conjunto de fontes que compartilham traços de

desenhos comuns, sendo, porém, apresentadas com variações, como
espessura (fino, normal ou negrito), light (claro), inclinação (redondo ou
itálico), regular, entre outros.

A font-family deve conter vários nomes de fontes como um sistema de

"fallback". Se o navegador não suportar a primeira fonte, ele tentará a
próxima fonte e assim por diante começando com a fonte desejada e
terminando com uma família genérica, para permitir que o navegador
escolha uma fonte semelhante na família genérica, se nenhuma outra
fonte estiver disponível.

❖ p{font-family: Arial, Helvetica, sans-serif;}

 ➢ Estilo de fontes

A font-style é usada principalmente para especificar texto em itálico.

Ela possui 3 valores:

❖ Normal -> o texto é mostrado normalmente;

Este é um parágrafo no estilo normal.
p {font-style: normal;}

❖ Oblíquo -> o texto é "inclinado" (oblíquo é muito semelhante ao

itálico, mas menos suportado);
Este é um parágrafo em estilo itálico.
p {font-style: oblique;}

❖ Itálico -> o texto é mostrado em itálico.

Este é um parágrafo no estilo oblíquo.
p {font-style: italic;}

➢ Tamanho da fonte

A font-size define o tamanho do texto, o valor do tamanho da fonte

pode ser um tamanho absoluto ou relativo.

❖ Absoluto;
● Define o texto para um tamanho especificado, através do px;
● O tamanho absoluto é útil quando o tamanho físico da saída é
conhecido;
● Não permite que um usuário altere o tamanho do texto em
todos os navegadores (ruim por motivos de acessibilidade);
● h1 {font-size: 40px;}O tamanho do texto padrão nos navegadores é de 16px;

❖ Relativo;
● Permite que um usuário altere o tamanho do texto em
navegadores, através do em/% onde, o tamanho padrão de
1em é 16px;
● A unidade de tamanho em é recomendada pelo W3C;
● O tamanho pode ser calculado de pixels para em usando esta
fórmula: pixels/16 = em
● h1 {font-size: 2.5em; /* 40px/16=2.5em */;}
● h2 {font-size: 1.875%; /* 30px/16=1.875em */;}
*Se você não especificar um tamanho de fonte, o tamanho padrão para o texto normal, como parágrafos, será 16px (16px =

1em).

➢ Tamanho responsivo da fonte

A vw define o tamanho do texto em relação ao navegador, ou seja, o texto

seguirá o tamanho da janela do navegador.

❖ p{font-size:10vw;}
Viewport é o tamanho da janela do navegador. 1vw = 1% da largura da janela de visualização. Se a janela de

visualização tiver 50 cm de largura, 1 vw será de 0,5 cm.

➢ Peso da fonte

A font-weight define o peso de uma fonte.

❖ p.normal{font-weight: normal;}
❖ p.light{font-weight: lighter;}
❖ p.normal{font-weight: bold;}
❖ p.light{font-weight: 900;}

➢ Variação da fonte

A font-variant especifica se um texto deve ou não ser exibido em uma

fonte de letras pequenas. No entanto, as letras maiúsculas convertidas
aparecem em tamanho de fonte menor do que as letras maiúsculas
originais no texto.

❖ p{font-variant: small-caps;}
 ➢ Alinhamento de texto

A text-align define o alinhamento horizontal do texto. Um texto pode

ser alinhado a esquerda ou à direita, centralizado, ou justificado.

❖ h1{text-align: center;}
❖ h2{text-align: left;}
❖ h3{text-align: right;}
❖ div{text-align: justify;}
Lembrando que quando definimos “justificado” cada linha é esticada de modo que cada linha tem a mesma largura, e

as margens esquerda e direita são retas (como em revistas e jornais)

➢ Decoração de texto

A text-decoration é usado define ou remover decorações de texto.

h1{text-decoration: overline;}

h2{text-decoration: line-through;}

h3{text-decoration: underline;}

a{text-decoration: none;} é muitas vezes usado para remover

sublinhados de links:

➢ Transformação do texto

A text-transform pode ser usada para transformar tudo em letras

maiúsculas ou minúsculas, ou capitalizar a primeira letra de cada palavra.

❖ p.maisculo{text-transform: uppercase;} INTRODUÇÃO AO CSS

❖ p.minusculo{text-transform: lowercase;} introdução ao css
❖ p.capitular{text-transform: capitalize;} Introdução Ao Css
 ➢ Recuo de texto

A text-indent define a margem da primeira linha do texto.

❖ p{text-indent: 50px;}

➢ Espaçamento entre letras

A letter-spacing é a distância entre os caracteres de um texto,

podemos aumentar ou diminuir o espaço entre eles.

❖ h1{letter-spacing: 3px;}
❖ h2{letter-spacing: -3px;}

➢ Espaçamento do texto

A word-spacing define a distância entre as palavras, podemos diminuir ou

aumentar o espaço entre elas.

❖ h1{word-spacing: 10px;}
❖ h2{word-spacing: -5px;}
 ➢ Altura da linha

A line-height define a altura da linha.

❖ p.menor{line-height: 0.8;}
❖ p.maior{line-height: 1.8;}

➢ Direção do texto

A direction é usada para alterar a direção do texto de um elemento.

❖ p.exe1{direction: rtl;}

➢ Sombra do texto

A text-shadow é usada para adicionar sombra ao texto. Podemos

especificar a posição da sombra horizontal (laterais), a posição da sombra
vertical (embaixo ou acima), o borrado da sombra (quanto maior a
numeração mais borrado) e cor da sombra.

❖ h1{text-shadow: 3px 2px 3px red;}

❖ h1{text-shadow: -3px -2px red;}
 ★ Bordas
A border permite que você especifique o estilo, a largura e a cor da borda
de um elemento.

➢ Estilo de borda

A border-style define o tipo de borda que será exibida em meu

elemento. Ela pode ter um valor único ou um valor específico para cada
lado, temos os seguintes valores:

❖ dotted - Define uma borda pontilhada

❖ dashed - Define uma borda tracejada
❖ solid - Define uma borda sólida
❖ double - Define uma borda dupla
❖ none - Remove a borda
❖ hidden - Define uma borda oculta
❖ groove-Define uma borda com sulcos 3D. O efeito depende da cor da borda
❖ ridge- Define uma borda 3D sulcada. O efeito depende da cor da borda
❖ inset- Define uma borda inserida em 3D. O efeito depende da cor da borda
❖ outset- Define uma borda de partida 3D. O efeito depende da cor da borda
 ➢ Largura da borda

A border-width define a largura da borda, podemos atribuir valores

específicos (em, px, %) ou especificando os valores predefinidos: thin
(fino), medium (médio) ou thick (grosso).

❖ p.one{border-style: solid; border-width: 5px;}

❖ p.two{border-style: solid; border-width: thin;}
❖ p.three{border-style: dotted; border-width: medium;}
❖ p.four{border-style: dotted; border-width: thick;}
❖ p.five{border-style: solid; border-width: 2px 10px 4px
20px}
A border-width não funciona se usada sozinha. Sempre especifique a propriedade border-style para definir as bordas

primeiro.

➢ Cor da borda

A border-color define a cor da borda, caso não seja definido ele herda a
cor do elemento. A propriedade border-color não funciona se usada
sozinha. Use a propriedade border-style para definir as bordas primeiro.

❖ p.one{border-style: solid; border-color: red;}

❖ p.two{border-style: solid; border-color: green;}
❖ p.three{border-style: solid; border-color: red green blue
yellow;}

➢ Borda arredondada

A border-radius é usada para arredondar a borda do elemento.

❖ p.normal{border: 2px solid red;}

❖ p.round1{border: 2px solid red; border-radius: 5px;}
❖ p.round2{border: 2px solid red; border-radius: 8px;}
❖ p.round3{border: 2px solid red; border-radius: 12px;}

★ Margem

A margin é usada para criar espaço ao redor de elementos, fora de

qualquer borda definida. Com CSS, você tem controle total sobre as
margens. Existem propriedades para definir a margem para cada lado de
um elemento (superior, direita, inferior e esquerda).

❖ margin-top (superior)
 ❖ margin-right (direita)
❖ margin-bottom (inferior)
❖ margin-left (esquerda)

Podemos declarar os seguintes valores:

❖ auto - o navegador calcula a margem
❖ length - especifica uma margem em px, pt, cm, etc.
❖ % - especifica uma margem em% da largura do elemento contido
❖ inherit - especifica que a margem deve ser herdada do elemento
pai

Para encurtar o código, é possível especificar todas as propriedades da

margem em uma propriedade:
❖ p{margin: 25px 50px 75px 100px;}Superior(25) direita (50) inferior(75) esquerda(100)
❖ p{margin: 25px 50px 75px;}Superior(25) direita e esquerda (50) inferior(75)
❖ p{margin: 25px 50px;}Superior e inferior(25) direita e esquerda (50)
❖ p{margin: 25px;}Mesmo valor para as 4 margens
 ★ Preenchimento

Diferente da margem o padding vai criar espaço em torno do conteúdo do

elemento dentro de qualquer borda definida. Existem propriedades para
definir o preenchimento de cada lado de um elemento (superior, direita,
inferior e esquerda).

❖ padding-top (superior)
❖ padding-right (direita)
❖ padding-bottom (inferior)
❖ padding-left (esquerda)

Podemos declarar os seguintes valores:

❖ length - específica preenchimento em px, pt, cm, etc.
❖ % - específica preenchimento em% da largura do elemento contido
❖ inherit - específica que o preenchimento deve ser herdada do
elemento pai

Para encurtar o código, é possível especificar todas as propriedades da

margem em uma propriedade:
❖ p{padding: 25px 50px 75px 100px;}Superior(25) direita (50) inferior(75)
esquerda(100)

❖ p{padding: 25px 50px 75px;}Superior(25) direita e esquerda (50) inferior(75)

❖ p{padding: 25px 50px;}Superior e inferior(25) direita e esquerda (50)
❖ p{padding: 25px;}Mesmo valor para as 4 margens

➢ Preenchimento e largura

A width define a largura da área de um conteúdo do elemento. Portanto,

se um elemento tiver uma largura especificada, o padding adicionado a
esse elemento será adicionado à largura total do elemento. Isso
geralmente é um resultado indesejável.

❖ div{width: 300px; padding: 25px;}

o elemento <div> recebe uma largura de 300px. No entanto, a largura real renderizada do elemento <div>

será 350px (300px + 25px de preenchimento à esquerda + 25px de preenchimento à direita) :

Para manter a largura em 300px, não importa a quantidade de
preenchimento, você pode usar a box-sizing. Isso faz com que o
elemento mantenha sua largura; Se você aumentar o preenchimento, o
espaço de conteúdo disponível diminuirá.

❖ div{width: 300px; padding: 25px; box-sizing: border-box;}

★ Altura e largura

As propriedades height e width são usadas para definir a altura e a

largura de um elemento. Pode ser definido como automático (esse é o
padrão. significa que o navegador calcula a altura e a largura) ou
especificado em valores de comprimento, como px, cm, ou em
porcentagem (%).

❖ div{height: 200px; width: 50%; background-color:

powderblue;}

As propriedades height e width definem a altura/largura da área dentro do preenchimento, borda e margem do

elemento!
 ❖ div{height: 100px; width: 500px; background-color:
powderblue;}

Tem uma propriedade que define a largura máxima de um elemento,

chamada max-width.Quando a janela do navegador é menor que a
largura do elemento (500px). O navegador adiciona uma barra de rolagem
horizontal à página.
Usando max-width, em vez disso, nesta situação, irá melhorar o manuseio
do navegador de pequenas janelas, assim também temos o min-width
definindo o limite mínimo.

★ Modelo de caixa

A box-model é essencialmente uma caixa que envolve todos os elementos

HTML. Consiste em margens, bordas, preenchimento e o conteúdo real.

❖ Content - O conteúdo da caixa, onde texto e imagens aparecem;

❖ Padding - Limpa uma área ao redor do conteúdo. O preenchimento é
transparente;
❖ Border - uma borda que circunda o preenchimento e o conteúdo;
❖ Margin - Limpa uma área fora da borda. A margem é transparente
O modelo de caixa nos permite adicionar uma borda ao redor dos
elementos e definir o espaço entre os elementos.

❖ div{width: 300px; border: 25px solid green; padding:

25px; margin: 25px;}

A largura total de um elemento deve ser calculada da seguinte forma:

❖ Largura total do elemento = largura + preenchimento à esquerda +
preenchimento à direita + borda esquerda + borda direita + margem
esquerda + margem direita;

A altura total de um elemento deve ser calculada da seguinte forma:

❖ Altura total do elemento = altura + preenchimento superior +
preenchimento inferior + borda superior + borda inferior + margem
superior + margem inferior.

★ Posição

A position especifica o tipo de posicionamento de cada elemento. Os

elementos podem ser posicionados usando as propriedades superior,
inferior, esquerda e direita, no entanto, a propriedade position deverá
ser definida primeiro. Eles também funcionam de maneira diferente
dependendo do valor da posição, que são cinco:

❖ static; relative; fixed; absolute;

➢ Posição estática

Os elementos HTML são de position static por padrão, por isso, não
são afetados pelas propriedades superior, inferior, esquerda e direita.

❖ div .static{position: static; border: 3px solid #73AD21;}

 ➢ Posição relativa

Um elemento de position relative está posicionada em relação a sua

posição normal. As propriedades superior, inferior, esquerda e direita
ajustadas levará para longe de sua posição original, não sendo possível
colocar outro elemento na lacuna deixada por esse elemento.

❖ div .static{position: relative; width: 150px; left: 30px;

border: 3px solid #73AD21;}

➢ Posição absoluta

A position absolute é definida em relação ao ancestral posicionado mais

próximo, porém se um elemento posicionado absoluto não tiver
antepassados posicionados, ele usará o corpo do documento para definir
sua posição.
 ➢ Posição fixa

A position fixed é definida em relação a minha janela de exibição

(body), o que significa que ela permanece sempre no mesmo local,
mesmo que a página seja rolada.

★ Barra de rolagem (estouro)

A overflow controla o que acontece quando o conteúdo é grande demais

para caber em uma área podendo recortar o conteúdo ou adicionar barra
de rolagem, são esses os seus valores:

❖ visible - Padrão. O estouro não é cortado, o conteúdo é

renderizado fora da caixa do elemento;

❖ hidden - O estouro é cortado e o restante do conteúdo ficará

invisível;
❖ scroll - O estouro é cortado e uma barra de rolagem é adicionada
para ver o restante do conteúdo;

❖ auto- Semelhante a scroll, mas adiciona barras de rolagem

somente quando necessário.
*A overflow só funciona para elementos de bloco com uma altura especificada.
 ★ Link

Os links também podem ser decorados no CSS (por exemplo color,

font-family, background, etc.).
Além disso, os links podem ter estilos diferentes, dependendo do estado
em que estão. Os quatro estados de links são:

❖ a:link - um link normal não visitado;

❖ a:visited - um link que o usuário visitou;
❖ a:hover - um link quando o usuário passar por cima dele;
❖ a:active - um link no momento em que é clicado.

★ Listas

As propriedades de lista do CSS permite definir marcadores diferentes

para <ul> e <ol>, definir uma imagem como marcador e adicionar cor de
fundo, etc.

➢ Marcadores de lista

A list-style-type define o tipo de marcador da lista.

❖ ul.a{list-style-type: circle;}
❖ ul.b{list-style-type: square;}

❖ ol.a{list-style-type: upper-roman;}
❖ ol.b{list-style-type: lower-alpha;}
 ➢ Imagem como marcador

A list-style-image especifica uma imagem como marcador.

❖ ul{list-style-image: url('sqpurple.gif');}

➢ Lista com cor

Também podemos adicionar a nossa lista, lembrando que a regra

adicionada à tag <ol> ou <ul> afeta a lista inteira, enquanto as regras
adicionadas à tag <li> afetarão os itens da lista individual:

❖ ol{background: #ff9999; padding: 20px;}

❖ ol li{background:#ffe5e5; padding:5px; margin-left:35px;}

❖ ul{background: #3399ff; padding: 20px;}

❖ ul li {background: #cce5ff; padding: 5px;}

➢ Posição do marcador

A list-style-position define a posição do marcador de sua lista.

❖ list-style-position: outside

❖ significa que o marcador estará fora do item da lista.

 ❖ list-style-position: inside

❖ significa que o marcador estará dentro do item da lista.

Podemos usar a propriedade de forma abreviada:

❖ ul{list-style: square inside url("sqpurple.gif");}

Onde temos: Type, position e image

★ Tabela

No CSS podemos melhorar a aparência da tabela.

➢ Borda da tabela

Usamos a propriedade border para especificar a borda da tabela.

❖ table, th, td{border: 1px solid black;}

Onde estamos especificando uma borda não

apenas para a tabela como para suas linhas e células.

❖ table{border: 1px solid black;}

Definir a borda apenas ao redor da tabela especificamos apenas a tag

<table>
 ➢ Altura e largura da tabela

A largura e altura da tabela são definidas pelas propriedades height e

width.

❖ table{width: 100%;}
❖ th{height: 50px;}

➢ Alinhamento da tabela

A text-align define o alinhamento horizontal (esquerda, central ou

direita) da <th> ou <td>. Por padrão, o conteúdo da <th> é alinhado ao
centro e o conteúdo da <td> é alinhado à esquerda.

❖ th{text-align: left;}
❖ td{text-align: center;}

A vertical-align define o alinhamento vertical (superior, inferior ou

central) do conteúdo em <th> ou <td>. Por padrão, o alinhamento
vertical do conteúdo em uma tabela é o meio para <th> e <td>.

❖ td{height: 50px; vertical-align: bottom;}

 ★ Pseudo-elemento

Um pseudo elemento CSS é usado para estilizar partes especificadas de

um elemento, pode ser usado para:

❖ Estilize a primeira letra ou linha de um elemento;

❖ Inserir conteúdo antes ou depois do conteúdo de um
elemento.

➢ Pseudo-elemento First-line

O first-line é usado para adicionar um estilo especial à primeira linha

de um texto.

❖ p:first-line{color:#ff0000; font-variant:small-caps; font-size:30px;}

➢ Pseudo-elemento First-letter

O first-letter é usado para adicionar um estilo especial à primeira letra

de um texto.

❖ p:first-letter{color: #ff0000; font-size: xx-large;}

➢ Pseudo-elemento First-child

O first-child é usado para selecionar o seletor especificado, somente

se for o primeiro filho de seu pai.

➢ Pseudo-elemento Last-child

O last-child corresponde a todos os elementos que são o último filho de

seu pai.