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 di­fe­re­n­tes elementos HTML. Las reglas CSS funcionan de manera in­de­pe­n­die­n­te al código HTML y deben in­se­r­tar­se en el documento mediante alguno de los métodos di­s­po­ni­bles.

Hosting
Hosting de primera al mejor precio
  • 3x más rápido, ahora un 60 % de ahorro
  • Alta di­s­po­ni­bi­li­dad >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 en­cue­n­tran di­re­c­ta­me­n­te dentro del documento HTML. Esto permite insertar CSS al inicio del archivo HTML o in­te­grar­lo de forma continua en el código fuente. Para aplicar este método, conviene tener un buen co­no­ci­mie­n­to básico de HTML y de su sintaxis.

No obstante, el método más habitual y limpio en el de­sa­rro­llo 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 in­de­pe­n­die­n­te. A co­n­ti­nua­ción, te mostramos un resumen de las tres formas más comunes de incluir CSS en HTML:

  • estilo en línea, es decir, di­re­c­ta­me­n­te en el código fuente
  • al inicio del documento HTML
  • en un archivo CSS externo
Crear una página web
Estás de suerte, tu página web ahora con IA
  • Creador de páginas web rápido e intuitivo
  • Imágenes y textos in­s­ta­n­tá­neos con SEO op­ti­mi­za­do por IA
  • Dominio, SSL y buzón de correo ele­c­tró­ni­co incluidos

Incluir CSS: estilo en línea

En este método, las reglas de estilo se añaden di­re­c­ta­me­n­te al código fuente mediante la etiqueta style. Las pro­pie­da­des definidas se aplican úni­ca­me­n­te a un elemento HTML concreto, lo que permite utilizar di­fe­re­n­tes estilos dentro del mismo documento HTML. En el siguiente ejemplo, el en­ca­be­za­do 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>
html

Al utilizar este tipo de inclusión, es im­po­r­ta­n­te tener en cuenta que se pierden muchas de las ventajas que ofrece CSS. Entre ellas, la po­si­bi­li­dad 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 ma­n­te­ni­mie­n­to, ya que requiere modificar di­re­c­ta­me­n­te 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 in­s­tru­c­ció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>
html

Incluir CSS mediante un archivo externo

Esta es pro­ba­ble­me­n­te la mejor forma de incluir CSS en HTML. Dado que una página web suele estar compuesta por varias secciones o do­cu­me­n­tos, resulta más práctico guardar las reglas de estilo en un archivo in­de­pe­n­die­n­te. Esto permite una se­pa­ra­ción clara entre el contenido y el diseño, además de facilitar el ma­n­te­ni­mie­n­to. El archivo externo si­m­ple­me­n­te 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>
html

El atributo rel define aquí el tipo de relación lógica, mientras que href hace re­fe­re­n­cia 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 úni­ca­me­n­te los se­le­c­to­res co­rre­s­po­n­die­n­tes y las llaves con las de­cla­ra­cio­nes, como se muestra en el siguiente ejemplo:

h1 {
color: blue;
font-size:14px;
}
css

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 se­le­c­to­res modernos como :has(), es posible aplicar estilos a los elementos padre según las co­n­di­cio­nes de sus elementos hijos, mientras que las consultas de co­n­te­ne­dor permiten que cada co­m­po­ne­n­te se adapte al tamaño de su propio co­n­te­ne­dor, in­de­pe­n­die­n­te­me­n­te del ancho de la ventana. Estas y otras novedades facilitan la creación de diseños más modulares, dinámicos y ac­ce­si­bles, sin necesidad de recurrir a so­lu­cio­nes complejas o al uso de Ja­va­S­cri­pt.

Pseu­do­cla­se de CSS :has()

Se trata de un selector padre que permite aplicar estilos pre­de­fi­ni­dos bajo ciertas co­n­di­cio­nes. Por ejemplo, un campo de fo­r­mu­la­rio 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;
}
css

Consultas de co­n­te­ne­dor

Las consultas de co­n­te­ne­dor 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 co­n­te­ne­dor que las rodea.

De este modo, cada módulo o co­m­po­ne­n­te puede adaptarse in­di­vi­dua­l­me­n­te en función del espacio di­s­po­ni­ble dentro de su elemento padre. Esto hace posible un diseño web re­s­po­n­si­vo modular y realmente flexible, que no depende del ancho de la ventana. Por ejemplo, se puede es­ta­ble­cer que las tarjetas con imagen y texto se muestren alineadas en una misma fila cuando el co­n­te­ne­dor que las contiene tenga su­fi­cie­n­te ancho.

Si el co­n­te­ne­dor es más estrecho que un valor de­te­r­mi­na­do (en este ejemplo, 400 píxeles), se mantiene la pre­se­n­ta­ción pre­de­te­r­mi­na­da.

@container (min-width: 400px) {
    .card { flex-direction: row; }
}
css

Ani­da­mie­n­to en CSS

El ani­da­mie­n­to en CSS, o CSS nesting, permite incluir se­le­c­to­res dentro de otros se­le­c­to­res, de forma similar a como ocurre en lenguajes pre­pro­ce­sa­do­res como SCSS o LESS CSS.

Esto hace que el código sea más claro y fácil de mantener, ya que los estilos re­la­cio­na­dos se agrupan en un mismo bloque en lugar de repetir largas cadenas de se­le­c­to­res 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;
    }
}
css

Nuevas funciones de color en CSS

Gracias a las nuevas funciones de CSS, como color-mix() o light-dark(), es posible mezclar colores di­re­c­ta­me­n­te en la hoja de estilos o se­le­c­cio­nar au­to­má­ti­ca­me­n­te variantes según el nivel de lu­mi­no­si­dad. Esto permite crear de­gra­da­dos, temas pe­r­so­na­li­za­dos o ada­p­ta­cio­nes al modo oscuro sin necesidad de calcular pre­via­me­n­te 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 ca­l­cu­lar­se y ajustarse di­ná­mi­ca­me­n­te. 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);
}
css

Scroll Snap

Scroll Snap es una función de CSS que permite hacer que los elementos se ajusten au­to­má­ti­ca­me­n­te a po­si­cio­nes es­pe­cí­fi­cas al de­s­pla­zar­se por la página. Con esta propiedad, se pueden crear galerías de imágenes, ca­rru­se­les o secciones de página que se detienen de forma precisa en un punto definido durante el de­s­pla­za­mie­n­to.

Esto ofrece una na­ve­ga­ción más fluida y agradable para el usuario. En el siguiente ejemplo, el co­n­te­ne­dor principal .slider se desplaza en ho­ri­zo­n­tal (x) y establece que el ajuste sea obli­ga­to­rio (mandatory). Cada elemento hijo .slide se alinea al de­s­pla­zar­se de modo que se fije al inicio del co­n­te­ne­dor (start):

.slider {
    scroll-snap-type: x mandatory;
}
.slide {
    scroll-snap-align: start;
}
css
Ir al menú principal