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.

3 comentários:

  1. Faltou o @import e também no seu lugar não usaria tag HTML depreciada que é a tag "b".

    ResponderExcluir
  2. @Claudio: Olá ! Como vc pode ver usei a tag b só como exemplo esse é um tutorial para iniciantes, a tag link é a mais recomendável para importar arquivos CSS, peço q vc leia essa postagem e os comentários: aqui.

    Abraço !

    ResponderExcluir
  3. Thanks for sharing the tutorial.CSS is very helpful for the designing purpose of the HTML pages.It made the coding lines small for HTML.So, it more popular now.
    Website Designer Bahrain

    ResponderExcluir