Utilização do CSS
Use uma das três formas de adicionar estilos a um documento HTML: inline, interno e externo. Saiba quando e como utilizar cada uma delas.
Existem 3 formas de adicionar estilos CSS ao documento HTML.
- Estilo inline - atribuindo um atributo style aos elementos HTML
- Estilo interno - utilizando o elemento
<style>na secção<head> - Estilo externo - criando um ficheiro CSS externo
Estilo inline
Para definir regras de estilo, pode utilizar o atributo style de qualquer elemento HTML. Estas regras só podem ser aplicadas a esse elemento. O atributo style pode conter qualquer propriedade CSS.
Exemplo de criação de um estilo inline para um documento HTML:
Exemplo de estilo inline em CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 style="color:#1c87c9">Some heading</h2>
<p style="color:#8ebf42; font-size:15px">Some paragraph</p>
</body>
</html>Resultado
Vamos agora explicar o exemplo acima, no qual utilizámos o estilo inline. Dentro da tag <h2> escrevemos style="color: #1c87c9", o que significa que o nosso título (heading) deverá ser #1c87c9.
Fizemos o mesmo com a tag <p>. Escrevemos color: #8ebf42; font-size: 15px dentro da nossa tag, o que significa que a informação entre a tag <p> aberta e a tag </p> fechada será #8ebf42 e o tamanho do texto será 15px.
Estilo interno
Com o estilo interno, cada ficheiro HTML contém o código CSS necessário para aplicar estilo a uma página. Basta colocar o código CSS dentro das tags <head> </head> de cada ficheiro HTML ao qual pretende aplicar estilo. O exemplo abaixo ilustra isto.
As alterações que fizer afetarão apenas uma página. Se precisar de aplicar estilo a mais páginas, terá de as alterar uma a uma.
O exemplo abaixo mostra que o parágrafo ficará branco e a página ficará #1c87c9.
Exemplo de criação de um estilo interno para um documento HTML:
Exemplo de estilo interno em CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
p {
color: white;
}
</style>
</head>
<body>
<p>Some information</p>
</body>
</html>Estilo externo
O estilo externo é amplamente utilizado para aplicar estilos gerais a todo o site. Consiste em criar um ficheiro CSS externo que inclui todas as informações de estilo. Pode criar este tipo de ficheiro com qualquer editor de texto ou editor HTML, como o "Notepad" ou o "Sublime Text".
Um ficheiro CSS contém apenas CSS e basta guardá-lo com a extensão de ficheiro .css. Para ligar uma folha de estilo externa a uma página web, deve utilizar a tag <link> dentro da secção <head> do documento HTML. Cada página web deve estar ligada à folha de estilo.
Quando se utiliza uma folha de estilo externa, todos os ficheiros HTML estão ligados a um único ficheiro CSS, resultando num aspeto e numa apresentação consistentes. Se quiser alterar o estilo das páginas web, basta fazer as alterações correspondentes num único ficheiro .css.
Exemplo de criação de um estilo externo para um documento HTML:
Exemplo de estilo externo em CSS
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>