{"id":713,"date":"2024-04-22T20:57:11","date_gmt":"2024-04-22T23:57:11","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=713"},"modified":"2025-11-07T11:07:13","modified_gmt":"2025-11-07T14:07:13","slug":"adicionando-css-no-html","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/adicionando-css-no-html\/","title":{"rendered":"Adicionando CSS no HTML"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Adicionando CSS no HTML<\/strong>: O CSS \u00e9 a alma visual da sua p\u00e1gina, mas para que ele funcione, o navegador precisa saber exatamente quais estilos aplicar a qual estrutura.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A pergunta &#8220;Como adicionar CSS ao HTML?&#8221; \u00e9 o primeiro passo pr\u00e1tico para todo desenvolvedor. Existem tr\u00eas m\u00e9todos principais de conex\u00e3o, e entender a <strong>prioridade<\/strong> entre eles \u00e9 fundamental para dominar a <em>Cascata<\/em>.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Neste artigo, exploraremos as tr\u00eas formas de integrar estilos CSS ao seu projeto web, definindo qual \u00e9 a melhor pr\u00e1tica para o desenvolvimento profissional.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">1. O Conceito de Prioridade (A Cascata em A\u00e7\u00e3o)<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">No CSS, as regras de estilo competem entre si. O m\u00e9todo de inclus\u00e3o tem um papel crucial nessa competi\u00e7\u00e3o: a prioridade.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A regra geral de prioridade (da menor para a maior) \u00e9:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>CSS Externo\/Interno<\/strong> (Menor prioridade)<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>CSS Interno\/Externo<\/strong> (Regras mais espec\u00edficas ou a \u00faltima declarada vence)<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>CSS Inline<\/strong> (Maior prioridade, pois est\u00e1 no elemento, sobrescreve os demais)<\/li>\n<\/ol>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Agora, vamos detalhar cada m\u00e9todo.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">2. M\u00e9todos de Inclus\u00e3o de CSS no HTML<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">A. \ud83d\udcdd 1. CSS Externo (A Pr\u00e1tica Profissional)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Este \u00e9 o m\u00e9todo <strong>altamente recomendado<\/strong> para a maioria dos projetos. O estilo \u00e9 definido em um arquivo separado, isolando completamente a apresenta\u00e7\u00e3o da estrutura.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>O que \u00e9:<\/strong> Um arquivo dedicado com a extens\u00e3o <code>.css<\/code> (ex: <code>styles.css<\/code>).<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Como Ligar:<\/strong> Usando a tag <strong><code>&lt;link><\/code><\/strong> dentro da se\u00e7\u00e3o <code>&lt;head><\/code> do HTML.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Sintaxe no HTML:<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n  &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;\/head&gt;\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Vantagens<\/strong><\/td><td><strong>Desvantagens<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Melhor Organiza\u00e7\u00e3o:<\/strong> Total separa\u00e7\u00e3o do c\u00f3digo.<\/td><td>Requer um arquivo adicional (passo extra).<\/td><\/tr><tr><td><strong>Reutiliza\u00e7\u00e3o:<\/strong> O mesmo <code>.css<\/code> pode estilizar v\u00e1rias p\u00e1ginas.<\/td><td><\/td><\/tr><tr><td><strong>Performance:<\/strong> O arquivo \u00e9 armazenado em <strong>cache<\/strong> pelo navegador, acelerando a navega\u00e7\u00e3o em p\u00e1ginas seguintes.<\/td><td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">B. \ud83d\udccc 2. CSS Interno (Estilos da P\u00e1gina)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Este m\u00e9todo \u00e9 ideal para estilos que se aplicam a uma <strong>\u00fanica p\u00e1gina<\/strong> e n\u00e3o ser\u00e3o reutilizados em outras partes do site.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>O que \u00e9:<\/strong> O estilo \u00e9 definido dentro da tag <strong><code>&lt;style><\/code><\/strong>.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Onde:<\/strong> Sempre dentro da se\u00e7\u00e3o <strong><code>&lt;head><\/code><\/strong> do documento HTML.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Sintaxe no HTML:<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n  &lt;style&gt;\n    \/* O seletor body aplica o estilo a toda a p\u00e1gina *\/\n    body {\n      font-family: 'Helvetica', sans-serif;\n    }\n    .destaque {\n      border: 2px solid orange;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Vantagens<\/strong><\/td><td><strong>Desvantagens<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Organiza\u00e7\u00e3o Moderada:<\/strong> Estilos agrupados no topo da p\u00e1gina.<\/td><td>N\u00e3o \u00e9 reutiliz\u00e1vel por outras p\u00e1ginas.<\/td><\/tr><tr><td><strong>R\u00e1pido para Testes:<\/strong> Bom para prototipagem ou estilos muito espec\u00edficos.<\/td><td>Polui a se\u00e7\u00e3o <code>&lt;head&gt;<\/code> do HTML.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">C. \ud83d\udcd0 3. CSS Inline (O M\u00e9todo de \u00daltimo Recurso)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Este m\u00e9todo aplica o estilo diretamente no elemento HTML. Possui a <strong>maior especificidade<\/strong> e \u00e9 o mais dif\u00edcil de manter.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>O que \u00e9:<\/strong> O estilo \u00e9 inserido no atributo <strong><code>style<\/code><\/strong> da tag.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Quando usar:<\/strong> Evite. Use apenas para sobrescrever algo com prioridade m\u00e1xima ou quando o estilo \u00e9 gerado dinamicamente por JavaScript.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Sintaxe no HTML:<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1 style=\"color: blue; text-align: center;\"&gt;T\u00edtulo Principal&lt;\/h1&gt;\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Vantagens<\/strong><\/td><td><strong>Desvantagens<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Maior Prioridade:<\/strong> Sobrescreve quase todas as outras regras.<\/td><td>Viola a separa\u00e7\u00e3o de conte\u00fado e estilo.<\/td><\/tr><tr><td>F\u00e1cil para estilos pontuais.<\/td><td><strong>Dificulta a Manuten\u00e7\u00e3o:<\/strong> Para mudar um estilo, voc\u00ea deve editar o HTML em todos os locais.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">3. Resumo Comparativo dos M\u00e9todos<\/h2>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>M\u00e9todo<\/strong><\/td><td><strong>Localiza\u00e7\u00e3o<\/strong><\/td><td><strong>Prioridade na Cascata<\/strong><\/td><td><strong>Uso Recomendado<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Externo<\/strong><\/td><td>Arquivo <code>.css<\/code> separado<\/td><td>M\u00e9dia<\/td><td><strong>Padr\u00e3o para Projetos<\/strong> (Organiza\u00e7\u00e3o, Cache)<\/td><\/tr><tr><td><strong>Interno<\/strong><\/td><td>Tag <code>&lt;style&gt;<\/code> no <code>&lt;head&gt;<\/code><\/td><td>M\u00e9dia<\/td><td>Estilos exclusivos de uma \u00fanica p\u00e1gina<\/td><\/tr><tr><td><strong>Inline<\/strong><\/td><td>Atributo <code>style<\/code> do elemento<\/td><td><strong>Mais Alta<\/strong><\/td><td>\u00daltimo recurso, estilos din\u00e2micos (JS)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\u2705 Conclus\u00e3o Adicionando CSS no HTML<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Dominar os m\u00e9todos de inclus\u00e3o de CSS \u00e9 o primeiro passo para o desenvolvimento front-end profissional. O <strong>CSS Externo<\/strong> deve ser sua escolha padr\u00e3o, pois ele promove a organiza\u00e7\u00e3o e o desempenho atrav\u00e9s do <em>cache<\/em>. Entender a hierarquia da Cascata garante que voc\u00ea saiba exatamente por que um estilo est\u00e1 ou n\u00e3o sendo aplicado.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Toda jornada tem um in\u00edcio, e o in\u00edcio para se tornar um desenvolvedor web \u00e9 dominar as seguintes tecnologias, que voc\u00ea encontra aqui mesmo:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/html\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp\" alt=\"HTML\" class=\"wp-image-600\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">HTML<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/css\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" alt=\"CSS\" class=\"wp-image-702\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">CSS<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/javascript\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.webp\" alt=\"Javascript\" class=\"wp-image-804\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">JavaScript<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">E se voc\u00ea gosta do nosso conte\u00fado, n\u00e3o deixe de contribuir adquirindo os servi\u00e7os e produtos dos nossos apoiadores e empresas que somos associados:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/hostinger.com.br\/?REFERRALCODE=1THIAGO62\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/03\/hostinger.png\" alt=\"Hospedagem Hostinger\" class=\"wp-image-92\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNDYlc\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/ofertas-amazon.webp\" alt=\"Ofertas Amazon\" class=\"wp-image-1308\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNKmt0\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/amazonprime.webp\" alt=\"Amazon Prime\" class=\"wp-image-1307\"\/><\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>Adicionando CSS no HTML: O CSS \u00e9 a alma visual da sua p\u00e1gina, mas para&#8230;<\/p>\n","protected":false},"author":1,"featured_media":702,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-713","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpcat-7-id"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Adicionando CSS no HTML - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"Adicionando CSS no HTML: Neste artigo, exploraremos as diferentes formas de integrar estilos CSS ao seu projeto web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thiagorossi.com.br\/blog\/adicionando-css-no-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adicionando CSS no HTML - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"Adicionando CSS no HTML: Neste artigo, exploraremos as diferentes formas de integrar estilos CSS ao seu projeto web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/adicionando-css-no-html\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-22T23:57:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-07T14:07:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"758\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Thiago Rossi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thiago Rossi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo 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:\\\/\\\/thiagorossi.com.br\\\/blog\\\/adicionando-css-no-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/adicionando-css-no-html\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"Adicionando CSS no HTML\",\"datePublished\":\"2024-04-22T23:57:11+00:00\",\"dateModified\":\"2025-11-07T14:07:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/adicionando-css-no-html\\\/\"},\"wordCount\":644,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/adicionando-css-no-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/adicionando-css-no-html\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/adicionando-css-no-html\\\/\",\"name\":\"Adicionando CSS no HTML - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/adicionando-css-no-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/adicionando-css-no-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"datePublished\":\"2024-04-22T23:57:11+00:00\",\"dateModified\":\"2025-11-07T14:07:13+00:00\",\"description\":\"Adicionando CSS no HTML: Neste artigo, exploraremos as diferentes formas de integrar estilos CSS ao seu projeto web.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/adicionando-css-no-html\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/adicionando-css-no-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/adicionando-css-no-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"width\":758,\"height\":426,\"caption\":\"CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/adicionando-css-no-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adicionando CSS no HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"name\":\"THIAGO ROSSI\",\"description\":\"Mais de 20 anos de experi\u00eancia no mercado de TI!\",\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"alternateName\":\"TR | CURSO WEB DEV\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\",\"name\":\"THIAGO ROSSI\",\"alternateName\":\"TR | CURSO WEB DEV\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"width\":300,\"height\":300,\"caption\":\"THIAGO ROSSI\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\",\"name\":\"Thiago Rossi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"caption\":\"Thiago Rossi\"},\"description\":\"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \\\"GDD \u2013 O Guia Definitivo\\\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.\",\"sameAs\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\",\"https:\\\/\\\/instagram.com\\\/thiagorossix86\",\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"],\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/author\\\/thiagorossi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adicionando CSS no HTML - BLOG THIAGO ROSSI","description":"Adicionando CSS no HTML: Neste artigo, exploraremos as diferentes formas de integrar estilos CSS ao seu projeto web.","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:\/\/thiagorossi.com.br\/blog\/adicionando-css-no-html\/","og_locale":"pt_BR","og_type":"article","og_title":"Adicionando CSS no HTML - BLOG THIAGO ROSSI","og_description":"Adicionando CSS no HTML: Neste artigo, exploraremos as diferentes formas de integrar estilos CSS ao seu projeto web.","og_url":"https:\/\/thiagorossi.com.br\/blog\/adicionando-css-no-html\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-04-22T23:57:11+00:00","article_modified_time":"2025-11-07T14:07:13+00:00","og_image":[{"width":758,"height":426,"url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","type":"image\/webp"}],"author":"Thiago Rossi","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Thiago Rossi","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thiagorossi.com.br\/blog\/adicionando-css-no-html\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/adicionando-css-no-html\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"Adicionando CSS no HTML","datePublished":"2024-04-22T23:57:11+00:00","dateModified":"2025-11-07T14:07:13+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/adicionando-css-no-html\/"},"wordCount":644,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/adicionando-css-no-html\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","articleSection":["CSS"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/thiagorossi.com.br\/blog\/adicionando-css-no-html\/","url":"https:\/\/thiagorossi.com.br\/blog\/adicionando-css-no-html\/","name":"Adicionando CSS no HTML - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/adicionando-css-no-html\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/adicionando-css-no-html\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","datePublished":"2024-04-22T23:57:11+00:00","dateModified":"2025-11-07T14:07:13+00:00","description":"Adicionando CSS no HTML: Neste artigo, exploraremos as diferentes formas de integrar estilos CSS ao seu projeto web.","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/adicionando-css-no-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/adicionando-css-no-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/adicionando-css-no-html\/#primaryimage","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","width":758,"height":426,"caption":"CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/thiagorossi.com.br\/blog\/adicionando-css-no-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Adicionando CSS no HTML"}]},{"@type":"WebSite","@id":"https:\/\/thiagorossi.com.br\/blog\/#website","url":"https:\/\/thiagorossi.com.br\/blog\/","name":"THIAGO ROSSI","description":"Mais de 20 anos de experi\u00eancia no mercado de TI!","publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"alternateName":"TR | CURSO WEB DEV","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thiagorossi.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/thiagorossi.com.br\/blog\/#organization","name":"THIAGO ROSSI","alternateName":"TR | CURSO WEB DEV","url":"https:\/\/thiagorossi.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","width":300,"height":300,"caption":"THIAGO ROSSI"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/linkedin.com\/in\/thiagox86"]},{"@type":"Person","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87","name":"Thiago Rossi","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","caption":"Thiago Rossi"},"description":"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \"GDD \u2013 O Guia Definitivo\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.","sameAs":["https:\/\/thiagorossi.com.br\/blog","https:\/\/instagram.com\/thiagorossix86","https:\/\/linkedin.com\/in\/thiagox86"],"url":"https:\/\/thiagorossi.com.br\/blog\/author\/thiagorossi\/"}]}},"_links":{"self":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/comments?post=713"}],"version-history":[{"count":2,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/713\/revisions"}],"predecessor-version":[{"id":4382,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/713\/revisions\/4382"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media\/702"}],"wp:attachment":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media?parent=713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}