16 de outubro de 2010

Como importar o CSS para sua página HTML

Importando através do @import e link



Importar um arquivo .css para sua página HTML é bem simples !

Podemos usar dois modos, atraves do @import que é uma propriedade CSS, ou <link> que é uma tag HTML

Usando o @import

Digitamos as tags <style> e dentro dela colocaremos o @import como abaixo, tudo isso logo antes da tag </head>(atenção pessoal iniciante, não é antes da <head> é antes da </head> com uma "/"), e no lugar de meuarquivo.css coloque o nome da sua folha de estilos .css, lembre-se de(...) colocar o CSS na mesma pasta que está o seu HTML, veja:
<html>
<body>  
<head> <title>titulodosite</title> 
...
<style type="text/css">
@import url("meuarquivo.css")
</style>

</head>
<body>
...
</body>
</html>

Usando a tag <link>

O outro modo de importar é usando a tag <link> antes da tag </head>, o nome do seu arquivo .css você coloca no lugar do "exemplo.css", faça como abaixo:
<html>
<head>
<title>titulodosite</title>
... 
<link rel="stylesheet" type="text/css" href="exemplo.css">

</head>
<body> 
...
</body>
</html>
Não se esqueça de colocar o seu arquivo .css na mesma pasta do seu HTML.

2 comentários:

  1. olá, parabéns, pelo post. mas vou te perguntar
    existe alguma diferença "semântica" ou técnica entre o @import e o link href ?

    ResponderExcluir
  2. @Danilo Melo: Olá Danilo, não existe muita diferença não, os dois como você pode ver tem a mesma função de importar o css para apagina html, mas alguns web designers recomendam o uso do "link" e não do @import, penasando bem recomendo o uso do link também por questoes de compatibilidade com os browsers.

    Abraço !

    ResponderExcluir