Instituto Federal de Santa Catarina – Campus Tubarão

Linguagens de Marcação
CSS

Prof. Karolini Rodrigues da Conceição

karolini.rodrigues@ifsc.edu.br
O que é CSS?

○ Cascading Style Sheets – Folhas de estilo em cascata.

■ CSS é uma linguagem que permite definir o estilo visual de
documentos web, definindo como deve ser apresentado o
conteúdo e estrutura definidos em HTML.

■ Exemplo:
● Definição da cor de fundo da página;
● Tipo de fonte de parágrafos;
● Alinhamento de títulos;
● Formato das tabelas (bordas e sombreamento);
● etc.
CSS - Porque usar?

● A separação ao nível das tecnologias facilita a separação e organização

do trabalho nas equipes.
● A separação entre HTML e CSS permite definir o conteúdo e
estrutura apenas uma vez e ter diferentes folhas de estilos em função
do dispositivo de destino.
● Com CSS é possível definir a apresentação em função do destino.
CSS - Visão Geral
CSS - Uso do CSS

● Criar um novo documento de texto do tipo CSS (extensao .css).

● Indicar no documento HTML a associação ao documento CSS.

● Vários documentos HTML podem ser associados ao mesmo

documento CSS.
Ligação do HTML com o CSS

O uso de regras CSS externas é feito incluindo no cabeçalho de um

documento HTML uma ligação para o arquivo com as regras CSS.
 Arquivo Exemplo.html

Exemplo

Arquivo css/Exemplo.css
Como o CSS funciona?
○ As regras determinam como o conteúdo dos elementos especificados
devem ser exibidos.
○ Uma regra CSS contém duas partes:
■ Seletor: Indica o elemento ao qual a regra se aplica. A mesma regra
pode ser aplicada para diferente elementos.
■ Declaração: Indica como os elementos devem ser estilizados.
■ Cada declaração é dividida em duas partes, uma propriedade e um
valor.
■ Exemplo:
Como o CSS funciona?

● Um documento CSS é composto por um conjunto de regras CSS.

● As regras determinam como o conteúdo dos elementos

especificados devem ser exibidos.
Seletores CSS

● Um seletor identifica elementos num documento HTML.

● Permitem apontar regras para elementos específicos em um documento
HTML.
● Seletores CSS diferenciam maiúsculas e minúsculas ao identificar o nome dos
elementos e o valor dos atributos.
h1 {
identifica os elementos H1
}
p{
identifica os elementos P
}
Propriedades e Valores

● Cada elemento HTML tem um conjunto de propriedades.

● Cada propriedades aceita um conjunto de valores.

● As propriedades que não são alteradas, mantêm o valor original.

Propriedades e Valores

h1 {
color: red;
font-style: italic;
}

p{
Essa regra indica que todos
letter-spacing: 5px; os elementos <h1>, <h2> e
font-size: 18px; <h3> devem ser exibidos na
fonte Arial em cor amarela.
}
Propriedades básicas

Formatação de texto:
● font-family: Os tipos de letra usado.
● font-size: Tamanho das letras. Unidades possíveis: px, %.
● font-style: Estilo das letras. Opções: normal ou italic.
● font-weight: Espessura das letras. Opções: lighter, normal, bold ou
bolder.
● text-decoration: Efeitos que será aplicado ao texto. Opções: none,
underline, overline, line-through.
Propriedades básicas

Tipos de letras:

● Para usar um determinado tipo de letra num documento web, é

necessário que esse tipo esteja instalado no computador do
utilizador que acessa o documento.

● Os tipos de letra mais comuns nos computadores são: Arial, Courier

New, Times New Roman, Verdana, etc.
Propriedades básicas

Tipos de letras:

● A propriedade font-family permite indicar uma lista de tipos de letra

para ser usada na formatação do elemento.

● O navegador web tenta usar o primeiro tipo de letra indicado. Se o tipo

não estiver instalado no computador é tentado o tipo seguinte, e assim
sucessivamente.

font-family: Verdana, Arial, Courier New;

Font-face

A diretiva @font-face destina-se a especificar um tipo de fonte e ter a

garantia que a fonte especificada será renderizada no navegador do
usuário independentemente de ele ter ou não a fonte instalada em seu
sistema operacional.

@font-face {
font-family: minhafonte;
src: url(../fonts/sansation_light.woff);
}
Import

● Uma das formas mais simples e garantidas são as fontes do Google

Web fonts, pois são fontes próprias para web e todas testadas e
aprovadas pela plataforma google.

● https://www.google.com/fonts

@import "http://fonts.googleapis.com/css?family=Raleway";
body{
font-family: 'Raleway', sans-serif;
}
Propriedades básicas

Exemplo de formatação de texto:

Propriedades básicas

Apresentação de texto:
● text-align: Alinhamento do texto. Opções: left, right, justify, center.
● text-indent: Alinhamento da primeira linha de um bloco de texto.
● line-height: Altura de cada linha num bloco de texto.
● letter-spacing: Espaçamento entre letras.
● word-spacing: Espaçamento entre palavras.
Propriedades básicas

Exemplo de apresentação de texto:

Definição de cores
Existem várias alternativas para definir cores em CSS:

● Palavra-chave: black, yellow, red, blue, etc.

● Código RGB: rgb(vermelho, verde, azul)
Exemplos: rgb(100%, 40%, 0%); rgb(255, 102, 0);
● Código Hexadecimal: #código hexadecimal
Exemplos: #326432, #000000, #0088ff.

Exemplo: Tabela de cores HTML: aplicando cores nas tags HTML | Homehost
Definição de cores

● color: Cor do texto do elemento.

● background-color: Cor do fundo do elemento.
Margem e Espaçamento

● Cada elemento HTML é representado visualmente como uma caixa

retangular composta por três partes: a margem, o contorno e o
espaçamento interno.
Contorno

É possível definir o contorno de todo o elemento ou apenas de parte:

● border: alteração de todo o contorno.

● border-top: alteração apenas do contorno de topo.
● border-bottom: contorno inferior.
● border-left: contorno esquerdo.
● border-right: contorno direito.
Contorno

O contorno define-se especificando três valores: a espessura, o estilo e

a cor.

▪ Espessura: definida em píxels.

▪ Estilo: none, dotted, dashed, solid, double, groove, ridge.
▪ Cor: valor da cor.
Contorno
Margem

É possível definir a margem de todo o elemento ou apenas de parte. Na

definição da margem indica-se a distância em píxels.

● margin: alteração da margem de todo o elemento.

● margin-top: alteração apenas da margem de topo.
● margin-bottom: margem inferior.
● margin-left: margem esquerda.
● margin-right: margem direita.
Espaçamento Interno

É possível definir o espaçamento interno de todo o elemento ou apenas de

parte. Na definição do espaçamento indica-se a distância em píxels.

● padding: alteração do espaçamento interno de todo o elemento.

● padding-top: alteração apenas do espaçamento interno de topo.
● padding-bottom: espaçamento interno inferior.
● padding-left: espaçamento interno esquerdo.
● padding-right: espaçamento interno direito.
Margem e espaço
Listas

É possível definir a aparência do marcador de cada item com a

propriedade list-style-type.
▪ Marcadores não numéricos: none, disc, circle, square.
▪ Marcadores numéricos: none, decimal, decimal-leading-zero,
lowerroman, upper-roman, lower-latin, upper-latin.
Atributo Class

É possível distinguir os elementos usando classes. Todos os elementos

HTML têm um atributo optativo class.
● Os nomes das classes podem ser compostos por letras (não
acentuadas) ou algarismos, e devem começar com uma letra.
● Exemplos: principal, menu, submenu, rodape, cabecalho, publicidade.
● Cada elemento pode pertencer a várias classes. Para atribuir um
elemento a várias classes, basta separar os nomes das diferentes
classes com espaços.
Atributo Class

● Para identificar uma determinada classe em CSS usa-se um ponto

seguido do nome da classe. Exemplos: .menu, .rodape, .destaque.
Seleção conjunta de elementos

● É possível aplicar a mesma regra CSS a elementos diferentes, para

tal basta separar os vários elementos por vírgulas.
● A principal vantagem desta opção é evitar a duplicação de código
idêntico.
Seleção conjunta de elementos

● É possível aplicar a mesma regra CSS a elementos diferentes, para

tal basta separar os vários elementos por vírgulas.
● A principal vantagem desta opção é evitar a duplicação de código
idêntico.
Propriedade background

○ background-color: define a cor do fundo;

○ background-image: define uma imagem de fundo;
○ background-repeat: define a maneira como a imagem de fundo é posicionada;
○ background-attachment: define se a imagem de fundo "rola" ou não com a tela;
○ background-position: define como e onde a imagem de fundo é posicionada;
○ background-clip: define a área do box onde a imagem de fundo é aplicada;
○ background-origin: define a posição de origem da imagem no box;
○ background-size: define as dimensões da imagem no box;

○ background: maneira abreviada para declarar todas as propriedades anteriores.

Propriedade background-image

● A propriedade background-image permite indicar um arquivo de

imagem para ser exibido ao fundo do elemento. Por exemplo:

boby {
background-image: url(../images/ufsc.png);
}

● Com essa declaração, o navegador vai requisitar um arquivo

ufsc.png, que deve estar na pasta images no mesmo nível da pasta
do arquivo CSS.
Opacidade

É possível mudar a opacidade de um elemento para que ele seja

mais transparente com o uso da propriedade opacity:

div {
opacity: 0.3;
}
CSS Box Model
CSS Box Model

○ 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 é por padrão
transparente.
Padding
○ Padding (ou espaçamento) é o espaço entre a borda e a camada
interna, o conteúdo de fato.
○ O espaçamento pode ser definido de duas maneiras. Você pode
selecioná-los individualmente, ou selecionar todos eles em uma
declaração.

○ Treine em: https://www.w3schools.com/css/css_padding.asp

■ Na página selecione os botões “Try It Yourself”, para testar cada parte de
códigos pré-prontos e veja seu funcionamento.
■ Obs: Alguns códigos podem ser modificados, então fiquem a vontade para
editá-los.
Bordas
○ As bordas delimitam o elemento, marcando as “fronteiras”
○ Os atributos border-width, border-style e border-color definem
o comportamento das bordas
○ Eles podem definir os quatro lados em uma declaração, ou uma
definição para cada lado, como em “border-top-width”.
○ Treine em: https://www.w3schools.com/css/css_border.asp
■ Border Width
■ Border Color
■ Border Sides
■ Border Shorthand
■ Rounded Borders
Largura da Borda

○ thin: borda fina

○ medium: borda média
○ thick: borda grossa
○ length: unidade de medida CSS (px, pt, em, cm, ...)
Estilo da Borda
Largura da Borda
○ Border-radius
○ Propriedade que permite a criação de elementos com cantos
arredondados.
○ Podem ser ser definidas em conjunto ou individualmente.
Margem
Margin
○ Propriedades usadas para criar elementos espaço ao redor, fora de
quaisquer fronteiras definidas.
○ Propriedades para especificar a margem de cada lado de um
elemento:
■ margin-top
■ margin-right
■ margin-bottom
■ margin-left

○ Treine em: https://www.w3schools.com/css/css_margin.asp

Elementos de Bloco e Linha

○ Elementos bloco ocupam todo o espaço horizontal disponível e

iniciam uma nova linha no documento. Novos elementos irão
começar na próxima linha livre.

○ Elementos em linha ocupam apenas o espaço necessário e não

iniciam uma nova linha. São chamados elementos em linha
justamente por aparecer na mesma linha que outros elementos,
caso seja possível.
Elementos de Bloco e Linha

○ Exemplos de elementos em linha:

■ span (tag em linha genérica)
■ strong (destaca importância)
■ em (ênfase)
■ a (âncora, usada para links)
■ img (imagem)
Elementos de Bloco e Linha

○ Elementos em linha podem ter os seguintes tipos de propriedades

modificadas:
■ Cores de texto e de fundo;
■ Propriedades de texto, como font-family, font-size e outras,
como text-decoration;
■ Bordas.
Elementos de Bloco e Linha

○ Exemplo de elementos de bloco

■ div (division, ou divisão, tag bloco genérica)
■ h1 até h6 (títulos)
■ p (parágrafo)
■ blockquote (citação em bloco)
■ ul (lista não ordenada)
■ ol (lista ordenada)
■ form (para formulários)
Elementos de Bloco e Linha

○ Elementos bloco, além de todas as propriedades dos elementos em

linha, também podem ter modificadas:
■ Largura (width) e altura (height);
■ Margens internas (padding) e externas (margin).
Elementos HTML para Layout
○ <header> - Define um cabeçalho para um documento ou uma
seção
○ <nav> - Define um recipiente para links de navegação
○ <section> - Define uma seção genérica em um documento
○ <article> - Define um artigo distribuível ou reutilizável de forma
independente
○ <aside> - Define o conteúdo além do conteúdo (como uma barra
lateral)
○ <footer> - Define um rodapé para um documento ou uma seção
○ <details> - Define detalhes adicionais
○ <summary> - Define um título para o elemento <details>
Elementos HTML para Layout

○ CSS Website Layout: https://www.w3schools.com/css/css_website_layout.asp

Float
○ Propriedade que permite alterar o posicionamento de elementos.
○ Auxilia na definição do layout da página.
○ direita (right) e esquerda (left).
Exercícios
1. Elabore uma pesquisa que permita a você definir a finalidade e
funcionamento de:

■ Tag <div>
■ Tag <span>
■ CSS Box Model
■ Atributo margin
■ Atributo padding
■ Atributo border
Exercícios

2. Elabore uma pesquisa que permita a você definir a finalidade e

funcionamento de:
■ !important

Pratique e informe qual resultado você obteve?

Exercícios

3. Faça uma pesquisa sobre o que é Layout Responsivo. Apresente

essa pesquisa em um página utilizando HTML e CSS.

4. Escolha um dos exercícios de HTML, e crie um novo documento de

texto do tipo CSS (extensao.css) e formate a sua página utilizando CSS.
 Fonte W3schools:
HTML Tutorial (w3schools.com)
https://www.w3schools.com/html/