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