{"id":652,"date":"2022-06-03T15:18:28","date_gmt":"2022-06-03T18:18:28","guid":{"rendered":"https:\/\/fariart.com.br\/blog\/?p=652"},"modified":"2023-05-04T12:39:59","modified_gmt":"2023-05-04T15:39:59","slug":"conheca-as-3-formas-de-usar-css","status":"publish","type":"post","link":"https:\/\/fariart.com.br\/blog\/conheca-as-3-formas-de-usar-css\/","title":{"rendered":"Conhe\u00e7a as 3 formas de usar CSS"},"content":{"rendered":"\n

Quem j\u00e1 trabalha com HTML<\/strong>, sabe que uma hora ou outra vamos precisar do CSS<\/strong> para enriquecer visualmente nossa p\u00e1gina. Existem 3 formas de usar CSS<\/strong> no HTML e vamos apresent\u00e1-las em t\u00f3picos do mais f\u00e1cil pro mais complexo.<\/p>\n\n\n\n

\"Conhe\u00e7a
Foto: Tranmautritam<\/a><\/figcaption><\/figure>\n\n\n\n

Os 3 m\u00e9todos s\u00e3o:<\/p>\n\n\n\n

    \n
  1. inline<\/strong> CSS (com atributo no elemento)<\/li>\n\n\n\n
  2. internal<\/strong> CSS (dentro da tag head)<\/li>\n\n\n\n
  3. external<\/strong> CSS (Arquivo externo)<\/li>\n<\/ol>\n\n\n\n

    Mais simples: inline CSS<\/h2>\n\n\n\n

    Para aplicar o CSS inline<\/strong>, no pr\u00f3prio HTML, inserimos o atributo style<\/strong> no elemento<\/strong>.<\/p>\n\n\n\n

    <body style="background-color: black;">\n  <div style="background-color: gray; color: white; font-size:96px;">\n    Nome do site\n  <\/div>\n  <div style="color: white; font-size:16px;">\n    Texto aleat\u00f3rio de teste\n  <\/div>\n<\/body><\/code><\/pre><\/div>\n\n\n\n
    Por mais simples que seja a aplica\u00e7\u00e3o inline<\/strong>, voc\u00ea precisar conhecer, pelo menos, as propriedades b\u00e1sicas<\/strong> do CSS para saber o que fazer com o CSS. No post “CSS para iniciantes: Estruturando uma p\u00e1gina <\/a>“<\/strong>, n\u00f3s mostramos as principais propriedades<\/strong> do CSS e para que serve cada uma.<\/p>\n\n\n\n
    Mais c\u00f4modo: internal CSS<\/h2>\n\n\n\n
    O CSS interno<\/strong> tamb\u00e9m \u00e9 aplicado no pr\u00f3prio HTML, mas, dentro da tag head<\/strong>.<\/p>\n\n\n\n
    <head>\n  <style type="text\/css">\n    body { background-color: black; }\n\n    span { color:white; font-size:16px; }\n\n    .topo { background-color: gray; color: white; font-size:96px; }\n  <\/style>\n<\/head>\n<body>\n  <div class="topo">\n    Nome do site\n  <\/div>\n  <span>\n    Texto aleat\u00f3rio de teste\n  <\/span>\n<\/body><\/code><\/pre><\/div>\n\n\n\n
    Mais usado: external CSS<\/h2>\n\n\n\n
    Para usar o CSS externo<\/strong>, criaremos um arquivo CSS onde colocaremos toda as sintaxes<\/strong>, e deixaremos nosso HTML apenas para a estrutura.<\/p>\n\n\n\n
    Arquivo CSS:<\/h3>\n\n\n\n
    body { background-color: black; }\n\nspan { color:white; font-size:16px; }\n\n.topo { background-color: gray; color: white; font-size:96px; }<\/code><\/pre><\/div>\n\n\n\n
    Crie seu arquivo com extens\u00e3o “.css” e salve, de prefer\u00eancia, na mesma pasta que se encontra o seu arquivo html. No exemplo acima, salvei com o nome de “nome_do_arquivo.css”.<\/sup><\/p>\n\n\n\n
    Arquivo HTML:<\/h3>\n\n\n\n
    <html>\n  <head>\n    <link rel="stylesheet" type="text\/css" href="nome_do_arquivo.css" \/>\n  <\/head>\n  <body>\n    <div class="topo">\n      Nome do site\n    <\/div>\n    <span>\n      Texto aleat\u00f3rio de teste\n    <\/span>\n  <\/body>\n<\/html><\/code><\/pre><\/div>\n\n\n\n
    Tenha certeza que o nome e a localiza\u00e7\u00e3o do seu arquivo CSS est\u00e3o certos, caso contr\u00e1rio, o href n\u00e3o vai encontr\u00e1-lo. No exemplo acima, o link est\u00e1 buscando pelo arquivo “nome_do_arquivo.css” que se encontra na mesma pasta onde meu HTML est\u00e1 salvo.<\/sup><\/p>\n\n\n\n
    Qual \u00e9 a melhor forma de usar o CSS?<\/h2>\n\n\n\n
    Acredito que, por ser a mais usada, o CSS externo<\/strong> seja o mais adequado caso voc\u00ea queira optar por aprender uma \u00fanica forma. Mas n\u00e3o existe a “melhor forma” ou a “forma correta”. \u00c9 interessante voc\u00ea saber usar todas as 3 formas, afinal \u00e9, basicamente, tudo a mesma coisa.<\/p>\n\n\n\n
    \n\n\n\n
    Se o post te ajudou de alguma forma, n\u00e3o esque\u00e7a de seguir a @fariart<\/a><\/strong> na sua rede social favorita.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Quem j\u00e1 trabalha com HTML, sabe que uma hora ou outra vamos precisar do CSS para enriquecer visualmente nossa p\u00e1gina. Existem 3 formas de usar CSS no HTML e vamos apresent\u00e1-las em t\u00f3picos do mais f\u00e1cil pro mais complexo. Os 3 m\u00e9todos s\u00e3o: Mais simples: inline CSS Para aplicar o CSS inline, no pr\u00f3prio HTML, […]<\/p>\n","protected":false},"author":1,"featured_media":662,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[20,18],"tags":[83,87,15,14,84],"class_list":["post-652","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-desenvolvimento-web","category-desenvolvimento-web","tag-basico","tag-code","tag-css","tag-html","tag-tutorial"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/posts\/652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/comments?post=652"}],"version-history":[{"count":11,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/posts\/652\/revisions"}],"predecessor-version":[{"id":2231,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/posts\/652\/revisions\/2231"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/media\/662"}],"wp:attachment":[{"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/media?parent=652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/categories?post=652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/tags?post=652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}