CSS en HTML: guía paso a paso con ejemplos
Para dar formato y estilo a un documento HTML se utiliza el lenguaje de hojas de estilo CSS. Con él se definen atributos como el diseño, los colores y las formas de los diferentes elementos HTML. Las reglas CSS funcionan de manera independiente al código HTML y deben insertarse en el documento mediante alguno de los métodos disponibles.
- 3x más rápido, ahora un 60 % de ahorro
- Alta disponibilidad >99.99 %
- Solo en IONOS: hasta 500 GB incluidos
Incluir CSS: ¿qué métodos existen?
Cuando quieras incluir CSS en HTML, puedes hacerlo mediante hojas de estilo internas o externas. En las hojas de estilo internas, las reglas CSS se encuentran directamente dentro del documento HTML. Esto permite insertar CSS al inicio del archivo HTML o integrarlo de forma continua en el código fuente. Para aplicar este método, conviene tener un buen conocimiento básico de HTML y de su sintaxis.
No obstante, el método más habitual y limpio en el desarrollo de páginas web es el uso de hojas de estilo externas. En este caso, el CSS se incorpora mediante un enlace entre el documento HTML y un archivo CSS independiente. A continuación, te mostramos un resumen de las tres formas más comunes de incluir CSS en HTML:
- estilo en línea, es decir, directamente en el código fuente
- al inicio del documento HTML
- en un archivo CSS externo
- Creador de páginas web rápido e intuitivo
- Imágenes y textos instantáneos con SEO optimizado por IA
- Dominio, SSL y buzón de correo electrónico incluidos
Incluir CSS: estilo en línea
En este método, las reglas de estilo se añaden directamente al código fuente mediante la etiqueta style. Las propiedades definidas se aplican únicamente a un elemento HTML concreto, lo que permite utilizar diferentes estilos dentro del mismo documento HTML. En el siguiente ejemplo, el encabezado h1 se mostrará en color azul y con un tamaño de fuente de 14 píxeles:
<h1 style="color: blue; font-size: 14px;">Esto es un encabezado </h1>Al utilizar este tipo de inclusión, es importante tener en cuenta que se pierden muchas de las ventajas que ofrece CSS. Entre ellas, la posibilidad de definir una regla general que se aplique, por ejemplo, a todos los elementos h1 del documento HTML. Además, este método puede implicar un mayor esfuerzo de mantenimiento, ya que requiere modificar directamente el código HTML.
Incluir CSS al inicio del documento HTML
En esta variante, se incluye el CSS en la parte superior del documento HTML, dentro del elemento head. La etiqueta style pasa así a formar parte de la sección head y las reglas se aplican a todo el archivo. Aunque las reglas de estilo CSS siguen estando dentro del propio documento, se mantienen mucho mejor separadas del código HTML.
En el siguiente ejemplo, se utiliza la misma instrucción que en el caso anterior, pero esta vez las reglas se aplican a todas las etiquetas h1 del documento:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: blue; font-size: 14px;}
</style>
</head>
<body>
<h1>Esto es un encabezado</h1>
<p>Dies ist ein Absatz.</p>
</body>
</html>Incluir CSS mediante un archivo externo
Esta es probablemente la mejor forma de incluir CSS en HTML. Dado que una página web suele estar compuesta por varias secciones o documentos, resulta más práctico guardar las reglas de estilo en un archivo independiente. Esto permite una separación clara entre el contenido y el diseño, además de facilitar el mantenimiento. El archivo externo simplemente se vincula con el documento HTML. Para ello, guarda la hoja de estilo con la extensión .css y utiliza la etiqueta link para incluirla en tu 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>Dies ist eine Überschrift</h1>
<p>Esto es una párrafo.</p>
</body>
</html>El atributo rel define aquí el tipo de relación lógica, mientras que href hace referencia al archivo CSS que se va a incluir. Ten en cuenta que el elemento link puede contener otros atributos. Por ejemplo, con la propiedad media="print" puedes indicar que la hoja de estilo se aplique solo en la vista de impresión. La hoja de estilo externa no contiene etiquetas HTML, sino únicamente los selectores correspondientes y las llaves con las declaraciones, como se muestra en el siguiente ejemplo:
h1 {
color: blue;
font-size:14px;
}Las funciones de CSS más populares y recientes
Dentro de estos métodos clásicos para incluir CSS en HTML, en los últimos años han surgido numerosas funciones nuevas que hacen que el diseño de páginas web sea aún más flexible. Con selectores modernos como :has(), es posible aplicar estilos a los elementos padre según las condiciones de sus elementos hijos, mientras que las consultas de contenedor permiten que cada componente se adapte al tamaño de su propio contenedor, independientemente del ancho de la ventana. Estas y otras novedades facilitan la creación de diseños más modulares, dinámicos y accesibles, sin necesidad de recurrir a soluciones complejas o al uso de JavaScript.
Pseudoclase de CSS :has()
Se trata de un selector padre que permite aplicar estilos predefinidos bajo ciertas condiciones. Por ejemplo, un campo de formulario puede mostrarse en rojo si la entrada es inválida o en verde si el contenido es válido:
.form-group:has(input:invalid) {
border: 2px solid red;
}
.form-group:has(input:valid) {
border: 2px solid green;
}Consultas de contenedor
Las consultas de contenedor permiten aplicar reglas CSS no solo en función del tamaño de toda la ventana del navegador (como ocurre con las consultas de medios CSS), sino también según el tamaño del contenedor que las rodea.
De este modo, cada módulo o componente puede adaptarse individualmente en función del espacio disponible dentro de su elemento padre. Esto hace posible un diseño web responsivo modular y realmente flexible, que no depende del ancho de la ventana. Por ejemplo, se puede establecer que las tarjetas con imagen y texto se muestren alineadas en una misma fila cuando el contenedor que las contiene tenga suficiente ancho.
Si el contenedor es más estrecho que un valor determinado (en este ejemplo, 400 píxeles), se mantiene la presentación predeterminada.
@container (min-width: 400px) {
.card { flex-direction: row; }
}Anidamiento en CSS
El anidamiento en CSS, o CSS nesting, permite incluir selectores dentro de otros selectores, de forma similar a como ocurre en lenguajes preprocesadores como SCSS o LESS CSS.
Esto hace que el código sea más claro y fácil de mantener, ya que los estilos relacionados se agrupan en un mismo bloque en lugar de repetir largas cadenas de selectores una y otra vez. En el siguiente ejemplo, todos los botones comparten un mismo estilo base y, según la clase adicional (primary o secondary), adoptan un aspecto diferente:
button {
padding: 0.5rem 1rem;
border: none;
&.primary {
background: blue;
color: white;
}
&.secondary {
background: gray;
color: black;
}
}Nuevas funciones de color en CSS
Gracias a las nuevas funciones de CSS, como color-mix() o light-dark(), es posible mezclar colores directamente en la hoja de estilos o seleccionar automáticamente variantes según el nivel de luminosidad. Esto permite crear degradados, temas personalizados o adaptaciones al modo oscuro sin necesidad de calcular previamente los valores de color.
De esta forma, CSS se vuelve más flexible, ya que los colores dejan de ser elementos estáticos y pueden calcularse y ajustarse dinámicamente. En el siguiente ejemplo, la función color-mix() define el color de fondo de todos los elementos con la clase .btn como una mezcla 50:50 entre rojo y azul, es decir, violeta:
.btn {
background: color-mix(in srgb, red 50%, blue);
}Scroll Snap
Scroll Snap es una función de CSS que permite hacer que los elementos se ajusten automáticamente a posiciones específicas al desplazarse por la página. Con esta propiedad, se pueden crear galerías de imágenes, carruseles o secciones de página que se detienen de forma precisa en un punto definido durante el desplazamiento.
Esto ofrece una navegación más fluida y agradable para el usuario. En el siguiente ejemplo, el contenedor principal .slider se desplaza en horizontal (x) y establece que el ajuste sea obligatorio (mandatory). Cada elemento hijo .slide se alinea al desplazarse de modo que se fije al inicio del contenedor (start):
.slider {
scroll-snap-type: x mandatory;
}
.slide {
scroll-snap-align: start;
}