Mais um pouco sobre CSS. Criar uma folha de estilo separada
21 Outubro, 2008
Vamos então a mais uma parte do CSS.
Estilos dentro do html.
Digamos que temos um html assim, lembrando que você ja tenha conhecimento em html, vamos trabalhar ele dentro das tags <body>:
<body>
<h1 style=”font-family:Arial; font-size:16px; color:#369“>Título de um documento</h1>
<h2 style=”font-family:Arial; font-size:14px; color:#369“>Aqui vai um sub-título no documento</h2>
<p style=”font-family:Arial; font-size:12px; color:#000″>Aqui vai um parágrafo de texto. Aqui vai um parágrafo de texto. Aqui vai um parágrafo de texto. Aqui vai um parágrafo de texto. Aqui vai um parágrafo de texto.Aqui vai um parágrafo de texto. Aqui vai um parágrafo de texto.</p>
<body>
Ou melhor, que tal criar uma folha de estilo separada para não ficarmos aplicando estilos a cada tag html?
Vamos definir então um novo documento, pode ser usado o note pad (bloco de notas). Salve ele como style.css e digite o seguinte:
* {margin:0; padding:0} /* Elimina as margens e espaços para todo documento */
body {font-family:Arial, Helvetica, sans-serif;} /*Define o tipo de fonte arial para todo site, se o computador não tiver arial ele procura a próxima fonte, Helvetica.*/
h1 {
font-size:16px;
color:#369;
}
h2 {
font-size:14px;
color:#369;
}
p{
font-size:12px;
color:#000;
}
Notamos que o Título h1 e h2 possuem a mesma cor, então faremos assim:
h1, h2 {
color:#369; /*Sempre por ao final o ; , a cor #369 é abreviação de #336699.*/
}
h1 {
font-size:16px;
}
h2 {
font-size:14px;
}
p{
font-size:12px;
color:#000;
}
Salva as alterações feitas do teu style.css.
Agora vamos buscar esse style para dentro do nosso html, que na verdade é um XHTML:
Observe no cabeçalho de nosso XHTML, no próximo artigo vou falar sobre o XHTML o qual iremos trabalhar junto ao CSS.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<title>Nome do site</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
</head>
Buscamos o css através de um link, existe outra forma através do @import, no exemplo acima, no href você digita o caminho de seu style.css, rel > estilo do documento, type > tipo do documento buscado.
Seu documento XHTML ficará como abaixo, salve ele e teste:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<title>Nome do site</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<h1>Título de um documento</h1>
<h2>Aqui vai um sub-título no documento</h2>
<p>Aqui vai um parágrafo de texto. Aqui vai um parágrafo de texto. Aqui vai um parágrafo de texto. Aqui vai um parágrafo de texto. Aqui vai um parágrafo de texto.Aqui vai um parágrafo de texto. Aqui vai um parágrafo de texto.</p>
</body>
</html>
Notou que não precisamos encher de estilos dentro das nossas tags? Ele pega automaticmante da folha de estilo que criamos e aplica ao seu site, isso deixa seu site com um código mais limpo e rápido. Fico devendo algumas explicações sobre o cabeçalho nosso e sobre XHTML, no próximo artigo falarei sobre isso.
Até o próximo.
Jair Alievi
