O Efeito Cascata (Cascade) do CSS

Neste tutorial de nosso curso de CSS explicaremos sobre um dos conceitos mais importantes e essenciais no estudo do Cascading Style Sheets, que é o efeito cascata.

Prioridades no CSS - Quem manda mais?

No tutorial Iniciando e Criando um arquivo CSS, demos explicações e enfoque especial no conceito de estilo, através do ensino do atributo e tag style, onde entendemos bem o porque desse nome (estilo), e principalmente o que ele quer dizer.

Também demos início à criação de nossas folhas de estilo, mostrando como HTML se integra ao CSS, inclusive criamos um arquivo externo de extensão .css, que é onde os documentos .html irão buscar as definições de estilo.

Foi mostrado, na verdade, mais de uma maneira de inserir estilos em nossos sites HTML, como através do CSS na tag style, com CSS através de um arquivo externo e aplicando os estilos diretamente nas tags. Mas você parou para pensar, se eu definir o estilo de uma maneira através da tag style e definir outro estilo no arquivo .css, qual o estilo final resultante?

Exemplo 1: Vários estilos na mesma tag

Por exemplo, você define na <style> que as tags H1 terão cor azul.
Porém você também criou uma folha de estilo e lá disse que as tags H1 tem cor vermelha, qual o resultado final? Que cor as tags H1 vão ter no site?

E se colocássemos o atributo style na tag <H1> dizendo que ela deve ser amarelo?
O que teremos? Um arco-íris?
Quem vai mandar, quem vai decidir, de onde virá a ordem final?

Exemplo 2: Repetindo a tag, mas aplicando estilos diferentes

Vamos supor que estejamos usando a tag H1 para dar nome ao título de uma página de nosso site.
Obviamente, queremos que este título tenha um tamanho e cor diferente do restando do documento. Azul, por exemplo.

Porém, sua página é enorme, e você vai fazer uso da tag H1 novamente.
Mas, obviamente, você não vai querer que as outras tags H1 se pareçam com o título, vai querer essas tags com outra cor e tamanho.
Então, como dizer isso através do CSS ?

As regras no CSS

Embora tudo pareça confuso, o CSS é uma linguagem de estilo muito inteligente.
Veremos no decorrer de nossos tutoriais de CSS que ele possui regras e prioridades.

Essas regras irão definir quem vai 'mandar', quem vai decidir qual será o estilo final de um documento.
Obviamente o webmaster irá manipular essas regras de modo a definir como seus documentos irão se comportar, e essa manipulação se dará de acordo com a codificação do CSS.

Assim, dependendo do que você vai escrever e onde vai escrever, é possível definir como o estilo de nossos documentos serão. Isso nos dá uma incrível flexibilidade, nos dá o poder de criar e definir estilos para portais com milhares de páginas, centenas de seções, subdomínios, blogs e tudo mais que quisermos.

Essa explicação e falação toda parece abstrata e surreal, e como o diferencial de nosso curso é a prática, mostrar como se faz, vamos mostrar exemplos dessas regras e prioridades.
Serão exemplos simples, mas que irão mostrar para você todo o poder e inteligência do CSS.


O efeito cascata do CSS

Vamos aprender a primeira regra do CSS.
Lembre-se que ensinamos três maneiras de colocar um estilo em uma tag:
  1. Através o atributo style diretamente na tag
  2. Através da tag style, no cabeçalho de cada página
  3. Através de uma folha externa, um arquivo .css
Pois bem, a primeira regra que veremos é essa hierarquia apresentada.
Quem manda mais está na ordem do 1 até o 3.
Logo, a prioridade maior é a do atributo style na tag, em seguida da tag <style> no cabeçalho do documento HTML, e por fim é a vez do arquivo externo.

Ou seja, se usarmos o atributo style para dizer que um texto vai ter cor azul, ele vai ter.
Você pode dizer na tag <style> que ele vai ser vermelho ou pode dizer no arquivo .css que ele vai ser rosa, mas quem manda mais é o atributo.

É como se o HTML checasse primeiro se a tag tem o atributo style, se tiver, obedece a ele.
Se não tiver, ele vai olhar se no cabeçalho (<head>) tem a tag <style>, se estiver, ok, ele vai obedecer ao estilo que estiver lá.
E se não tiver essa tag? Aí ele olha se aquela página está ligada a uma folha de estilo, um arquivo .css externo, para obedecê-lo.

Viu a cascata? Testa um, depois outro, depois outro.
Há uma hierarquia, uma ordem. É o efeito cascata.
Vamos ver ele funcionando na prática?

Exemplo do Efeito cascata: Atributo x Tag

Vamos definir uma tag <style> no cabeçalho de nosso site, dizendo que as tags H1 terão cor azul.
Em seguida, no corpo de nosso site, colocamos uma tag H1.
Obviamente, o resultado será na cor azul, afinal este é o único estilo definido:


<!DOCTYPE html>
 
<html>
	<head>
		<title> Efeito cascata em CSS </title>
		<style type="text/css">
  			h1 { color: blue; }
		</style>
	</head>
 
	<body>
		<h1> Tag H1</h1>
	</body>

</html>


Mas vamos alterar, vamos colocar um atributo style dentro dessa tag H1, dizendo que ela deve ser vermelha:

<h1 style="color: red;"> Tag H1</h1>


Agora temos um 'confronto' de ordens! A tag diz que a cor deve ser azul, mas o atributo diz que deve ser vermelho.
Porém, segundo nossa hierarquia, o atributo manda mais que a tag, portanto a cor final agora vai ser vermelha! Teste!

Vamos usar os dois casos.
Na primeira tag H1 não vamos colocar o atributo style, então esta tag vai obedecer ao que está na <style> e será azul.
Abaixo vamos colocar outra tag H1, mas com o atributo style dizendo que ela é vermelha.
Como o atributo está em uma hierarquia maior que a tag, esse texto será vermelho:

Exemplo de Efeito cascata - Atributo x Tag x Folha de estilo

Agora vamos testar os três casos.
Vamos criar três regras: o atributo diz que a tag H1 terá texto vermelho, a tag <style> diz que terá texto azul e o arquivo estilo.css diz que terá cor amarela:

estilo.cssh1 { color: yellow; }

HTML:

<!DOCTYPE html>
 
<html>
	<head>
		<title> Efeito cascata em CSS </title>
		<link rel="stylesheet" type="text/css" href="estilo.css"/>
<style type="text/css"> h1 { color: blue; } </style> </head> <body> <h1 style="color: red;"> Que cor é essa ?</h1> </body> </html>


Ora, como atributo manda em todos, é fácil prever que o texto será vermelho.


Vamos tirar a declaração do atributo:

<!DOCTYPE html>
 
<html>
	<head>
		<title> Efeito cascata em CSS </title>
		<link rel="stylesheet" type="text/css" href="estilo.css"/>
<style type="text/css"> h1 { color: blue; } </style> </head> <body> <h1> Que cor é essa ?</h1> </body> </html>


Ficará agora só a tag <style> e o arquivo estilo.css
Segundo a hierarquia., a tag que irá comandar, e ela diz que o texto será azul.
Teste e veja como agora o texto ficará azul!

E, por fim, se eliminarmos a tag <style> ? 
Nosso código ficará:

<!DOCTYPE html>
 
<html>
	<head>
		<title> Efeito cascata em CSS </title>
		<link rel="stylesheet" type="text/css" href="estilo.css"/>
	</head>
 
	<body>
		<h1> Que cor é essa ?</h1>
	</body>

</html>


Só vai sobrar uma regra de estilo, a regra da folha estilo.css
Como no arquivo diz que toda tag H1 deve ser amarela, é essa a cor que aparece.

Inteligente esse CSS, não?

4 comentários:

ruam oliveira disse...

Olá
fantástico esse tal de css e mais fantástica suas explicações. Parabéns!!!

WESLEY COSTA disse...

Nossa! as explicações desse blog é fantásticas, parabéns!

Tairone Samuel disse...

Realmente estão de parabéns pela forma que ensinam o conteúdo. Explica a funcionalidade de cada coisa e não simplesmente a "coisa" em si.

Edson da Silva Leal disse...

Como fica a estrutura do documento externo que foi salvo com a extensão .css. Tentei fazer e não deu certo, procurei em outros tutoriais e ninguém explica... me ajudem!