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