Formas de aplicar CSS a los elementos HTML

Definiendo la etiqueta HTML

Cuando definimos el estilo CSS de una etiqueta HTML, todas las apariciones de la etiqueta en el documento mostrarán el formato especificado en el CSS.

Ejemplo

Dado el siguiente código:

	<ul>
		<li><a href="#">Enlace 1</a></li>
		<li><a href="#">Enlace 2</a></li>
		<li><a href="#">Enlace 3</a></li>
		<li><a href="#">Enlace 4</a></li>
	</ul>
		

Al definir este estilo:

	a {
		color: lightgreen;
		text-decoration: none;
	}
		

Nos devuelve este resultado:

Lo que hacemos en este caso es hacer que todos los enlaces del documento se muestren de color verde y sin el subrayado.

Definiendo una clase CSS

Cuando queremos modificar la presentación sólo de determinados elementos, y no todos los de esa etiqueta, usamos una clase CSS.
La clase se define en el elemento HTML mediante el atributo class, por ejemplo <p class="miclase">. Y a nivel de CSS se define poniendo un punto delante de su nombre en su declaración: .miclase {}.

Ejemplo

Dado este código:

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. </p>
	<p class="resaltado">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua.</p>
		

Si le añadimos la siguiente regla CSS:

	.resaltado {
		color: orange;
		text-transform: uppercase;
	}
		

Obtendremos:

Clases aplicadas a diferentes elementos HTML

Podemos aplicar la misma clase CSS a diferentes elementos HTML. En el código siguiente veremos como la misma clase .resaltado da el mismo formato a los elementos h3 donde la aplicamos:

Ejemplo

		<h3>Titular 1 </h3>
		<h3 class="resaltado">Titular 2 </h3>
		<h3>Titular 3 </h3>
		

Veremos:

Etiquetas combinadas con clase CSS

Podemos hacer el formato de un elemento más específico si combinamos en su declaración de CSS su etiqueta junto a la clase que le apliquemos.

Por ejemplo, el código <strong class="resaltado">Texto en negrita</strong> nos devolverá un texto en negrita, y además color naranja y en mayúsculas, tal y como define la clase resaltado.

Pero si en la declaración de CSS hacemos esto:

	strong.resaltado {
		background-color: lightcyan;
	}
		

Tendremos un elemento strong que tiene un color de fondo cuando se le aplica esa clase. Mientras que el resto de elementos con la misma clase, pero que no son strong, no muestran ese color de fondo.

Ejemplo

Combinar más de una clase en un mismo elemento

CSS permite aplicar varias clases a cualquier elemento HTML sin problemas. Se puede hacer para separar el formato del docuemento de una manera más organizada. Por ejemplo, podemos tener clases que se encarguen del formato de fuente, otras que se encarguen del formato de caja (bordes, fondo...) y otras para controlar la posición de los elementos. Y luego ir aplicándolas a cada elemento según las necesitemos.

Si defimos esta clase:

	.bordes {
		border: 3px solid red;
	}
		

Cuando la apliquemos a cualquier elemento le aplicará los bordes definidos además del formato que ya pueda tener ese elemento.

Si hay conflicto entre los atributos definidos en las diferentes clases, prevalecen los de la clase que más abajo esté escrita en el código CSS.

Ejemplo

Si definimos un elemento así <p class="resaltado bordes"> tendremos este resultado:

Selectores Id

Un atributo id sirve para idetificar de forma exclusiva un elemento dentro del documento. Y en CSS lo podemos usar para aplicar un formato específico solamente a ese elemento.
El atributo HTML es id="miId", y en el CSS se define con la almohadilla antes del nombre del elemento: #miId {}

Ejemplo

Dado este código:

	<ul>
		<li><a href="#">Enlace 1</a></li>
		<li><a href="#" id="seleccionado">Enlace 2</a></li>
		<li><a href="#">Enlace 3</a></li>
		<li><a href="#">Enlace 4</a></li>
	</ul>
		

Al aplicar esta regla:

	#seleccionado {
		border: 1px solid;
		font-weight: bold;
	}
		

Nos devuelve este resultado: