{"id":8493,"date":"2018-03-27T21:56:59","date_gmt":"2018-03-28T00:56:59","guid":{"rendered":"https:\/\/blog.hostinger.io\/pt-tutoriais\/?p=8493"},"modified":"2026-03-10T13:02:00","modified_gmt":"2026-03-10T16:02:00","slug":"o-que-e-css-guia-basico-de-css","status":"publish","type":"post","link":"\/pt\/tutoriais\/o-que-e-css-guia-basico-de-css","title":{"rendered":"O que \u00e9 CSS e como ele funciona: guia b\u00e1sico para iniciantes"},"content":{"rendered":"<p>O CSS foi desenvolvido pelo&nbsp;<strong>W3C&nbsp;<\/strong>(<strong>World Wide Web Consortium<\/strong>) em 1996 por um motivo bastante simples: a linguagem HTML n&atilde;o foi projetada para ter tags que ajudassem a formatar a p&aacute;gina &mdash; o objetivo era apenas escrever a marca&ccedil;&atilde;o para o conte&uacute;do da web.<\/p><p>Tags como&nbsp;<strong>&lt;font&gt;&nbsp;<\/strong>foram introduzidas na vers&atilde;o 3.2 do HTML e causaram muitos problemas para os desenvolvedores. Devido ao fato de as p&aacute;ginas da web terem fontes diferentes, fundos coloridos e v&aacute;rios estilos, reescrever o c&oacute;digo era um processo longo, trabalhoso e caro. Desta forma, o CSS foi criado pelo W3C para resolver esse problema.<\/p><p>Tecnicamente, n&atilde;o &eacute; obrigat&oacute;rio usar CSS em uma p&aacute;gina da web, mas eu te garanto que voc&ecirc; provavelmente n&atilde;o gostar&aacute; de navegar em uma p&aacute;gina somente em HTML &mdash; porque ela ser&aacute; completamente b&aacute;sica e pouco atraente.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/CSS-cheatsheet-Hostinger-BR.pdf\" target=\"_blank\" rel=\"noopener\">Baixe o Guia de Recursos CSS Completo<\/a><\/p><p>\n\n\n\n\n<\/p><p><\/p><p><div class=\"protip\">\n                    <h2 class=\"featured-snippet title\">O que &eacute; CSS?<\/h2>\n                    <p>CSS (<em>Cascading Style Sheets<\/em>) &eacute; uma linguagem usada para estilizar elementos em uma p&aacute;gina da web. Com isso, &eacute; poss&iacute;vel separar o conte&uacute;do (HTML) da sua representa&ccedil;&atilde;o visual (CSS). A rela&ccedil;&atilde;o entre HTML e CSS &eacute; intr&iacute;nseca, pois o HTML &eacute; a base de um site e o CSS representa a sua parte est&eacute;tica.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-o-que-e-css-tutorial-em-video\"><strong>O que &eacute; CSS: tutorial em v&iacute;deo<\/strong><\/h2><p>Saiba mais sobre CSS e como ele funciona assistindo a este tutorial em v&iacute;deo.<\/p><figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"O que &eacute; CSS  - Hostinger Brasil\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/CTjUpZqTJDg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure><h2 class=\"wp-block-heading\" id=\"h-vantagens-de-usar-css-nas-suas-paginas\"><strong>Vantagens de usar CSS nas suas p&aacute;ginas<\/strong><\/h2><p>A diferen&ccedil;a entre uma p&aacute;gina da web que usa CSS e uma que n&atilde;o usa &eacute; enorme &mdash; e voc&ecirc; certamente perceber&aacute; na mesma hora.<\/p><p>Voc&ecirc; j&aacute; deve ter se deparado com um site que n&atilde;o carregou completamente e apresentou apenas informa&ccedil;&otilde;es em texto preto no fundo branco. Isso significa que o CSS da p&aacute;gina n&atilde;o foi carregado corretamente ou n&atilde;o existe.<\/p><p>&Eacute; assim que ficam as p&aacute;ginas da web apenas com <a href=\"\/pt\/tutoriais\/o-que-e-html-conceitos-basicos\/\">linguagens de marca&ccedil;&atilde;o HTML<\/a> &mdash; acho que todos concordamos que o resultado n&atilde;o &eacute; muito atraente.<\/p><p>Antes da cria&ccedil;&atilde;o do CSS, toda a estiliza&ccedil;&atilde;o tinha de ser inclu&iacute;da na pr&oacute;pria marca&ccedil;&atilde;o HTML. Isso significa que os desenvolvedores da web tinham que descrever separadamente a cor de fundo, o tamanho da fonte, os alinhamentos e tudo mais em cada elemento HTML de suas p&aacute;ginas.<\/p><p>O CSS permite estilizar tudo em um arquivo diferente, estabelecendo as diretrizes de design nesse arquivo e, posteriormente, integrando os arquivos CSS &agrave; marca&ccedil;&atilde;o HTML. Isso torna a marca&ccedil;&atilde;o HTML muito mais limpa e f&aacute;cil de manter.<\/p><p>Em resumo, com os recursos de CSS, voc&ecirc; n&atilde;o precisa descrever repetidamente a apar&ecirc;ncia de cada elemento &mdash; o que economiza tempo, simplifica o c&oacute;digo e o torna menos propenso a erros.<\/p><p>O CSS permite que voc&ecirc; tenha v&aacute;rios estilos em uma p&aacute;gina HTML, o que torna as possibilidades de personaliza&ccedil;&atilde;o quase infinitas. Atualmente, isso est&aacute; se tornando mais uma necessidade do que uma comodidade.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-o-css-funciona\"><strong>Como o CSS funciona?<\/strong><\/h2><p>O CSS usa uma sintaxe simples, baseada em ingl&ecirc;s, com um conjunto de regras principais. Como mencionamos anteriormente, o HTML nunca foi planejado para usar elementos de estilo, apenas a marca&ccedil;&atilde;o da p&aacute;gina. Ele foi criado apenas para descrever o conte&uacute;do. Por exemplo:&nbsp;<strong>&lt;p&gt;Isto &eacute; um par&aacute;grafo.&lt;\/p<\/strong>&gt;.<\/p><p>Mas como voc&ecirc; estiliza o par&aacute;grafo? A estrutura de sintaxe do CSS &eacute; bastante simples. Ela tem um seletor e um bloco de declara&ccedil;&atilde;o. Voc&ecirc; seleciona um elemento e, em seguida, declara o que deseja fazer com ele. Bastante simples, certo?<\/p><p>No entanto, h&aacute; regras que voc&ecirc; precisa lembrar. As regras de estrutura s&atilde;o bastante simples, portanto, n&atilde;o se preocupe.<\/p><p>O seletor aponta para os elementos HTML que voc&ecirc; deseja estilizar. O bloco de declara&ccedil;&atilde;o cont&eacute;m uma ou mais declara&ccedil;&otilde;es separadas por ponto e v&iacute;rgula.<\/p><p>Cada declara&ccedil;&atilde;o inclui um nome de propriedade CSS e um valor, separados por dois pontos. Uma declara&ccedil;&atilde;o CSS sempre termina com um ponto-e-v&iacute;rgula e os blocos de declara&ccedil;&atilde;o s&atilde;o cercados por chaves.<\/p><p>Vamos dar uma olhada em um exemplo:<\/p><p>Todos os elementos&nbsp;<strong>&lt;p&gt;&nbsp;<\/strong>ser&atilde;o coloridos em azul e em negrito.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;style&gt;\n\np {\n color: blue;\n text-weight: bold;\n}\n\n&lt;style&gt;<\/pre><p>Em outro exemplo, todos os elementos&nbsp;<strong>&lt;p&gt;&nbsp;<\/strong>ser&atilde;o alinhados ao centro, ter&atilde;o 16x de largura e ser&atilde;o cor-de-rosa.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;style&gt;\np {\n\n   text-align: center;\n   font-size: 16px;\n   color: pink;\n  \n}\n&lt;\/style&gt;<\/pre><p>Consulte nossa&nbsp;<a href=\"\/pt\/tutoriais\/codigos-css-prontos-guia-pdf\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>folha de dicas de CSS<\/strong><\/a>&nbsp;para obter mais exemplos.<\/p><p>Agora vamos falar sobre os diferentes estilos de CSS: interno, externo e&nbsp;<em>inline<\/em>.<\/p><h2 class=\"wp-block-heading\" id=\"h-estilos-css-internos-externos-e-inline\"><strong>Estilos CSS internos, externos e&nbsp;<em>inline<\/em><\/strong><\/h2><p>Analisaremos cada estilo de forma r&aacute;pida! Para uma explica&ccedil;&atilde;o detalhada, acesse o link que vamos disponibilizar logo abaixo.<\/p><p>Vamos come&ccedil;ar com o estilo&nbsp;<strong>interno<\/strong>. Estilos CSS feitos desta forma s&atilde;o carregados cada vez que um site &eacute; atualizado, o que pode aumentar o tempo de carregamento. Al&eacute;m disso, voc&ecirc; n&atilde;o poder&aacute; usar o mesmo estilo CSS em v&aacute;rias p&aacute;ginas, pois tudo est&aacute; contido em uma &uacute;nica p&aacute;gina. Mas a vantagem disso &eacute; que ter tudo em uma p&aacute;gina facilita o compartilhamento do modelo para uma visualiza&ccedil;&atilde;o.<\/p><p>O m&eacute;todo&nbsp;<strong>externo<\/strong>&nbsp;pode ser o mais conveniente: tudo &eacute; feito externamente em um arquivo .css. Isso significa que voc&ecirc; pode fazer todo o estilo em um arquivo separado e aplicar o CSS a qualquer p&aacute;gina desejada. O estilo externo tamb&eacute;m pode melhorar o tempo de carregamento.<\/p><p>Por fim, tem tamb&eacute;m o estilo&nbsp;<strong><em>inline<\/em><\/strong>&nbsp;do CSS. O inline trabalha com elementos espec&iacute;ficos que possuem a tag &lt;style&gt; &mdash; cada componente deve ser estilizado, por isso talvez n&atilde;o seja o melhor ou o mais r&aacute;pido para lidar com CSS. Mas ele pode ser &uacute;til, por exemplo, para alterar um &uacute;nico elemento, visualizar rapidamente as altera&ccedil;&otilde;es ou se voc&ecirc; n&atilde;o tiver acesso aos arquivos CSS.<\/p><p>Confira nosso artigo completo para conhecer mais informa&ccedil;&otilde;es sobre os <a href=\"\/pt\/tutoriais\/diferenca-entre-estilos-css\">diferentes estilos de CSS<\/a>.<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p>Vamos resumir o que aprendemos aqui sobre CSS e como ele ajuda no visual das p&aacute;ginas web:<\/p><ul class=\"wp-block-list\">\n<li>O CSS foi criado para trabalhar em conjunto com outras linguagens de marca&ccedil;&atilde;o, como HTML. Ele &eacute; usado para estilizar uma p&aacute;gina e acelera muito o desenvolvimento web.<\/li>\n\n\n\n<li>H&aacute; tr&ecirc;s estilos de implementa&ccedil;&atilde;o de CSS, e voc&ecirc; pode usar o estilo externo para estilizar v&aacute;rias p&aacute;ginas ao mesmo tempo.<\/li>\n\n\n\n<li>Hoje em dia, voc&ecirc; encontra o CSS em basicamente toda a internet, pois ele &eacute; um requisito t&atilde;o importante quanto a pr&oacute;pria linguagem de marca&ccedil;&atilde;o usada para o conte&uacute;do das p&aacute;ginas.<\/li>\n<\/ul><p>Esperamos que este artigo tenha sido &uacute;til &mdash; se voc&ecirc; tiver alguma d&uacute;vida, deixe-a na se&ccedil;&atilde;o de coment&aacute;rios abaixo.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/pt\/hospedagem-barata\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-32927\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-768x225.png 768w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-1536x450.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-perguntas-frequentes-sobre-css\"><strong>Perguntas frequentes sobre CSS<\/strong><\/h2><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-69441719d1318\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">O que significa CSS?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>CSS significa&nbsp;u003cemu003eCascading Style Sheetu003c\/emu003e&nbsp;(Folha de estilo em cascata) e &eacute; uma linguagem de programa&ccedil;&atilde;o usada para definir o estilo de um site em conjunto com o HTML.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69441719d131d\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Para que serve o CSS?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>O CSS &eacute; usado para informar ao navegador como deve ser a apar&ecirc;ncia de um determinado site. Ele n&atilde;o pode ser usado para criar novos elementos de p&aacute;gina, mas &eacute; usado para estilizar elementos HTML.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69441719d131e\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Quais s&atilde;o os diferentes tipos de CSS?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>H&aacute; tr&ecirc;s tipos diferentes de CSS: CSS&nbsp;u003cemu003einlineu003c\/emu003e, CSS interno ou incorporado e CSS externo.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69441719d131f\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Qual &eacute; a diferen&ccedil;a entre HTML e CSS?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Como uma linguagem de marca&ccedil;&atilde;o, o HTML &eacute; usado para criar sites est&aacute;ticos. O CSS, por outro lado, &eacute; uma linguagem de folha de estilo usada para definir o estilo e a apresenta&ccedil;&atilde;o geral de diferentes arquivos e elementos de p&aacute;gina em uma linguagem de marca&ccedil;&atilde;o, como o HTML.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>O CSS foi desenvolvido pelo&nbsp;W3C&nbsp;(World Wide Web Consortium) em 1996 por um motivo bastante simples: a linguagem HTML n&atilde;o foi projetada para ter tags que ajudassem a formatar a p&aacute;gina &mdash; o objetivo era apenas escrever a marca&ccedil;&atilde;o para o conte&uacute;do da web. Tags como&nbsp;&lt;font&gt;&nbsp;foram introduzidas na vers&atilde;o 3.2 do HTML e causaram muitos problemas [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/pt\/tutoriais\/o-que-e-css-guia-basico-de-css\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":356,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Descubra o que \u00e9 CSS e sua import\u00e2ncia para o design web. Aprenda a utiliz\u00e1-lo de forma eficaz e melhore a est\u00e9tica do seu site!","rank_math_focus_keyword":"o que \u00e9 css","footnotes":""},"categories":[5602],"tags":[5324],"class_list":["post-8493","post","type-post","status-publish","format-standard","hentry","category-glossario","tag-o-que-e-css"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-css","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-css-guia-basico-de-css","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/css-cest-quoi","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-css","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/apa-itu-css","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/was-ist-css","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-css","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-css","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-css","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-css","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-css","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-css","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/o-que-e-css-guia-basico-de-css","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-css","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-css","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-css","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-css","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/8493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/users\/356"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/comments?post=8493"}],"version-history":[{"count":25,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/8493\/revisions"}],"predecessor-version":[{"id":49470,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/8493\/revisions\/49470"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media?parent=8493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/categories?post=8493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/tags?post=8493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}