Nessa página você vai aprender a incorporar CSS à seu arquivo HTML. Não se preocupe ainda em entender o que os exemplos CSS estão fazendo - isso vem depois.
Existem três formas de aplicar CSS no HTML
In-line
Estilos in-line são aplicados dentro das tags HTML usando o atributo style.
Eles se parecem com isso:
<p style=”color: red”>texto</p>
Isso vai fazer esse parágrafo específico ficar vermelho.
Mas, se você lembra, o HTML deve ser um independente, livre de apresentação, e por isso estilos in-line devem ser evitados sempre que possível.
Interno
Estilos embutidos ou internos são declarados uma vez na página, e usados na página inteira. Dentro da tag head, a tag style define todos os estilos da página.
Fica mais ou menos assim:
<!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">
p { color: red; }
a { color: blue; }
</style>
...
Isso vai fazer com que todos os parágrafos na página fiquem vermelhos e os links azuis.
Assim como os estilos in-line, você deve evitar esse estilos internos, mantendo HTML e CSS em arquivos separados para aproveitar todo o potencial do CSS.
Externo
Estilos externos podem ser usados para todas as páginas de um website. Existe um arquivo CSS separado, que pode parecer com esse:
p {color: red;}
a {color: blue;}
Se esse arquivo for salvo com o nome “web.css” ele pode ser linkado ao HTML assim:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Exemplo de CSS</title>
<link rel="stylesheet" type="text/css" href="web.css" />
...
Ao fazer isso em todas as páginas onde você deseja usar os estilos definidos no arquivo “web.css”, qualquer modificação do CSS só precisa ser feita uma vez - no “web.css” - pra que todas as páginas mudem. Muda em um lugar, conserta tudo. Legal, não?
No Tutorial Avançado de CSS nós veremos que existem outras maneiras de linkar folhas de estilo externas, mas essa é a mais utilizada e é suficiente por enquanto.
Pra aproveitar ao máximo esse guia, é recomendado que você teste todos os códigos ao longo do tutorial. Para isso, crie um novo arquivo no seu editor de texto e salve o documento em branco com o nome de “web.css“, na mesma pasta do seu arquivo HTML.
Agora edite o arquivo HTML que você criou no tutorial anterior pra que ele comece assim:
<!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="web.css" />
</head>
...
Salve o arquivo HTML. Agora o arquivo CSS está linkado ao HTML. Como o CSS está vazio, você não vai perceber nenhuma mudança.
Ao avançar nesse tutorial, você vai adicionar e modificar o conteúdo do arquivo “web.css”. Para ver o resultado dessas mudanças, você vai recarregar a janela do navegador onde seu arquivo HTML está aberto, como você vem fazendo.
Páginas Relacionadas
- Próxima Página: Seletores, Propriedades e Valores
- Página Anterior: Introdução
Referência
- Atributos Comuns (incluindo style)
- tag style
- tag link
Esse material é uma adaptação do CSS Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.
Eu não consegui aplicar css na minha página. Fiz tudo direitinho mas o site não apresentou mudança alguma.
pra quem ta com duvida você tem que deixar o arquivo css na mesma pasta onde ta o html e eu acho que o esse codigo -> (link rel=”stylesheet” type=”text/css” href=”web.css” /) tem que ficardentro da tag head e
obs : ( =
o codigo que ta no site tá errado porque ta terminado assim
(link rel=”stylesheet” type=”text/css” href=”web.css” /) ( = ;
e o final não pode acabar com / tem que ser sem;