CSS Introdução

CSS
Cascading Style Sheets
Folhas de Estilo em Cascata
Parte I

Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010

CSS é uma linguagem que
define a formatação de um
documento html.


1

documento.html documento.css

CSS é
usado para
configurar
HTML é um estilo.
usado para
estruturar
conteúdos.

A grande vantagem do uso
de CSS é a de separar a
marcação HTML, da
apresentação do site.


2

index
.html

produtos
.html

contato
.html documento
.css

historia
.html

cadastro
.html


Em outras palavras, vale dizer que
o HTML destina-se unicamente a
estruturar e marcar o conteúdo,
ficando por conta das CSS toda a
responsabilidade pelo visual do
documento.


3

Sintaxe

Seletor {propriedade: valor}

É o elemento que É o atributo do É a característica
será alvo da regra elemento HTML ao específica a ser
de estilo. qual será aplicada assumida pela
a regra. Propriedade.


Se por exemplo, você quiser trocar a
cor do fundo de um site com 100
páginas, a folha de estilos evita que
você edite manualmente uma a uma
as páginas para fazer a mudança nos
100 documentos HTML. Usando CSS
a mudança se fará em uns poucos
segundos.


4

texto exemplo

Esse elemento e
seus atributos
estão em desuso.

Texto exemplo


O certo é em um documento com
extensão .css colocar (exemplo de
folha de estilo externa):

p{
font-size: large;
font-family: georgia, serif;
color: red;
}


5

documento.html documento.css

Para ligar os dois documentos é
necessário acrescentar na seção head do documento html:

<head>
<link rel=“stylesheet” type=“text/css” href=“nome do arquivo.css”>
</head> Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010

Além do exemplo de folha de estilo
externa. Existem mais dois tipos de
folhas de estilo.

• Incorporada
• In line


6

Folha de estilo incorporada (é colocada
no cabeçalho do documento html)
<html>
<head> <title>Exemplo</title>
<style>
body {background-color: #FF0000;} </style>
</head>
<body>
Esta é uma página com fundo vermelho
</body>
</html>


Folha de estilo In line (é colocada na
própria linha do código html)

<html>
<head> <title>Exemplo</title>
</head>
<body style="background-color:
#FF0000;">
Esta é uma página com fundo
vermelho
</body>
</html>

7

CSS Introdução

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a CSS Introdução

Semelhante a CSS Introdução (20)

Mais de Denise Lima

Mais de Denise Lima (20)

CSS Introdução