¿Cómo aplicar estilos CSS en un documento HTML?

2. Estilos CSS en un documento HTML
Hay tres formas de aplicar estilos CSS en un documento HTML: en línea, incrustado en la cabecera y mediante hojas de estilo externas.
2.1. CSS en línea
Los estilos en línea son declaraciones CSS que se integran en las etiquetas HTML mediante el atributo style
. Este método tan solo afecta al elemento en el que se integra el código. El CSS en línea es complicado de entender y mantener ya que mezcla los estilos CSS con el código HTML.
Ejemplo:
<p style="color:green;">Párrafo de color verde.</p>
Editar en CodePen:
0
2.2. CSS incrustado en la cabecera
Otra manera muy simple de añadir estilo con CSS es utilizando la etiqueta <style
> en la cabecera <head>
del fichero HTML del sitio. La desventaja de este método es que a la hora de realizar cualquier cambio, se debe realizar en múltiples páginas diferentes y el código estará repetido. Su uso puede llegar a ser necesario en el caso de utilizar un gestor de contenido que no permita modificar el archivo CSS directamente.
Ejemplo:
<html> <head> <title>CSS incrustado en la cabecera</title> <style>p{color:green;}</style> </head> <body> <p>Párrafo de color verde.</p> </body> </html>
Editar el código en CodePen:
0
2.3. CSS en hojas de estilo externas
Mediante hojas de estilo externas se consigue separar el archivo de estilos del fichero HTML. El archivo de estilos cuenta con la extensión .css y se referencia desde HTML mediante el elemento <link>. Este es el método más eficiente y más sencillo de mantener ya que el código CSS se encuentra separado del fichero HTML.
Ejemplo:
inicio.html
<html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <p>Párrafo de color verde.</p> </body> </html>
styles.css
p {color:green;}
Editar el código en CodePen:
0
Test