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; 
}