{"id":2791,"date":"2019-03-22T00:00:00","date_gmt":"2019-03-22T00:00:00","guid":{"rendered":"https:\/\/rockcontent.com\/br\/2019\/03\/22\/css\/"},"modified":"2019-03-22T00:00:00","modified_gmt":"2019-03-22T00:00:00","slug":"css","status":"publish","type":"post","link":"https:\/\/pingback.com\/br\/resources\/css\/","title":{"rendered":"Entenda o que \u00e9 CSS e quais as suas fun\u00e7\u00f5es na internet"},"content":{"rendered":"\n<p>O <strong>CSS<\/strong>  \u00e9 uma linguagem de design gr\u00e1fico escrita dentro do c\u00f3digo <a href=\"https:\/\/rockcontent.com\/br\/blog\/html\/\">HTML<\/a> de um site e que permite criar p\u00e1ginas de forma mais precisa, al\u00e9m de aplicar estilos, como cores, margens, formas, tipos de letras etc. <\/p>\n\n\n\n<p>Ela \u00e9 a sigla de Cascading Style Sheets, que em portugu\u00eas pode ser traduzido como Folhas de Estilo em Cascatas, foi esenvolvido pela <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3.org\/\" target=\"_blank\">W3C<\/a>&nbsp;em 1996. Esse nome foi dado porque as carater\u00edsticas se aplicam de cima para baixo, por meio de regras que t\u00eam um esquema priorit\u00e1rio.<\/p>\n\n\n\n<ul><li><a href=\"#para\">Para que serve o CSS?<\/a><\/li><li><a href=\"#como\">Como vincular o CSS ao HTML?<\/a><\/li><li><a href=\"#porque\">Por que vale a pena implementar o CSS em um site?<\/a><\/li><\/ul>\n\n\n\n<a id=\"para\"><\/a>\n\n\n\n<h2 class=\"wp-block-heading\">Para que serve o CSS?<\/h2>\n\n\n\n<p>A tecnologia CSS foi criada para marcar a separa\u00e7\u00e3o entre <a href=\"https:\/\/rockcontent.com\/br\/blog\/marketing-de-conteudo-resume-a-conteudo\/\" rel=\"noreferrer noopener\" target=\"_blank\">conte\u00fados<\/a> e p\u00e1ginas da web, e para dar uma forma de apresenta\u00e7\u00e3o a elas. Isso gera m\u00faltiplos benef\u00edcios, como:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>apresentar o documento final em diferentes estilos (tela, voz, impress\u00e3o);<\/li><li>ter um site responsivo;<\/li><li>evitar criar arquivos muito pesados;<\/li><li>determinar o estilo visual de um site inteiro. Dessa forma, se mudamos uma p\u00e1gina, \u00e9 poss\u00edvel todas automaticamente;<\/li><li>trabalhar com padr\u00f5es e separar (at\u00e9 certo ponto) a estrutura da apresenta\u00e7\u00e3o, fazendo um trabalho mais definido;<\/li><li>garantir maior flexibilidade e controle nas especifica\u00e7\u00f5es do site;<\/li><li>simplificar a cria\u00e7\u00e3o de uma p\u00e1gina.<\/li><\/ul>\n\n\n\n<strong>Confira tamb\u00e9m estes conte\u00fados:<\/strong><br>\n   <a href=\"https:\/\/rockcontent.com\/br\/blog\/html\/\" target=\"_blank&quot;\" rel=\"noopener noreferrer\">O que \u00e9 HTML e qual sua funcionalidade?<\/a><br>\n   <a href=\"https:\/\/rockcontent.com\/br\/blog\/debug\/\" target=\"_blank&quot;\" rel=\"noopener noreferrer\">Debug WordPress: o que \u00e9 e como ativar essa depura\u00e7\u00e3o no seu site<\/a><br>\n   <a href=\"https:\/\/rockcontent.com\/br\/blog\/autenticacao-de-dois-fatores\/\" target=\"_blank&quot;\" rel=\"noopener noreferrer\">Entenda o que \u00e9 autentica\u00e7\u00e3o de dois fatores e a sua import\u00e2ncia<\/a>\n\n\n\n<a id=\"como\"><\/a>\n\n\n\n<h2 class=\"wp-block-heading\">Como vincular o CSS ao HTML?<\/h2>\n\n\n\n<p>O HTML tem uma rela\u00e7\u00e3o muito forte com o CSS, j\u00e1 que o HTML \u00e9 uma linguagem de marca\u00e7\u00e3o (constitui a base de um site) e o CSS determina o estilo da p\u00e1gina (toda a parte est\u00e9tica).<\/p>\n\n\n\n<p>Apesar de as Folhas de Estilo em Cascatas n\u00e3o serem imprescind\u00edveis, s\u00e3o importantes para dar forma e apar\u00eancia \u00e0 sua p\u00e1gina. Se voc\u00ea s\u00f3 utilizar HTML, a sua p\u00e1gina fica nua e sem nenhum destaque com rela\u00e7\u00e3o aos concorrentes.<\/p>\n\n\n\n<a id=\"porque\"><\/a>\n\n\n\n<h2 class=\"wp-block-heading\">Por que vale a pena implementar o CSS em um site?<\/h2>\n\n\n\n<p>As vantagens de utilizar as Folhas de Estilo em Cascatas s\u00e3o numerosas e algumas j\u00e1 foram mencionadas anteriormente. Outras que podem ser citadas s\u00e3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>a possibilidade de fazer modifica\u00e7\u00f5es visuais em um s\u00f3 lugar (sem ter que editar todos os documentos HTML separadamente);<\/li><li>a facilidade de organizar e fazer mudan\u00e7as;<\/li><li>permitir que o download da p\u00e1gina seja feito com maior agilidade;<\/li><li>por meio da separa\u00e7\u00e3o se melhora a acessibilidade e a escaneabilidade do conte\u00fado;<\/li><li>a simplicidade para criar vers\u00f5es dependendo dos dispositivos (tablets, <em>smartphones<\/em> ou dispositivos m\u00f3veis, entre outros).<\/li><\/ul>\n\n\n\n<p>Apesar de trazer d\u00favidas em um primeiro momento, o uso do CSS \u00e9 bastante relevante, sim! Sua execu\u00e7\u00e3o permite melhorar as t\u00e9cnicas de <a href=\"https:\/\/rockcontent.com\/br\/blog\/o-que-e-seo\/\" rel=\"noreferrer noopener\" target=\"_blank\">SEO<\/a> do site e, consequentemente, de posicionamento em sites de busca \u2014 algo indispens\u00e1vel em uma estrat\u00e9gia de <a href=\"https:\/\/rockcontent.com\/br\/blog\/marketing-digital\/\" target=\"_blank\" rel=\"noreferrer noopener\">Marketing Digital.<\/a><\/p>\n\n\n\n<p>O CSS foi criado para ser trabalhado em conjunto com o HTML. Devido ao conceito que utiliza (a separa\u00e7\u00e3o entre apresenta\u00e7\u00e3o e conte\u00fado), a tecnologia CSS tem um padr\u00e3o muito amplo, com especifica\u00e7\u00f5es, benef\u00edcios e possibilidades muito grandes.<\/p>\n\n\n\n<p>Atualmente, voc\u00ea encontrar\u00e1 o CSS na maioria dos sites, j\u00e1 que \u00e9 um requisito t\u00e3o importante como a pr\u00f3pria linguagem de marca\u00e7\u00e3o. Portanto, n\u00e3o deixe de implant\u00e1-lo!<\/p>\n\n\n\n<p>Voc\u00ea gostou do artigo e quer conhecer outros temas interessantes? Ent\u00e3o, recomendamos que entre no nosso blog e descubra <a href=\"https:\/\/rockcontent.com\/br\/blog\/o-que-e-xml\/\" rel=\"noreferrer noopener\" target=\"_blank\">o que \u00e9 XML e para que serve essa linguagem<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A especifica\u00e7\u00e3o CSS, assim como HTML e JavaScrit, \u00e9 uma tecnologia utilizada por muitos sites para criar p\u00e1ginas com um design agrad\u00e1vel. Neste artigo explicamos o que \u00e9 CSS, para que serve e por que vale a pena implementar um CSS no seu site.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-2791","post","type-post","status-publish","format-standard","hentry","category-tech"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>O que \u00e9 CSS e como funciona essa linguagem de programa\u00e7\u00e3o?<\/title>\n<meta name=\"description\" content=\"A especifica\u00e7\u00e3o CSS, assim como HTML e JavaScrit, \u00e9 uma tecnologia utilizada por muitos sites para criar as suas p\u00e1ginas. Saiba mais!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pingback.com\/br\/resources\/css\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"O que \u00e9 CSS e como funciona essa linguagem de programa\u00e7\u00e3o?\" \/>\n<meta property=\"og:description\" content=\"A especifica\u00e7\u00e3o CSS, assim como HTML e JavaScrit, \u00e9 uma tecnologia utilizada por muitos sites para criar as suas p\u00e1ginas. Saiba mais!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pingback.com\/br\/resources\/css\/\" \/>\n<meta property=\"og:site_name\" content=\"Pingback\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-22T00:00:00+00:00\" \/>\n<meta name=\"author\" content=\"Pingback\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pingbackoficial\" \/>\n<meta name=\"twitter:site\" content=\"@pingbackoficial\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pingback\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/css\/\",\"url\":\"https:\/\/pingback.com\/br\/resources\/css\/\",\"name\":\"O que \u00e9 CSS e como funciona essa linguagem de programa\u00e7\u00e3o?\",\"isPartOf\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/#website\"},\"datePublished\":\"2019-03-22T00:00:00+00:00\",\"author\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66\"},\"description\":\"A especifica\u00e7\u00e3o CSS, assim como HTML e JavaScrit, \u00e9 uma tecnologia utilizada por muitos sites para criar as suas p\u00e1ginas. Saiba mais!\",\"breadcrumb\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/css\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pingback.com\/br\/resources\/css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/pingback.com\/br\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Entenda o que \u00e9 CSS e quais as suas fun\u00e7\u00f5es na internet\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#website\",\"url\":\"https:\/\/pingback.com\/br\/resources\/\",\"name\":\"Pingback Blog\",\"description\":\"Marketing for builders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pingback.com\/br\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66\",\"name\":\"Pingback\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"caption\":\"Pingback\"},\"description\":\"Pingback: Marketing for builders.\",\"sameAs\":[\"https:\/\/pingback.com\",\"https:\/\/www.instagram.com\/pingbackoficial\/\",\"https:\/\/www.linkedin.com\/company\/pingbackoficial\/\",\"https:\/\/x.com\/pingbackoficial\",\"https:\/\/www.youtube.com\/@pingbackoficial\"],\"url\":\"https:\/\/pingback.com\/br\/resources\/author\/adm1n\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"O que \u00e9 CSS e como funciona essa linguagem de programa\u00e7\u00e3o?","description":"A especifica\u00e7\u00e3o CSS, assim como HTML e JavaScrit, \u00e9 uma tecnologia utilizada por muitos sites para criar as suas p\u00e1ginas. Saiba mais!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pingback.com\/br\/resources\/css\/","og_locale":"pt_BR","og_type":"article","og_title":"O que \u00e9 CSS e como funciona essa linguagem de programa\u00e7\u00e3o?","og_description":"A especifica\u00e7\u00e3o CSS, assim como HTML e JavaScrit, \u00e9 uma tecnologia utilizada por muitos sites para criar as suas p\u00e1ginas. Saiba mais!","og_url":"https:\/\/pingback.com\/br\/resources\/css\/","og_site_name":"Pingback","article_published_time":"2019-03-22T00:00:00+00:00","author":"Pingback","twitter_card":"summary_large_image","twitter_creator":"@pingbackoficial","twitter_site":"@pingbackoficial","twitter_misc":{"Escrito por":"Pingback","Est. tempo de leitura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pingback.com\/br\/resources\/css\/","url":"https:\/\/pingback.com\/br\/resources\/css\/","name":"O que \u00e9 CSS e como funciona essa linguagem de programa\u00e7\u00e3o?","isPartOf":{"@id":"https:\/\/pingback.com\/br\/resources\/#website"},"datePublished":"2019-03-22T00:00:00+00:00","author":{"@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66"},"description":"A especifica\u00e7\u00e3o CSS, assim como HTML e JavaScrit, \u00e9 uma tecnologia utilizada por muitos sites para criar as suas p\u00e1ginas. Saiba mais!","breadcrumb":{"@id":"https:\/\/pingback.com\/br\/resources\/css\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pingback.com\/br\/resources\/css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/pingback.com\/br\/resources\/css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/pingback.com\/br\/resources\/"},{"@type":"ListItem","position":2,"name":"Entenda o que \u00e9 CSS e quais as suas fun\u00e7\u00f5es na internet"}]},{"@type":"WebSite","@id":"https:\/\/pingback.com\/br\/resources\/#website","url":"https:\/\/pingback.com\/br\/resources\/","name":"Pingback Blog","description":"Marketing for builders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pingback.com\/br\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66","name":"Pingback","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","caption":"Pingback"},"description":"Pingback: Marketing for builders.","sameAs":["https:\/\/pingback.com","https:\/\/www.instagram.com\/pingbackoficial\/","https:\/\/www.linkedin.com\/company\/pingbackoficial\/","https:\/\/x.com\/pingbackoficial","https:\/\/www.youtube.com\/@pingbackoficial"],"url":"https:\/\/pingback.com\/br\/resources\/author\/adm1n\/"}]}},"_links":{"self":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts\/2791","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/comments?post=2791"}],"version-history":[{"count":0,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts\/2791\/revisions"}],"wp:attachment":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/media?parent=2791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/categories?post=2791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/tags?post=2791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}