{"id":709,"date":"2024-04-22T19:09:48","date_gmt":"2024-04-22T22:09:48","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=709"},"modified":"2025-11-07T10:43:26","modified_gmt":"2025-11-07T13:43:26","slug":"introducao-ao-css","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-css\/","title":{"rendered":"Introdu\u00e7\u00e3o ao CSS"},"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>Introdu\u00e7\u00e3o ao CSS<\/strong>: Voc\u00ea j\u00e1 se perguntou como o HTML, que \u00e9 apenas uma estrutura bruta de tags e texto, se transforma em uma p\u00e1gina visualmente atraente, colorida e organizada? A magia por tr\u00e1s da beleza da web \u00e9 o <strong>CSS<\/strong> (<em>Cascading Style Sheets<\/em>), a linguagem que define o estilo e a apresenta\u00e7\u00e3o visual.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Se o <strong>HTML<\/strong> \u00e9 a <strong>estrutura<\/strong> (o esqueleto de uma casa), o <strong>CSS<\/strong> \u00e9 a <strong>decora\u00e7\u00e3o<\/strong> (as cores, o mobili\u00e1rio e o design).<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Neste artigo, Introdu\u00e7\u00e3o ao CSS, vamos entender a necessidade do CSS, explorar sua estrutura b\u00e1sica e, crucialmente, aprender as tr\u00eas formas de conect\u00e1-lo ao seu documento HTML.<\/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. Por Que o CSS \u00e9 Essencial?<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O uso do CSS em vez de estilos embutidos diretamente no HTML trouxe benef\u00edcios fundamentais para o desenvolvimento web moderno:<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Princ\u00edpio<\/strong><\/td><td><strong>Benef\u00edcio Pr\u00e1tico<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Separa\u00e7\u00e3o de Preocupa\u00e7\u00f5es<\/strong><\/td><td>Isola a <strong>estrutura (HTML)<\/strong> da <strong>apresenta\u00e7\u00e3o (CSS)<\/strong>, tornando o c\u00f3digo mais limpo, f\u00e1cil de manter e de depurar.<\/td><\/tr><tr><td><strong>Reutiliza\u00e7\u00e3o e Efici\u00eancia<\/strong><\/td><td>Um \u00fanico arquivo CSS pode estilizar centenas de p\u00e1ginas HTML, garantindo consist\u00eancia visual e reduzindo o tempo de desenvolvimento.<\/td><\/tr><tr><td><strong>Responsividade<\/strong><\/td><td>Permite a cria\u00e7\u00e3o de layouts que se adaptam perfeitamente a qualquer dispositivo ou tamanho de tela (computadores, tablets, smartphones).<\/td><\/tr><tr><td><strong>Melhoria de Performance<\/strong><\/td><td>Arquivos de estilo externos s\u00e3o armazenados em cache pelo navegador, resultando em carregamentos de p\u00e1gina mais r\u00e1pidos para visitantes recorrentes.<\/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\">2. A Estrutura de uma Regra CSS<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Uma regra CSS \u00e9 a unidade b\u00e1sica de estilo. Ela \u00e9 composta por um <strong>Seletor<\/strong> e um bloco de <strong>Declara\u00e7\u00f5es<\/strong>:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Bloco de Regra CSS *\/\nseletor {\n  propriedade: valor; \/* Declara\u00e7\u00e3o 1 *\/\n  propriedade-2: valor-2; \/* Declara\u00e7\u00e3o 2 *\/\n}\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>Componente<\/strong><\/td><td><strong>Defini\u00e7\u00e3o<\/strong><\/td><td><strong>Exemplo no C\u00f3digo<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Seletor<\/strong><\/td><td>Indica a qual(is) elemento(s) HTML a regra deve ser aplicada.<\/td><td><code>p<\/code> (todos os par\u00e1grafos)<\/td><\/tr><tr><td><strong>Propriedade<\/strong><\/td><td>O atributo visual que voc\u00ea deseja alterar.<\/td><td><code>color<\/code>, <code>font-size<\/code><\/td><\/tr><tr><td><strong>Valor<\/strong><\/td><td>O efeito que voc\u00ea deseja aplicar \u00e0 propriedade.<\/td><td><code>blue<\/code>, <code>16px<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Exemplo:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n  color: #333; \/* Cor do texto *\/\n  text-align: center; \/* Alinhamento *\/\n}\n<\/code><\/pre>\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. Os Tr\u00eas Caminhos: Onde Escrever o CSS<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Para que o navegador entenda e aplique seus estilos, voc\u00ea deve conectar o c\u00f3digo CSS ao HTML. Existem tr\u00eas m\u00e9todos, cada um com um n\u00edvel diferente de prioridade (cascata):<\/p>\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\">A. \ud83d\udd17 1. CSS Externo (Melhor Pr\u00e1tica)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Onde:<\/strong> Arquivo <code>.css<\/code> separado (ex: <code>style.css<\/code>).<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Como Ligar:<\/strong> Usando a tag <code>&lt;link><\/code> dentro da se\u00e7\u00e3o <code>&lt;head><\/code> do HTML.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Vantagem:<\/strong> Total separa\u00e7\u00e3o de estrutura e estilo. Permite a reutiliza\u00e7\u00e3o em m\u00faltiplas p\u00e1ginas.<\/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=\"style.css\"&gt;\n&lt;\/head&gt;\n<\/code><\/pre>\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\udcdd 2. CSS Interno<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Onde:<\/strong> Dentro da tag <code>&lt;style><\/code> na se\u00e7\u00e3o <code>&lt;head><\/code> do HTML.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Vantagem:<\/strong> \u00datil para estilos espec\u00edficos de uma \u00fanica p\u00e1gina ou para testar rapidamente.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Desvantagem:<\/strong> Polui o HTML e n\u00e3o pode ser reutilizado.<\/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    body {\n      background-color: lightgray;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n<\/code><\/pre>\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 (Evitar)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Onde:<\/strong> Diretamente no atributo <code>style<\/code> de uma tag HTML.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Vantagem:<\/strong> M\u00e1xima especificidade (sobrescreve quase tudo).<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Desvantagem:<\/strong> Mistura HTML e CSS. N\u00e3o \u00e9 reutiliz\u00e1vel. Torna a manuten\u00e7\u00e3o um pesadelo.<\/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;p style=\"color: red; font-weight: bold;\"&gt;Este texto \u00e9 vermelho.&lt;\/p&gt;\n<\/code><\/pre>\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\">4. O Cora\u00e7\u00e3o do CSS: Cascata e Heran\u00e7a<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O nome <em>Cascading Style Sheets<\/em> (Folhas de Estilo em Cascata) n\u00e3o \u00e9 por acaso. Ele descreve dois comportamentos centrais:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Cascata:<\/strong> Define a ordem de prioridade. Se duas regras se aplicam ao mesmo elemento, a regra com maior <strong>Especificidade<\/strong> ou a \u00faltima regra declarada vence. (O CSS Inline sempre vence os demais).<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Heran\u00e7a:<\/strong> Muitas propriedades (como <code>color<\/code>, <code>font-family<\/code> e <code>font-size<\/code>) s\u00e3o automaticamente herdadas do elemento pai para seus filhos. Por exemplo, se voc\u00ea define a fonte no <code>&lt;body><\/code>, todos os par\u00e1grafos e t\u00edtulos herdar\u00e3o essa fonte, a menos que sejam explicitamente alterados.<\/li>\n<\/ul>\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\">5. Pr\u00f3ximos Passos: Dominando os Seletores<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O poder de estilizar elementos espec\u00edficos depende do seu dom\u00ednio sobre os <strong>Seletores CSS<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Seletor<\/strong><\/td><td><strong>Sintaxe<\/strong><\/td><td><strong>Exemplo<\/strong><\/td><td><strong>Aplica-se a&#8230;<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Elemento<\/strong><\/td><td><code>tag<\/code><\/td><td><code>p { ... }<\/code><\/td><td>Todos os elementos <code>&lt;p&gt;<\/code><\/td><\/tr><tr><td><strong>Classe<\/strong><\/td><td><code>.nome<\/code><\/td><td><code>.destaque { ... }<\/code><\/td><td>Todos os elementos com <code>class=\"destaque\"<\/code><\/td><\/tr><tr><td><strong>ID<\/strong><\/td><td><code>#nome<\/code><\/td><td><code>#cabecalho { ... }<\/code><\/td><td>O \u00daNICO elemento com <code>id=\"cabecalho\"<\/code><\/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 Introdu\u00e7\u00e3o ao CSS<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O CSS \u00e9 a chave para transformar um documento HTML funcional em uma experi\u00eancia visual envolvente. Ao come\u00e7ar a usar o <strong>CSS Externo<\/strong> como pr\u00e1tica padr\u00e3o, voc\u00ea garante um c\u00f3digo limpo e o poder de estilizar todo o seu site de maneira eficiente.<\/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>Introdu\u00e7\u00e3o ao CSS: Voc\u00ea j\u00e1 se perguntou como o HTML, que \u00e9 apenas uma estrutura&#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-709","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>Introdu\u00e7\u00e3o ao CSS - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"Introdu\u00e7\u00e3o ao CSS: Neste artigo, vamos entender porque usar CSS, entender sua estrutura, ver alguns exemplos e finalizamos com algumas ...\" \/>\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\/introducao-ao-css\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introdu\u00e7\u00e3o ao CSS - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"Introdu\u00e7\u00e3o ao CSS: Neste artigo, vamos entender porque usar CSS, entender sua estrutura, ver alguns exemplos e finalizamos com algumas ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-css\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-22T22:09:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-07T13:43:26+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=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-css\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"Introdu\u00e7\u00e3o ao CSS\",\"datePublished\":\"2024-04-22T22:09:48+00:00\",\"dateModified\":\"2025-11-07T13:43:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-css\\\/\"},\"wordCount\":717,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-css\\\/#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\\\/introducao-ao-css\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-css\\\/\",\"name\":\"Introdu\u00e7\u00e3o ao CSS - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"datePublished\":\"2024-04-22T22:09:48+00:00\",\"dateModified\":\"2025-11-07T13:43:26+00:00\",\"description\":\"Introdu\u00e7\u00e3o ao CSS: Neste artigo, vamos entender porque usar CSS, entender sua estrutura, ver alguns exemplos e finalizamos com algumas ...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-css\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-css\\\/#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\\\/introducao-ao-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introdu\u00e7\u00e3o ao CSS\"}]},{\"@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":"Introdu\u00e7\u00e3o ao CSS - BLOG THIAGO ROSSI","description":"Introdu\u00e7\u00e3o ao CSS: Neste artigo, vamos entender porque usar CSS, entender sua estrutura, ver alguns exemplos e finalizamos com algumas ...","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\/introducao-ao-css\/","og_locale":"pt_BR","og_type":"article","og_title":"Introdu\u00e7\u00e3o ao CSS - BLOG THIAGO ROSSI","og_description":"Introdu\u00e7\u00e3o ao CSS: Neste artigo, vamos entender porque usar CSS, entender sua estrutura, ver alguns exemplos e finalizamos com algumas ...","og_url":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-css\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-04-22T22:09:48+00:00","article_modified_time":"2025-11-07T13:43:26+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":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-css\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-css\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"Introdu\u00e7\u00e3o ao CSS","datePublished":"2024-04-22T22:09:48+00:00","dateModified":"2025-11-07T13:43:26+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-css\/"},"wordCount":717,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-css\/#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\/introducao-ao-css\/","url":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-css\/","name":"Introdu\u00e7\u00e3o ao CSS - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-css\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-css\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","datePublished":"2024-04-22T22:09:48+00:00","dateModified":"2025-11-07T13:43:26+00:00","description":"Introdu\u00e7\u00e3o ao CSS: Neste artigo, vamos entender porque usar CSS, entender sua estrutura, ver alguns exemplos e finalizamos com algumas ...","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-css\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/introducao-ao-css\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-css\/#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\/introducao-ao-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Introdu\u00e7\u00e3o ao CSS"}]},{"@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\/709","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=709"}],"version-history":[{"count":1,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/709\/revisions"}],"predecessor-version":[{"id":4376,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/709\/revisions\/4376"}],"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=709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}