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:

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:
  3. Agora salte para uma nova linha e adicione regras CSS, por exemplo:
  4. Depois de terminar de adicionar regras CSS, adicione a tag de estilo de fechamento:

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

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:

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

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:

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.

Comece a Economizar Agora!

Hospedagem com tudo incluso e nome de domínio
R$6
99
/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!