CSS

May 18, 2023

Carlos E.

4min de leitura

CSS Inline, Interno ou Externo: Entenda a Diferença entre eles

CSS Inline, Interno ou Externo: Entenda a Diferença entre eles

Neste tutorial, você vai aprender a diferença entre os três tipos de estilo CSS: inline, externo e interno. Também vamos cobrir as vantagens e desvantagens de usar cada método.

Baixe o Guia de Recursos CSS Completo

O Que Exatamente é CSS?

Cascading Style Sheets (CSS) é uma linguagem de marcação responsável pelo visual das suas páginas da web. Ele controla as cores, fontes e layouts dos elementos do seu site.

Esta linguagem de estilo também permite que você adicione efeitos ou animações para o seu site. Você pode usá-la para exibir algumas animações CSS como os efeitos de clique em botões, de spinner e de loader, assim como fundos animados.

Sem o CSS, o seu site vai aparecer como uma página HTML simples. Veja abaixo como fica o Twitter se a gente desabilitar o CSS:

como ficar o twitter sem css

Diferença entre Estilos de CSS Inline, Interno e Externo

Existem três maneiras que você pode usar para implementar o CSS: internal, externa e inline. Vamos nos aprofundar nelas agora.

CSS Interno

O CSS interno ou incorporado requer que você adicione a tags <style> na seção <head> do seu documento HTML.

Este estilo de CSS é um método efetivo de estilizar uma única página. Contudo, usar esse estilo em múltiplas páginas pode consumir muito tempo, já que você precisa definir as regras CSS para cada página do seu site.

Confira abaixo como você pode usar o CSS interno:

  1. Abra a sua página HTML e localize a tag de abertura <head>.
  2. Coloque o seguinte código logo depois da tag <head>. 
    <style type="text/css">
  3. Adicione as regras CSS numa nova linha. Aqui está um exemplo: 
    body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;
}
  4. Digite a seguinte tag de fechamento: 
    </style>

O seu arquivo HTML ficará parecido com isso:

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

<h1>Hostinger Tutoriais</h1>
<p>Este é o nosso parágrafo.</p>

</body>
</html>

Vantagens de CSS Interno:

  • Classes e seletores de IDs podem ser usados ​​por stylesheet interno. Confira um exemplo abaixo: 
    .class {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}

#id {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}
  • Não há necessidade de carregar vários arquivos. HTML e CSS podem estar no mesmo arquivo.

Desvantagens de CSS Interno:

  • Adicionar o código para o documento HTML pode aumentar o tamanho da página e o tempo de carregamento.

CSS externo

Com o CSS externo, você vai linkar as páginas da internet com um arquivo .css externo, que você pode criar usando qualquer editor de texto no seu dispositivo (ex.: Notepad++).

Este tipo de CSS é um método mais eficiente, especialmente se você está estilizando um site grande. Ao editar um arquivo .css, você pode modificar um site inteiro de uma só vez.

Siga os passos abaixo para usar o CSS externo:

  1. Crie um novo arquivo .css com um editor de texto e então adicione regras de estilo. Por exemplo: 
    .xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}
  2. Na seção <head> da sua planilha HTML, adicione uma referência para o seu arquivo .css logo depois da tag <title>: 
    <link rel="stylesheet" type="text/css" href="style.css" />

Não se esqueça de modificar o stlye.css com o nome do seu arquivo .css.

Vantagens de CSS Externo:

  • Como o código CSS está num documento separado, os seus arquivos HTML terão uma estrutura mais limpa e serão menores
  • 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.
  • Fazer o upload ou links para múltiplos arquivos CSS pode aumentar o tempo de download do seu site.

CSS Inline

O CSS inline é usado para dar estilo a um elemento HTML específico. Para este estilo de CSS, você somente vai precisar adicionar o atributo style para cada tag HTML, sem usar os seletores.

Este tipo de CSS não é realmente recomendado, já que cada tag HTML precisa ser estilizada de maneira individual. Gerenciar o seu site pode se tornar uma tarefa bem difícil de você só usa o CSS inline.

Contudo, o CSS nline no HTML pode ser útil para algumas situações. Por exemplo, sem casos onde você não tem acesso aos arquivos CSS ou precisa aplicar estilos para um elemento único.

Vamos dar uma olhada num exemplo. Aqui, nós adicionamos um CSS inline para as tags <p> e <h1>:

<!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 :

  • Você pode inserir elementos CSS de maneira fácil e rápida numa página HTML. É por isso que esse método é útil para testar e pré-visualizar mudanças, assim como executar correções rápidas no seu site.
  • Você não precisa criar e fazer upload de um documento separado como no estilo externo.

Desvantagens do Inline CSS:

  • Adicionar regras CSS para cada elemento HTML consome muito tempo e faz a sua estrutura HTML ficar bagunçada.
  • Estilizar múltiplos elementos pode afetar o tamanho da sua página o tempo para download.

Conclusão

Neste tutorial, você aprendeu a diferença entre os três tipos de CSS: interno, externo e inline. Aqui está uma recaptulação:

  • Interno ou incorporado — adicione a tag <style> na seção <head> do documento HTML.
  • Externo — faça a ligação da planilha HTML com um arquivo .css separado.
  • Inline — aplique as regras CSS para elementos específicos.

Então, qual estilo de CSS você vai usar? Compartilhe conosco na seção de comentário abaixo.

CSS Inline, Interno ou Externo – Perguntas Frequentes (FAQ)

Abaixo, vamos responder algumas das perguntas mais comuns sobre CSS inline, interno ou externo, assim como as diferenças entre eles.

Quais são os Tipos de CSS?

Existem três tipos de CSS diferentes: inline, interno ou externo. O CSS Inline serve para dar estilo a um elemento HTML específico. O CSS interno requer que você adicione a tag <style> no seu documento HTML, sendo efetivo para dar estilo a uma única página. Já o CSS externo opera linkando suas páginas a um arquivo .css externo.

Como Usar o CSS Externo?

Para usar o CSS externo, você precisa criar e editar um documento .css. Você pode fazer isso usando um editor de texto, como o bloco de notas ou o Notepad++. A referência a esse arquivo .css externo é feita logo após a tag <title> do arquivo HTML da sua página.

Como Descobrir o CSS de um Site?

Você pode descobrir qual é o tipo de CSS de um site usando a função de Inspecionar Elemento do seu navegador. A partir dela, é possível explorar os códigos HTML do site e conferir se o CSS é inline, interno ou externo.

Se quiser ainda mais praticidade, você pode usar a extensão CSS Scan no Chrome. Ela funciona de forma parecida com a função de Inspecionar Elemento, mas oferece apenas as informações mais importantes.

Author
O autor

Carlos E.

Carlos Estrella é formado em jornalismo pela UFSC e tem as funções de redator, tradutor e SEO na Hostinger Brasil. Já trabalhou com jornalismo de games e tecnologia e hoje aplica essa experiência escrevendo posts e tutoriais no blog da Hostinger. Suas paixões incluem games, dar rolês com a namorada e amigos e ler artigos aleatórios da Wikipédia de madrugada.

Mais de Carlos E.