17 de junho de 2011

CSS para Iniciantes #1

Aplicando o CSS na página HTML

Iniciaremos uma série de tutoriais para quem está iniciando em CSS, simples e objetivos, de uma forma clara para que você possa entender e começar a aplicar em seus sites ou blogs.

Podemos aplicar o CSS de tres formas diferentes no site, veja:

1º Inline

O CSS é aplicado diretamente na tag HTML, veja o exemplo:
<b style="font-size: 25px; color:blue;">texto qualquer</b>
Isso faz com que o texto fique com 25px de tamanho e cor azul.
Mas uma coisa, evite o uso do Inline no seu site![...]


2º Interno

O CSS é aplicado dentro da página HTML, mais precisamente dentro da tag <head> veja o exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Exemplo de CSS</title>
  
  <style type="text/css">
    b { font-size: 25px; }
    b { color: blue; }
  </style>
  
</head> 
Isso faz com que o texto fique com 25px de tamanho e cor azul.
Use o Interno algumas vezes, mas ainda não é recomendado.


3º Externo

Como o nome já diz, é externo, então criaremos além do arquivo do nosso site (.html) criaremos também um novo arquivo só que .css(por exemplo: meuestilo.css).
Veja, esse é o conteúdo do arquivo meuestilo.css, veja:
b {font-size: 25px;}
b {color: blue;}

Agora importaremos o CSS para dentro do nosso site - mas como? - através da tag <link>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Minha Primeira Página Web</title>
<link rel="stylesheet" type="text/css" href="meuestilo.css" />
</head>
...
E adivinha, isso faz com que o texto fique com 25px de tamanho e cor azul. ;)
Esse é o recomendável para você aplicar o CSS na suas páginas.