CSS

CSS

Cascating Style Sheet
Folhas de estilos em cascata http://www.pt-br.html.net/tutorials/css/ Introdução
• O que é CSS?
• O que eu posso fazer com CSS?
• Qual é a diferença entre CSS e HTML?
– HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados.

http://www.pt-br.html.net/tutorials/css/

Quais são os benefícios do uso de CSS?
• controle do layout de vários documentos a partir de uma simples folha de estilos;
• maior precisão no controle do layout;
• aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.);
• emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.

http://www.pt-br.html.net/tutorials/css/

A sintaxe básica das CSS
Suponha que desejamos uma cor de fundo vermelha para a página web:
– Usando HTML podemos fazer assim:
<body bgcolor="#FF0000">

– Com CSS o mesmo resultado será obtido assim: body {background-color: #FF0000;}

http://www.pt-br.html.net/tutorials/css/

Aplicando CSS a um documento HTML
• Método 1: In-line (o atributo style)
• Método 2: Interno (a tag style)
• Método 3: Externo (link para uma folha de estilos) http://www.pt-br.html.net/tutorials/css/

Método 1: In-line (o atributo style)
<html>
<head>
<title>Exemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta é uma página com fundo vermelho</p>
</body>
</html>

http://www.pt-br.html.net/tutorials/css/

Método 2: Interno (a tag style)
<html>
<head>
<title>Exemplo</title>
<style type="text/css"> body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta é uma página com fundo vermelho</p>
</body>
</html>

http://www.pt-br.html.net/tutorials/css/

Método 3: Externo (link para uma folha de estilos) Uma folha de estilos externa é um simples arquivo de texto com a extensão .css

<link rel="stylesheet" type="text/css" href="style/style.css" />
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body> ...