CSS
CSS
DEFINIÇÕES BÁSICAS
● CSS é a linguagem que usamos para estilizar um documento HTML;
● CSS significa Cascading Style Sheets;
● CSS descreve como os elementos HTML devem ser exibidos;
● CSS economiza muito trabalho. Ele pode controlar o layout de várias páginas da
web de uma só vez;
● Folhas de estilo externas são armazenadas em arquivos CSS.
CSS
SINTAXE
● A sintaxe do CSS é composta pelo seletor, bloco de declaração, propriedade e valor;
● O seletor aponta para o elemento HTML que você deseja estilizar;
● O bloco de declaração contém uma ou mais declarações separadas por ponto e vírgula;
● Cada declaração inclui um nome de propriedade CSS e um valor, separados por dois pontos;
● Várias declarações CSS são separadas por ponto e vírgula, e os blocos de declaração são cercados
por chaves.
p {
color: red;
text-align: center;
}
CSS
SELETORES
● Os seletores CSS são usados para selecionar os elementos HTML que você deseja estilizar;
● As principais formas de seletores são:
○ Seletor de elementos elementos HTML com base no nome;
○ Seletor de elemento com um id específico, pelo caractere cerquilha (#), seguido do id;
○ Seletor de elementos HTML com um atributo de classe específico;
○ Seletor universal (*) seleciona todos os elementos HTML na página.
p { #para1 { .center { * {
color: red; color: red; color: red; color: red;
text-align: center; text-align: center; text-align: center; text-align: center;
} } } }
CSS
UTILIZAÇÃO
● Quando um navegador lê uma folha de estilo, ele formatará o documento HTML
de acordo com as informações na folha de estilo.
● Existem três maneiras de inserir uma folha de estilo:
○ CSS externo;
○ CSS interno;
○ CSS inline.
CSS
EXTERNO
● Com uma folha de estilo externa, você pode mudar a aparência de um site inteiro alterando apenas
um arquivo.
● Cada página HTML deve incluir uma referência ao arquivo de folha de estilo externo dentro do
elemento <link>, dentro da seção head.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<p>Parágrafo.</p>
</body>
</html>
CSS
INTERNO
● Uma folha de estilo interna pode ser usada se uma única página HTML tiver um estilo único;
● O estilo interno é definido dentro do elemento <style>, dentro da seção head.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<p>Parágrafo.</p>
</body>
</html>
CSS
INLINE
● O estilo inline pode ser usado para aplicar um estilo exclusivo para um único elemento;
● Para usar estilos inline, adicione o atributo style ao elemento relevante. O atributo style pode conter
qualquer propriedade CSS.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Cabeçalho.</h1>
<p style="color:red;">Parágrafo.</p>
</body>
</html>
CSS
PRIORIDADE
● Todos os estilos em uma página serão aplicados em cascata seguindo esta lista
de prioridade:
○ Estilo inline (dentro de um elemento HTML);
○ Folhas de estilo externas e internas (na seção head);
○ Estilo padrão do navegador.
CSS
BACKGROUND
● As propriedades de background CSS são usadas para adicionar efeitos de fundo aos elementos;
● A propriedade background-color especifica a cor de fundo de um elemento.
● A propriedade background-image especifica uma imagem a ser usada como plano de fundo de um
elemento.
○ Por padrão, a imagem é repetida para cobrir todo o elemento.
● A propriedade background-repeat define como a imagem do fundo deverá ser repetida:
○ Repetida apenas na horizontal: repeat-x.
○ Sem repetição: no-repeat;
body { body {
background-color: lightblue; background-image: url("[Link]");
} background-repeat: no-repeat;
}
CSS
BORDA
● A propriedade border-style especifica que tipo de borda será exibida:
○ solid: define uma borda sólida;
○ none: não define nenhuma borda.
● A propriedade border-width especifica a largura das quatro bordas;
● A propriedade border-color é usada para definir a cor das quatro bordas.
p {
border-style: solid;
border-width: 5px;
border-color: red;
}
CSS
MARGENS
● Margens são usadas para criar espaço ao redor de elementos, fora de quaisquer bordas definidas.
● Há propriedades para definir a margem para cada lado de um elemento (superior, direito, inferior e
esquerdo).
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
CSS
PREENCHIMENTO
● O preenchimento é usado para criar espaço ao redor do conteúdo de um elemento, dentro de
quaisquer bordas definidas.
● Há propriedades para definir o preenchimento para cada lado de um elemento (topo, direita, base e
esquerda).
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
CSS
ALTURA E LARGURA
● As propriedades height e width são usados para definir a altura e largura de um elemento;
● As propriedades height e width não incluem preenchimento, bordas ou margens. Elas definem a altura/largura da
área dentro do preenchimento, borda e margem do elemento.
○ auto: o navegador calcula a altura e largura;
○ length: define a altura/largura em px, cm, etc;
○ %: define a altura/largura em porcentagem do bloco que o contém.
div {
height: 200px;
width: 50%;
background-color: red;
}
CSS
TEXTO
● CSS tem muitas propriedades para formatação de texto;
● A propriedade color é usada para definir a cor do texto;
● A propriedade text-align é usada para definir o alinhamento horizontal de um texto.
h1 {
color: green;
text-align: center;
}
CSS
FONTE
● A escolha da fonte certa tem um grande impacto na experiência dos leitores em um site;
● A propriedade font-family é utilizada para especificar a fonte de um texto;
● A propriedade font-family deve conter vários nomes de fontes como um sistema "fallback", para garantir
compatibilidade máxima entre navegadores/sistemas operacionais;
● A propriedade font-style é usada principalmente para especificar texto em itálico;
● A propriedade font-weight especifica o peso de uma fonte;
● A propriedade font-size define o tamanho do texto;
.p1 {
font-family: "Times New Roman", Times, serif;
font-style: italic;
font-weight: 900;
font-size: 40px;
}
EXERCÍCIOS
Lista de Exercícios 3 e 4