Era uma vez uma linguagem que exigia que os atributos dos elementos fossem definidos tag a tag. Mas com o número de páginas na web aumentando dia a dia, isso acabou se tornando um problemão. O HTML é linear e aplica as configurações apenas ao que está dentro da tag. Ou seja, para mudar o tipo de fonte de um texto com vários parágrafos é preciso mudar os parâmetros tag a tag. E se existir um jeito melhor? É aí que entra o CSS, ou folha de estilos.

Considere o código abaixo:

<span style="color: #ff0000;">Um parágrafo
</span><span style="color: #0000ff;">Outro parágrafo
</span><span style="color: #00ff00;">Terceiro parágrafo</span>

Um parágrafo
Outro parágrafo
Terceiro parágrafo

Agora considere o código abaixo:

<h1><span style="color: #0000ff;">Título</span></h1>
<span style="color: #ff0000;">Parágrafo</span>

Título

Parágrafo

 

O código de estilo (ver abaixo) estipula parâmetros para elementos do HTML, como o parágrafo

. Uma vez definida a folha de estilos, o documento pode ter esses parâmetros alterados de uma única vez.


body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

 

Sabe aqueles sites que permitem que você altere as cores, estilo do design com um clique? Então, o truque é bem simples: o que o clique faz é alterar a folha de estilos de referência da página.

Mas onde fica a folha de estilos? Ela pode estar no corpo do documento HTML, junto com as tags.

<h1 style="color:blue;">Título</h1>

Ou no cabeçalho do documento:

<head>
<style>
body {
background-color: powderblue;
}
h1   {
color: blue;
}
p    {
color: red;
}
</style>
</head>

Mas o mais comum é que o CSS seja salvo num documento a parte e requisitado a partir do cabeçalho do HTML assim:

<head>
<link rel="stylesheet" href="styles.css">
</head>

O CSS pode definir atributos para as tags HTML (um tipo de fonte para todos os parágrafos, por exemplo). Mas também é possível dar nome a uma tag, de forma a aplicar esses atributos só às tags com o nome especificado. O nome aparece no código HTML como o atributo class.  Considere o código abaixo (retirado do tutorial da W3Schools):

<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>

Note que, na seção style, o css define atributos para o parágrafo dotted (p.dotted) e no HTML esses parâmetros são ativados pela tag 

.
O resultado você pode conferir abaixo:

E se não funcionar?

Se uma regra CSS está correta no seu código, mas não está funcionando na página, há X hipóteses a serem analisadas:

  1. O navegador não aceita o recurso – verifique a documentação do recurso
  2. Há um conflito entre os parâmetros do CSS.

No primeiro caso, é necessário adaptar o que você quer fazer ao que o navegador executa. Já no segundo caso é preciso analisar a hierarquia entre os elementos do CSS para resolver o conflito. Se é esse o caso, recomendo a leitura do artigo da TechRepublic (em inglês) sobre o assunto.

Ficou um pouco perdido? Talvez valha a pena conferir nosso tutorial básico de HTML.

Tags:
Categories: educação web