Introdução ao HTML / CSS
parte 2
Prof. Maurício Braga
CSS
◼ Com a evolução do padrão HTML, a linguagem
passou a receber novas tags, que permitiam não
apenas estruturar o conteúdo, mas também definir o
seu visual (ex: tag FONT).
◼ Com os sites crescendo de tamanho, uma simples
alteração na cor dos títulos das seções de cada
página pode significar muito tempo de trabalho;
Ex: em um site com 30 páginas com uma média de 4
títulos por página teríamos que alterar 120 tags (!)
CSS
◼ Da necessidade de dissociar a linguagem de marcação da sua
apresentação surgiu o CSS (Cascading Style Sheet - Folha de
Estilo em Cascata).
◼ Desta forma o uso dos elementos HTML passam a ser destinados
exclusivamente para marcar e estruturar o conteúdo do documento.
◼ A tarefa de estilização fica sob a responsabilidade das regras de
estilo (regras CSS).
Vantagens do uso do CSS
◼ Economia de tempo de criação e manutenção (pelo
isolamento dos códigos de formatação aplicado a várias
páginas HTML em um único arquivo ".css");
◼ Redução do código das páginas HTML;
◼ Redução do tempo de carregamento das páginas HTML;
◼ Simplicidade (CSS descreve apenas estilos);
CSS
◼ Uma regra CSS compõe-se de três partes: um seletor,
uma propriedade e um valor no formato:
seletor {
propriedade: valor;
}
Seletor: seleciona os elementos sobre os quais as
propriedades serão aplicadas. (ex: aplicar a propriedade
sobre todos os parágrafos).
Propriedade: seu valor determina como o conteúdo é exibido
(ex: setar a cor de background para vermelho);
CSS
◼ Existem três formas de configurarmos o CSS:
Na linha onde temos nossa tag, adicionamos a
propriedade do CSS usando o atributo style (CSS
inline).
Definindo a estilização dentro da seção HEAD
através da propriedade style.
Através de um arquivo externo.
◼ Arquivos externos são a forma mais comum de uso do
CSS.
CSS inline
◼ Utilizado quando queremos aplicar um estilo a
elementos específicos de uma página.
◼ Na linha onde temos nossa tag, adicionamos a
propriedade do CSS usando o atributo style usando a
sintaxe: <tagname style="property:value;">
◼ Dessa maneira, temos que definir o estilo para cada
tag que queremos customizar.
CSS inline
◼ Exemplos:
<h1 style=“text-align: center”>
<p style=“font-size: 24px”>
<h1 style="font-family:algerian;">Teste.</h1>
<p style="font-family:'Segoe script'">Teste</p>
<p style="font-family:'Cambria';font-size:20px;color:black">
Exemplo CSS inline
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">Este cabeçalho está na cor azul.</h1>
<h1 style="color:yellow;">Já este cabeçalho está na cor amarela.</h1>
<p style="color:red;">Este parágrafo está na cor vermelha.</p>
</body>
</html>
Exemplo CSS inline
Propriedade style dentro do HEAD
(CSS interno)
◼ Usado para definir regras que serão aplicadas apenas
na página onde as regras foram escritas.
◼ As regras são definidas dentro da tag HEAD. Ex:
<style>
p{
text-align: center
}
</style>
Exemplo CSS interno
<html>
<head>
<style>
body {background-color: black;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Um cabeçalho na cor azul.</h1>
<h1>Mais um cabeçalho na cor azul.</h1>
<p>Um parágrafo na cor vermelha.</p>
</body></html>
Exemplo CSS interno
CSS externo
◼ As regras de estilo podem ser definidas em um arquivo
externo com extensão .css.
◼ Na seção HEAD, indicamos qual é o arquivo CSS
utilizado para definir o estilo da página.
Ex: <link rel="stylesheet" href="style.css">
Exemplo – página HTML
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<h1>Olá Mundo!</h1>
<p>Exemplo CSS em arquivo externo.</p>
</body>
</html>
Exemplo – arquivo estilo.CSS
h1 {
color: white;
background-color: red;
border: 1px solid black;
}
p{
background-color: rgb(0, 191, 255);
color: rgb(255, 255, 255);
padding: 50px;
}
Exemplo – resultado
Exemplos propriedades CSS
◼ color → define a cor de um elemento. Ex: color: blue
◼ background-color → define a cor de fundo do elemento.
◼ font-family → define a fonte a ser utilizada. Pode receber
mais de um parâmetro. Ex: font-family: "Arial",
"Helvetica", sans-serif;
◼ font-style → define o estilo da fonte (normal, italic,
oblique).
◼ text-align → define o alinhamento do texto. Ex: text-
align: right; text-align: justify;
Exemplos propriedades CSS
◼ line-height → tamanho da altura em pixels de cada linha
◼ letter-spacing → tamanho do espaço em pixels entre
cada letra;
◼ word-spacing → tamanho do espaço em pixels entre
cada palavra;
◼ text-indent → tamanho em pixels da margem da primeira
linha do texto;
Exemplos propriedades CSS
p {
line-height: 3px;
letter-spacing: 3px;
word-spacing: 5px;
text-indent: 30px;
}
Exemplos propriedades CSS
◼ background-image → permite indicar um arquivo de imagem para
ser exibido ao fundo do elemento. Ex:
h1 { background-image: url(../img/minha_imagem.jpg); }
◼ PS: o .. é necessário se o CSS estiver em uma pasta própria, então
temos que “recuar” para a pasta anterior do projeto e de lá passar
para a pasta img.
◼ Podemos também apontar para um local na internet:
body {
background-image: url(https://site.com/imagem.jpg);
}
Bordas
◼ para cada borda de um elemento, podemos determinar sua cor, seu
estilo de exibição e sua largura. Por exemplo:
body {
border-color: red;
border-style: solid;
border-width: 1px;
}
◼ Ou de forma resumida: body { border: 1px solid red; }
◼ Para que o efeito da cor sobre a borda surta efeito, é necessário
que a propriedade border-style tenha qualquer valor diferente do
padrão none.
Exemplo com propriedades de borda
◼ Se adicionarmos na
propriedade p do arquivo
CSS do exemplo anterior
as propriedades abaixo,
teremos o resultado ao
lado:
◼ border-color: green;
◼ border-style: solid;
◼ border-width: 25px;
◼ Ps: teste outras opções em
vez de solid, como dashed,
dotted, double, groove ...
Bordas
◼ Podemos aplicar a borda em apenas em um dos lados ou parte
deles, variando também a cor se desejarmos:
h1 {
border-top: 1px solid red; /* borda vermelha em cima */
border-right: 1px solid blue; /* borda azul à direita */
border-bottom: 1px solid black; /* borda preta embaixo */
border-left: 1px solid red; /* borda vermelha à esquerda */
}
Dimensões – width e height
◼ Podemos determinar as dimensões de um elemento usando as
propriedades height (altura) e width (largura). Ex:
p{
height: 200px;
width: 100px;
}
◼ Com essa regra CSS para o parágrafo, todos os parágrafos da
nossa página ocuparão 200 pixels de altura e 100 pixels de largura.
Espaçamentos - padding
◼ A propriedade padding é utilizada para definir um espaçamento
interno em elementos da página, isto é, a distância entre o limite do
elemento, sua borda, e seu respectivo conteúdo) e tem as
subpropriedades listadas a seguir:
◼ padding-top , padding-right, padding-bottom e padding-left
◼ Essas propriedades aplicam uma distância entre o limite do
elemento e seu conteúdo acima, à direita, abaixo e à esquerda
respectivamente.
◼ Por padrão, o padding (preenchimento) é definido como 0.
Espaçamentos - padding
◼ Podemos definir todos os valores para as
subpropriedades do padding em uma única propriedade
padding.
◼ Se passarmos somente um valor para a propriedade
padding, esse mesmo valor é aplicado em todas as
direções.
◼ p { padding: 10px; }
Espaçamentos - padding
◼ Para adicionar o padding apenas na parte superior ao conteúdo,
use a propriedade padding-top. Para os outros lados, use padding-
bottom, padding-left, e padding-right. Exemplo:
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
Espaçamentos - padding
◼ Se passados quatro valores, serão aplicados
respectivamente a padding-top, padding-right,
padding-bottom e padding-left.
◼ p { padding: 10px 20px 15px 5px; }
Seletores específicos
◼ É possível aplicar estilos de forma mais específica, limitando o seu
uso, sem se aplicar a todos os elementos do mesmo tipo. Ex:
figure img {
width: 200px;
}
◼ No exemplo, a largura de 200px será aplicada apenas a tag img que
está dentro de uma tag <figure>.
Seletores específicos - id
◼ É possível aplicar estilos de forma mais direta, a partir de um id
definido na página HTML. Ex:
HTML:
<img src="img/MJ.png" alt=“Michael Jackson" id=“img_michael">
CSS:
#img_michael {
width: 500px;
}
Seletores específicos - class
◼ Outra forma de aplicar estilos de forma mais direta, é usando a
propriedade class. Ex:
HTML:
<img src="img/MJ.png" alt=“Michael Jackson" class=“img_michael">
CSS:
.img_michael {
width: 500px;
}
Seletores específicos
◼ Quanto mais específico é o seletor, maior sua prioridade.
◼ A prioridade do seletor pelo id é superior a prioridade do seletor
pela classe, a qual é superior a prioridade da tag.
◼ É preferível usar estilos apontando para classes no CSS do que
referenciar um tipo de tag (p, h1 etc) diretamente.
◼ Ao nomear classes, lembre-se de fazer referência ao papel que
essa classe exerce na página.
Seletores específicos
◼ Um ID tem que ser único na página, enquanto uma classe pode ser
aplicada a vários elementos (tags);
◼ Além disso, Um elemento pode ser associado a mais de uma classe
ao mesmo tempo, o que nos permite aplicar diferentes regras de
estilo ao mesmo tempo:
◼ <nav class="menu-opcoes menu-cabecalho">
Seletores específicos
◼ Neste exemplo o texto em H1 ficará na cor verde.
<body>
<h1 class= "H1_pela_classe" id="H1_pelo_id">cor verde</h1>
</body>
/* CSS*/
/* Prioridade baixa */
h1 { color: black; }
/* Prioridade média */
.H1_pela_classe { color: red; }
/* Prioridade mais alta */
#H1_pelo_id { color: green; }
Espaçamentos - margin
◼ A propriedade margin é parecida com a propriedade padding,
exceto que ela define um espaçamento externo (adiciona espaço
após o limite do elemento, ou seja, é um espaçamento além do
elemento em si).
◼ margin-top
◼ margin-right
◼ margin-bottom
◼ margin-left
◼ Existe a versão reduzida margin, que funciona da mesma forma que
a propriedade padding.
Introdução ao HTML / CSS
parte 2
Prof. Maurício Braga
