45.1 Atributos Id y class
Para referenciar elementos HTML y poder asignarles estilos con reglas CSS se usan con frecuencia los atributos id y class. El atributo id se puede entender como un nombre que se asigna a un elemento para posteriormente colocarle estilos o hacerle modificaciones. El valor que se le proporciona al atributo id debe pertenecer a un único elemento.
El atributo class por su parte puede tener el mismo valor en más de un elemento. Se usa principalmente para asignar estilos similares a varios elementos que pueden ser de distintos tipos. Si se desea agregar estilos a través del atributo clase a diferentes tipos de elementos, la regla se escribe con la sintaxis:
.nombredelaclase{regla CSS}Ejemplo
.resaltados{background-color: yellow}Esta declaración colocará un color de fondo amarillo en todos los elementos que tengan como clase el valor “resaltados”.
Si por el contrario, se desea aplicar a sólo un tipo de elementos con un valor de clase, la sintaxis es:
elemento.nombredelaclase{regla CSS}Ejemplo
p.resaltados{background-color: yellow}Esta declaración colocará un color de fondo (amarillo) en todos los párrafos que sean de la clase “resaltados”.
Ejemplo
<!DOCTYPE html>
<HTML>
<head>
<style>
parrafo_importante{border-radius: 25%; border-style: solid; border-width: thick; color:purple; width:15cm; font-style:italic;}
destacado {color:red;border: 2px dotted;width:10cm}
</style>
</head>
<body>
<h1> Titulo con estilo</h1>
<h2> Subtítulo sin estilo</h2>
<p>Un párrafo que no es destacado ni importante, pero tiene un estilo definido.</p>
<h3 class="destacado"> Subtítulo destacado</h3>
<p class="destacado"> Texto destacado</p>
<p id="parrafo_importante"> Si se define un estilo para un valor de id, este estilo será para únicamente ese elemento,
mientras que si se define un estilo para un valor de clase, todos los elementos que tengan ese valor en el atributo, tendrán ese estilo.</p>
</body> Titulo con estilo
Subtítulo sin estilo
Un párrafo que no es destacado ni importante, pero tiene un estilo definido.
Subtítulo destacado
Texto destacado
Si se define un estilo para un valor de id, este estilo será para únicamente ese elemento, mientras que si se define un estilo para un valor de clase, todos los elementos que tengan ese valor en el atributo, tendrán ese estilo.
Observe la forma en que fueron definidos los estilos para la etiqueta p y para los atributos id y class. Así, observamos que los elementos en rojo son de diferente tipo, pero al compartir la clase, tienen el mismo estilo. Entre las propiedades asignadas se puede ver que al id parrafo_importante se le asignó un color púrpura y también bordes redondeados en línea sólida.