Quando um navegador l\u00ea uma folha de estilos, ele formata o documento HTML de acordo com as informa\u00e7\u00f5es na folha de estilos.<\/p>\n
Existem tr\u00eas maneiras de inserir uma folha de estilos:<\/strong><\/p>\n CSS externo; Com uma folha de estilos externa, voc\u00ea pode alterar a apar\u00eancia de um site inteiro alterando apenas um arquivo!<\/p>\n Cada p\u00e1gina HTML deve incluir uma refer\u00eancia ao arquivo da folha de estilos externa dentro do elemento Exemplo<\/strong> Veja acima que foi referenciado o href=”mystyle.css”<\/strong><\/p>\n Ent\u00e3o o css \u00e9 externo.<\/p>\n O arquivo style \u00e9 assim<\/p>\n Uma folha de estilo interna pode ser usada se uma \u00fanica p\u00e1gina HTML tiver um estilo exclusivo.<\/p>\n O estilo interno \u00e9 definido dentro do elemento Exemplo Exemplo:<\/p>\n CSS interno<\/strong> O estilo interno \u00e9 definido dentro do elemento <style>, dentro da se\u00e7\u00e3o principal.<\/p>\n Exemplo<\/strong> Dica: Um estilo embutido perde muitas das vantagens de uma folha de estilos (misturando conte\u00fado com apresenta\u00e7\u00e3o). Use este m\u00e9todo com modera\u00e7\u00e3o.<\/span><\/p>\n V\u00e1rias folhas de estilo<\/strong> Ordem em cascata<\/strong> Todos os estilos em uma p\u00e1gina ser\u00e3o “cascateados” em uma nova folha de estilos “virtual” pelas seguintes regras, onde o n\u00famero um tem a maior prioridade:<\/p>\n . Estilo embutido (dentro de um elemento HTML) <\/p>\n
\nCSS interno;
\nCSS embutido;<\/p><\/blockquote>\nCSS externo<\/h2>\n
<link><\/code>, dentro da se\u00e7\u00e3o principal.<\/p>\n
\nOs estilos externos s\u00e3o definidos no elemento <link><\/code>, dentro da se\u00e7\u00e3o <head><\/code> de uma p\u00e1gina HTML:<\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"mystyle.css\">\r\n<\/head>\r\n<body>\r\n\r\n<h1>This is a heading<\/h1>\r\n<p>This is a paragraph.<\/p>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
body {\r\n background-color: lightblue;\r\n}\r\n\r\nh1 {\r\n color: navy;\r\n margin-left: 20px;\r\n}<\/pre>\nCSS interno<\/h2>\n
<style><\/code>, dentro da se\u00e7\u00e3o principal.<\/p>\n
\nOs estilos internos s\u00e3o definidos dentro do elemento <style><\/code>, dentro da se\u00e7\u00e3o <head><\/code> de uma p\u00e1gina HTML:<\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody {\r\n background-color: linen;\r\n}\r\n\r\nh1 {\r\n color: maroon;\r\n margin-left: 40px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>This is a heading<\/h1>\r\n<p>This is a paragraph.<\/p>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
<\/center>\n
\nUma folha de estilo interna pode ser usada se uma \u00fanica p\u00e1gina HTML tiver um estilo exclusivo.<\/p>\n
\nOs estilos internos s\u00e3o definidos dentro do elemento <style>, dentro da se\u00e7\u00e3o <head> de uma p\u00e1gina HTML:<\/p>\n<!DOCTYPE html>\r\n<html>\r\n<body>\r\n\r\n<h1 style=\"color:blue;text-align:center;\">This is a heading<\/h1>\r\n<p style=\"color:red;\">This is a paragraph.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\n
\nSe algumas propriedades foram definidas para o mesmo seletor (elemento) em diferentes folhas de estilo, o valor da \u00faltima folha de estilo de leitura ser\u00e1 usado.<\/p>\n
\nQue estilo ser\u00e1 usado quando houver mais de um estilo especificado para um elemento HTML?<\/p>\n
\n. Folhas de estilo externas e internas (na se\u00e7\u00e3o principal)
\n. Padr\u00e3o do navegador
\n. Portanto, um estilo embutido tem a maior prioridade e substituir\u00e1 os estilos externos e internos e os padr\u00f5es do navegador.<\/p>\n