HTML - Folha de Estilo

Cascading Style Sheets (CSS) descreve como os documentos são apresentados nas telas, impressos ou talvez como são pronunciados. O W3C promoveu ativamente o uso de folhas de estilo na Web desde que o consórcio foi fundado em 1994.

Cascading Style Sheets (CSS) fornece alternativas fáceis e eficazes para especificar vários atributos para as tags HTML. Usando CSS, você pode especificar várias propriedades de estilo para um determinado elemento HTML. Cada propriedade possui um nome e um valor, separados por dois pontos (:). Cada declaração de propriedade é separada por um ponto e vírgula (;).

Exemplo

Primeiro, vamos considerar um exemplo de documento HTML que faz uso da tag <font> e atributos associados para especificar a cor do texto e o tamanho da fonte -

Note- A tag da fonte tornou-se obsoleta e deve ser removida em uma versão futura do HTML. Portanto, eles não devem ser usados em vez disso, é sugerido usar estilos CSS para manipular suas fontes. Mas ainda para fins de aprendizado, este capítulo trabalhará com um exemplo usando a tag font.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
	
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

Podemos reescrever o exemplo acima com a ajuda da Folha de Estilo da seguinte maneira -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

Isso produzirá o seguinte resultado -

Você pode usar CSS de três maneiras em seu documento HTML -

External Style Sheet - Defina regras de folha de estilo em um arquivo .css separado e, a seguir, inclua esse arquivo em seu documento HTML usando a tag HTML <link>.
Internal Style Sheet - Defina regras de folha de estilo na seção de cabeçalho do documento HTML usando a tag <style>.
Inline Style Sheet - Defina regras de folha de estilo diretamente junto com os elementos HTML usando style atributo.

Vamos ver todos os três casos um por um com a ajuda de exemplos adequados.

Folha de estilo externa

Se você precisa usar sua folha de estilo para várias páginas, então é sempre recomendado definir uma folha de estilo comum em um arquivo separado. Um arquivo de folha de estilo em cascata terá extensão como.css e será incluído em arquivos HTML usando a tag <link>.

Exemplo

Considere que definimos um arquivo de folha de estilo style.css que tem as seguintes regras -

.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

Aqui definimos três regras CSS que serão aplicáveis a três classes diferentes definidas para as tags HTML. Eu sugiro que você não se preocupe em como essas regras estão sendo definidas porque você as aprenderá enquanto estuda CSS. Agora vamos usar o arquivo CSS externo acima em nosso seguinte documento HTML -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

Isso produzirá o seguinte resultado -

Folha de estilo interna

Se você deseja aplicar as regras da folha de estilo a um único documento, pode incluir essas regras na seção de cabeçalho do documento HTML usando a tag <style>.

As regras definidas na folha de estilo interna substituem as regras definidas em um arquivo CSS externo.

Exemplo

Vamos reescrever o exemplo acima mais uma vez, mas aqui vamos escrever regras de folha de estilo no mesmo documento HTML usando a tag <style> -

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Internal CSS</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
	
   <body> 
      <p class = "red">This is red</p>  
      <p class = "thick">This is thick</p>  
      <p class = "green">This is green</p>  
      <p class = "thick green">This is thick and green</p> 
   </body>
	
</html>

Isso produzirá o seguinte resultado -

Folha de Estilo Inline

Você pode aplicar regras de folha de estilo diretamente a qualquer elemento HTML usando styleatributo da tag relevante. Isso deve ser feito apenas quando você estiver interessado em fazer uma alteração específica em qualquer elemento HTML apenas.

As regras definidas em linha com o elemento substituem as regras definidas em um arquivo CSS externo, bem como as regras definidas no elemento <style>.

Exemplo

Vamos reescrever o exemplo acima mais uma vez, mas aqui vamos escrever regras de folha de estilo junto com os elementos HTML usando style atributo desses elementos.

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
      <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html>

Isso produzirá o seguinte resultado -