Iniciando e criando um arquivo CSS - A tag < style > e o atributo type

Agora que já explicamos o que é CSS e para que serve, você já deve estar convencido da importância e utilidade do CSS. É impossível ser um webmaster ou webdesigner profissional sem dominar completamente o uso dos estilos com CSS.

Neste tutorial de nossa apostila de CSS iremos iniciar nossos estudos, de fato, sobre o CSS, mostrando a tag <style> e o atributo type.

Usando style como atributo

Como tudo em HTML e desenvolvimento Web, há diversas maneiras de se fazer um site, sistema ou um simples efeito, o que torna o HTML uma linguagem muito flexível, principalmente se usada com o CSS.

Essa flexibilidade se estende ao uso de estilos também, sendo possível estilizar um site inteiro, uma página ou mesmo apenas uma tag.

A maneira mais direta, e talvez simples, e com certeza mais trabalhosa, de se estilizar um elemento de nosso site, é usando o style como atributo de alguma tag.

Por exemplo, se quisermos escrever uma frase usando a tag de cabeçalho H2 na cor azul, podemos fazer:
<h2 style="color: blue;"> Tag H2 estilizada diretamente com o atributo style</h2>


Veja como esta sintaxe difere das que tínhamos visto até o momento em nosso curso.
Como de costume, colocamos o valor do atributo dentro de aspas.
Dentro das aspas podemos estilizar de várias maneiras.

No exemplo dado, estilizamos a cor da fonte, e para tal usamos o atributo color.
Para este atributo receber um valor, usamos o dois pontos ":" e em seguida o valor do atributo color, que é blue para azul.

Podemo, inclusive, usar diversas regras de estilo com o atributo style.
Para isso, basta separar como ponto e vírgula " ; " as diferentes propriedades.
Por exemplo, para fazer nossa tag H2 ter tamanho da fonte 12, além de azul, fazemos:
<h2 style="color: blue; font-size: 12pt;"> Tag H2 estilizada diretamente com o atributo style</h2>

A tag <style> e o atributo type em CSS

Obviamente, estilizar e colocar diversas propriedades dentro do atributo style de cada tag dentro de uma página daria muito trabalho.
Seria mais interessante se pudéssemos declarar esse estilo apenas uma vez.

E é possível declarar o estilo somente uma vez em uma página, e estilizar todo o documento de uma vez. Isso é feito através da tag <style>, que tem toda uma sintaxe especial.

Antes de mais nada, devemos definir o tipo de estilo que vamos usar.
Iremos usar o CSS. Fornecemos essa definição do estilo através do atributo style que recebe o valor text/css.

Assim, a sintaxe da tag style é:

<style type="text/css">
   <!-- Regras do estilo do CSS aqui -->
</style>

E um detalhe importante: essa tag é usada dentro da tag head.
Outro importante conceito é a sintaxe em CSS de nosso estilo.

A sintaxe das propriedades em CSS

A sintaxe para usarmos CSS em nossos sites recebe um formato padrão e diferente de tudo que já vimos até aqui em nosso curso.
Dentro desta tag <style> que acabamos de apresentar, as propriedades do estilo de nossa página estarão declaradas no seguinte formato:

<style type="text/css">
   elemento1 {propriedade1: valor1 ; propriedade2: valor2 ; ... ;}
   elemento2 {propriedade1: valor1 ; pripriedade3: valor3 ; ... ;}
   ...
</style>

Onde os 'elementos' são os mais diversos tipos de elementos de sua página, como tags H1, H2, tag body, uma imagem, a tag <p> de parágrafo e praticamente qualquer coisa em seu site, pois é possível estilizar praticamente tudo com CSS.

Vamos criar um site onde vamos definir os estilos para as tags H1 e H2.
Para a tag H1, faremos que ela tenha cor vermelha.
Para a tag H2, queremos que ela seja de cor azul e tamanho de fonte 12pt.

Vamos definir esse estilo na tag <head>, dentro da tag <style>.
Depois, dentro do corpo de nosso site (tag <body>), sempre que usarmos as tags H1 e H2 elas terão, AUTOMATICAMENTE, os estilos que definimos via CSS.

O código deste exemplo de site em HTML com CSS é:

<!DOCTYPE html>
 
<html>
	<head>
		<title> Como usar CSS </title>
		<style type="text/css">
  			h1 { color: Red; }
  			h2 { color: blue; font-size: 12pt;}
		</style>
	</head>
 
	<body>
		<h1> Tag H1 estilizada com a tag style</h1>
		<h2> Tag H2 estilizada diretamente com o atributo style</h2>
		<h1> Outra tag h1</h1>
		<h2> Outra tag h2</h2>
	</body>

</html>

Teste e rode.
Fantástico, não? Pode usar quantas vezes quiser as tags H1 e H2 no seu site, que sempre vão ter o estilo que você definiu só uma vez na <style>.
Não precisa mais se preocupar em estilizar individualmente cada tag H1 e H2, fizemos isso somente uma vez.


A tag <link> Como criar um arquivo externo CSS 

Ok, aprendemos como estilizar cada tag individualmente, bem como estilizar uma página inteira de uma vez, apenas colocando as regras de estilo dentro da tag <style>.

Mas e se nosso site tiver milhares de páginas?
Se trabalharmos para um portal grande, como o site da Globo, teremos que criar esse estilo em todas as páginas? Não! Pois isso seria extremamente trabalhoso.

Uma terceira maneira de usarmos o CSS é através de um arquivo externo, de extensão .css
Vamos criar um arquivo separado que terá as informações de estilo de nossas páginas.
Assim, em vez de colocar as propriedades de estilo EM CADA página, fazemos com que cada página vá buscar essas informações no arquivo de CSS.

Primeiramente vamos criar um arquivo, no bloco de notas mesmo.
Coloque o seguinte conteúdo:

h1 { color: Red; }
h2 { color: blue; font-size: 12pt;}

E simplesmente salve com a extensão .css, como "estilo.css"
Agora vamos criar uma ligação de nosso documento HTML com nossa folha de estilo CSS.
Isso é feito através da tag <link> da seguinte maneira:
<link rel="stylesheet" type="text/css" href="estilo.css"/>

E colocamos essa ligação, essa tag <link> dentro de nossa tag <head>, no lugar da antiga tag <style> de nosso código HTML.

Assim, nosso código HTML, usando uma arquivo CSS externo será:

<!DOCTYPE html>
 
<html>
	<head>
		<title> Como usar um arquivo CSS externo </title>
		<link rel="stylesheet" type="text/css" href="estilo.css"/>

	</head>
 
	<body>
		<h1> Tag H1 estilizada com a tag style</h1>
		<h2> Tag H2 estilizada diretamente com o atributo style</h2>
		<h1> Outra tag h1</h1>
		<h2> Outra tag h2</h2>
	</body>

</html>

Você poderá criar um milhão de páginas, apenas informe a estas páginas através da tag <link> de onde ela deve pegar as informações de estilo, ou seja, informe apenas a URL do arquivo .CSS, que automaticamente as páginas de seu site terão os estilos definidos.

Assim, se quiser fazer qualquer mudança em seu site INTEIRO, basta apenas mudar esse arquivo CSS, que automaticamente todas as páginas vão mudar, pois todas as páginas buscam a informação nesse arquivo .css

Fantástico esse CSS, não?

5 comentários:

Anônimo disse...

como faço para deixar o texto centralizado

Apostila HTML Progressivo disse...

Olá Anônimo,

Veja nosso tutorial sobre Alinhar texto em CSS

WESLEY COSTA disse...

Ótima aula :)

Rayan Marcus disse...

Olá!
Excelente conteúdo!

Sou iniciante em HTML. A tag style é do HTML ou do CSS ?
Obrigado!

Edson da Silva Leal disse...

Fiz o exemplo para criar o link do estilo e não deu certo.
No documento criado estilo.css só deve conter as duas linhas abaixo?


h1 { color: Red; }
h2 { color: blue; font-size: 12pt;}

Fiz como está na apostila mas não está funcionando, onde será que eu errei?