{"id":4602,"date":"2021-06-03T12:14:47","date_gmt":"2021-06-03T15:14:47","guid":{"rendered":"https:\/\/blog.hostinger.io\/tutoriais\/?p=4602"},"modified":"2026-03-10T13:01:05","modified_gmt":"2026-03-10T16:01:05","slug":"diferenca-entre-estilos-css","status":"publish","type":"post","link":"\/pt\/tutoriais\/diferenca-entre-estilos-css","title":{"rendered":"CSS inline, interno ou externo: entenda a diferen\u00e7a entre eles"},"content":{"rendered":"

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.<\/span><\/p>

Baixe o Guia de Recursos CSS Completo<\/a><\/p>

\n\n\n\n\n<\/p>

O Que Exatamente é CSS?<\/b><\/h2>

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

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 <\/span>spinner<\/span><\/i> e de <\/span>loader<\/span><\/i>, assim como fundos animados.<\/span><\/p>

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:<\/span><\/p>

\"como<\/figure><\/div>

<\/p>

Diferença entre Estilos de CSS Inline, Interno e Externo<\/b><\/h2>

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

CSS Interno<\/strong><\/h2>

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

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.<\/span><\/p>

Confira abaixo como você pode usar o CSS interno:<\/span><\/p>

    \n
  1. Abra a sua página HTML e localize a tag de abertura <head><\/strong>.<\/li>\n\n\n\n
  2. Coloque o seguinte código logo depois da tag <head><\/strong>.\n
    <style type=\"text\/css\"><\/span><\/pre>\n<\/li>\n\n\n\n
  3. Adicione as regras CSS numa nova linha. Aqui está um exemplo:\n
    body {\n    background-color: blue;\n}\nh1 {\n    color: red;\n    padding: 60px;\n}<\/pre>\n<\/li>\n\n\n\n
  4. Digite a seguinte tag de fechamento:\n
    <\/style><\/pre>\n<\/li>\n<\/ol>
    O seu arquivo HTML ficará parecido com isso:<\/p>
    <!DOCTYPE html>\n<html>\n<head>\n<style>\nbody {\n    background-color: blue;\n}\nh1 {\n    color: red;\n    padding: 60px;\n} \n<\/style>\n<\/head>\n<body>\n\n<h1>Hostinger Tutoriais<\/h1>\n<p>Este é o nosso parágrafo.<\/p>\n\n<\/body>\n<\/html><\/pre>
    Vantagens de CSS Interno:<\/strong><\/h4>