Este é um post bem simples para blogueiros iniciantes em CSS. A folha de estilos é a parte do seu código que se refere à linguagem de estilo CSS (Cascading Style Sheets). Ela serve para mudar a aparência do HTML, que é o hipertexto elementar, o esqueleto de qualquer página web.
Ela pode vir dentro do arquivo HTML, entre as tags <style> e </style>:
body {background:#ffffff; color:#000000; font-family:Tahoma;}
p {color:#000066;}
h1 {font-family:Georgia;}
</style>
No Blogger, ela aparece entre as tags <b:skin> e </b:skin>:
Em um template do Wordpress a folha de estilos está em um arquivo separado chamado style.css. Alguns templates pode apresentar várias folhas de estilo com a extensão .css, assim como ocorre no Joomla, que geralmente tem como principais folhas de estilo os arquivos style.css e template.css.
A folha de estilos se chama “em cascata” porque a ordem das informações é muito importante. Se você diz p {color:#0000ff;} (Parágrafos, fiquem azuis!), mas abaixo diz p {color:#000000;} (Parágrafos, fiquem pretos!), a última ordem é a mais importante: os textos dos parágrafos vão ficar pretos. Esse é o efeito cascata.
Além da folha de estilos à qual temos acesso, o Blogger usa várias folhas de estilo invisíveis que a gente só fica sabendo que existem quando usa o modo desenvolvedor do navegador (tecla F12). Por causa disso, muitas vezes um elemento não obedece quando escolhemos uma formatação para ele, já que tem outra folha de estilos invisível nos desmandando. Nesse caso você pode usar a declaração !important antes do sinal de ponto e vírgula, assim os navegadores saberão que a sua ordem é prioridade em relação à de qualquer outra folha de estilos.
No post Como começar a estudar HTML e CSS eu mostrei um código que já tem uma folha de estilos dentro do código HTML, delimitado com a tag <style>. Podemos dividir aquele mesmo código em dois arquivos: um html e outro css.
Usando o bloco de notas ou programa similar, salve o seguinte código com o nome index.html. Lembre-se de escolher Salvar como e o tipo Todos os arquivos para o programa não salvar em txt automaticamente.
<head>
<title>Faça o bem mesmo assim :: Madre Teresa de Calcutá</title>
<link type='text/css' rel='stylesheet' href='estilo.css'/> </head>
<body>
<h1 style='text-align:center;'>Faça o bem mesmo assim</h1>
<p id='autor'><a href="http://pt.wikipedia.org/wiki/Madre_Teresa_de_Calcuta">Madre Teresa de Calcutá</a></p>
<p>As pessoas são irracionais, ilógicas e egocêntricas.<BR/>Ame-as mesmo assim.</p>
<p>Se você tem sucesso em suas realizações, ganhará falsos amigos e verdadeiros inimigos.<br/>Tenha sucesso mesmo assim.<p>
<p>O bem que você faz será esquecido amanhã.<BR/>Faça o bem mesmo assim.</p>
<p>A honestidade e a franqueza o tornaram vulnerável.<BR/>Seja honesto mesmo assim.</p>
<p>Aquilo que você levou anos para construir, pode ser destruído de um dia para o outro.<BR/>Construa mesmo assim.</p>
<p>Os pobres têm verdadeiramente necessidade de ajuda, mas alguns deles podem atacá-lo se você o ajudar.<BR/>Ajude-os mesmo assim.</p>
<p>Se você der ao mundo e aos outros o melhor de si mesmo, você corre o risco de se machucar.<BR/>Dê o que você tem de melhor mesmo assim.</p>
</body>
</html>
E a folha de estilos você salva na mesma página em que salvou o html, mas com o nome estilo.css.
h1 {font-size:35px;color:chocolate;}
#autor {text-align:right; font-size:20px; color:#999;}
Observe que, quando a folha de estilos ganha um arquivo próprio, as tags <style> e </style>, que servem para delimitá-la dentro do arquivo html, deixam de existir. Dentro do html a gente coloca a linha <link type='text/css' rel='stylesheet' href='estilo.css'/> para chamar a folha de estilos externa.
Você pode usar outros tutoriais do blog para continuar treinando HTML e CSS.
Até mais!
Foto: Baixaki
Ótimas dicas. Sempre tive curiosidade de saber o que significava esse !important no código de meu blog. A dúvida foi dissipada. Obrigado.
ResponderExcluirQue bom. :)
Excluir