O que é CSS?
CSS significa folhas de estilo C ascading _
CSS descreve como os elementos HTML devem ser exibidos
Exemplo de CSS
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
Clique no botão "Experimente você mesmo" para ver como funciona.
Sintaxe CSS
Uma regra CSS consiste em um seletor e um bloco de declaração :
O seletor aponta para o elemento HTML a ser estilizado (h1).
O bloco de declaração (entre chaves) contém uma ou mais declarações separadas por ponto e vírgula.
Cada declaração inclui um nome de propriedade CSS e um valor, separados por dois pontos.
No exemplo a seguir, todos os elementos <p> serão alinhados ao centro, vermelhos e terão um tamanho de fonte de 32 pixels:
Exemplo
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
O mesmo exemplo também pode ser escrito assim:
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
Folha de Estilo Externa
Uma folha de estilo CSS pode ser armazenada em um arquivo externo :
meuestilo.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
Folhas de estilo externas são vinculadas a páginas HTML com tags <link> :
Exemplo
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
Estilo embutido
Exemplo
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
Ordem em cascata
Se estilos diferentes forem especificados para elementos HTML, os estilos serão cascateados em novos estilos com a seguinte prioridade:
- Prioridade 1: estilos embutidos
- Prioridade 2: Folhas de estilo externas e internas
- Prioridade 3: padrão do navegador
- Se estilos diferentes forem definidos no mesmo nível de prioridade, o último terá a prioridade mais alta.
Exemplo
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
CSS Demo - Uma Página HTML - Vários Estilos!
Aqui vamos mostrar uma página HTML exibida com 4 folhas de estilo diferentes.
Clique nos botões Stylesheet (1-4) para ver a página exibida com diferentes estilos.
Tutorial completo de CSS
Esta foi uma breve descrição do CSS.
Para um tutorial de CSS completo, vá para W3Schools CSS Tutorial .
Para uma referência CSS completa, vá para W3Schools CSS Reference .