<\/a><\/p>\n O CSS, ou folha de estilo em cascata<\/a><\/strong>, nada mais \u00e9 que uma linguagem que permite estilizar os elementos HTML<\/a> de nossas p\u00e1ginas. Praticamente todos os elementos visuais da nossa p\u00e1gina s\u00e3o editados atrav\u00e9s do CSS. Com ele podemos manipular, posi\u00e7\u00f5es, cores, fontes, e muitos outros recursos. O CSS foi desenvolvido pelo W3C (World Wide Web Consortium<\/a>) em 1996, pois o HTML<\/a> n\u00e3o foi projetado para ter tags que ajudariam a formatar a p\u00e1gina. Voc\u00ea deveria apenas escrever a marca\u00e7\u00e3o para o site.<\/p>\n Como os sites tinham diferentes fontes, cores e estilos, era um processo longo, doloroso e caro para reescrever o c\u00f3digo. Assim, o CSS foi criado pelo W3C para resolver este problema. O CSS pode ser utilizado de 3 maneiras, inline, externa ou interna.<\/p>\n Basta declarar a tag <style> no head e assim aplicar todo o estilos desejado, como no exemplo abaixo:<\/p>\n Geralmente, a maioria das p\u00e1ginas opta por este estilo de trabalho. Dessa forma, basta criar um arquivos com extens\u00e3o .css\u00a0<\/strong> e utilizar o\u00a0 link no head da p\u00e1gina:<\/p>\n Dessa forma, todo o estilo ser\u00e1 escrito no arquivo estilo.css<\/strong>.<\/p>\n Essa forma \u00e9 a menos recomendada, mas muitas vezes necess\u00e1ria. Basta utilizar o atributo style\u00a0<\/strong>no elemento HTML<\/a> como no exemplo abaixo:<\/p>\n <\/a><\/p>\n A folha de cascata em estilo funciona de forma simples, basta declarar o elemento e os estilos do mesmo. Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n Al\u00e9m de declarar pelo elemento, tamb\u00e9m pode-se utilizar a cascata atrav\u00e9s de classes, ids, e outros.<\/p>\n Vejamos o exemplo de HTML CSS Abaixo:<\/p>\n Veja que, apesar da div<\/a> receber como cor de fundo verde, o n\u00edvel de import\u00e2ncia do segundo div vermelho \u00e9 maior, o que far\u00e1 com que o estilo do mesmo prevale\u00e7a a esse exemplo:<\/p>\n Para poder modificar cores, existem duas formas: a cor da fonte a cor de fundo.<\/p>\n Para mudar a cor da fonte, basta chamar a propriedade color e sua respectiva cor. J\u00e1 a cor de fundo \u00e9 necess\u00e1rio chamar a propriedade background-color, e sua cor. Voc\u00ea pode ver mais sobre cores na tabela de cores<\/a> HTML.<\/p>\n Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n Dessa forma, teremos como resultado o exemplo abaixo:<\/p>\n Vamos dividir aqui, em padding<\/strong>, margin<\/strong> e border<\/strong>. O padding<\/strong> \u00e9 um espa\u00e7amento interno. O Border<\/strong> \u00e9 uma borda, j\u00e1 o margin<\/strong>, \u00e9 um espa\u00e7amento externo. Vejamos no exemplo abaixo para melhor compreens\u00e3o:<\/p>\n Dessa forma, o resultado ser\u00e1:<\/p>\n Para nossas fontes, podemos estilizar n\u00e3o s\u00f3 a cor, mas tamb\u00e9m seu tipo de alinhamento, assim como o tamanho, fam\u00edlia de fontes e outros. Vejamos os exemplos abaixo:<\/p>\n O resultado ser\u00e1 conforme o exemplo abaixo:<\/p>\n Apesar de apresentarmos algumas formas de uso do CSS, existem diversas outras formas. \u00c9 poss\u00edvel utilizar o CSS para fazer a completa edi\u00e7\u00e3o visual de uma p\u00e1gina. Portanto, o CSS \u00e9 uma ferramenta poderos\u00edssima utilizada em conjunto com o HTML<\/a>, e muitas vezes junto ao JavaScript.<\/p>\n Voc\u00ea pode estar vendo mais a respeito do CSS no manual do Mozilla\u00a0<\/a>ou ainda no tutorial de CSS do w3C Schools<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" O HTML CSS \u00e9 o principal ferramenta utilizado em conjuntos com as p\u00e1ginas HTML. Atrav\u00e9s do CSS, podemos estar estilizando todos os nossos elementos HTML, e manipulando o visual da nossa p\u00e1gina. Contudo, voc\u00ea sabe o que \u00e9 e como utilizar? Neste artigo veremos os seguintes t\u00f3picos: O que \u00e9 o HTML CSS Como surgiu […]<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3,4,213,229,6,164],"tags":[],"class_list":["post-4411","post","type-post","status-publish","format-standard","hentry","category-criar-sites","category-desenvolvedores","category-frontpage","category-outros","category-tutoriais","category-wordpress-tutoriais"],"yoast_head":"\nO que \u00e9 o HTML CSS<\/h2>\n
\n<\/a><\/p>\nComo surgiu o HTML CSS<\/h2>\n
\n<\/a><\/p>\nComo utilizar o HTML CSS<\/h2>\n
CSS Interno<\/h3>\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\np {\n color: red;\n text-align: center;\n} \n<\/style>\n<\/head>\n<body>\n\n<p>Hello World!<\/p>\n<p>Esses paragrafo ser\u00e3o estilizados com css<\/p>\n\n<\/body>\n<\/html><\/pre>\nCSS Externo<\/h3>\n
<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <title><\/title>\n <link rel=\"stylesheet\" type=\"text\/css\" href=\"estilo.css\">\n<\/head>\n<body>\n\n<\/body>\n<\/html><\/pre>\n
CSS Inline<\/h3>\n
<p style=\"color: pink\">Meu texto rosa<\/p><\/pre>\n
Como funciona o CSS<\/h2>\n
body{\n height: 100%;\n width: 100%;\n background-color: #CCC;\n}<\/pre>\n<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <title><\/title>\n <style>\n div{\n background-color: green\n }\n div.vermelho{\n background-color: red\n }\n <\/style>\n<\/head>\n<body>\n <div>\n <p>div normal<\/p>\n <\/div> \n <div class=\"vermelho\">\n <p>vermelho<\/p>\n <\/div>\n<\/body>\n<\/html><\/pre>\n![\"\"](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/09\/Sem-t\u00edtulo.jpg\")
\n<\/a><\/p>\nCores do CSS<\/h2>\n
<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <title><\/title>\n <style>\n div{\n background-color: red;\n }\n p{\n color: white;\n }\n <\/style>\n<\/head>\n<body>\n <div>\n <p>Cor branca de fundo vermelho<\/p>\n <\/div> \n<\/body>\n<\/html><\/pre>\n![\"exemplo](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/09\/Sem-t\u00edtulo2-e1567430744706.jpg\")
\n<\/a><\/p>\nEspa\u00e7amentos do CSS<\/h2>\n
<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <title><\/title>\n <style>\n div{\n width: 300px;\n background-color: blue;\n padding: 20px;\n }\n div.espaco{\n height: 20px;\n width: 200px; \n background-color: red;\n padding: 20px;\n border:1px solid white;\n margin: 20px;\n }\n p{\n color: white;\n }\n <\/style>\n<\/head>\n<body>\n <div>\n <div class=\"espaco\">\n <p>Cor branca<\/p>\n <\/div>\n <\/div> \n<\/body>\n<\/html><\/pre>\n![\"\"](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/09\/Sem-t\u00edtulo3.jpg\")
\n<\/a><\/p>\nPropriedades de fontes<\/h2>\n
<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <title><\/title>\n <style>\n p{\n text-transform: uppercase;\n text-align: center;\n width: 300px;\n font-size: 22px;\n font-family: verdana;\n }\n <\/style>\n<\/head>\n<body>\n <p>Meu texto<\/p> \n<\/body>\n<\/html><\/pre>\n![\"\"](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/09\/Sem-t\u00edtulo4.jpg\")
\n<\/a><\/p>\nOutras usualidades do CSS<\/h2>\n