Vamos formatar alguns elementos de um site com CSS?
Crie a seguinte pagina:
<html>
<head>
<title>Mendesites CSS aula 2</title>
</head>
<body>
<h1>Estudando CSS</h1>
<p>O (CSS) Cascading Style Sheets, sem dúvidas é umas das linguagens mais importantes para se estudar, com o CSS conseguimos resultados exatos para uma página web.</p>
<p>O HTML serve para estruturar uma página na internet, ou seja, ele determina o que é um parágrafo, uma lista e outros componentes de um site.</p>
</body>
</html>
Salve e visualize em seu navegador.
Certamente sua pagina esta branca com o texto preto? Então está tudo certo até agora, vamos criar uma TAG <style></style> aqui faremos as declarações em CSS.
Modifique o seu documento para:
<html>
<head>
<title>Mendesites CSS 02</title>
<style type=”text/css”> <!–A TAG style – >
Body {
Background: #cccccc;
}
h1 {
color: red;
}
P{
Color : blue;
}
</style>
</head>
<body>
<h1>Estudando CSS</h1>
<p>O (CSS) Cascading Style Sheets, sem dúvidas é umas das linguagens mais importantes para se estudar, com o CSS conseguimos resultados exatos para uma página web.</p>
<p>O HTML serve para estruturar uma página na internet, ou seja, ele determina o que é um parágrafo, uma lista e outros componentes de um site.</p>
</body>
</html>
Salve e visualiza no seu navegador.
Vamos entender o que fizemos, declaramos o CSS da seguinte maneira:
Elemento {
Atributo: valor;
}
O elemento é a referencia onde iremos formatar. Exemplo:
body {
background: blue;
}
Declaramos que o fundo do elemento body será azul.
Já o atributo é a ação sobre o elemento (tamanho, cor do texto, forte, posicionamento e etc. ).
Exemplo:
p {
color: red;
}
p {
A cor do texto será: vermelha;
}
O valor para os atributos depende de cada elemento, porque algum atributo tem valores específicos.
Exemplo:
É errado declarar:
margin: black;
O valor para o atributo margin, é uma unidade de medida numérica geralmente em pixes, o valor black(preto) faz referencia a uma cor que poderia ser usada em um atributo color.
Lembre se:
body {background: #000000;}
body {background: black;}
elemento {atributo: valor;}
Estudem e no próximo post entenderemos um pouco de tamanhos (altura e largura).
Até a próxima.