Atributo clase y id HTML

Cómo usar el atributo clase y id

  • clase
    - atributo se utiliza para definir estilos iguales para elementos con el mismo nombre de clase.
  • id
    - atributo se utiliza un id única para un elemento HTML.

Atributo clase

Ejemplo
<style>
.texto_pricipal {  
  background-color: red;
  color: white;
  text-align: center;
 }
</style> 
        
<body>
 <div class="texto_principal">
  <h4>Ejemplo 1</h4>
  <p>Estos elementos html tienen el mismo nombre de clase, lo que significa que ambos tienen el mismo estilo.</p>
 </div>

 <div class="texto_principal">
  <h4>Ejemplo 2</h4>
  <p>Estos elementos html tienen el mismo nombre de clase, lo que significa que ambos tienen el mismo estilo..</p>
 </div>
</body>
Resultado:

Ejemplo 1

Estos elementos html tienen el mismo nombre de clase, lo que significa que ambos tienen el mismo estilo.

Ejemplo 2

Estos elementos html tienen el mismo nombre de clase, lo que significa que ambos tienen el mismo estilo.


Atributo id

Ejemplo
<style>
 #texto {  
  background-color:purple;
  color:white;
  padding: 45px;
  text-align:center;
 } 
</style> 

 <h3 id="texto">Coche</h3>
 <p>Este es un párrafo de muestra</p>
              
Resultado: