Bom dia a todos. Bem vindos à coluna de Desenvolvimento Web do Cat Geek. Hoje irei mostrar como usar um arquivo CSS externo em uma página HTML.
Crie uma pasta com o nome de Aulas CSS/HTML. Abra o Dreaweaver (ou o bloco de notas). Crie um novo arquivo HTML. Salve na pasta criada com o nome de aula1.html. Clique em code. Seu novo arquivo deve estar assim:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aula HTML/CSS do Cat Geek</title>
</head>
<body>
</body>
</html>
Crie um novo arquivo CSS na nossa pasta, e nomei-o estilo.css. Selecione novamente o arquivo aula1.html. Entre as tags <head></head>, acrescente o seguinte:
<link href="estilo.css" rel="stylesheet" type="text/css">
Pronto, sua folha de estilos já está linkada com sua página HTML. Vamos fazer um teste?
No arquivo estilo.css, digite o seguinte:
h1 {color:#999;} h2 {color:#F00;}
Agora na página html, entre as tags body</body>, digite o seguinte:
<h1>Este é um teste</h1><br/>
<h2>Estamos testando para ver se o arquivo estilo.css está linkado com nossa página html</h2>
Você vai ver que o conteúdo do h1 esta cinza, enquanto o conteúdo do h2 está vermelho. Nas aulas posteriores trabalharemos outros recursos que o CSS nos proporciona.
Trabalhar com links externos torna o carregamento da sua página mais rápido. Isso ajuda o Google e os outros motores de busca quando analizam seu site. Como mostrei no artigo Entendendo o CSS, é possível colocar os elementos estilizados dentro das tags <style></style>, normalmente dentro das tags <head></head>, mas esse procedimento deixa o site mais lento.
Um dos maiores especilialistas brasileiros em CSS, o Maujor, defende a idéia de que, no momento do desenvolvimento do projeto, quando os códigos estão sendo criados, deve-se trabalhar todo o CSS dentro das tags <style></style>, e depois do site pronto, na hora de subir ele via FTP, criar um arquivo externo e linka-lo dentro do arquivo HTML.
Isso é um ponto de vista, muito válido. Porém, acho que quanto mais elementos forem adicionados ao CSS, maior fica a distancia entre o HTML e o CSS, por isso, prefiro trabalhar com arquivos CSS externos linkados ao HTML desde o começo do projeto.
Trabalhar com links externos torna o carregamento da sua página mais rápido. Isso ajuda o Google e os outros motores de busca quando analizam seu site. Como mostrei no artigo Entendendo o CSS, é possível colocar os elementos estilizados dentro das tags <style></style>, normalmente dentro das tags <head></head>, mas esse procedimento deixa o site mais lento.
Um dos maiores especilialistas brasileiros em CSS, o Maujor, defende a idéia de que, no momento do desenvolvimento do projeto, quando os códigos estão sendo criados, deve-se trabalhar todo o CSS dentro das tags <style></style>, e depois do site pronto, na hora de subir ele via FTP, criar um arquivo externo e linka-lo dentro do arquivo HTML.
Isso é um ponto de vista, muito válido. Porém, acho que quanto mais elementos forem adicionados ao CSS, maior fica a distancia entre o HTML e o CSS, por isso, prefiro trabalhar com arquivos CSS externos linkados ao HTML desde o começo do projeto.
Você utiliza arquivos externos para seus estilos CSS? Ou prefere colocar tudo entre as tags <style></style>? Comente abaixo.
Postar um comentário