CSS en HTML: una guía con ejemplos

En lo relativo a páginas web, no solo cuenta el contenido, sino también su presentación. El lenguaje de hojas de estilo CSS se utiliza habitualmente para dar un formato adecuado al HTML. De este modo, se definen atributos como el diseño, el color y la forma de los elementos individuales de HTML. Las instrucciones de diseño CSS existen independientemente de HTML y también deben integrarse en un documento electrónico.

Hosting
El hosting como nunca lo habías visto
  • Rápido, seguro, flexible y escalable
  • Certificado SSL/DDoS incluido
  • Dominio y asesor personal incluidos

Cómo insertar CSS en HTML: ¿qué métodos existen?

La vinculación de CSS en HTML es posible con hojas de estilo internas o externas. Con las hojas de estilo internas, las instrucciones CSS se encuentran dentro del documento HTML. Así, puedes integrar CSS al principio del archivo HTML o colocarlo en el código fuente. Con este método, una buena comprensión básica de HTML y su sintaxis es una ventaja. La forma más común y limpia de desarrollar páginas web es utilizar hojas de estilo CSS externas. El CSS se integra enlazando el documento HTML con un archivo CSS externo. A continuación, se presenta un resumen de los tres métodos:

  • Estilo inline, es decir, directamente en el código fuente
  • Al principio del documento HTML
  • Externalizado en un archivo CSS externo
Consejo

El Creador de páginas web MyWebsite de IONOS incluye una amplia gama de plantillas de diseño para que puedas crear una página web de aspecto profesional.

Incluir CSS: estilo inline

Con este método, las instrucciones de diseño se integran directamente en el código fuente mediante una etiqueta de estilo. Las propiedades deseadas solo se asignan a un elemento, de modo que es posible realizar diseños diferentes en todo el documento HTML. En el ejemplo siguiente, el encabezamiento H1 debe aparecer en azul y con un tamaño de letra de 14:

<h1 style="color:blue; font-size:14px;">Esto es un encabezado</h1>

Con este tipo de integración, se pierden muchas de las ventajas de CSS. Entre ellas, la posibilidad de definir un único comando que luego se aplica, por ejemplo, a todos los elementos H1 del documento HTML. En algunas circunstancias, también hay un mayor esfuerzo de mantenimiento, porque se requiere la intervención directa en el código HTML.

Añadir CSS al principio del HTML

En este caso, se incluye el CSS en la cabecera del documento HTML. La etiqueta de estilo se convierte así en parte del elemento de cabecera y se aplica a todo el archivo. Las instrucciones de diseño están contenidas en el documento, pero están separadas del código HTML. En el siguiente ejemplo, se aplica el mismo comando que en el ejemplo anterior. Esta vez, sin embargo, todos los encabezados H1 del archivo deben ser formateados de acuerdo con la información.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:14px;}
</style>
</head>
<body>
<h1> Esto es un encabezado </h1>
<p>Esto es un párrafo</p>
</body>
</html>

Integrar el CSS con un archivo externo

Este es posiblemente el mejor método para enlazar CSS en HTML. Un sitio web suele constar de muchas páginas, por lo que tiene sentido guardar las instrucciones de diseño en un archivo separado. Esto permite una separación limpia entre el contenido y el diseño y facilita el mantenimiento. El archivo exportado está simplemente vinculado al documento HTML. Se guarda la hoja de estilos externa con la extensión .css y luego se utiliza una etiqueta de enlace para incluirla en el archivo HTML. En el siguiente ejemplo, el archivo CSS se llama stylesheet.css.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1> Esto es un encabezado </h1>
<p>Esto es un párrafo</p>
</body>
</html>

El atributo rel define el tipo de relación lógica y href hace referencia al archivo CSS que se va a incrustar. Ten en cuenta que el elemento link puede tomar otros atributos. Con media = "print" específicas, por ejemplo, que la hoja de estilos solo se utiliza en la vista de impresión. La hoja de estilos externa no contiene ninguna etiqueta HTML, solo el selector respectivo y los corchetes con las instrucciones, como en el siguiente ejemplo:

H1 {
    color: blue;
    font-size:14px;
}
Consejo

Descubre los mejores trucos de CSS para optimizar el diseño de tu proyecto web o confía en nuestro Servicio de Diseño MyWebsite para unos resultados profesionales.

¿Le ha resultado útil este artículo?