Introdução ao CSS

LEMBRAM COMO APLICAMOS ESTILOS AO
NOSSO TEXTO?
• Utilizamos as tags para negrito, para
itálico, para sublinhar e assim por diante…
• Há algum problema em utilizar essas tags?

REUTILIZAÇÃO DE ESTILOS ENTRE PÁGINAS

PROBLEMA!
<html>
<head>
<meta charset='utf-8' />
</head>
<body>
Concurso no Facebook dará... 
Ex de verônica costa: ...
</body>
</html>

E SE FOR PRECISO ALTERAR ESTES ESTILOS
PARA TODOS OS ELEMENTOS?

E SE…
• Podessemos definir estilos e aplicar em vários
elementos
• Estes estilos se propagassem quando forem alterados

SOLUÇÃO
<html>
<head>
<style type='text/css'>
.estilo{
color:red;
font-size:30px;
}
</style>
</head>
<body>
Concurso no Facebook dará... 
Ex de verônica costa: ...
</body>
</html>

O QUE UTILIZAMOS?
• Estilos nos permitem definir como será o visual de
elementos HTML
• Podemos aplicá-lo a um ou mais elementos HTML e
todos serão afetados pelo estilo
• Mas, onde estudamos esta área?

O QUE É CSS?
• Linguagem de estilo utilizada para definir a aparência
de elementos HTML
Estilos
Cor Posicionamento

Tamanho
Fonte

POR QUE UTILIZAR CSS
• Facilitar a reutilização de estilos entre páginas
• Promover separação entre conteúdo e apresentação

FAÇAM O TESTE
Texto em azul
Texto em negrito
Texto em azul e negrito

EXEMPLO
Texto em azul 

Texto em negrito 

Texto em azul e negrito

COMO FAZER UTILIZANDO CSS?
Texto em azul 

Texto em negrito 

Texto em azul e negrito

EXEMPLO
<html>
<head>
</head>
<body>
Texto em azul 
Texto em negrito 
Texto em azul e negrito 
</body>
</html>

ONDE PODEMOS UTILIZAR CSS?
• Textos
• Imagens
• Divs
• Tabelas
• Qualquer elemento HTML

O QUE SÃO SELETORES EM CSS?
• Definem onde os estilos serão aplicados
• Todo elemento HTML que estiver relacionado ao
seletor em questão será afetado por seu CSS
• Para uma lista completa de seletores pesquisem em:
http://www.w3schools.com/cssref/css_selectors.asp

ALGUNS SELETORES CSS

Seletor Exemplo Descrição
.class .estilo Seleciona todos os elementos da classe
.estilo
#id #nome Seleciona o elemento cujo id = “nome”
* * Se aplica a todos os elementos HTML
Elemento p Se aplica a todos os elementos 
Elemento, p, span Se aplica a todos os elementos e
elemento 
Elemento div span Se aplica a todos os elementos 
elemento dentro de elementos <div>

EXEMPLOS DE SELETORES
<html>
<head>
<style>
.estilo { color:red; }
#nome { color:red; }
* { color:red; }
p { color:red; }
p, span { color:red; }
div p { color:red; }
</style>
</head>
</html>

O QUE SÃO AS PROPRIEDADES E VALORES?
• Definem qual será a modificação ao seletor e seu
respectivo valor
• Para alterar a cor do texto de um elemento 
para azul, poderíamos utilizar a propriedade color
seguida pelo valor blue. Exemplo:

Texto em azul

Seletor Propriedade Propriedade

QUAIS SÃO AS PROPRIEDADES E VALORES
EXISTENTES?
• Há algumas propriedades existentes somentes para
elementos de texto , , etc
• Há propriedades que somente funcionam com
elementos que podem possuir largura no
browser, como <div>
• As propriedades variam para cada elemento, havendo
propriedades comuns a alguns deles
• Referência com propriedades CSS:
http://www.abpsoft.com/criacaoweb/cssguiaref.html

EXERCÍCIO
• Criem 2 elementos cada um com textos dentro, 2
 e 1 <div> em uma página HTML
• OBS: Deve haver um elemento dentro do elemento
<div> e outro elemento fora
• OBS: Um dos elementos deve ter uma id igual a „texto‟, o
outro não
• Apliquem o estilo color:green para o span que está
dentro do div
• O estilo color:blue para o elemento que tenha a
id „texto‟
• E o estilo color:yellow para os demais e

COMO UTILIZAR O CSS?
• CSS inline
• CSS interno
• CSS externo

CSS INLINE
• Todos os elementos HTML possuem um atributo style
• Neste atributo incluimos os estilos separados por ;

Texto

CSS INLINE – QUANDO DEVO UTILIZAR?
• Utilize quando apenas um elemento receberá o estilo

CSS INTERNO
• Primeira forma de reutilizar estilos
• Possibilita que os estilos sejam reutilizados apenas
na página onde foram declarados
• Utiliza a tag <style> para definição dos estilos

CSS INTERNO - EXEMPLOS
<html>
<head>
<style type='text/css'>
span {
color: blue;
}
</style>
</head>
<body>
Texto
</body>
</html>

CSS EXTERNO
• Possibilitam separar os estilos da página HTML
• Estilos CSS ficam armazenados em arquivos .css
• Facilita a reutilização entre múltiplas páginas HTML

CSS EXTERNO - EXEMPLO
estilo.css

span {
color: blue;
}

CSS EXTERNO - EXEMPLO
Index.html

<head>
<link rel="stylesheet" type="text/css" href=”estilo.css" />
</head>
<body>
Texto
</body>

EXERCÍCIOS
• Com base no exercício 1 de vocês removam as tags
, , dentre outras por estilos em CSS
• Utilizem inicialmente o css inline, após o css interno e
em seguida o css externo

MANIPULAÇÃO DE TEXTOS EM CSS
• Cores
• Alinhamento
• Decoração
• Transformação
• Indentação

CORES DE TEXTO
• Propriedade: color
• Valores:
• Hexadecimal
• Nome de cores
• RGB
• Exemplo:
span { color:red; }
span { color:#FF0000; }
span { rgb(255,0,0); }

ALINHAMENTO DE TEXTO
• Propriedade: alignment
• Valores:
• center
• justify
• right
• Exemplo:
span { text-alignment:center; }
span { text-alignment:justify; }
span { text-alignment:right; }

DECORAÇÃO DE TEXTO
• Propriedade: text-decoration
• Valores:
• none
• Exemplo:
span { text-decoration:none; }

TRANSFORMAÇÃO DE TEXTO
• Propriedade: text-transform
• Valores:
• uppercase (maiúscula), lowercase (minúscula) e capitalize
(primeira em maiúscula)
• Exemplo:
span { text-transform:uppercase; }

INDENTAÇÃO DE TEXTO
• Propriedade: text-indent
• Valores:
• Números inteiros em pixels
• Exemplo:

span { text-indent:50px; }

Introdução ao CSS

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Introdução ao CSS

Semelhante a Introdução ao CSS (20)

Mais de Leonardo Soares

Mais de Leonardo Soares (20)

Último

Último (20)

Introdução ao CSS