{"id":334,"date":"2020-11-24T09:50:07","date_gmt":"2020-11-24T07:50:07","guid":{"rendered":"https:\/\/www.mozdomains.com\/blog\/pt\/?p=334"},"modified":"2020-11-24T10:01:17","modified_gmt":"2020-11-24T08:01:17","slug":"o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl","status":"publish","type":"post","link":"https:\/\/www.mozdomains.com\/blog\/pt\/programacao\/css\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\/","title":{"rendered":"O que \u00e9 CSS? E como isso se relaciona com o HMTL?"},"content":{"rendered":"\n

Lembra-se do HTML (Hypertext Markup Language)? A linguagem de codifica\u00e7\u00e3o que serve de base para todo o desenvolvimento web? Bem, se HTML \u00e9 a primeira linguagem que voc\u00ea vai querer aprender quando estiver interessado em construir sites, o seu primo CSS \u00e9 o segundo logo.<\/p>\n\n\n\n

O que \u00e9 CSS? E como isso se relaciona com o HMTL?<\/strong><\/p>\n\n\n\n

CSS significa Cascading Style Sheets, com \u00eanfase em “Style”. Enquanto o HTML \u00e9 usado para estruturar um documento da web (definindo coisas como manchetes e par\u00e1grafos e permitindo que voc\u00ea incorpore imagens, v\u00eddeo e outras \u201cmedias\u201d), CSS vem e espec\u00edfica o estilo do seu documento – layouts de p\u00e1gina, cores e fontes s\u00e3o todos determinados com CSS. Pense no HTML como a base (cada casa tem um) e no CSS como as escolhas est\u00e9ticas (h\u00e1 uma grande diferen\u00e7a entre uma mans\u00e3o vitoriana e uma casa moderna de meados do s\u00e9culo).<\/p>\n\n\n\n

Como funciona o CSS?<\/strong><\/p>\n\n\n\n

CSS traz estilo \u00e0s suas p\u00e1ginas da web ao interagir com elementos HTML. Elementos s\u00e3o os componentes HTML individuais de uma p\u00e1gina da web – por exemplo, um par\u00e1grafo – que em HTML pode ter a seguinte apar\u00eancia:<\/p>\n\n\n\n

<p> Este \u00e9 o meu par\u00e1grafo! <\/p> <\/p>\n\n\n\n

Se voc\u00ea quiser que este par\u00e1grafo apare\u00e7a em rosa e em negrito para as pessoas que visualizam a sua p\u00e1gina da web por meio de um navegador, voc\u00ea deve usar um c\u00f3digo CSS semelhante a este:<\/p>\n\n\n\n

p {cor: rosa; intensidade da fonte: Negrito;}<\/p>\n\n\n\n

Nesse caso, \u201cp\u201d (o par\u00e1grafo) \u00e9 chamado de \u201cseletor\u201d – \u00e9 a parte do c\u00f3digo CSS que especifica em qual elemento HTML o estilo CSS afetar\u00e1. Em CSS, o seletor \u00e9 escrito \u00e0 esquerda da primeira chave. A informa\u00e7\u00e3o entre chaves \u00e9 chamada de declara\u00e7\u00e3o e cont\u00e9m propriedades e valores que s\u00e3o aplicados ao seletor. Propriedades s\u00e3o coisas como tamanho da fonte, cor e margens, enquanto os valores s\u00e3o as configura\u00e7\u00f5es para essas propriedades. No exemplo acima, \u201ccolore\u201d e \u201cfonte-weight\u201d s\u00e3o propriedades, e \u201cpink\u201d e \u201cbold\u201d s\u00e3o valores. O conjunto completo de colchetes de<\/p>\n\n\n\n

{cor: rosa; intensidade da fonte: Negrito; }<\/p>\n\n\n\n

\u00c9 a declara\u00e7\u00e3o e, novamente, \u201cp\u201d (significando o par\u00e1grafo HTML) \u00e9 o seletor. Esses mesmos princ\u00edpios b\u00e1sicos podem ser aplicados para alterar tamanhos de fonte, cores de fundo, recuos de margem e muito mais. Por exemplo. . .<\/p>\n\n\n\n

Corpo {cor de fundo: azul-claro;}<\/p>\n\n\n\n

. . . Tornaria o plano de fundo da p\u00e1gina azul-claro ou. . .<\/p>\n\n\n\n

p {tamanho da fonte: 20px; cor vermelha;}<\/p>\n\n\n\n

. . .criar\u00e1 um par\u00e1grafo de fonte de 20 pontos com letras vermelhas.<\/p>\n\n\n\n

CSS externo, interno ou embutido?<\/p>\n\n\n\n

Voc\u00ea deve estar se perguntando como esse c\u00f3digo CSS \u00e9 realmente aplicado ao conte\u00fado HTML. Muito parecido com o HTML, o CSS \u00e9 escrito em texto simples e sem formata\u00e7\u00e3o por meio de um editor de texto ou processador de texto no seu computador, e h\u00e1 tr\u00eas maneiras principais de adicionar esse c\u00f3digo CSS \u00e0s suas p\u00e1ginas HTML. O c\u00f3digo CSS (ou folhas de estilo) pode ser externo, interno ou embutido. Folhas de estilo externas s\u00e3o salvas como arquivos.css e podem ser usadas para determinar a apar\u00eancia de um site inteiro por meio de um arquivo (em vez de adicionar inst\u00e2ncias individuais de c\u00f3digo CSS a cada elemento HTML que voc\u00ea deseja ajustar). Para usar uma folha de estilo externa, seus arquivos.HTML precisam incluir uma sess\u00e3o de cabe\u00e7alho com link para a folha de estilo externa e se parece com isto:<\/p>\n\n\n\n

<head><\/code> <\/p>\n\n\n\n

<link rel = \u201dstylesheet\u201d type = \u201dtext \/ css\u201d href = mysitestyle.css \u201d> <\/code><\/p>\n\n\n\n

<\/head><\/code> <\/p>\n\n\n\n

Isso vincular\u00e1 o arquivo.html \u00e0 sua folha de estilo externa (neste caso, mysitestyle.css), e todas as instru\u00e7\u00f5es CSS nesse arquivo ser\u00e3o aplicadas \u00e0s suas p\u00e1ginas.html vinculadas.<\/p>\n\n\n\n

Folhas de estilo internas s\u00e3o instru\u00e7\u00f5es CSS escritas diretamente no cabe\u00e7alho de uma p\u00e1gina.HTML espec\u00edfica. (Isso \u00e9 especialmente \u00fatil se voc\u00ea tiver uma \u00fanica p\u00e1gina em um site que tenha uma apar\u00eancia \u00fanica.) Uma folha de estilo interna se parece com isso. . .<\/p>\n\n\n\n

<head> <\/code><\/p>\n\n\n\n

<style> <\/code><\/p>\n\n\n\n

Corpo {cor de fundo: cardo; } <\/p>\n\n\n\n

P {tamanho da fonte: 20px; cor: azul-m\u00e9dio;} <\/p>\n\n\n\n

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

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

. . . Uma cor de fundo cardo e par\u00e1grafos com fonte de 20 pontos e azul-m\u00e9dio ser\u00e3o agora aplicados a esta \u00fanica p\u00e1gina.html.<\/p>\n\n\n\n

Por fim, os estilos embutidos s\u00e3o fragmentos de CSS escritos diretamente no c\u00f3digo HTML e aplic\u00e1veis \u200b\u200bapenas a uma \u00fanica inst\u00e2ncia de codifica\u00e7\u00e3o. Por exemplo:<\/p>\n\n\n\n

<h1 style = \u201dfont-size: 40px; color: violet;\u201d> Veja este t\u00edtulo! <\/h1><\/code><\/p>\n\n\n\n

Faria com que um t\u00edtulo espec\u00edfico em uma \u00fanica p\u00e1gina.HTML apare\u00e7a em violeta, fonte de 40 pontos.<\/p>\n\n\n\n

De modo geral, as folhas de estilo externas s\u00e3o o m\u00e9todo mais eficiente para implementar CSS em um site (\u00e9 mais f\u00e1cil acompanhar e implementar o estilo de um site a partir de um arquivo CSS dedicado), enquanto as folhas de estilo internas e o estilo online pode ser usados \u200b\u200bem um caso por caso, quando mudan\u00e7as de estilo individuais precisam ser feitas.<\/p>\n\n\n\n

Portanto, se o HTML \u00e9 a base, as molduras, as paredes e as vigas que d\u00e3o suporte ao seu site, considere CSS a cor da pintura, os estilos das janelas e o paisagismo que surgir\u00e3o posteriormente. Voc\u00ea n\u00e3o pode chegar a lugar nenhum sem colocar essa base primeiro, mas – ap\u00f3s fazer isso – voc\u00ea vai querer prosseguir com algum estilo, e CSS \u00e9 o ingresso para liberar o seu decorador interno.<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Lembra-se do HTML (Hypertext Markup Language)? A linguagem de codifica\u00e7\u00e3o que serve de base para todo o desenvolvimento web? Bem, se HTML \u00e9 a primeira linguagem que voc\u00ea vai querer aprender quando estiver interessado em construir sites, o seu primo CSS \u00e9 o segundo logo. O que \u00e9 CSS? E como isso se relaciona com o HMTL? CSS significa Cascading Style Sheets, com \u00eanfase em “Style”. Enquanto o HTML \u00e9 usado para estruturar um documento da web (definindo coisas como manchetes e par\u00e1grafos e permitindo que voc\u00ea incorpore imagens, v\u00eddeo e outras \u201cmedias\u201d), CSS vem e espec\u00edfica o estilo do\u2026<\/p>\n","protected":false},"author":2,"featured_media":337,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39],"tags":[],"class_list":["post-334","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":5}},"yoast_head":"\nO que \u00e9 CSS? E como isso se relaciona com o HMTL? - Blog Oficial da MozDomains<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mozdomains.com\/blog\/pt\/programacao\/css\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"O que \u00e9 CSS? E como isso se relaciona com o HMTL? - Blog Oficial da MozDomains\" \/>\n<meta property=\"og:description\" content=\"Lembra-se do HTML (Hypertext Markup Language)? A linguagem de codifica\u00e7\u00e3o que serve de base para todo o desenvolvimento web? Bem, se HTML \u00e9 a primeira linguagem que voc\u00ea vai querer aprender quando estiver interessado em construir sites, o seu primo CSS \u00e9 o segundo logo. O que \u00e9 CSS? E como isso se relaciona com o HMTL? CSS significa Cascading Style Sheets, com \u00eanfase em “Style”. Enquanto o HTML \u00e9 usado para estruturar um documento da web (definindo coisas como manchetes e par\u00e1grafos e permitindo que voc\u00ea incorpore imagens, v\u00eddeo e outras \u201cmedias\u201d), CSS vem e espec\u00edfica o estilo do\u2026\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mozdomains.com\/blog\/pt\/programacao\/css\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Oficial da MozDomains\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/MozDomains\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/hackermoz\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-24T07:50:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-24T08:01:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.mozdomains.com\/blog\/pt\/wp-content\/uploads\/2020\/11\/mika-baumeister-J5yoGZLdpSI-unsplash-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1923\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Momed Jussub\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mozdomains\" \/>\n<meta name=\"twitter:site\" content=\"@mozdomains\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Momed Jussub\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/programacao\\\/css\\\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/programacao\\\/css\\\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\\\/\"},\"author\":{\"name\":\"Momed Jussub\",\"@id\":\"\\\/#\\\/schema\\\/person\\\/8f0969d3db48b52c96d9fabd348dbe7c\"},\"headline\":\"O que \u00e9 CSS? E como isso se relaciona com o HMTL?\",\"datePublished\":\"2020-11-24T07:50:07+00:00\",\"dateModified\":\"2020-11-24T08:01:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/programacao\\\/css\\\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\\\/\"},\"wordCount\":924,\"commentCount\":1,\"publisher\":{\"@id\":\"\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/programacao\\\/css\\\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/mika-baumeister-J5yoGZLdpSI-unsplash-scaled.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/programacao\\\/css\\\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/programacao\\\/css\\\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\\\/\",\"url\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/programacao\\\/css\\\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\\\/\",\"name\":\"O que \u00e9 CSS? E como isso se relaciona com o HMTL? - Blog Oficial da MozDomains\",\"isPartOf\":{\"@id\":\"\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/programacao\\\/css\\\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/programacao\\\/css\\\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/mika-baumeister-J5yoGZLdpSI-unsplash-scaled.jpg\",\"datePublished\":\"2020-11-24T07:50:07+00:00\",\"dateModified\":\"2020-11-24T08:01:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/programacao\\\/css\\\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\\\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/programacao\\\/css\\\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/programacao\\\/css\\\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/mika-baumeister-J5yoGZLdpSI-unsplash-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/mika-baumeister-J5yoGZLdpSI-unsplash-scaled.jpg\",\"width\":2560,\"height\":1923},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/programacao\\\/css\\\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"O que \u00e9 CSS? E como isso se relaciona com o HMTL?\"}]},{\"@type\":\"WebSite\",\"@id\":\"\\\/#website\",\"url\":\"\\\/\",\"name\":\"Blog Oficial da MozDomains\",\"description\":\"Dicas e Tutoriais\",\"publisher\":{\"@id\":\"\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"\\\/#organization\",\"name\":\"MozDomains\",\"url\":\"\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/wp-content\\\/uploads\\\/2018\\\/08\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/wp-content\\\/uploads\\\/2018\\\/08\\\/logo.png\",\"width\":270,\"height\":63,\"caption\":\"MozDomains\"},\"image\":{\"@id\":\"\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/MozDomains\\\/\",\"https:\\\/\\\/x.com\\\/mozdomains\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/mozdomains\"]},{\"@type\":\"Person\",\"@id\":\"\\\/#\\\/schema\\\/person\\\/8f0969d3db48b52c96d9fabd348dbe7c\",\"name\":\"Momed Jussub\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/wp-content\\\/litespeed\\\/avatar\\\/28674fdd1e00d7f5f874e31e914df50c.jpg?ver=1775322638\",\"url\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/wp-content\\\/litespeed\\\/avatar\\\/28674fdd1e00d7f5f874e31e914df50c.jpg?ver=1775322638\",\"contentUrl\":\"https:\\\/\\\/www.mozdomains.com\\\/blog\\\/pt\\\/wp-content\\\/litespeed\\\/avatar\\\/28674fdd1e00d7f5f874e31e914df50c.jpg?ver=1775322638\",\"caption\":\"Momed Jussub\"},\"description\":\"Engenheiro de Redes (Cisco, Mikrotik, Juniper, Huawei, Ubiquiti, Fortigate, pfSense, Palo Alto), Engenheiro de CFTV, Engenheiro de IPTV, Espelicista em Virtualiza\u00e7\u00e3o OpenVZ, XEN , KVM e HyperV, Especialista em Redes Opticas, Administrador de Sistema Windows \\\/ Linux, PenTester, Desenvolvedor Full Stack (HTML, CSS3, PHP, C# Desktop App , C# ASP.NET, MySQL, MSSQL) e Escritor.\",\"sameAs\":[\"https:\\\/\\\/www.mozdomains.com\",\"https:\\\/\\\/www.facebook.com\\\/hackermoz\\\/\",\"http:\\\/\\\/instagram.com\\\/momedjussub\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/momedjussub\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"O que \u00e9 CSS? E como isso se relaciona com o HMTL? - Blog Oficial da MozDomains","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:\/\/www.mozdomains.com\/blog\/pt\/programacao\/css\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\/","og_locale":"pt_PT","og_type":"article","og_title":"O que \u00e9 CSS? E como isso se relaciona com o HMTL? - Blog Oficial da MozDomains","og_description":"Lembra-se do HTML (Hypertext Markup Language)? A linguagem de codifica\u00e7\u00e3o que serve de base para todo o desenvolvimento web? Bem, se HTML \u00e9 a primeira linguagem que voc\u00ea vai querer aprender quando estiver interessado em construir sites, o seu primo CSS \u00e9 o segundo logo. O que \u00e9 CSS? E como isso se relaciona com o HMTL? CSS significa Cascading Style Sheets, com \u00eanfase em “Style”. Enquanto o HTML \u00e9 usado para estruturar um documento da web (definindo coisas como manchetes e par\u00e1grafos e permitindo que voc\u00ea incorpore imagens, v\u00eddeo e outras \u201cmedias\u201d), CSS vem e espec\u00edfica o estilo do\u2026","og_url":"https:\/\/www.mozdomains.com\/blog\/pt\/programacao\/css\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\/","og_site_name":"Blog Oficial da MozDomains","article_publisher":"https:\/\/www.facebook.com\/MozDomains\/","article_author":"https:\/\/www.facebook.com\/hackermoz\/","article_published_time":"2020-11-24T07:50:07+00:00","article_modified_time":"2020-11-24T08:01:17+00:00","og_image":[{"width":2560,"height":1923,"url":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-content\/uploads\/2020\/11\/mika-baumeister-J5yoGZLdpSI-unsplash-scaled.jpg","type":"image\/jpeg"}],"author":"Momed Jussub","twitter_card":"summary_large_image","twitter_creator":"@mozdomains","twitter_site":"@mozdomains","twitter_misc":{"Escrito por":"Momed Jussub","Tempo estimado de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.mozdomains.com\/blog\/pt\/programacao\/css\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\/#article","isPartOf":{"@id":"https:\/\/www.mozdomains.com\/blog\/pt\/programacao\/css\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\/"},"author":{"name":"Momed Jussub","@id":"\/#\/schema\/person\/8f0969d3db48b52c96d9fabd348dbe7c"},"headline":"O que \u00e9 CSS? E como isso se relaciona com o HMTL?","datePublished":"2020-11-24T07:50:07+00:00","dateModified":"2020-11-24T08:01:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.mozdomains.com\/blog\/pt\/programacao\/css\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\/"},"wordCount":924,"commentCount":1,"publisher":{"@id":"\/#organization"},"image":{"@id":"https:\/\/www.mozdomains.com\/blog\/pt\/programacao\/css\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-content\/uploads\/2020\/11\/mika-baumeister-J5yoGZLdpSI-unsplash-scaled.jpg","articleSection":["CSS"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.mozdomains.com\/blog\/pt\/programacao\/css\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.mozdomains.com\/blog\/pt\/programacao\/css\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\/","url":"https:\/\/www.mozdomains.com\/blog\/pt\/programacao\/css\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\/","name":"O que \u00e9 CSS? E como isso se relaciona com o HMTL? - Blog Oficial da MozDomains","isPartOf":{"@id":"\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mozdomains.com\/blog\/pt\/programacao\/css\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\/#primaryimage"},"image":{"@id":"https:\/\/www.mozdomains.com\/blog\/pt\/programacao\/css\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-content\/uploads\/2020\/11\/mika-baumeister-J5yoGZLdpSI-unsplash-scaled.jpg","datePublished":"2020-11-24T07:50:07+00:00","dateModified":"2020-11-24T08:01:17+00:00","breadcrumb":{"@id":"https:\/\/www.mozdomains.com\/blog\/pt\/programacao\/css\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mozdomains.com\/blog\/pt\/programacao\/css\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.mozdomains.com\/blog\/pt\/programacao\/css\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\/#primaryimage","url":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-content\/uploads\/2020\/11\/mika-baumeister-J5yoGZLdpSI-unsplash-scaled.jpg","contentUrl":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-content\/uploads\/2020\/11\/mika-baumeister-J5yoGZLdpSI-unsplash-scaled.jpg","width":2560,"height":1923},{"@type":"BreadcrumbList","@id":"https:\/\/www.mozdomains.com\/blog\/pt\/programacao\/css\/o-que-e-css-e-como-isso-se-relaciona-com-o-hmtl\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home"},{"@type":"ListItem","position":2,"name":"O que \u00e9 CSS? E como isso se relaciona com o HMTL?"}]},{"@type":"WebSite","@id":"\/#website","url":"\/","name":"Blog Oficial da MozDomains","description":"Dicas e Tutoriais","publisher":{"@id":"\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"\/#organization","name":"MozDomains","url":"\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"\/#\/schema\/logo\/image\/","url":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-content\/uploads\/2018\/08\/logo.png","contentUrl":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-content\/uploads\/2018\/08\/logo.png","width":270,"height":63,"caption":"MozDomains"},"image":{"@id":"\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/MozDomains\/","https:\/\/x.com\/mozdomains","https:\/\/www.youtube.com\/user\/mozdomains"]},{"@type":"Person","@id":"\/#\/schema\/person\/8f0969d3db48b52c96d9fabd348dbe7c","name":"Momed Jussub","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-content\/litespeed\/avatar\/28674fdd1e00d7f5f874e31e914df50c.jpg?ver=1775322638","url":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-content\/litespeed\/avatar\/28674fdd1e00d7f5f874e31e914df50c.jpg?ver=1775322638","contentUrl":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-content\/litespeed\/avatar\/28674fdd1e00d7f5f874e31e914df50c.jpg?ver=1775322638","caption":"Momed Jussub"},"description":"Engenheiro de Redes (Cisco, Mikrotik, Juniper, Huawei, Ubiquiti, Fortigate, pfSense, Palo Alto), Engenheiro de CFTV, Engenheiro de IPTV, Espelicista em Virtualiza\u00e7\u00e3o OpenVZ, XEN , KVM e HyperV, Especialista em Redes Opticas, Administrador de Sistema Windows \/ Linux, PenTester, Desenvolvedor Full Stack (HTML, CSS3, PHP, C# Desktop App , C# ASP.NET, MySQL, MSSQL) e Escritor.","sameAs":["https:\/\/www.mozdomains.com","https:\/\/www.facebook.com\/hackermoz\/","http:\/\/instagram.com\/momedjussub","https:\/\/www.linkedin.com\/in\/momedjussub"]}]}},"_links":{"self":[{"href":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-json\/wp\/v2\/posts\/334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-json\/wp\/v2\/comments?post=334"}],"version-history":[{"count":3,"href":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-json\/wp\/v2\/posts\/334\/revisions"}],"predecessor-version":[{"id":339,"href":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-json\/wp\/v2\/posts\/334\/revisions\/339"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-json\/wp\/v2\/media\/337"}],"wp:attachment":[{"href":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-json\/wp\/v2\/media?parent=334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-json\/wp\/v2\/categories?post=334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mozdomains.com\/blog\/pt\/wp-json\/wp\/v2\/tags?post=334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}