Meta tags:
description=Aprenda a adicionar CSS a elementos HTML de 3 formas, estilize-os com diferentes propriedades CSS e veja exemplos práticos.;

Headings (most frequently used words):

css, exemplo, de, do, atributo, da, propriedade, inline, interno, fontes, cores, padding, id, class, estilos, html, prioridade, em, cascata, externo, borda, margem, prática, folha, estilo, externa, border, margin,

Text of the page (most frequently used words):
html (92), css (56), the (39), title (28), style (27), head (23), body (22), text (22), svg (19), lorem (17), ipsum (17), atributo (16), elemento (16), aprender (15), web (15), for (15), use (15), para (14), #inline (14), lipsum (14), sometimes (14), known (14), dummy (14), used (14), laying (14), out (14), print (14), graphic (14), designs (14), passage (14), attributed (14), unknown (14), typesetter (14), 15th (14), century (14), who (14), thought (14), have (14), scrambled (14), parts (14), cicero (14), finibus (14), bonorum (14), malorum (14), type (14), specimen (14), book (14), font (13), color (13), estilo (12), uma (12), você (12), mesmo (12), exemplo (12), define (11), propriedade (11), estilos (10), elementos (10), copiar (10), doctype (10), arquivo (9), experimente (9), size (9), document (9), canvas (9), interno (8), como (8), pode (8), página (8), w3docs (7), class (7), padding (7), folha (7), externa (7), border (7), texto (7), cor (6), único (6), introdução (6), tags (6), prática (5), externo (5), vermelho (5), dentro (5), heading (5), com (5), html5 (5), formatter (5), todos (4), code (4), generator (4), cores (4), prioridade (4), azul (4), parágrafo (4), são (4), formas (4), adicionar (4), por (4), ele (4), atributos (4), json (3), encoder (3), editor (3), ferramentas (3), quizzes (3), exercícios (3), php (3), javascript (3), borda (3), fontes (3), cascata (3), qual (3), regra (3), tag (3), usando (3), ser (3), várias (3), estilizar (3), seleciona (3), large (3), não (3), margin (3), especifica (3), red (3), family (3), background (3), ela (3), styles (3), link (3), mais (3), templates (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), idioma (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), livros (2), exemplos (2), snippets (2), margem (2), this (2), page (2), caminhos (2), scripts (2), verificar (2), primeiro (2), nenhum (2), conflito (2), folhas (2), externas (2), maior (2), prevalece (2), dos (2), seção (2), quais (2), documento (2), segundo (2), artigo (2), powderblue (2), mesma (2), classe (2), ter (2), classes (2), isso (2), forma (2), deve (2), dashed (2), espaço (2), serif (2), helvetica (2), que (2), yellow (2), vinculado (2), aparência (2), href (2), páginas (2), site (2), inteiro (2), única (2), cada (2), ordem (2), mas (2), métodos (2), layout (2), accept (2), dir (2), formulários (2), referência (2), tutorial (2), imagens (2), url (2), http (2), iso (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, política, privacidade, contato, sobre, empresa, try, tutoriais, gratuitos, desde, 2014, next, previous, yes, was, helpful, depende, carrega, torna, inválida, sempre, substituem, têm, adicionando, vinculando, inset, aplicada, qualquer, número, faz, das, ferramenta, ideal, grupo, ponto, reutilizável, groove, exclusivo, valor, dois, podem, compartilhar, cerquilha, 090fce, cria, redor, 008022, espaçamento, entre, dotted, valores, quatro, lados, 150, new, roman, 666666, 200, sans, arial, neue, 008000, atrás, próprio, note, fonte, controla, plano, tamanho, tipo, letra, conteúdo, contém, regras, conter, código, salvo, extensão, acima, poderia, esta, stylesheet, rel, usar, adicione, aponta, caminho, mudar, alterando, apenas, definido, paragraph, usage, abaixo, vermelha, aplica, específico, usa, vejamos, portanto, será, sinalizador, substituir, essa, moderação, saiba, important, quando, visa, resolve, geral, quanto, próximo, declarado, sua, especificidade, origem, três, equilibra, conveniência, abrangência, rápidos, aplicam, internos, cobrem, abordagem, recomendada, projetos, reais, pois, armazenado, cache, pelo, navegador, separado, colocado, adicionado, diretamente, economiza, muito, trabalho, controlar, tempo, usado, determina, aparecem, tela, papel, outros, meios, aprenda, estilize, diferentes, propriedades, veja, práticos, charset, checked, autoplay, action, accesskey, colspan, defer, autofocus, autocomplete, draggable, download, disabled, coords, controls, contenteditable, content, async, alt, attribute, reference, forms, vídeos, youtube, multimídia, media, obsoletos, attributes, gradiente, radial, lineargradient, sombras, projetadas, efeitos, desfoque, aos, filtros, stroking, path, polyline, polygon, linha, elipse, círculo, retângulo, gradientes, coordenadas, desenhando, xmp, wbr, video, var, track, time, thead, tfoot, textarea, template, tbody, table, sup, summary, sub, strong, strike, span, spacer, source, small, select, section, script, samp, ruby, rtc, progress, pre, picture, plaintext, param, output, option, optgroup, object, noscript, noframes, nobr, nav, meter, meta, menuitem, menu, marquee, mark, map, main, legend, label, keygen, kbd, isindex, ins, input, img, iframe, hgroup, header, frameset, frame, form, footer, figure, figcaption, fieldset, embed, div, dialog, dfn, details, del, datalist, data, colgroup, col, cite, center, caption, button, blockquote, blink, big, bdo, bdi, basefont, base, audio, aside, article, area, applet, address, acronym, abbr, evento, globais, obsoletas, xhtml, tabela, tipos, mime, mensagens, status, atalhos, teclado, entidades, codificação, utf, códigos, 8859, ascii, conjuntos, caracteres, references, migração, suporte, navegadores, áudio, vídeo, semânticos, computercode, blocos, tabelas, comentários, listas, links, formatação, títulos, básicas, editores, basics, entrar, pesquisar, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
estilos html css w3docs w3docs livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos quizzes exercícios snippets ferramentas general tools html editor password generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender html html basics introdução ao html editores e ferramentas elementos html tags básicas do html atributos html títulos html formatação html links html listas html cores em html comentários html tabelas html blocos html scripts html estilos html css caminhos de arquivo html html computercode html templates templates de layout templates de formulários html 5 introdução ao html5 tags html5 elementos semânticos áudio vídeo suporte a navegadores html5 migração para html5 html references conjuntos de caracteres ascii iso 8859 1 códigos de idioma iso codificação utf 8 entidades html atalhos de teclado métodos http imagens html mensagens de status http tipos mime tabela de tags html xhtml html url html tags tags obsoletas atributos globais html atributos de evento tags html doctype a abbr acronym address applet area article aside audio b base basefont bdi bdo big blink blockquote body br button canvas caption center cite code col colgroup data datalist dd del details dfn dialog dir div dl dt em embed fieldset figcaption figure font footer form frame frameset h1 h6 head header hgroup hr html i iframe img input ins isindex kbd keygen label legend li link main map mark marquee menu menuitem meta meter nav nobr noframes noscript object ol optgroup option output p param plaintext picture pre progress q rb rp rt rtc ruby s samp script section select small source spacer span strike strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track tt u ul var video wbr xmp canvas tutorial introdução ao canvas desenhando no canvas coordenadas do canvas gradientes no canvas texto no canvas imagens no canvas referência do canvas svg tutorial introdução ao svg svg no html5 retângulo svg círculo svg svg elipse linha svg svg polygon svg polyline svg path svg text svg stroking introdução aos filtros svg efeitos de desfoque svg sombras projetadas svg svg lineargradient gradiente radial svg referência svg html attributes atributos obsoletos atributo class do html atributo id do html html media html multimídia vídeos do youtube em html html forms formulários html html attribute reference alt async accept content contenteditable controls coords disabled download draggable autocomplete autofocus defer dir colspan accesskey action autoplay checked accept charset estilos html css aprenda a adicionar css a elementos html de 3 formas estilize os com diferentes propriedades css e veja exemplos práticos css é usado para estilizar html ele determina como os elementos html aparecem na tela no papel ou em outros meios css economiza muito trabalho ele pode controlar o layout de várias páginas ao mesmo tempo você pode adicionar css a elementos html de 3 formas inline o atributo style é adicionado diretamente a um elemento html interno um elemento style é colocado na seção head da página externo um arquivo css separado é vinculado à página por que três métodos cada um equilibra conveniência e abrangência estilos inline são rápidos mas se aplicam a um único elemento estilos internos cobrem uma única página folhas de estilo externas são a abordagem recomendada para projetos reais pois um único arquivo pode estilizar um site inteiro e é armazenado em cache pelo navegador prioridade em cascata quando mais de uma regra visa o mesmo elemento css resolve o conflito por especificidade e ordem de origem como regra geral quanto mais próximo um estilo for declarado do elemento maior a sua prioridade style inline style interno folha de estilo externa portanto se uma folha externa define um parágrafo como azul e um style inline o define como vermelho o parágrafo será vermelho o sinalizador important pode substituir essa ordem mas use o com moderação saiba mais na introdução ao css vejamos cada forma css inline um css inline aplica um estilo específico a um único elemento html para isso usa se o atributo style do elemento html no exemplo abaixo a cor do texto do elemento p é vermelha exemplo de css inline doctype html html head title title of the document title head body h1 usage of the inline css h1 p style color red the paragraph is red p body html copiar experimente você mesmo css interno um css interno especifica um estilo para uma única página html ele é definido no elemento head de uma página html dentro de uma tag style exemplo de css interno doctype html html head title title of the document title style body background color yellow h1 font size 30 px p font size 18 px style head body h1 lorem ipsum h1 p lorem ipsum or lipsum as it is sometimes known is dummy text used in laying out print graphic or web designs the passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of cicero s de finibus bonorum et malorum for use in a type specimen book p body html copiar experimente você mesmo css externo uma folha de estilo externa especifica o estilo para várias páginas html ela pode mudar a aparência de um site inteiro alterando apenas um arquivo para usar uma folha de estilo externa adicione um link para ela dentro do elemento head da página html o atributo href aponta para o caminho do arquivo css exemplo de folha de estilo css externa doctype html html head title title of the document title link rel stylesheet href styles css head body h1 lorem ipsum h1 p lorem ipsum or lipsum as it is sometimes known is dummy text used in laying out print graphic or web designs the passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of cicero s de finibus bonorum et malorum for use in a type specimen book p body html copiar experimente você mesmo o arquivo styles css vinculado contém as regras ele não pode conter nenhum código html e deve ser salvo com extensão css para a página acima o styles css poderia ter esta aparência body background color yellow h1 font size 30 px p font size 18 px copiar fontes e cores css a propriedade css font family define o tipo de letra do conteúdo de texto a propriedade css font size define o tamanho do texto a propriedade css color define a cor do próprio texto note que color não é uma propriedade de fonte ela controla a cor do texto em primeiro plano a propriedade css background color define a cor atrás do elemento exemplo de fontes e cores css doctype html html head title title of the document title style h1 color 008000 font family helvetica neue helvetica arial sans serif font size 200 p color 666666 font family new roman serif font size 150 style head body h1 lorem ipsum h1 p lorem ipsum or lipsum as it is sometimes known is dummy text used in laying out print graphic or web designs the passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of cicero s de finibus bonorum et malorum for use in a type specimen book p body html copiar experimente você mesmo borda css a propriedade css border define valores para os quatro lados de um elemento exemplo da propriedade border do css doctype html html head title title of the document title style p border 2 px dotted red style head body h1 heading h1 p lorem ipsum or lipsum as it is sometimes known is dummy text used in laying out print graphic or web designs the passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of cicero s de finibus bonorum et malorum for use in a type specimen book p p lorem ipsum or lipsum as it is sometimes known is dummy text used in laying out print graphic or web designs the passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of cicero s de finibus bonorum et malorum for use in a type specimen book p body html copiar experimente você mesmo padding css a propriedade css padding especifica o espaçamento interno espaço entre o texto e a borda exemplo da propriedade padding do css doctype html html head title title of the document title style p border 2 px dashed 008022 padding 50 px style head body h1 heading h1 p lorem ipsum or lipsum as it is sometimes known is dummy text used in laying out print graphic or web designs the passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of cicero s de finibus bonorum et malorum for use in a type specimen book p p lorem ipsum or lipsum as it is sometimes known is dummy text used in laying out print graphic or web designs the passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of cicero s de finibus bonorum et malorum for use in a type specimen book p body html copiar experimente você mesmo margem css a propriedade css margin cria espaço ao redor do elemento exemplo da propriedade margin do css doctype html html head title title of the document title style p border 2 px dashed 090fce margin 50 px style head body h1 heading h1 p lorem ipsum or lipsum as it is sometimes known is dummy text used in laying out print graphic or web designs the passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of cicero s de finibus bonorum et malorum for use in a type specimen book p p lorem ipsum or lipsum as it is sometimes known is dummy text used in laying out print graphic or web designs the passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of cicero s de finibus bonorum et malorum for use in a type specimen book p body html copiar experimente você mesmo o atributo id o atributo id seleciona um único elemento exclusivo um valor de id deve ser único na página dois elementos não podem compartilhar o mesmo id no css você o seleciona com um cerquilha por exemplo large text exemplo do atributo id doctype html html head title title of the document title style large text border 8 px groove powderblue font size 24 px padding 20 px style head body h1 heading h1 p id large text lorem ipsum or lipsum as it is sometimes known is dummy text used in laying out print graphic or web designs the passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of cicero s de finibus bonorum et malorum for use in a type specimen book p p lorem ipsum or lipsum as it is sometimes known is dummy text used in laying out print graphic or web designs the passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of cicero s de finibus bonorum et malorum for use in a type specimen book p body html copiar experimente você mesmo o atributo class o atributo class é reutilizável a mesma classe pode ser aplicada a qualquer número de elementos e um único elemento pode ter várias classes isso faz das classes a ferramenta ideal para estilizar um grupo de elementos da mesma forma no css você seleciona uma classe com um ponto por exemplo text exemplo do atributo class doctype html html head title title of the document title style text border 8 px inset powderblue font size 20 px padding 10 px style head body h1 heading h1 p class text lorem ipsum or lipsum as it is sometimes known is dummy text used in laying out print graphic or web designs the passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of cicero s de finibus bonorum et malorum for use in a type specimen book p p lorem ipsum or lipsum as it is sometimes known is dummy text used in laying out print graphic or web designs the passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of cicero s de finibus bonorum et malorum for use in a type specimen book p p class text lorem ipsum or lipsum as it is sometimes known is dummy text used in laying out print graphic or web designs the passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of cicero s de finibus bonorum et malorum for use in a type specimen book p body html copiar experimente você mesmo prática prática quais são as formas de adicionar estilos css a um documento html segundo o artigo do w3docs quais são as formas de adicionar estilos css a um documento html segundo o artigo do w3docs inline usando o atributo style dentro dos elementos html externo vinculando a um arquivo css externo interno usando um elemento style na seção head usando a tag css dentro dos elementos html adicionando estilos dentro da tag body verificar prática se uma folha de estilo externa define um parágrafo como azul e um atributo style inline o define como vermelho qual cor prevalece se uma folha de estilo externa define um parágrafo como azul e um atributo style inline o define como vermelho qual cor prevalece vermelho estilos inline têm a maior prioridade na cascata azul folhas de estilo externas sempre substituem estilos inline nenhum o conflito torna a regra inválida depende de qual arquivo carrega primeiro verificar was this page helpful yes no previous scripts html next caminhos de arquivo html on this page prioridade em cascata css inline css interno css externo fontes e cores css borda css padding css margem css o atributo id o atributo class prática w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ferramentas html editor password generator html encoder code diff json beautifier empresa sobre contato política de privacidade idioma english deutsch русский français español português italiano 2026 w3docs todos os direitos reservados feito para desenvolvedores