Cambiar el estilo de una etiqueta HTML: selectores id y class

Veamos cómo cambiar el estilo de una etiqueta HTML usando los selectores id y class, y cómo cambiar el estilo a varios elementos en forma simultánea. 

Un selector es una especie de condición que definimos en nuestra hoja de estilos para “seleccionar” uno o varios elementos ubicados dentro del HTML. Una vez “seleccionados” podemos definir en nuestra hoja de estilos cuál será la apariencia de esos elementos seleccionados (Beati, 2015).

La idea detrás de los selectores es decidir a qué elemento o componente de HTML vamos a darle estilo. 

Hay tres tipos de selectores: selectores simples, selectores de atributos y pseudoclases. En éste artículo nos centramos en los selectores simples que son aquellos que seleccionan los elementos por el tipo de elemento, por su clase o por su id. 

Aprende cómo cambiar el estilo de una etiqueta HTML.

Cambiar el estilo de una etiqueta HTML

h2{
	font-family: arial;
	font-size: 18pt;
	color: crimson;
}

p{
	font-family: verdana;
	font-size: 12pt;
	color: darkred;
}

En el ejemplo anterior, se desea cambiar el estilo a todo texto que esté marcado como h2 (título o subtítulo). De igual forma, si utilizamos p{estilos} estamos aplicando esos estilos a cualquier párrafo  del documento.

Cambiar el estilo de un elemento HTML único

Si deseamos aplicar un estilo a un único elemento dentro de HTML, marcamos éste utilizando el atributo id

<span id="capital"> E </span>n

En el ejemplo anterior deseamos aplicar un estilo a la letra E, por lo que encerramos ésta entre etiquetas span que tienen un atributo id con valor “capital”.

Ahora podemos darle estilos a “capital” de ésta forma:

#capital{
	font-size: 46pt;
	display: inline-block;
}

De modo que se utiliza un símbolo # para seleccionar un id con determinado valor.

Cuando varios elementos comparten el mismo estilo

Si tenemos varios elementos en HTML que comparten el mismo estilo podemos utilizar clases. Por ejemplo, marcaríamos todos esos elementos en HTML de ésta forma:

<span class="glosario">adarga</span> antigua, <span class="glosario">rocín</span> flaco

Aquí las palabras «adarga» y «rocín» van a tener cierto estilo, por lo que ambas comparten la clase “glosario”. Entonces en la hoja de estilos css tendríamos:

.glosario{
	background: red;
	color:white;
}

Cambiar el estilo de dos o más etiquetas HTML simultáneamente

.resaltado, .glosario{
	font-style: italic;
}
.glosario{ 
        background: red; 
        color:white;
}

En éste ejemplo tenemos dos clases, una llamada «resaltado» y otra llamada «glosario». A ambas deseamos aplicarle el mismo estilo, por lo que utilizamos la coma «,» para realizar ésto.

Cambiar el estilo de una etiqueta HTML que esté dentro de otra

p span{
	font-weight: bold;
}

En el ejemplo anterior el estilo solo aplicará a los elementos marcados por «span» pero que estén dentro de un párrafo «p». No es necesario que sea un “hijo” directo de «p», sino simplemente que esté dentro del párrafo.

Mira el ejemplo completo:

See the Pen Selectores id y class by Gibrán García (@napsmx) on CodePen.

Conclusiones

Un atributo id es un identificador de un elemento HTML. Esto significa que el valor del atributo id no puede ser duplicado, debe ser único en todo el documento (Gauchat, 2014) . El valor del atributo class, por otro parte, puede ser empleado por todos los elementos HTML que comparten los mismos estilos.

Referencias

1. Beasti (2015). HTML5 y CSS3 para diseñadores. Editorial Alfaomega.
2. Gauchat (2014). El gran libro de HTML5, CSS3 y Javascript. Editorial Marcombo.
3. Universidad de Murcia (2017). Selectores en CSS. Disponible en [https://www.um.es/docencia/barzana/DAWEB/2017-18/daweb-tema-11-selectores-en-css.html]

Tu comentario

opiniones