Qué es CSS: tutorial introductorio de hojas de estilo en cascada
CSS sirve para definir el aspecto y el diseño de las páginas web. Con las hojas de estilo en cascada separas el diseño del contenido y consigues una estructura clara y flexible. En este tutorial de CSS descubrirás qué es CSS, aprenderás los conceptos básicos y cómo usarlo para controlar de forma precisa el diseño, los colores y la tipografía de tu página web.
La separación de contenido y presentación
En combinación con HTML, CSS permite separar el contenido de la presentación.
El lenguaje de marcado de hipertexto (HTML) se utiliza para enriquecer documentos de texto con información que permite una estructuración semántica de los elementos. De este modo, el lenguaje de marcado crea la base de cualquier página web: el código HTML. Este define de qué elementos HTML se compone un documento (por ejemplo, <body>, <header>, <footer>) y cómo deben interpretarse los contenidos (por ejemplo, un encabezado <h1> o un párrafo <p>).
En sus inicios, HTML también incluía instrucciones básicas de diseño. Sin embargo, estas se consideran obsoletas desde HTML5 y hoy en día no deberían utilizarse. En su lugar, se recurre al lenguaje de hojas de estilo CSS (Cascading Style Sheets) para gestionar de forma independiente los aspectos visuales.
- 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
¿Qué es CSS?
Al igual que HTML, CSS se escribe en formato de texto. Puede integrarse directamente en el documento HTML, ya sea en línea (inline) para cada elemento o de manera global en la cabecera del archivo. No obstante, lo habitual es que los diseñadores web utilicen archivos CSS independientes para dar formato a las páginas web. De este modo se obtiene un código fuente claro y ordenado, en el que se evitan instrucciones de diseño redundantes gracias a las referencias a hojas de estilo externas. Cuantas menos repeticiones haya, más limpio y eficiente será el código fuente.
Si es necesario realizar cambios en el diseño, basta con modificarlos en los archivos CSS centrales. Así no hace falta revisar y adaptar cada documento HTML por separado, lo que facilita el mantenimiento y hace el código más fácil de actualizar. Como estándar vivo, CSS es desarrollado y actualizado de manera continua por el World Wide Web Consortium (W3C).
Estructura básica: la sintaxis de CSS
La función principal de CSS es definir el diseño de una página web. Para ello, a los elementos HTML subyacentes se les asignan propiedades con determinados valores mediante el lenguaje de hojas de estilo. La estructura básica de una regla de estilo sigue el siguiente esquema:
Selector { declaración }El selector indica a qué elementos HTML se aplica la regla. Entre llaves se define un bloque de declaraciones: una o varias declaraciones, cada una formada por una propiedad y un valor, y terminada con punto y coma. Siguiendo este esquema, por ejemplo, se puede asignar un color de texto como el rojo a un encabezado:
h2 { color: red; }Los diseñadores web pueden asignar una sola propiedad a un selector o definir conjuntos de reglas más amplios que incluyan instrucciones de diseño detalladas. Para mejorar la legibilidad, se ha establecido una forma de escritura en la que todas las propiedades de un conjunto de reglas se colocan en líneas separadas:
Selector {
propiedad1: valor;
propiedad2: valor;
propiedad3: valor;
}En la práctica, un conjunto de propiedades de este tipo podría tener el siguiente aspecto:
h2 {
color: #ff0000;
font-family: Helvetica, sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
}Además, un conjunto de reglas puede incluir varios selectores. En ese caso, se escriben separados por comas antes de la declaración:
Selector1, Selector2 { declaración }Selectores CSS
CSS admite diversos selectores, que permiten asignar reglas de estilo de forma personalizada. Para empezar, basta con familiarizarse con los selectores de tipo, de clase, de ID y el selector universal. Ten en cuenta que CSS distingue entre mayúsculas y minúsculas.
| Tipo de selector | Sintaxis CSS | Descripción | Especificidad |
|---|---|---|---|
| Selector de tipo | Elemento HTML (p. ej., h2)
|
Un selector de tipo corresponde al nombre del elemento al que hace referencia. Los estilos se aplican a todos los elementos HTML del mismo tipo. | 1 |
| Selector de clase | .ejemplo
|
Un selector de clase se aplica a todos los elementos que pertenecen a una clase determinada. Los selectores de clase se definen con un punto (.) seguido del nombre de la clase: .ejemplo. Las clases se asignan a los elementos HTML mediante el atributo class (class="ejemplo").
|
10 |
| Selector de ID | #ejemplo
|
Un selector de ID se aplica a un único elemento con un identificador exclusivo. Se integra en el código HTML mediante el atributo id (id="ejemplo").
|
100 |
| Selector universal | *
|
El selector universal, representado por un asterisco (*), se aplica a todos los elementos HTML de un documento.
|
0 |
Cuando varias reglas afectan a un mismo elemento, la especificidad del selector determina cuál se aplica. Cada tipo de selector tiene un valor concreto que se utiliza para calcular dicha especificidad.
Selector de tipo
El uso de los distintos selectores CSS se entiende mejor a través de ejemplos. El siguiente código muestra el selector de tipo h2 con su declaración:
h2 {
color: #305796;
font-family: Helvetica, sans-serif;
}El formato se aplica a todos los elementos HTML del tipo h2.
Selector de clase
Como alternativa, el formato CSS puede aplicarse mediante un selector de clase. Esto permite a los diseñadores asignar las mismas reglas de estilo a elementos HTML independientemente de su tipo.
.contenido {
color: #ff0000;
font-family: Helvetica, sans-serif;
}El formato se aplica a todos los elementos HTML a los que se les haya asignado la clase .contenido. Esta asignación se realiza en el código HTML según el siguiente esquema:
<p class="contenido">Texto de ejemplo</p>En HTML, los nombres de las clases se escriben sin el punto.
Selector de ID
Si una regla de estilo debe aplicarse únicamente a un solo elemento dentro del código fuente HTML, se utiliza un selector de ID. El siguiente ejemplo muestra el formato de un área de navegación:
#navegacion {
font-family: Helvetica, sans-serif;
background-color: #8ad8d4;
border: 2px solid #448278;
}La asignación del estilo se realiza en el código HTML sin el símbolo de almohadilla:
<div id="navegacion">
<ul>
<li><a href="index.htm">Inicio</a></li>
<li><a href="impressum.htm">Aviso legal</a></li>
</ul>
</div>La ventaja de los selectores de ID es que permiten identificar de un vistazo qué partes del código corresponden a secciones únicas dentro de la página web.
Selector universal
Si una regla de estilo debe aplicarse a todos los elementos de un documento HTML, se utiliza el asterisco (*):
* {
font-family: Helvetica, sans-serif;
}Todos los elementos de texto se muestran en el navegador web con la fuente Helvetica.
Integrar CSS en HTML
Para que un navegador tenga en cuenta los estilos CSS, las reglas de diseño deben vincularse con el código fuente HTML. Para ello, existen tres opciones:
- Integrar directamente las declaraciones CSS en las etiquetas HTML (estilos inline)
- Definir CSS en la cabecera del documento HTML
- Hacer referencia a una hoja de estilos independiente
Esta última opción se considera la más recomendable: en la práctica, las hojas de estilo suelen crearse como archivos de texto externos y enlazarse posteriormente, lo que facilita el mantenimiento y es clave para aprender CSS de forma estructurada.
Declaración CSS en etiquetas HTML
Si una declaración CSS solo debe dar formato a un punto concreto del código fuente, puede incluirse directamente en la etiqueta de apertura del elemento HTML correspondiente mediante el atributo style. En este caso se habla de un estilo inline.
<h2 style="color: red;">Subtítulo</h2>Esto tiene la ventaja de que no es necesario crear una hoja de estilos propia, el selector no es necesario y este tipo de asignación tiene una prioridad muy alta (valor 1000). No obstante, en cuanto se utiliza un conjunto de reglas más amplio, esta forma de formateo se vuelve poco clara y redundante.
Definición de CSS en la cabecera HTML
Si una misma regla de estilo debe aplicarse varias veces dentro de un documento HTML al mismo elemento (por ejemplo, a todos los h2 de la página web), definir la declaración CSS directamente en la etiqueta HTML resulta ineficiente. En su lugar, es preferible definir las reglas de estilo una sola vez en la cabecera del documento HTML mediante el elemento style:
<!DOCTYPE html>
<html lang="es">
<head>
<style>
h2 {
color: #ff0000;
font-family: 'Helvetica Neue', sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<h2>Subtítulo 1</h2>
[…]
<h2>Subtítulo 2</h2>
[…]
</body>
</html>El conjunto de reglas definido dentro del elemento style se aplica automáticamente a todos los elementos h2 posteriores. Si el elemento h2 debe utilizarse con estas mismas reglas de diseño en otras páginas web del mismo proyecto online, basta con definirlas en un archivo CSS centralizado.
Referencia a una hoja de estilos independiente
Cuando las reglas de estilo se definen en una hoja de estilos separada, es necesario vincularla al documento HTML correspondiente. Esto se hace mediante el elemento HTML <link>:
<link rel="stylesheet" href="ejemplo.css">El elemento link incluye los atributos obligatorios rel y href, y puede complementarse opcionalmente con los atributos type y media.
Atributos del elemento link |
Descripción |
|---|---|
rel
|
El atributo rel define el tipo de relación del elemento. El valor stylesheet indica que se va a enlazar una hoja de estilos.
|
href
|
El atributo href hace referencia al archivo que se va a utilizar como hoja de estilos.
|
type
|
El atributo opcional type describe el tipo de medio del archivo enlazado; en el caso de CSS, text/css.
|
media
|
Con el atributo media se puede definir que la hoja de estilos referenciada solo se utilice para un medio de salida concreto. Esto permite ofrecer hojas de estilo distintas según el dispositivo, por ejemplo screen o print.
|
Indicaciones de color en CSS
Como ya se ha mencionado en el capítulo introductorio, las asignaciones de color mediante CSS pueden definirse utilizando nombres de colores en inglés. Sin embargo, en la práctica este tipo de reglas se emplea con poca frecuencia. Lo más habitual es recurrir al modelo RGB, que ofrece muchas más gradaciones y permite a quienes gestionan páginas web realizar ajustes de color mucho más precisos. Los códigos correspondientes pueden obtenerse mediante un selector de color, como el que Google ofrece, por ejemplo, en forma de respuesta rápida.
En el modelo RGB, las proporciones de color se definen mediante valores decimales entre 0 y 255. Mientras que un valor de 0 indica que un color no tiene ninguna contribución de ese color primario, un valor de 255 representa la intensidad máxima.
Desde CSS3, los valores RGB pueden ampliarse con un cuarto valor, el denominado canal alfa (a). Este indica la opacidad del color y se expresa con valores entre 0 y 1 (por ejemplo, 0.8). De este modo, los colores RGB se definen en CSS de la siguiente forma:
rgba(valorRojo, valorVerde, valorAzul, opacidad)Así, los siguientes valores RGBA representan, por ejemplo, el color azul con una transparencia del 50 %:
rgba(0, 0, 255, 0.5)También puedes definir valores RGB en formato hexadecimal. El esquema básico de un código de color hexadecimal consta de una almohadilla (#) seguida de seis cifras hexadecimales que representan, en pares, cada uno de los colores del espacio RGB (rojo, verde y azul).
Las propiedades CSS más importantes
CSS pone a tu disposición numerosas propiedades con las que puedes definir reglas de estilo para los elementos HTML. Cada propiedad acepta un conjunto de valores definidos en la especificación. Para facilitar la comprensión, las propiedades CSS se agrupan por áreas de aplicación. A continuación, nos centramos en las más importantes.
Tipografía
La tipografía es uno de los elementos clave del diseño de una página web. CSS ofrece múltiples opciones para dar formato a los elementos tipográficos de una página HTML.
font-family
Si quieres definir una tipografía (font) concreta para los textos de una página web, se utiliza la propiedad CSS font-family. Esta te permite crear una llamada pila de fuentes (font stack), es decir, una lista priorizada de tipografías adecuadas. La estructura es siempre la misma: primero se indica la fuente preferida y, a continuación, varias alternativas de sustitución:
.contenido {
font-family: Georgia, Garamond, serif;
}En este ejemplo se define una regla de estilo en el archivo CSS. Georgia se establece como tipografía prioritaria y Garamond como alternativa. De este modo, el navegador mostrará el texto en Garamond si la fuente Georgia no está instalada en el sistema.
Es recomendable definir una familia tipográfica genérica como mecanismo de respaldo (fallback). Se trata de un nombre genérico que actúa como comodín para un grupo de tipografías similares.
font-style
La propiedad CSS font-style se refiere al estilo tipográfico de un texto y permite definir instrucciones de formato relacionadas con la inclinación de los caracteres.
| Valores para la inclinación del texto | Descripción |
|---|---|
normal
|
estilo de letra normal (valor predeterminado) |
italic
|
letra cursiva |
oblique
|
letra inclinada (aunque la fuente no tenga variante cursiva) |
El siguiente ejemplo muestra una regla de estilo para aplicar el estilo cursiva:
.contenido-especial {
font-family: Arial;
font-style: italic;
}font-variant
La propiedad CSS font-variant se utiliza para definir variantes tipográficas.
| Valores para las variantes tipográficas | Descripción |
|---|---|
normal
|
variante tipográfica normal (valor predeterminado) |
small-caps
|
versalitas (las minúsculas se muestran como mayúsculas de menor tamaño) |
all-small-caps
|
versalitas para mayúsculas y minúsculas |
El siguiente ejemplo define la variante tipográfica small-caps:
.contenido {
font-family: Arial;
font-variant: small-caps;
}font-size
Con la propiedad CSS font-size se define el tamaño de visualización de los elementos de texto. Este puede especificarse mediante valores absolutos o en relación con los elementos que lo rodean. Lo que se indica es la altura de los caracteres, el llamado tamaño de fuente. Para ello, los diseñadores web disponen de distintas sintaxis y unidades de medida.
Unidades de medida absolutas
Las unidades de medida absolutas se basan en longitudes físicas. Sin embargo, en pantalla los navegadores convierten todas estas unidades a píxeles y parten de una resolución de 96 dpi. Por este motivo, salvo px, las unidades absolutas apenas se utilizan en diseño web y suelen tener sentido únicamente en contextos de impresión.
| Unidad | Sintaxis CSS | Descripción |
|---|---|---|
| Píxel | px
|
La unidad px corresponde al tamaño de un elemento en píxeles. Los píxeles se representan en pantalla en relación con la densidad de puntos (por ejemplo, dots per inch, dpi). Como referencia de escalado se aplica: 1 píxel CSS equivale a 1/96 de pulgada. El usuario puede modificar la relación entre píxeles CSS y píxeles del dispositivo mediante el zoom del navegador. |
| Centímetro | cm
|
Tamaño en centímetros |
| Milímetro | mm
|
Tamaño en milímetros |
| Pulgada | in
|
Tamaño en pulgadas (1 in = 2,54 cm) |
| Punto | pt
|
Tamaño en puntos (1 pt equivale a 1/72 de pulgada) |
| Pica | pc
|
Tamaño en picas (1 pica equivale a 12 puntos) |
Además, el tamaño de fuente puede definirse mediante palabras clave absolutas:
| Palabra clave | Descripción | Ejemplo |
|---|---|---|
xx-small
|
diminuto | 9 px |
x-small
|
muy pequeño | 10 px |
small
|
pequeño | 13 px |
medium
|
medio (tamaño predeterminado del navegador) | 16 px |
large
|
grande | 19 px |
x-large
|
muy grande | 24 px |
xx-large
|
enorme | 32 px |
Unidades de medida relativas
Las unidades de medida relativas definen el tamaño de la fuente en función de un valor ya establecido. Los elementos HTML heredan su tamaño de fuente del elemento padre correspondiente. Como referencia para un tamaño de fuente relativo también puede utilizarse un valor técnico, como el tamaño de la pantalla del dispositivo o un valor predeterminado del navegador.
| Unidad | Sintaxis CSS | Descripción |
|---|---|---|
| Porcentaje | %
|
La unidad % indica el tamaño de la fuente como un porcentaje del tamaño heredado.
|
| em (altura de fuente) | em
|
La unidad em también se define en relación con el elemento padre. 1em equivale al 100 % del tamaño de fuente heredado. Si no se ha definido un tamaño en el elemento padre, se utiliza el tamaño estándar del dispositivo.
|
| Altura x | ex
|
El valor de referencia de ex es la altura de la letra minúscula x de la tipografía utilizada. Si la fuente no define altura x, se aplica 1ex = 0.5em.
|
| Root-em | rem
|
La unidad rem se basa en el elemento raíz del documento (por ejemplo, el elemento HTML). 1rem equivale al 100 % del tamaño de fuente definido para dicho elemento.
|
| Anchura del viewport | vw
|
La unidad vw se basa en la anchura del área visible (viewport) del dispositivo. 1vw equivale al 1 % de la anchura del viewport.
|
| Altura del viewport | vh
|
La unidad vh se basa en la altura del área visible del dispositivo. 1vh equivale al 1 % de la altura del viewport.
|
El tamaño de la fuente también puede definirse mediante palabras clave relativas. En este caso, el valor de referencia es el tamaño de fuente predeterminado del navegador.
| Relativo | Descripción |
|---|---|
smaller
|
El elemento actual se muestra más pequeño que el elemento padre. |
larger
|
El elemento actual se muestra más grande que el elemento padre. |
Para garantizar una visualización óptima del texto en distintos dispositivos, se recomienda utilizar unidades relativas como em o %.
El esquema básico para definir el tamaño de la fuente con CSS es el siguiente:
.contenido {
font-size: 1.9em;
}line-height
La propiedad CSS line-height se utiliza para definir la altura de línea de un párrafo de texto. Se aplican las mismas unidades de medida que en font-size, y los porcentajes se calculan en relación con la font-size del texto correspondiente. Alternativamente, puedes indicar line-height como un valor numérico sin unidad. Otros valores posibles son normal (valor predeterminado) e inherit (heredado del elemento padre).
Por ejemplo, una line-height de 1.5 equivale a una altura de línea del 150 % del tamaño de la fuente, es decir, 1.5em.
.contenido {
line-height: 1.5;
}font-weight
La propiedad CSS font-weight define el grosor del trazo de un elemento de texto. Los diseñadores la utilizan para mostrar partes del texto en negrita. Los valores pueden especificarse de forma absoluta o en relación con el elemento padre.
Valores absolutos de la propiedad font-weight |
Descripción |
|---|---|
| 1–1000 | valores numéricos de 1 (extrafino) a 1000 (extragrueso) |
normal
|
grosor normal (equivale al valor 400) |
bold
|
negrita (equivale al valor 700) |
Los valores numéricos solo son relevantes al trabajar con fuentes web. Por ello, en la práctica suelen ser suficientes dos grosores de trazo: normal y bold.
.contenido {
font-weight: normal;
}
.contenido {
font-weight: bold;
}Los valores relativos de la propiedad CSS font-weight definen el grosor del trazo de un texto en relación con el grosor heredado del elemento padre.
Valores relativos de la propiedad font-weight |
Descripción |
|---|---|
bolder
|
más grueso que en el elemento padre |
lighter
|
más fino que en el elemento padre |
- La forma más fácil y rápida de tener tu página web online
- Construye tu marca con un nombre de dominio propio y un e-mail profesional
- Tu página web siempre actualizada con nuestro servicio de mantenimiento
Formato de texto
Además de la tipografía, CSS ofrece diversas propiedades para el formato del texto. Estas permiten definir la alineación del texto, el espaciado entre caracteres y palabras, así como aplicar decoraciones a los elementos textuales.
text-align
La propiedad CSS text-align se utiliza para la alineación de texto y de elementos inline, es decir, elementos integrados en el flujo del texto, como imágenes o botones. Los valores habituales son:
left(alineado a la izquierda)right(alineado a la derecha)center(centrado)justify(justificado)inherit(hereda el valor del elemento padre)
El siguiente código centra el texto de ejemplo:
.contenido {
text-align: center;
}Otros valores de la propiedad text-align definen la alineación del texto en relación con la dirección de escritura (direction).
| Valores para la alineación relativa del texto | Descripción |
|---|---|
start
|
El texto se alinea hacia el lado donde comienza. Con dirección de izquierda a derecha ({ direction: ltr; }) equivale a left. Con dirección de derecha a izquierda ({ direction: rtl; }) equivale a right.
|
end
|
El texto se alinea hacia el lado donde termina. |
El valor start se considera el valor predeterminado.
Todos los navegadores habituales muestran automáticamente la última línea de un texto justificado alineada a la izquierda. Si este comportamiento no es deseado, puede modificarse de forma independiente mediante la propiedad CSS text-align-last, cuyos valores posibles coinciden con los de text-align.
hyphens
Además, CSS ofrece la propiedad hyphens para configurar la separación automática de sílabas. El lenguaje de hojas de estilo pone a disposición los siguientes valores para la propiedad hyphens:
Valores de la propiedad hyphens |
Descripción |
|---|---|
manual
|
Separación manual de sílabas: se tienen en cuenta los guiones blandos al dividir palabras (valor predeterminado). |
none
|
Sin separación de sílabas: los guiones blandos no se consideran y los saltos de línea solo se realizan en los espacios. |
auto
|
Separación automática de sílabas: la división de palabras se realiza según las reglas del idioma definido mediante el atributo HTML lang.
|
inherit
|
La configuración se hereda del elemento padre. |
word-spacing
La propiedad CSS word-spacing regula el espacio entre palabras dentro de un elemento de texto. Las personas responsables de una página web pueden definir la distancia entre palabras mediante valores de tamaño. Para ello están disponibles las mismas unidades de medida que en font-size, con la excepción del porcentaje. Otros valores posibles para la propiedad word-spacing son normal (valor predeterminado) e inherit (heredado del elemento padre).
El siguiente ejemplo de código define un espacio entre palabras de 2em, que se añade al espaciado predeterminado:
.contenido {
word-spacing: 2em;
}letter-spacing
Si no se desea modificar la distancia entre palabras, sino el espaciado entre letras, se utiliza la propiedad CSS letter-spacing. Al igual que en el caso anterior, pueden emplearse valores de tamaño (excepto porcentajes), así como los valores normal e inherit.
El siguiente ejemplo de código muestra un fragmento de texto en el que una palabra se resalta mediante un espaciado adicional entre letras de 1em:
.contenido-especial {
letter-spacing: 1em;
}text-indent
La propiedad CSS text-indent permite definir sangrías que afectan únicamente a la primera línea de un párrafo. Se pueden utilizar valores positivos, negativos o porcentuales en relación con la anchura del bloque de texto correspondiente.
El siguiente ejemplo define una sangría del 5 % en la primera línea. La clase se asigna en el código HTML mediante elementos span:
.contenido {
text-indent: 5%;
}Para crear párrafos con sangría francesa, la propiedad text-indent se utiliza con un valor negativo.
text-decoration
La propiedad CSS text-decoration permite añadir decoraciones a los elementos de texto, como subrayados. Los valores posibles son:
Valores de la propiedad text-decoration |
Descripción |
|---|---|
none
|
Sin decoración de texto |
underline
|
Cada línea del fragmento de texto se muestra subrayada. |
overline
|
Se muestra una línea sobre cada línea del texto. |
line-through
|
Cada línea del texto se muestra tachada. |
inherit
|
La decoración del texto se hereda del elemento padre. |
El siguiente ejemplo define subrayados para determinados grupos de palabras dentro de un texto:
.contenido-subrayado {
text-decoration: underline;
}text-transform
La propiedad text-transform permite realizar transformaciones de texto mediante CSS. De este modo, los textos pueden mostrarse en mayúsculas o minúsculas sin modificar el contenido original. Esta propiedad admite las siguientes transformaciones:
Valores de la propiedad text-transform |
Descripción |
|---|---|
capitalize
|
La primera letra de cada palabra se muestra en mayúscula. |
uppercase
|
Todo el texto se muestra en mayúsculas. |
lowercase
|
Todo el texto se muestra en minúsculas. |
none
|
No se aplica ninguna transformación. |
inherit
|
La transformación se hereda del elemento padre. |
Si se desea que las letras iniciales de un fragmento se muestren en mayúsculas independientemente del texto original, puede utilizarse el siguiente formato:
.contenido {
text-transform: capitalize;
}Colores de texto y de fondo
Al elegir colores de texto y de fondo, los diseñadores web suelen recurrir a los códigos de color ya explicados en formato decimal o hexadecimal. Varias propiedades CSS utilizan estos códigos de color.
color
La propiedad CSS color se utiliza para definir el color del texto. Los valores habituales incluyen colores en formato RGB, códigos hexadecimales o valores HSL. Además, los valores transparent y opacity permiten mostrar elementos de forma invisible. El siguiente ejemplo muestra la definición del color del texto mediante un código hexadecimal:
.contenido {
font-family: Arial;
font-size: 5em;
color: #d82451;
}background-color
La propiedad CSS background-color se utiliza cuando se desea asignar un color de fondo a un elemento. Los valores disponibles son los mismos que para la propiedad color.
El siguiente ejemplo muestra una combinación de color de texto y color de fondo:
.contenido {
font-family: Arial;
font-size: 5em;
color: #d82451;
background-color: #24d8ab;
}Esta regla indica al navegador que todos los elementos de texto con la clase contenido se muestren en color burdeos (#d82451) sobre un fondo verde turquesa (#24d8ab).
background-image
Como alternativa a un color de fondo, puede cargarse una imagen como fondo de un elemento. Los diseñadores utilizan para ello la propiedad background-image, cuyo valor indica la ruta del archivo gráfico según la siguiente sintaxis:
.contenido {
background-image:
url(ruta/a/la/imagen);
}En lugar de background-image o background-color, también puedes usar la forma abreviada background.
Además, CSS permite definir degradados de color como fondos:
| Degradados de color en CSS | Descripción |
|---|---|
linear-gradient()
|
La función crea un degradado lineal. |
radial-gradient()
|
La función crea un degradado radial. |
repeating-linear-gradient()
|
La función crea un degradado lineal repetido. |
repeating-radial-gradient()
|
La función crea un degradado radial repetido. |
En esta introducción a CSS nos limitamos, a modo de ejemplo, a la función linear-gradient(). Para aplicar un degradado lineal como fondo de un elemento, se utiliza linear-gradient() como valor de la propiedad background. Esta función requiere al menos dos valores de color como argumentos. El formato en el que se definan los colores no es relevante.
.contenido {
width: 400px;
height: 400px;
background: linear-gradient(green, yellow);
}Bordes
CSS también permite añadir bordes a los elementos HTML. Esto resulta especialmente útil para los llamados elementos de nivel de bloque (block-level elements), como encabezados, párrafos, elementos div o tablas HTML, que aparecen dentro del elemento body. Sin formato adicional, estos bloques de contenido se extienden a lo ancho de todo el espacio disponible y se colocan uno debajo del otro.
Los elementos de nivel de bloque se diferencian de los llamados elementos inline, como <b>, <i>, <a> o <span>. Los elementos inline solo aparecen dentro de elementos de nivel de bloque y su anchura viene determinada exclusivamente por su propio contenido.
Si se desea que un borde rodee por completo un elemento de nivel de bloque o un elemento inline, se utiliza la propiedad border. Alternativamente, es posible definir el diseño del borde de cada lado del elemento por separado.
| Propiedades para bordes | Descripción |
|---|---|
border
|
Define las propiedades del borde para todos los lados del elemento. |
border-top
|
Define las propiedades del borde superior. |
border-right
|
Define las propiedades del borde derecho. |
border-bottom
|
Define las propiedades del borde inferior. |
border-left
|
Define las propiedades del borde izquierdo. |
Tanto la propiedad border como las propiedades de los lados individuales del borde pueden especificarse con mayor detalle. Los valores correspondientes se indican tras la propiedad, separados por espacios, según el siguiente esquema:
.contenido {
border: style width color;
}
.contenido {
border: solid 4px #ff0000;
}Además, la propiedad border-radius permite redondear las esquinas del borde.
Tipo de borde
Al elegir un tipo de borde, defines un borde decorativo para el elemento de nivel de bloque o inline correspondiente. Algunos tipos de borde solo se aprecian correctamente cuando se establece un ancho de borde adecuado.
| Valores posibles para el tipo de borde | Descripción |
|---|---|
none
|
Sin borde |
hidden
|
No muestra ningún borde y también lo suprime en celdas de tabla adyacentes |
dotted
|
Define un borde punteado |
dashed
|
Define un borde discontinuo |
solid
|
Define un borde continuo |
double
|
Define un borde doble |
groove, ridge, inset, outset
|
Permiten crear distintos efectos 3D |
La siguiente imagen compara los tipos de borde en CSS:
La definición del tipo de borde es obligatoria. Si no se especifica un tipo de borde, el navegador no mostrará el borde, aunque se hayan definido valores para el ancho o el color del mismo.
Ancho del borde
El ancho del borde define el grosor de la línea del borde.
| Valores posibles para el ancho del borde | Descripción |
|---|---|
| Valor de longitud | El ancho del borde se especifica mediante las unidades de medida descritas en font-size. No es posible indicar el ancho del borde en porcentajes.
|
thin
|
fino |
medium
|
grosor medio |
thick
|
grueso |
Color del borde
Las opciones de color para la propiedad border-color coinciden con las de las propiedades color y background-color.
| Valores posibles para el color del borde | Descripción |
|---|---|
| Valores de color | El color del borde puede definirse mediante palabras clave, valores HEX o valores RGB o HSL. |
transparent
|
Define el borde como invisible. |
El siguiente ejemplo de código combina la propiedad border con la definición de color de texto y de fondo. El conjunto de reglas se define en el archivo CSS para la clase borde:
.borde {
font-family: Arial;
font-size: 5em;
color: #d82451;
background-color: #24d8ab;
border: 10px ridge #d82451;
}border-radius
La propiedad border-radius permite redondear las esquinas de un borde con formas circulares o elípticas. El fondo existente se recorta siguiendo la curva definida, lo que funciona incluso si el elemento no tiene borde. Usada correctamente, border-radius también permite crear formas geométricas sencillas.
Los valores posibles para la propiedad border-radius son hasta cuatro medidas, cada una correspondiente a una esquina del borde. La asignación puede hacerse con uno, dos, tres o cuatro valores.
Valores de la propiedad border-radius |
Descripción |
|---|---|
| Un valor | El valor se aplica a las cuatro esquinas. |
| Dos valores | El primer valor define las esquinas superior izquierda e inferior derecha. El segundo valor define las esquinas superior derecha e inferior izquierda. |
| Tres valores | El primer valor define la esquina superior izquierda. El segundo valor define las esquinas superior derecha e inferior izquierda. El tercer valor define la esquina inferior derecha. |
| Cuatro valores | Cada esquina se define con un valor propio, siguiendo el sentido de las agujas del reloj: superior izquierda, superior derecha, inferior derecha, inferior izquierda. |
Los valores del radio del borde se escriben separados por espacios a continuación de la propiedad border-radius. El esquema general de la declaración es el siguiente (los valores numéricos son solo un ejemplo):
border-radius: 4em 2em 3em 1em;La propiedad border-radius puede definirse en el mismo conjunto de reglas que la propiedad border o en clases separadas.
El siguiente conjunto de reglas define un borde con un border-radius de 2em:
.borde {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 2em;
}
De forma alternativa, es posible definir valores distintos para cada una de las cuatro esquinas:
.borde {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 2em 1em 3em 4em;
}
En ambos casos, las esquinas del borde se redondean de forma circular. Si se desea un redondeo elíptico, es necesario definir dos valores por esquina. De este modo, la declaración de un borde con esquinas elípticas puede incluir hasta ocho valores:
border-radius: 1em 4em 1em 4em / 4em 1em 4em 1em;Los valores situados antes de la barra (/) definen el radio en el eje horizontal de la elipse, mientras que los valores situados después de la barra determinan el radio en el eje vertical.
.borde {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 1em 4em / 4em 1em;
}
Un fondo existente se recorta automáticamente siguiendo la curva definida.
.borde {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 2em;
background-color: #24d8ab;
}
Esto se aplica tanto a los colores de fondo como a las imágenes de fondo, pero no a los elementos de texto.
Posicionamiento
La propiedad CSS position se utiliza para sacar una caja del flujo normal de los elementos y colocarla en cualquier punto de la página web. Otras cajas, independientemente de si forman parte del flujo del documento o también están posicionadas, no influyen en la posición de una caja formateada de este modo.
La propiedad position admite distintos valores, que pueden especificarse con mayor detalle mediante las propiedades left, right, top y bottom, junto con sus correspondientes valores de medida:
Valores de la propiedad position |
Descripción |
|---|---|
absolute
|
Posiciona la caja en relación con el elemento contenedor más cercano que tenga definida una position.
|
relative
|
Posiciona la caja en relación con su posición normal dentro del flujo del documento. |
fixed
|
Posiciona la caja en relación con la ventana del navegador y permanece fija al hacer scroll. |
static
|
Posición natural de la caja dentro del flujo del texto. Con position: static, los valores de posicionamiento no tienen efecto. Es el valor predeterminado.
|
sticky
|
Posiciona la caja como un elemento con position: relative mientras se encuentra dentro del viewport. Cuando está a punto de salir del área visible, se saca del flujo del documento y queda “fijada” al hacer scroll. Puede considerarse una combinación de relative y fixed.
|
Posicionamiento absoluto
Con position: absolute, la caja se saca del flujo del documento y se posiciona en el lugar definido por las propiedades indicadas a continuación. Estas referencias se calculan en relación con el elemento ancestro más cercano que también tenga definida la propiedad position. Si no existe ningún elemento de este tipo, se toma como referencia el elemento raíz <html>. Las cajas con position: absolute no influyen en la posición de otros elementos y pueden superponerse a ellos o quedar cubiertas por estos.
Los siguientes conjuntos de reglas muestran el posicionamiento absoluto de las cajas CSS .rojo, .azul y .verde dentro del elemento contenedor .fondo:
.fondo {
height: 500px;
width: 500px;
border: solid grey;
}
.rojo {
height: 150px;
width: 150px;
background-color: rgba(255,0,0,0.5);
position: absolute;
top: 100px;
left: 100px;
}
.azul {
height: 150px;
width: 150px;
background-color: rgba(0,0,255,0.5);
position: absolute;
top: 150px;
left: 150px;
}
.verde {
height: 150px;
width: 150px;
background-color: rgba(0,255,0,0.5);
position: absolute;
top: 200px;
left: 200px;
}Las cajas de contenido .rojo, .azul y .verde se han formateado como superficies semitransparentes con unas dimensiones de 150 px × 150 px. La caja de contenido .fondo, con unas dimensiones de 500 px × 500 px, está rodeada por un borde gris.
Las reglas de estilo se integran en el código HTML mediante clases:
<div class="fondo">
<p class="rojo"> </p>
<p class="azul"> </p>
<p class="verde"> </p>
</div>La vista en el navegador muestra la distinta posición de las cajas dentro del elemento <div>. Cada elemento se desplaza 50 px hacia la derecha y hacia abajo respecto al anterior. El uso de colores semitransparentes ilustra claramente la posibilidad de superposición al utilizar posicionamiento absoluto.
Posicionamiento relativo
Con el posicionamiento relativo, la caja permanece integrada en el flujo normal del documento, pero puede desplazarse mediante valores de posicionamiento relativos a esa posición original. Es decir, la caja se ajusta con respecto a sí misma. Los elementos que la preceden o la siguen en el flujo se comportan como si la caja no se hubiera desplazado.
Para desplazar una caja a partir de su posición dentro del flujo del documento, el conjunto de reglas correspondiente se amplía con la declaración position: relative y con los valores de posicionamiento deseados.
El siguiente bloque de código lo ilustra con el ejemplo de la caja azul:
.azul {
height: 150px;
width: 150px;
background-color: rgba(0,0,255,0.5);
position: relative;
left: 50px;
}La regla position: relative junto con la indicación left: 50px provoca que, en la vista del navegador, la caja azul se desplace 50 px hacia la izquierda.
El posicionamiento relativo también puede aplicarse a elementos flotados.
Cajas CSS fijadas
La alineación de las cajas fijadas funciona de forma similar al posicionamiento absoluto, es decir, fuera del flujo del documento. Todas las indicaciones de posición se definen en relación con el viewport. Una caja fijada de este modo aparece siempre en el mismo lugar de la pantalla, incluso cuando el usuario se desplaza por la página web. Así pueden fijarse elementos de navegación, como menús o botones de acción (por ejemplo, “Volver al inicio”), dentro del área visible.
El modelo de cajas en CSS
El modelo de cajas CSS describe cómo los navegadores representan y posicionan los elementos HTML como superficies rectangulares (“cajas”). En esencia, toda página web se compone de la interacción de estas cajas, cuya disposición viene determinada por el llamado flujo de elementos: por defecto, los elementos se colocan de izquierda a derecha y de arriba abajo.
CSS distingue entre dos tipos de cajas:
- Cajas de bloque (
div,p): ocupan por defecto todo el ancho de su elemento padre y siempre comienzan en una nueva línea. - Cajas inline (
span,b,i): se muestran dentro del flujo del texto y se ajustan a su contenido.
El flujo de elementos de las cajas de bloque e inline puede visualizarse en las siguientes ilustraciones:
Las cajas de bloque estructuran el diseño de la página, mientras que las cajas inline se encargan del texto y de los elementos integrados en él. Los contenedores vacíos como <div> suelen utilizarse únicamente para la agrupación y el formateo mediante CSS.
| Niveles del modelo de cajas | Descripción |
|---|---|
| Área de contenido (content box) | Superficie cuyo tamaño viene determinado por la cantidad de texto o por las dimensiones de una imagen. En los elementos de nivel de bloque, la altura y la anchura pueden definirse mediante las propiedades height y width. En los elementos inline, este tipo de formateo no está disponible.
|
| Relleno (padding box) | La padding box (padding = relleno) define la distancia entre la content box y la border box. |
| Borde (border box) | La border box define el borde del elemento. |
| Margen (margin box) | La margin box define la distancia entre el elemento actual y su elemento padre o los elementos adyacentes. La propiedad margin también puede aceptar valores negativos.
|
Si se desea dar formato a los cuatro lados de una caja al mismo tiempo, se utilizan las propiedades padding, border y margin:
| Relleno | Borde | Margen | |
|---|---|---|---|
| arriba | padding-top
|
border-top
|
margin-top
|
| abajo | padding-bottom
|
border-bottom
|
margin-bottom
|
| izquierda | padding-left
|
border-left
|
margin-left
|
| derecha | padding-right
|
border-right
|
margin-right
|
Los valores posibles para las propiedades indicadas son valores de tamaño, así como inherit (heredado del elemento padre). Además, los márgenes exteriores pueden definirse también mediante el valor auto.
La siguiente imagen muestra la estructura esquemática del modelo de cajas en CSS:
El modelo de cajas en CSS en la práctica
El modelo de cajas en CSS puede entenderse fácilmente añadiendo paso a paso cada uno de sus niveles a una caja de contenido. El punto de partida es un breve fragmento de texto que, en este ejemplo, se formatea mediante un selector de clase:
<p class="contenido">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctusest Lorem ipsum dolor sit amet.</p>El siguiente conjunto de reglas define para la caja de contenido unas dimensiones de 150 px × 150 px. Además, se establecen letras negras sobre fondo gris y se alinea el texto en justificado:
.contenido {
height: 150px;
width: 150px;
color: #000000;
text-align: justify;
background-color: #808080;
}Aplicadas al fragmento de texto, estas reglas de estilo dan lugar a la siguiente representación en el navegador web:
El fragmento de texto aparece, según el flujo de los elementos, en la esquina superior izquierda de su elemento padre. El texto y el color de fondo comienzan sin ningún margen en el lado izquierdo de la ventana del navegador y ocupan todo el espacio disponible. El fondo queda directamente ajustado al cuerpo del texto.
Un diseño de este tipo resulta poco estético y dificulta la lectura. Por ello, la propiedad padding permite a los diseñadores definir un relleno para separar los elementos de texto de los elementos de diseño circundantes.
.contenido {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 10px;
}Al añadirse al conjunto de reglas, la declaración padding: 10px; produce el siguiente cambio en la vista del frontend:
El navegador añade un relleno de 10 px en los cuatro lados de la caja de contenido. Como elemento de diseño adicional, puede añadirse un borde.
.contenido {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 10px;
border: 5px solid #d82451;
}En este ejemplo se utiliza la propiedad border para añadir al elemento un borde continuo de color burdeos.
De este modo, el borde queda separado del contenido gracias al valor de relleno.
Según el flujo natural de los elementos, la caja formateada de esta manera se sitúa sin separación en la esquina superior izquierda de su elemento padre. La propiedad margin permite suavizar el diseño de una página web mediante un margen exterior. Para ello, basta con añadir la declaración correspondiente al conjunto de reglas existente:
.contenido {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 10px;
border: 5px solid #d82451;
margin: 40px;
}En el navegador, un margen exterior de 40 px se aplica de la siguiente manera:
Como alternativa a una medida concreta, la propiedad margin puede definirse con el valor auto. En este caso, la caja se centra automáticamente en horizontal dentro del elemento padre. En cambio, en sentido vertical el valor auto no tiene efecto.
El espacio que ocupa una caja en CSS puede calcularse sumando los valores de todos los componentes relevantes de la caja.
Formato de cajas con float
Cuando la caja que se va a formatear es una caja de bloque, las cajas siguientes pasan automáticamente a la línea siguiente según el flujo normal de los elementos.
En la práctica, este salto de línea automático después de una caja de bloque no siempre es deseado y puede evitarse mediante la propiedad float. Esta propiedad saca las cajas de bloque del flujo normal del documento y las coloca en la posición deseada.
Valores de la propiedad float |
Descripción |
|---|---|
none
|
No se produce ningún desplazamiento del elemento. float: none; es el valor predeterminado de una caja CSS.
|
left
|
La caja de bloque se desplaza hasta el borde interior izquierdo del elemento padre. |
right
|
La caja de bloque se desplaza hasta el borde interior derecho del elemento padre. |
inherit
|
El valor de float se hereda del elemento padre.
|
Una caja a la que se aplica un formato con float se denomina elemento flotado.
Cuando coinciden varios elementos flotados, estos se colocan en el orden en que aparecen en el código HTML, de izquierda a derecha (float: left) o de derecha a izquierda (float: right).
El siguiente ejemplo de código muestra un conjunto de reglas que incluye la propiedad float:
.contenido {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 20px;
border: 5px solid #d82451;
margin: 40px;
float: left;
}Si este conjunto de reglas se aplica a dos elementos HTML, ambos se extraen del flujo del documento y se alinean uno junto a otro a la izquierda:
<p class="contenido">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctusest Lorem ipsum dolor sit amet.</p>
<p class="contenido">Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
El gran espacio intermedio se produce porque los márgenes exteriores de ambas cajas se suman. Sin los elementos flotados, los márgenes exteriores de los elementos adyacentes pueden colapsar.
Diseño web adaptativo con CSS
Para crear diseño web adaptativo con CSS, el lenguaje de hojas de estilo ofrece dos técnicas modernas de maquetación: Flexbox y Grid. Ambos sistemas adaptan los contenidos de forma dinámica a distintos tamaños de pantalla. En combinación con las media queries de CSS, los diseños pueden ajustarse de manera precisa a diferentes dispositivos y anchuras de pantalla.
Flexbox
Con CSS Flexbox (Flexible Box Layout) es posible crear diseños unidimensionales de forma especialmente sencilla. Flexbox alinea los contenidos en horizontal o en vertical, por lo que resulta ideal para menús de navegación, galerías o áreas de contenido modulares.
Un contenedor flex se define mediante la propiedad display: flex;. Todos los elementos hijos directos se convierten automáticamente en elementos flexibles (flex items), cuya posición, orden y tamaño pueden controlarse de forma flexible.
| Propiedad | Descripción |
|---|---|
flex-direction
|
Determina la dirección principal de los elementos flexibles. El valor row se utiliza para una disposición horizontal y column para una vertical. row-reverse y column-reverse invierten la dirección.
|
justify-content
|
Alinea los elementos flexibles a lo largo del eje principal. Con flex-start se alinean al inicio, con flex-end al final y con center se centran. Los valores space-between, space-around y space-evenly definen la distribución del espacio entre los elementos (sin espacio en los extremos, espacio alrededor de cada elemento y espacio uniforme entre todos).
|
align-items
|
Alinea los elementos flexibles a lo largo del eje transversal. Los valores flex-start, flex-end y center funcionan de forma similar a justify-content. Además, baseline alinea por la línea base y stretch estira los elementos para ocupar el contenedor.
|
flex-wrap
|
Define si los elementos flexibles pueden pasar a una nueva línea. Con nowrap (valor predeterminado) todos permanecen en una sola línea. Con wrap y wrap-reverse se permiten saltos de línea (opcionalmente en sentido inverso).
|
gap
|
Define el espacio entre los elementos flexibles. |
El siguiente ejemplo muestra una disposición horizontal de elementos con un espacio uniforme entre ellos:
.contenedor {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 10px;
}Estas reglas se aplican al siguiente HTML:
<div class="contenedor">
<div class="elemento">Elemento 1</div>
<div class="elemento">Elemento 2</div>
<div class="elemento">Elemento 3</div>
</div>Además, el comportamiento de cada elemento flexible puede controlarse de forma individual. Con la propiedad flex, por ejemplo, puedes definir en qué medida un elemento puede crecer o reducirse en relación con los demás. Un valor de 2 indica una duplicación:
.elemento1 { flex: 2; }Maquetación con CSS Grid
Con CSS Grid, los contenidos de una página web pueden organizarse en un sistema bidimensional de filas y columnas. Este sistema permite un control preciso de la estructura, lo que facilita la creación de maquetaciones complejas de forma flexible. Para crear una cuadrícula, se asigna la propiedad display: grid; al elemento padre. Todos sus elementos hijos directos pasan a ser elementos de cuadrícula. A partir de ahí, el sistema se ajusta mediante distintas propiedades.
| Propiedad | Descripción |
|---|---|
grid-template-columns
|
Define la estructura de columnas de la cuadrícula. La unidad más importante es fr, que indica qué proporción del espacio disponible se utiliza. Con auto, la distribución se realiza automáticamente.
|
grid-template-rows
|
Define la estructura de filas de la cuadrícula. Los valores disponibles son los mismos que en grid-template-columns.
|
gap
|
Determina el espacio entre los elementos de cuadrícula. |
justify-items
|
Define la alineación horizontal de los elementos de cuadrícula. start alinea a la izquierda, end a la derecha y center centra los elementos. El valor predeterminado stretch hace que ocupen toda la celda.
|
align-items
|
Define la alineación vertical de los elementos de cuadrícula. Utiliza los mismos valores que justify-items.
|
El siguiente ejemplo muestra la creación de una cuadrícula con tres columnas de igual anchura y dos filas, utilizando valores fr uniformes:
.contenedor {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 10px;
}Además, cada elemento de cuadrícula puede posicionarse de forma específica, por ejemplo para ocupar varias columnas o filas. Para ello se utilizan las propiedades grid-column y grid-row. En estas se indican la línea de inicio (incluida) y la línea de fin (excluida), separadas por una barra (/). En el siguiente ejemplo, el elemento ocupa dos columnas y una fila:
.elemento1 {
grid-column: 1 / 3;
grid-row: 1;
}Media queries
Las media queries permiten aplicar reglas CSS en función de las características del dispositivo. De este modo, el diseño puede adaptarse a smartphones, tablets o pantallas de escritorio sin necesidad de crear varios archivos HTML. Con una media query es posible activar o sobrescribir estilos cuando se cumplen determinadas condiciones. El caso más habitual es la adaptación a distintas anchuras del viewport, para lo que se utilizan las siguientes directivas:
| Propiedad / sintaxis | Descripción |
|---|---|
@media
|
Inicia una media query. |
screen, print, all
|
Define el tipo de medio al que se aplican las reglas. |
min-width
|
Activa reglas CSS a partir de una anchura mínima. |
max-width
|
Activa reglas CSS hasta una anchura máxima. |
El siguiente ejemplo muestra cómo utilizar una media query para modificar la maquetación por debajo de una anchura determinada:
/ *Diseño estándar para pantallas grandes* /
.contenedor {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/ *Adaptación para pantallas más pequeñas* /
@media (max-width: 768px) {
.contenedor {
grid-template-columns: 1fr;
}
}También es posible combinar varias condiciones, por ejemplo para aplicar estilos solo en tablets en orientación vertical:
@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
body {
font-size: 1.1em;
}
}Variables CSS
Las variables CSS (también llamadas custom properties) permiten almacenar valores de forma centralizada y reutilizarlos varias veces dentro de la hoja de estilos. De este modo, colores, espaciados o tamaños de fuente pueden modificarse en un único lugar sin tener que ajustar todo el CSS. Esto hace que el código sea más claro, fácil de mantener y coherente.
Las variables CSS se definen con un doble guion (--) y se utilizan mediante la función var().
| Sintaxis | Descripción |
|---|---|
--nombre-variable
|
Define una variable personalizada. |
var(--nombre-variable)
|
Recupera el valor de una variable definida. |
:root
|
Ámbito global (corresponde al elemento HTML raíz). |
El siguiente ejemplo muestra cómo definir y utilizar variables CSS:
:root {
--color-principal: #ff4081;
--color-texto: #333;
--relleno: 10px;
}
button {
background-color: var(--color-principal);
color: var(--color-texto);
padding: var(--relleno);
}En este caso, las variables --color-principal, --color-texto y --relleno se definen en :root, es decir, de forma global para toda la página. El botón utiliza estos valores mediante var(), de modo que el color de fondo, el color del texto y el relleno se aplican automáticamente a partir de las variables definidas.