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:
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:
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:
Nota: Es importante asegurarse de que tu código HTML y CSS cumpla con los estándares recomendados. Para ello, puedes utilizar el Validador de W3C para comprobar la validez de tu documento. Esto ayudará a evitar posibles errores y asegurar la compatibilidad con diferentes navegadores. Este tema se explorará más en profundidad en la sección de Buenas prácticas CSS, donde veremos consejos para mejorar la calidad y accesibilidad de tu código.
Comprueba tu apendizaje