Jump to content
Raphael1

Tags HTML e CSS (Básico)

Recommended Posts

Bom dia galera estou inciando no ramo de programação web e gostaria de tirar uma dúvida

 

Nesse código é possível fazer a formatação de <h1> através da tag Style de CSS, porém todos os h1 criado no <body> terão formatação igual. Existe alguma possibilidade de se criar, dessa mesma forma(com tag de CSS), diferentes formatações para diferentes h1? 

<style> // ;

h1{ font-family: Arial;

font-size: 30pt;

color: blue; 

text-shadow: 2px 2px 2px black;

 }

</style>

<body>

<h1>Olá, mundo!!</h1>

<h2>Vou chegar lá!!</h2>

<h1>OBAA!!</h1>

</body>

Share this post


Link to post
Share on other sites

Se quer fazer formatações diferentes, o ideal é utilizar classes para cada h1. Até para reaproveitar o código.

 

<style>
.primeiro-h1 { 
	font-family: Arial;
	font-size: 30pt;
	color: blue; 
	text-shadow: 2px 2px 2px black;
}
.segundo-h1 {
  	font-family: Arial;
  	font-size: 50pt;
  	color: red; 
  	text-shadow: 5px 5px 5px black;
}
</style>

<body>
  <h1 class="primeiro-h1">Olá, mundo!!</h1>
  <h2>Vou chegar lá!!</h2>
  <h1 class="segundo-h1">OBAA!!</h1>
</body>

Só lembrando que se sua aplicação for um site, não é legal ter mais de um h1 por página.

  • Gostei 1
  • +1 1

Share this post


Link to post
Share on other sites

@lciceris deu uma boa solução. Uma outra prática visando a crianção de menos classes é você trabalhar com seletores encadeados, dessa forma você consegue aplicar estilos de foma "modularizada". Veja um exemplo: https://jsfiddle.net/dougtop/bc2rdyr9/

 

Se quiser saber mais sobre eles, aqui fala sobre: https://tableless.com.br/seletores-agrupados-e-encadeados/

 

Abraços!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.