CSS

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

CSS-Internos- Externos-Inline-hostinger

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

  1. Abra sua página HTML com qualquer editor de texto. Se a página já foi enviada para sua conta de hospedagem, você pode usar um editor de texto fornecido pela sua hospedagem. Se você tiver um documento HTML em seu computador, você pode usar qualquer editor de texto para editá-lo e, em seguida, voltar a carregar o arquivo para sua conta de hospedagem usando o cliente FTP.
  2. Localize a tag de abertura <head> e adicione o seguinte código logo após:
    <style type="text/css">
  3. Agora salte para uma nova linha e adicione regras CSS, por exemplo:
    body {
        background-color: blue; 
    } 
    h1 { 
        color: red; 
        padding: 60px; 
    }
  4. Depois de terminar de adicionar regras CSS, adicione a tag de estilo de fechamento:
    </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.

Conclusão

Agora você está familiarizado com diferentes maneiras de adicionar CSS ao seu site e conhecer as diferenças entre as páginas de estilo internas, externas e inline. Confira mais posts no nosso blog.

hostinger-blog

2 Comentários

Clique aqui para comentar

    • Oi Paulo! Veja as dicas do nosso desenvolvedor 🙂

      Para adicionar um estilo externo ao seu site basta fazer os seguintes passos:

      1- Crie seu arquivo de estilo em seu computador ou em alguma plataforma que permita edição de textos
      2- Salve este arquivo em algum local na web para que ele possa ser referenciado(somente caminhos absolutos funcionarão neste caso)
      3- Após conseguir verificar o caminho absoluto do seu arquivo na internet
      (no caso digitar o caminho do arquivo na barra de endereço do navegador e conseguir visualizar o arquivo de maneira parecida com o bloco de notas por ex:


      body{
      background-color:#333;
      }
      .classe{
      color:#f7f7f7;
      }

      )
      4- Após conseguir ver o arquivo como exemplificado acima em seu navegador, basta copiar o endereço que colocou na barra de endereço do navegador e colocar na parte de código de seu site entre as tagas head do seu site como no exemplo:

      5- Salve e assim que acessar seu site pelo navegador o seu estilo será carregado pelo navegador

      OBS: Lembre-se! verifique se o local onde você está subindo seu estilo tem permissões de leitura para acessos externos, só assim é garantido que funcione como esperado 🙂

Comece a Economizar Agora!

Hospedagem com tudo incluso e nome de domínio
R$6
39
/mês*

Junte-se a centenas de inscritos em todo o mundo

e receba um resumo dos tutoriais mais recentes direto para o seu e-mail

Please wait...

Obrigado por se inscrever!