Diferença entre estilos CSS, Internos, Externos e Inline

Existem 3 maneiras para adicionar estilos CSS ao seu site: você pode usar CSS interno e incluir regras CSS na seção <head> do documento HTML, link para um arquivo .css externo que contém todas as regras CSS ou usar CSS em linha para aplicar regras para Elementos específicos. Este tutorial analisa as três formas, suas vantagens e desvantagens.

Opção 1 – CSS Interno

Código CSS interno é colocado na seção <head> de uma determinada página. As classes e IDs podem ser usados para se referir ao código CSS, mas eles só estão ativos nessa página específica. CSS estilos incorporados desta forma são baixados cada vez que a página carrega para que ele possa aumentar a velocidade de carregamento. No entanto, existem alguns casos quando a pagina de estilos interna é útil. Um exemplo seria enviar alguém um modelo de página – como tudo está em uma página, é muito mais fácil ver uma pré-visualização. O CSS interno é colocado entre tags <style></style>. Um exemplo de pagina de estilo interna:

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

Vantagens de CSS Interno:

Apenas uma página é afetada pela pagina de estilos.
Classes e IDs podem ser usados por stylesheet interno.
Não há necessidade de carregar vários arquivos. HTML e CSS podem estar no mesmo arquivo.

Desvantagens de CSS Interno:

Aumento do tempo de carregamento da página.
Ela afeta apenas uma página – não é útil se você quiser usar o mesmo CSS em vários documentos.

Como adicionar o CSS interno à página HTML

Abra sua página HTML com qualquer editor de texto, você pode usar um editor de texto fornecido
localize a tag de abertura <head> e adicione o seguinte código logo após:

 <style type="text/css">

Agora salte para uma nova linha e adicione regras CSS, por exemplo:

``` css
body {
    background-color: blue; 
} 
h1 { 
    color: red; 
    padding: 60px; 
}
```

Depois de terminar de adicionar regras CSS, adicione a tag de estilo de fechamento:

``` html
</style>
```

No final, o documento HTML com página de estilo interna deve ter esta aparência:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: blue;
    }
    h1 {
      color: red;
      padding: 60px;
    }
  </style>
</head>
<body>

  <h1>Hostinger Tutorials</h1>
  <p>This is our paragraph.</p>

</body>
</html>

Opção 2 – CSS externo

Provavelmente a maneira mais conveniente de adicionar CSS ao seu site, é vinculá-lo a um arquivo .css externo. Dessa forma, quaisquer alterações feitas em um arquivo CSS externo serão refletidas em seu site globalmente. Uma referência a um arquivo CSS externo é colocada na seção <head> da página:

  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>

Enquanto o style.css contém todas as regras de estilo. Por exemplo:

.xleftcol {
  float: left;
  width: 33%;
  background:#809900;
}
.xmiddlecol {
  float: left;
  width: 34%;
  background:#eff2df;
}

Vantagens de CSS Externo:

Tamanho menor de páginas HTML e estrutura mais limpa.
Velocidade de carregamento mais rápida.
O mesmo arquivo .css pode ser usado em várias páginas.

Desvantagens de CSS Externo:

Até que o CSS externo seja carregado, a página pode não ser processada corretamente.

Opção 3 – CSS Inline

O CSS inline é usado para uma tag HTML específica. O atributo <style> é usado para formatar uma tag HTML específica. Usar CSS desta forma não é recomendado, pois cada tag HTML precisa ser denominada individualmente. Gerenciando seu site pode tornar-se muito difícil se você usar apenas CSS inline. No entanto, pode ser útil em algumas situações. Por exemplo, nos casos em que você não tem acesso a arquivos CSS ou precisa aplicar estilo para um único elemento. Um exemplo de página HTML com CSS em linha seria assim:

<!DOCTYPE html>
<html>
<body style="background-color:black;">

<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>

</body>
</html>

Vantagens do CSS Inline :

Útil se você quiser testar e visualizar alterações.
Útil para correções rápidas.
Reduzir solicitações HTTP.

Desvantagens do Inline CSS:

CSS Inline deve ser aplicado a cada elemento.