Aplicar estilos por etiqueta, selector, class y id

Existen tres maneras de aplicar estilos CSS en los documentos HTML por etiqueta, por clase y por id.

1 – Aplicación de estilos CSS por etiqueta

En el documento estilos.css la sintaxis correcta para aplicar estilos a las etiquetas HTML es la siguiente:

p {    color: blue;    font-size: 14px;}

Según el código anterior, a la etiqueta <p></p> le estamos aplicando el color azul y un tamaño de fuente de 14 píxeles. Por lo tanto, cuando el navegador web interprete este código, aplicará estos estilos a todas las etiquetas <p></p> presentes en el documento HTML.

2 – Aplicación de estilos CSS por clase de la etiqueta HTML

Para aplicar estilos a través de este método, se deben realizar dos pasos:

Primer paso

Agregar el atributo class = “nombre-clase” en la etiqueta dentro del documento HTML

Ejemplo:

<main>	<p class="parrafo-rojo"></p></main>

Segundo paso

Agregar los estilos en la clase correspondiente en el código CSS.

Ejemplo:

.parrafo-rojo {     color: red;     font-size: 18px; } 

3 – Aplicación de estilos CSS por id referenciada en la etiqueta HTML

Al igual que la aplicación de estilos por clase, este método debe hacerse en dos pasos:

Primer paso

Agregar el atributo id = “nombre-clase” en la etiqueta dentro del documento HTML.

Ejemplo:

<main>	<p id="parrafo-amarillo"></p></main>

Segundo paso

Agregar los estilos en el id correspondiente en el código CSS.

Ejemplo:

#parrafo-amarillo {     color: yellow;     font-size: 24px; }