¿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