Tutorial Iniciante de CSS: Aplicando CSS

3 03 2008

Tag link sendo usada pra incorporar uma folha css externa

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.

Página HTML com os estilos aplicados.

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

Referência

Esse material é uma adaptação do CSS Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios

Ações

Information

9 responses

13 05 2008
Álvaro Tavares

Eu não consegui aplicar css na minha página. Fiz tudo direitinho mas o site não apresentou mudança alguma.

16 05 2008
mateus

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 : ( =

19 05 2008
mateus

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;

6 11 2009
gazi

Estou estudando para desenvolver páginas na Web. Já entendi o HTML mas estou com um pouco de dificuldade de aplicar o CSS e compreende-lo.
Por favor vc pode me ajudar ?
Obrigada !!

10 09 2010
Rafael

Oi Gazi usar o css é muito simples ,você ja entende html ,vai ficar facil .
primeiro comece do mai simples.
Ex:

usando css</title

body{
background-color:#220000;
}

Ve faz isso ai conseguindo vc vai entender sobre elementos e propriedades.

10 09 2010
Rafael

(html)
(head)
(title)css(/title)
(style type=”text/css)
body{
background-color:#220000
}
(/style)

5 04 2011
krochewelc

Também estou com dificuldades, para desenvolver o css,
por onde começar além de salvá-lo dentro da pasta do html.

7 06 2011
eucleres

a regra css é composta por seletor {propriedade:valor;} exemplo h1{color:red;} para isso devem conhecer todos os seletores possiveis estes são os elementos aos quais vc quer aplicar o estilo ex. p .h1 ou uma div especifica ou alguma classe etc…

a regra css pode ser aplicada
in-line=dentro da propria pagina em cada linha misturando codigo com estilização
interno=dentro da propria pagina html entre o elemento
externo onde uma folha é salva como *.css pode ser dentro da mesma pasta ou não que sua pagina html o caminho para a pagina encontra seu *.css
ex. no caso do documento HTML esta na mesma pasta que o *.css . em caso de ele estar em outra pasta especifique a pasta correta em RHEF.

4 03 2017
Gabriel

Suas explicações são muito boas! Estou aprendendo bastante com elas!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: