[Home] [HTML] [CSS] [Contacto]
A CSS ajudar na formação dos conteúdos das páginas web, permitindo controlar a cor, a fonte, o tamanho do texto, o espaçamento entre os elementos, como os elementos são posicionados e dispostos, bem como controlar a utilização de imagens ou cores de fundo.
A CSS permite ainda desenvolver sites responsivos, que se adaptam à resolução dos dispositivos de visualização.
Cascading: Com este mecanismo, a formação aplicada a um elemento HTML de topo também se aplicará a todos os sub-elementos (contidos dentro desse elemento). Portanto, se definir a cor do <body> é blue, todos os títulos, parágrafos e outros elementos de texto dentro dessa página também terão a mesma cor (a menos que seja especificada outra formatação)!
Esta mesma página com letras azuis
Utilização do atributo style dentro de um elemento HTML.
Utiliza-se quando se pretende aplicar uma única vez uma determinada formação num único elemento HTML.
Exemplo:<p style="color:red;">Um parágrafo a vermelho.</p>
É o que temos usado, mas ... tem muitas limitações :(Utilização de elemento <style> dentro da zona de cabeçalho <head> de uma página HTML.
Utiliza-se quando se pretende aplicar um conjunto de formatações a uma única página HTML.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Em azul</h1>
<p>Parágrafo a vermelho.</p>
<p>Mais outro parágrafo a vermelho.</p>
</body>
</html>
Fica a funcionar assim
Nota: Para abrir numa nova janela/tab - adicionr o atributo target="_blank"
Utilização de um link para um ficheiro externo, dentro da zona de cabeçalho <head> de uma página HTML.
Utiliza-se quando se pretende aplicar um conjunto de formatações a várias páginas HTML. Ajuda muito na manutenção da formatação de um site.
O ficheiro com as formatações é simplesmente: style1.css
Exemplo:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style1.css"> </head> <body> <h1>Em azul</h1> <p>Parágrafo a vermelho.</p> <p>Mais outro parágrafo a vermelho.</p> </body> </html>
Fica a funcionar assim
Exercício: Uma página simples com CSS Externa