O que é e como aplicar CSS

CSS significa Cascading Style Sheets, o que traduzindo para o português ficaria algo como folhas de estilo em cascata.

Sua finalidade é estilizar e formatar páginas web,sendo de grande importância para que os web standards sejam obedecidos, mesmo que parcialmente.

Aplicação

<html>
<head>
<title>Aplicando CSS</title>
<style type="text/css">
body { margin:0; Background-color: #CCCCCC; }
#quadrado { height:300px; width:400px;
margin: 20px 0 0 40px; border: 3px solid #0066FF; }
.estilo { background-color: #000000; }
</style>
</head>
<body>
<div id="quadrado" class="estilo"></div>
</body>
</html>

O CSS sempre deve ser inserido entre <head></head>.

O Sustenido ( # ) significa que estamos aplicando o estilo a ID de um elemento, logo, é a somente um elemento, pois, ID’s são únicas, eu não posso ter dois elementos com a ID “quadrado”.

O ponto ( . ) significa que estamos aplicando o estilo a determinada classe, classes podem ser utilizadas em vários elementos, como por exemplo:

  <div id="quadrado" class="estilo"></div>
  <div id="quadrado2" class="estilo"></div>
  <div id="quadrado3" class="estilo"></div>

O CSS pode ser aplicado de três formas

1° - Em Linha. Não é recomendada pois irá dificultar seu trabalho, sendo que você terá que editar sempre na própria tag.
Ex.:

<div style=" height:300px;width:400px;margin: 20px 0 0
40px;border: 3px solid #0066FF;>Teste</div>

2° - Na página. É uma boa solução e de fácil edição quando se trabalha com uma única página.
Ex.: É forma que foi utilizada no exemplo de aplicação do CSS.

3° - Em arquivo separado. É a melhor escolha quando se está trabalhando com mais de uma página, ou quando pretende-se manter uma organização.
Ex.:

<html>
<head>
<title>Aplicando CSS</title>
<link rel="stylesheet" href="estilos.css"
type="text/css" />
</head>
<body>
<div id="quadrado" class="estilo">
</div>
</body>
</html>

Então se cria um arquivo chamado estilos.css e adiciona-se nele:

body { margin:0; Background-color: #CCCCCC; }
#quadrado { height:300px; width:400px;
margin: 20px 0 0 40px; border: 3px solid #0066FF; }
.estilo { background-color: #000000; }

Em ambos os casos o efeito será o mesmo, mudando somente a forma em que aplicamos o CSS.

Leia Também:

Comente!