aula de CSS Nº1 - O que é e como começar

por **prizm** Sáb Jul 23, 2011 10:14 am

"Folhas de estilos em cascata — Cascading Style Sheets (CSS) — é uma ferramenta fantástica para construção do layout dos seus websites. Permite que você projete websites com uma técnica completamente diferente da convencional e possibilita uma considerável redução de tempo de trabalho. Conhecer CSS é uma necessidade para qualquer um envolvido com o projeto web."

ATENÇÃO:Para usar CSS é necessário um conhecimento básico de HTML!
Se não for o seu caso visite os meus tutoriais de HTML AQUI!

O necessário para aprender CSS é um editor de texto simples (eu estou a usar o notepad++) e um Navegador.

-A sintaxe básica do CSS-

Vamos supor que você quer mudar a cor do background para cinza:

HTML:

CSS:

body{
background-color:#c0c0c0;
}

Então a sintaxe básica do CSS é:

objeto (body){
propriedade (background-color): valor (#c0c0c0);
}

-Aplicar CSS ao HTML-

Método 1- InLine:
Uma maneira de aplicar CSS é pelo uso do atributo style do HTML.

<html>
<head>
<title>TutoCSS</title>
</head>
<body style="background-color: #c0c0c0;">
</body>
</html>

Método 2- Interno:
Uma outra maneira de aplicar CSS e pelo uso da tag <style> do HTML.

<html>
<head>
<title>Exemplo</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
</body>
</html>

Método 3 - Externo:
O método recomendado é o de lincar para uma folha de estilos externa. Usaremos este método nos exemplos deste tutorial.

Uma folha de estilos externa é um simples arquivo de texto com a extensão .css. Tal como com qualquer outro tipo de arquivo você pode colocar uma folha de estilos tanto no servidor como no disco rígido.

Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de style.css e está localizada no diretório style. Tal situação está mostrada a seguir:
aula de CSS Nº1 - O que é e como começar Figure002