Scribd
Cargar
26 vistas27 páginas

Lenguaje CSS

El documento describe lo que es CSS y cómo se usa para dar formato a los documentos web. CSS es un lenguaje de hojas de estilo que se usa para especificar el aspecto visual de los elementos en un documento HTML, como colores, fuentes y diseños de página. Se puede enlazar CSS a HTML de varias formas, pero la más común es crear un archivo CSS externo y enlazarlo al HTML mediante una etiqueta de enlace.

Cargado por

Alex Fernandez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
26 vistas27 páginas

Lenguaje CSS

El documento describe lo que es CSS y cómo se usa para dar formato a los documentos web. CSS es un lenguaje de hojas de estilo que se usa para especificar el aspecto visual de los elementos en un documento HTML, como colores, fuentes y diseños de página. Se puede enlazar CSS a HTML de varias formas, pero la más común es crear un archivo CSS externo y enlazarlo al HTML mediante una etiqueta de enlace.

Cargado por

Alex Fernandez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 27

Lenguaje CSS

CSS es un lenguaje de estilos utilizado en el ámbito del diseño web para dotar un sitio web de detalles estéticos,
interacción y aspecto visual.

¿Qué es CSS?

Antes de comenzar, debes tener claro un concepto clave: una página web es realmente un documento de texto. En
dicho documento se escribe código HTML, con el que se que crea el contenido de una web. Por otro lado, existe el
código CSS, que unido al código HTML permite darle forma, color, posición (y otras características visuales) a un
documento web.

En resumen, se trata de un «idioma» o lenguaje, como podría ser el inglés o el alemán, que los navegadores web
como Chrome o Firefox conocen y pueden entender. Nuestro objetivo como diseñadores y programadores web es
precisamente ese: aprender el idioma e indicarle al navegador lo que debe hacer.

¿Qué significa CSS?

Las siglas CSS (Cascading Style Sheets) significan «Hojas de estilo en cascada» y parten de un concepto simple pero
muy potente: aplicar estilos (colores, formas, márgenes, etc...) a uno o varios documentos (generalmente
documentos HTML, páginas webs) de forma automática y masiva.

Se le denomina estilos en cascada porque se lee, procesa y aplica el código desde arriba hacia abajo (siguiendo un
patrón denominado herencia que trataremos más adelante) y en el caso de existir ambigüedad (código que se
contradice), se siguen una serie de normas para resolver dicha ambigüedad.

Ten en cuenta que generalmente tenemos varios documentos HTML en un sitio web, pero solemos tener un sólo
documento CSS. En cada documento HTML enlazamos ese único documento CSS, de modo que si hacemos cambios
en él, afecta a todos los documentos HTML relacionados.

¿Por qué se usa CSS?

La idea de CSS es la de utilizar el concepto de separación de presentación y contenido. Este concepto se basa en que,
como programadores, lo ideal es separar claramente el código que escribimos. ¿Por qué? Porque con el tiempo, esto
hará que el código sea más fácil de modificar y mantener.

La idea es la siguiente:

 Los documentos HTML (contenido) incluirán sólo información y datos, todo lo relativo a la información a
transmitir.
 Los documentos CSS (presentación) inclurán sólo los aspectos relacionados con el estilo (diseño, colores,
formas, etc...).

De esta forma, se puede unificar todo lo relativo al diseño, a lo visual en un solo documento CSS, y con ello, varias
ventajas:

 Si necesitamos hacer modificaciones visuales, lo haremos en un sólo lugar y se aplica a todo el sitio.

 Se reduce la duplicación de estilos en diferentes lugares. Es más fácil de organizar y hacer cambios.

 La información a transmitir es considerablemente menor (las páginas se descargan más rápido).

 Es más fácil crear versiones diferentes para otros dispositivos: tablets, smartphones, etc...

Ya tenemos claro que nuestros documentos web van a tener código HTML por un lado y código CSS por otro. Pero
aún no sabemos como se relacionan entre sí o como se aplican. Antes de comenzar a trabajar con CSS hay que
conocer las diferentes formas que existen para incluir estilos en nuestros documentos HTML.

Formas de enlazar CSS

En principio, tenemos tres formas diferentes de hacerlo, siendo la primera la más común y la última la menos
habitual:

Nombre Mediante... Descripción

Archivo CSS Etiqueta <link El código se escribe en un archivo .css a


externo rel="stylesheet"> parte. Recomendado.

El código se escribe en una etiqueta <style> en el


Bloque de estilos Etiqueta <style>
documento HTML.
Nombre Mediante... Descripción

El código se escribe en un atributo HTML style en una


Estilos en línea Atributo HTML style="..."
etiqueta.

Veamos las ventajas e inconvenientes de cada una de ellas detalladamente:

Archivo CSS externo

En la cabecera de nuestro documento HTML, más concretamente en el bloque <head></head>, podemos incluir una
etiqueta <link> con la que establecemos una relación entre el documento HTML actual y el archivo .css que
indicamos en el atributo href.

Veamos el código de nuestro index.html:

<link rel="stylesheet" href="index.css" />

De esta forma, los navegadores sabrán que deben aplicar los estilos que se encuentren en el archivo index.css que
está junto al documento index.html actual. Se aconseja escribir esta línea lo antes posible (sobre todo, antes de los
scripts), obligando así al navegador a aplicar los estilos cuanto antes y eliminar la falsa percepción visual de que la
página está en blanco y no ha sido cargada por completo.

Esta es la manera recomendada de utilizar estilos CSS en nuestros documentos web.

Antiguamente se utiliza un atributo type="text/css" que ya no es necesario en HTML5. Se puede indicar para
mantener retrocompatibilidad con navegadores muy antiguos, pero actualmente se puede omitir de forma segura.

Bloque de estilos

Otra de las formas que existen para incluir estilos CSS en nuestra página es la de añadirlos directamente en el
documento HTML, a través de una etiqueta <style> que contendrá el código CSS:

<!DOCTYPE html>

<html>

<head>

<title>Título de la página</title>

<style>

div {
background: hotpink;

color: white;

</style>

</head>

...

</html>

Este sistema puede servirnos en ciertos casos particulares, pero hay que darle prioridad al método anterior (CSS
externo), ya que incluyendo el código CSS en el interior del archivo HTML arruinamos la posibilidad de tener el código
CSS en un documento a parte, pudiendo reutilizarlo y enlazarlo desde otros documentos HTML mediante la etiqueta
<link>.

Aunque no es obligatorio, es muy común que las etiquetas <style> se encuentren en la cabecera <head> del
documento HTML, ya que antiguamente era la única forma de hacerlo.

Estilos en línea

Por último, la tercera forma de aplicar estilos en un documento HTML es el conocido como estilos en línea. Se trata
de hacerlo directamente, a través del atributo style de la propia etiqueta donde queramos aplicar el estilo, colocando
ahí las propiedades CSS (que pueden separarse por ;):

<p>¡Hola <span style="color: red; padding: 8px">amigo lector</span>!</p>

De la misma forma que en el método anterior, con la etiqueta <style>, se recomienda no utilizar este método salvo
en casos muy específicos y justificados, ya que los estilos se asocian a la etiqueta HTML en cuestión y no pueden
reutilizarse. Es por eso, que se suele considerar una mala práctica por muchos diseñadores cuando la sobreutilizas
(sin una razón de peso).

Sin embargo, es una excelente forma de inyectar o incluir variables CSS en una etiqueta y sus etiquetas hijas.

Los documentos CSS son archivos de texto (igual que los documentos HTML), sólo que en este caso tienen
extensión .css en lugar de .html. En el código de un documento .css se escriben una serie de órdenes y el cliente
(navegador) las interpreta y aplica a los documentos HTML.

En este artículo vamos a ver como es la sintaxis de un archivo .css y como se debe escribir el código CSS, a la vez que
ponemos en práctica lo aprendido en los artículos anteriores.

Relación del HTML con CSS

En primer lugar, recuerda que debemos tener el documento .css enlazado desde nuestro documento .html,
preferiblemente desde una etiqueta <link rel="stylesheet">. En su atributo href colocaremos el nombre del
documento .css que contiene los estilos:
<!DOCTYPE html>

<html>

<head>

<title>Título de página</title>

<link rel="stylesheet" href="index.css" />

</head>

<body>

<div class="page">

<h1>Título de la página.</h1>

<p>Mi Primer Diseño Web con CSS3</p>

</div>

</body>
</html>

Bien, ya tenemos nuestro archivo .html conectado con nuestro archivo .css. Ahora todo el código CSS que
coloquemos en nuestro index.css se aplicará al HTML y se verá reflejado en el navegador.

Sintaxis CSS

Vamos a centrarnos ahora en el contenido de nuestro documento index.css. El código CSS de dicho documento, se
basa en una serie de conceptos que debemos tener claros antes de continuar. Demos un repaso a cada uno de ellos:

Concepto Descripción

Selector Elemento o elementos del documento que vamos a seleccionar para aplicarle un estilo concreto.

Propiedad Característica principal que vamos a definir con el valor indicado a continuación.

Cada propiedad tiene una serie de valores concretos asignables, con los que tendrá uno u otro
Valor
comportamiento.

Comentario Fragmento de texto entre /* y */ con anotaciones o aclaraciones para el desarrollador (el navegador
Concepto Descripción

los ignorará).

Regla Par de propiedad y su respectivo valor asociado.

Así pues, tras aprender estos conceptos, la estructura de un documento .css se basaría en organizar el código
siguiendo el formato del siguiente bloque:

Vamos a verlo con un ejemplo para afianzar conceptos:

p{

color: red; /* Color de texto */


}

En este caso, estamos seleccionando todas las etiquetas <p> del documento HTML (en este ejemplo es una sola, pero
si existieran más se aplicaría a todas), y les aplicaremos las reglas que contenga, en este caso una regla que define
el color de texto rojo. Cada una de estas reglas se terminará con el carácter punto y coma (;), seguido de la siguiente
regla. El último punto y coma es opcional y se puede omitir si se desea.

Ojo: Como hemos visto, se pueden incluir comentarios entre los caracteres /* y */, los cuales serán ignorados por el
navegador. Estos suelen servir para añadir notas o aclaraciones dirigidas a humanos.

Documento CSS

Sin embargo, esto es sólo un ejemplo muy sencillo. Los documentos CSS se forman por cientos de reglas de este
estilo, con diferentes selectores, propiedades y valores. Habitualmente, cada bloque declarado suele incluir múltiples
reglas (y no sólo una como en el ejemplo anterior):
Ten en cuenta que, a medida que escribimos código CSS, este se va haciendo más grande y más difícil de controlar y
mantener. Para intentar evitar perder el control del mismo, hay que seguir una serie de buenas prácticas al escribir
código, que aunque no son necesarias para que funcione en el navegador, los desarrolladores consideramos
obligatorias para que sea más fácil de leer:

Escribe una regla por línea. Será mucho más fácil de leer y modificar.

Usa la indentación. Tras escribir el carácter { al empezar un bloque de reglas, las propiedades se separan hacia la
derecha. Esto hace que sea más fácil de leer y se considera una buena práctica de desarrollo y de programación en
general.

El último punto y coma de un bloque de reglas es opcional. Sin embargo, se suele aconsejar escribirlo para mantener
una coherencia y evitar problemas o descuidos al modificar posteriormente el código.

Como puedes ver, estos consejos mejoran sustancialmente la legibilidad del código. Se consideran prácticas de
cumplimiento obligatorio para ayudar a entender más rápidamente el código ajeno (o incluso el nuestro) sin
necesidad de invertir mucho tiempo.

Más adelante, en un capítulo dedicado expresamente a ello, veremos que la estructura CSS puede ser más compleja,
pero de momento trabajaremos con este esquema simplificado.

Los navegadores web (también llamados clientes) son esos programas que utilizamos para acceder a Internet y
visualizar páginas en nuestros dispositivos. Todos los usuarios conocen al menos uno o varios navegadores web,
aunque sea los más populares como Google Chrome o Mozilla Firefox. Sin embargo, existen muchos más. Para ser un
buen diseñador o desarrollador web es recomendable conocer bien el ecosistema de navegadores existente y sus
principales características, que no son pocas.

Ecosistema de navegadores

En un mundo ideal, todas las páginas webs se verían correctamente y de la misma forma en todos los navegadores
web disponibles, sin embargo, y una de las cosas que más llama la atención del diseño web cuando estamos
empezando, es que no sólo debemos construir una web correctamente, sino que además debemos ser conscientes
de los navegadores más utilizados, así como de sus carencias y virtudes.

En un principio, el consorcio W3C se encarga de definir unas especificaciones y «normas» de recomendación, para
que posteriormente, las compañías desarrolladoras de navegadores web las sigan y puedan crear un navegador
correctamente. Pero como no estamos en un mundo perfecto (y el tiempo es un recurso limitado), dichas compañías
establecen prioridades, desarrollan características antes que otras, e incluso algunas características deciden no
implementarlas por razones específicas o internas.
Las compañías más comprometidas con sus navegadores web, tienen a disposición de los diseñadores,
programadores y entusiastas, una especie de diario cronológico, donde mencionan su hoja de ruta con las
características que van implementando, descartando o sus planes de futuro, así como información adicional sobre el
tema en cuestión:

Responsables Producto Página de desarrollo

Microsoft Navegador Microsoft Edge Edge Platform Status

(Proyecto open source) Motor Webkit Webkit Feature Status

Fundación Mozilla Navegador Mozilla Firefox Mozilla Standards Positions

Google Navegador Google Chrome Chrome Platform Status

Hay ciertos detalles que hay que tener claros antes de empezar a profundizar en CSS. El concepto de herencia y el
de cascada (que veremos más adelante) son dos de las características CSS más infravaloradas y que más problemas
suelen producir, ya que sin lugar a dudas son los que menos se conocen y los que mayor frustración acarrean porque
se utilizan indebidamente.

¿Qué es la herencia en CSS?


Antes de empezar, debemos saber que algunas propiedades CSS, como color o font-family, se heredan desde los
elementos HTML padres a los elementos HTML hijos, modificando el valor que tienen por defecto. Observa en el
siguiente ejemplo, donde aplicamos un color verde al texto de la clase .container (padre):

<div class="container">

<p>Texto del padre</p>

<div class="child">

<p>Texto del hijo</p>

</div>

</div>

<style>

.container {

color: green; /* Propiedad heredable */

border: 1px solid red; /* Propiedad no heredable */

}
</style>

Si observas el resultado, verás que tanto el texto de .container (padre) como el texto de .child (hijo) aparecerán
de color verde. Esto en cierta forma debería resultarnos lógico, ya que el elemento .child se encuentra en el interior
de .container, y no hay ninguna otra regla más especifica que le dé otro color de texto a ese elemento interior.

Sin embargo, con el borde rojo sólo se aplica borde al .container. El elemento .child no se ve afectado. Esto ocurre
porque algunas propiedades como color o font-family se heredan en los hijos, mientras que otras propiedades
como border, no.

Si esta propiedad aplicara herencia a sus hijos, todos los elementos HTML situados en el interior
de .container tendrían su propio borde rojo, comportamiento que no suele ser el deseado. Por esa razón, la herencia
no ocurre con todas las propiedades CSS, sino sólo con algunas propiedades donde si suele ser deseable.

Valores especiales de herencia

Además de los valores habituales de cada propiedad CSS que iremos viendo a lo largo de nuestros artículos, también
podemos aplicar ciertos valores especiales que son comunes a todas las propiedades CSS existentes. Con estos
valores modificamos el comportamiento de la herencia en dicha propiedad:

Valor Significado

inherit La propiedad hereda el valor que tiene la misma propiedad CSS en su elemento padre.
Valor Significado

initial Establece el valor al valor inicial definido por la especificación CSS.

unset Resetea el valor. En propiedades heredables, actua como inherit, en otro caso, como initial.

revert Similar a unset, salvo que haya definido un origen de agente o de usuario (ver más adelante).

Siguiendo el mismo ejemplo anterior, nuestros estilos podrían ser los siguientes:

.container {

color: green;

border: 1px solid red;

.child {

border: inherit;
}

En el caso de que .child no tuviera la propiedad border establecida (o la tuviera a initial o unset), dicho .child no
tendría borde ya que se trata de una propiedad no heredable. Sin embargo, si utilizamos el valor inherit, la propiedad
hereda el valor de la propiedad border de su padre, y pasará a tener un borde propio, al igual que su elemento
padre.

Veamos ahora el mismo caso, pero con la propiedad color, que es una propiedad heredable:

.container {

color: green;
border: 1px solid red;

.child {

color: inherit;
}

Por defecto, .child muestra el mismo color de texto que el elemento padre, ya que hereda su valor de color. Ocurre lo
mismo si utilizamos el valor inherit o el valor unset. Sin embargo, si utilizamos el valor initial, pasa a utilizar un color
negro para el texto, ya que es su valor inicial por defecto.

Uno de los conceptos más importantes de CSS, y a la vez, uno de los conceptos más desconocidos o malentendidos,
es el denominado Cascada de CSS. De hecho, la cascada es la que le da sentido a la C inicial de las siglas CSS, lo que
da una idea de la importancia que tiene en este tema.

En algunos casos, el concepto de cascada puede resultar demasiado avanzado como para verlo en un tema de
introducción, por lo que se debe conocer bien el tema de selectores CSS y dominar algo de propiedades CSS para
comprenderlo totalmente. Si estás comenzando con CSS, se aconseja que se posponga para una lectura posterior.

¿Qué es la Cascada CSS?

Cuando hablamos de la Cascada CSS nos referimos al algoritmo o conjunto de reglas y normas que tiene el navegador
para aplicar estilos CSS a un elemento HTML. No es tan sencillo como la mayoría cree, ya que hay múltiples casos
donde pueden existir ambigüedades o conflictos de valores, y el navegador debe resolverlos para saber cual debe
prevalecer.

Imagina que tenemos enlazados dos archivos .css mediante <link> y en cada uno tenemos un mismo
selector .text aplicando colores diferentes. ¿Cuál de los dos se aplicará finalmente? Quizás pienses que el último que
haya sido definido. A veces, esto es cierto, pero otras muchas veces no. Expliquemos la razón.

La cascada comprende varios temas importantes a la hora de resolver dichos conflictos:

Importancia: Los estilos pueden tener una importancia concreta, eso le da mayor o menor prioridad.

Origen: Existen varios orígenes de CSS, cada uno con una prioridad específica.

Orden de aparición: El orden en el que se procesa el CSS influye a la hora de resolver conflictos.

Especificidad: Cuanto más específicos sean los estilos CSS, mayor prioridad.

Capas: Los estilos CSS se pueden aislar en capas fusionables. Lo explicamos en @layers CSS.

Vamos a repasar cada uno de ellos para comprenderlo lo mejor posible.

Importancia

Existe la posibilidad de añadir el texto !important al final de una regla, consiguiendo que el navegador le de prioridad
a la hora de evaluar dichos estilos sobre otros. Veamos un ejemplo de como funciona:

<div class="text">Texto del elemento</div>


<style>

.text {

color: red!important;

.text {

color: blue;

}
</style>

Observa que, a pesar de tener definido un color blue posteriormente, el texto !important le dará prioridad al
anterior, dibujando el color de texto en rojo, en lugar de azul. En el caso de tener varias reglas con !important,
prevalecerá la que además se encuentre en último lugar.

OJO: Desgraciadamente, esta es una de las características más conocidas de CSS debido a que es una forma
«cómoda» de forzar la importancia de una regla CSS. Su utilización no es una mala práctica, sin embargo, su uso
indiscriminado si lo es y debería evitarse salvo causas justificadas.

Origen

La cascada tiene en cuenta las hojas de estilo donde está colocado nuestro código CSS. Generalmente, no
necesitaremos preocuparnos de este factor, ya que nos centraremos casi siempre en el CSS de autor. Sin embargo, es
una buena idea conocer en que se basa cada origen.

Tenemos 3 orígenes, ordenados de menor a mayor importancia:

1️⃣ Agente de usuario: Estilos CSS que tiene y aplica el navegador por defecto.

2️⃣ CSS de usuario: Estilos CSS que añade el usuario para personalizar, por ejemplo, con UserStyles.

3️⃣ CSS de autor: Son los estilos CSS que crea el desarrollador en la página web.

Nota: En el caso de que una propiedad CSS de cada origen tuviera definido un !important, el orden de importancia
anterior se invertiría, resultando que el CSS del agente de usuario tendría prioridad sobre el CSS de usuario y
de autor.

Orden de aparición

Esta suele ser una de las partes de la cascada que más clara suele estar, ya que es bastante intuitiva. En el tema
introductorio Cómo enlazar CSS, vimos que es posible aplicar estilos CSS a un documento de varias formas:

1️⃣ Atributo style en una etiqueta HTML.

2️⃣ Bloque de estilos <style> en el documento HTML.

3️⃣ Archivo .css externo referenciado mediante <link rel="stylesheet">.

Veamos un ejemplo donde se apliquen estas tres formas:


<html>

<head>

<link rel="stylesheet" href="index.css" />

<style>

.text { color: red }

</style>

</head>

<body>

<div class="text">¡Desde Manz.dev puedes ver mis streams!</div>

</body>
</html>

Observa que en este ejemplo concreto, la etiqueta <link> está definida antes del bloque <style>. En un principio, para
un mismo selector que entre en conflicto, prevalecería el que se encuentra definido en el bloque <style>, ya que se
define después de la etiqueta <link>. De la misma forma, ocurriría si se tratase de dos etiquetas <link>. La última es la
que prevalece porque «sobreescribe» a la anterior.

Supongamos que nos encontramos ahora en una misma hoja de estilos, donde aplicamos estilos a exactamente el
mismo selector. Utilizamos la propiedad color pero con diferente valor en cada coincidencia. Algo similar a lo
siguiente:

<div class="text">Texto del elemento</div>

<style>

.text {

padding: 8px

color: red;

.text {
background-color: grey

color: blue;

}
</style>

La pregunta sería: ¿Cuál de las dos propiedades color prevalece? Se refieren al mismo elemento y están al mismo
nivel. La respuesta es muy fácil: Prevalece siempre la última regla definida. En el caso anterior, el resultado final
interpretado por el navegador (valor computado) sería el siguiente:

.text {

padding: 8px; /* No hay conflicto, se añade */

background-color: grey; /* No hay conflicto, se añade */

color: blue; /* Hay conflicto: se sobreescribe la última */


}

Sin embargo, puede ocurrir que en determinados casos no esté tan claro cuál es el estilo que debería sobreescribir a
los anteriores. Ahí es cuando entra en juego el concepto de especificidad, que es uno de los que se encarga de
eliminar la ambigüedad determinando cuál es más específico. Supongamos el siguiente caso, donde tenemos un
mismo elemento <div> con un id y una clase:

<div id="element" class="block">Texto del elemento</div>

<style>

div { color: red; }

#element { color: blue; }

.block { color: green; }


</style>

Nuestro elemento HTML <div> encaja con los tres bloques del ejemplo anterior. ¿Cómo sabe el navegador CSS que
estilo aplicar? ¿Cuál tiene prioridad sobre los demás? En ese caso, el navegador calcula que selector es más
específico aplicando las normas de la especificidad CSS.

Especificidad CSS

En el caso de que tengamos un conflicto donde no se haya eliminado la ambigüedad, se pasa a calcular el selector
más específico siguiendo unas normas que se detallan a continuación:
Componente Descripción

Componente ID Número de veces que aparece un #id en el selector.

Componente Clase Número de veces que aparece una .clase, :pseudoclase o [atributo] en el selector.

Componente Elemento Número de veces que aparece un elemento o un ::pseudoelementos en el selector.

Para saber si un selector de CSS es más específico que otro (y por lo tanto, el navegador le da prioridad) sólo hay que
calcular los dígitos de los componentes anteriores, que forman un número que indica la especificidad:

div { ... } /* 0,0,1 (1 elemento) */

div div { ... } /* 0,0,2 (2 elementos) */

#pagina div { ... } /* 1,0,1 (1 id y 1 elemento) */

#pagina div:hover { ... } /* 1,1,1 (1 id, 1 pseudoclase y 1 elemento) */

#pagina div:hover a { ... } /* 1,1,2 (1 id, 1 pseudoclase y 2 elementos) */


#pagina .sel:hover>a { ... } /* 1,2,1 (1 id, 1 clase, 1 pseudoclase y 1 elemento) */

En keegan.st tienes una excelente calculadora de especificidad CSS donde podrás calcular la especificidad de un
selector CSS rápida y cómodamente.

Existe una excepción a todo esto que es el CSS en línea. En el caso de que se definan unos estilos CSS a través del
atributo style de una etiqueta HTML, siempre tendrá preferencia directa, ya que es la forma más específica.

Quizás lo desconozcas, ya que es una característica moderna que no estaba presente en las primeras versiones de
CSS, pero existe una forma nativa de guardar valores a través de «variables CSS». Estas variables CSS no existían hace
años, y de hecho, fue una de las razones por las que se popularizaron preprocesadores como LESS o Sass, que sí las
incorporaban.
Sin embargo, las denominadas variables CSS realmente no son variables, sino que solemos denominarlas así por su
parecido con la programación y porque es más fácil comprender rápidamente lo que son, pero tienen sus diferencias.
La forma oficial de llamarlas es custom properties (propiedades personalizadas).

CSS Custom Properties

Las CSS Custom Properties (muchas veces conocidas por variables CSS) son un mecanismo de CSS que permite dar un
valor personalizado a las propiedades. El objetivo principal suele ser evitar escribir múltiples veces ese valor, y en su
lugar, ponerle un nombre más lógico y fácil de recordar, que hará referencia al valor real.

🎬 CSS Custom Properties (Variables CSS)

De esta forma, si necesitamos cambiar el valor en algún momento, podemos hacerlo en esa propiedad
personalizada y no en múltiples partes del documento, donde nos podríamos equivocar al añadir el mismo valor o
incluso hacer mucho más difícil de mantener el código.

Definir una variable CSS

Para definir una custom property haremos uso de los dos guiones -- previos al nombre que queramos utilizar.
Además, debemos fijarnos en el elemento que definimos la variable, en este ejemplo la pseudoclase :root:

:root {

--background-color: black;
}

Hay varios detalles que comentar sobre este fragmento de código:

En primer lugar, la pseudoclase :root hace referencia al elemento raíz del documento, o lo que es lo mismo, al
elemento <html>. La diferencia de utilizar html o :root como selector es que este último tiene algo más
de especificidad CSS. Mientras que html tiene 001, :root tendría 010.

Al colocarla en :root estamos definiendo que la custom property estará definida para el ámbito de esa
etiqueta <html> (o cualquier elemento hijo), es decir, a todo el documento. Sin embargo, ya veremos que podemos
aplicar estas variables sólo a partes concretas del DOM de nuestra página.
Nota: Las custom properties se suelen agrupar en las primeras líneas de un bloque CSS, separándolas por un espacio
de otras propiedades estándar. Esto facilita la lectura del código.

Utilizar una variable CSS

A la hora de utilizar una custom property, hay que utilizarla dentro de la expresión var():

.element {

background: var(--background-color);
}

En este caso estamos aplicando a la propiedad background el valor que contiene --background-color para el
elemento .element. Esto último es muy importante entenderlo, ya que una custom property puede tener diferentes
valores dependiendo del ámbito en el que se encuentra.

Además, es muy recomendable que la expresión var() tenga dos parámetros. El primero de ellos, la custom
property en cuestión, el segundo de ellos, el valor por defecto en el caso de que esa propiedad no esté definida en el
ámbito actual:

.element {

background: var(--background-color, blue);


}

En nuestro caso, el elemento con clase element tendrá siempre el color de fondo negro, pero podría adoptar el color
azul si la custom property no se hubiera declarado.

Ámbito de las custom properties

El ejemplo anterior es muy básico y puede que no se aprecie el detalle de los ámbitos con las custom properties, así
que vamos a verlo con un ejemplo más específico.

Observa el marcado HTML del siguiente ejemplo, donde tenemos tres elementos con clase child, los dos primeros
dentro de parent y el tercero fuera:

<div class="parent">

<div class="first child">First child</div>

<div class="second child">Second child</div>

</div>

<div class="third child">Third child</div>

<style>
.parent {

--background-color: black;

color: white;

.first {

--background-color: purple;

.child {

background: var(--background-color, blue);

}
</style>

Sin embargo, ahora estamos definiendo la variable --background-color en diferentes ámbitos:

Los dos primeros elementos .child tomarán color negro, ya que se le aplica a .parent (e hijos).

El primer elemento .child se sobreescribe con color púrpura, ya que se le aplica a .first.

El tercer elemento no tendrá ninguna variable definida, por lo que tomará color azul.

Esto nos permite mucha flexibilidad y potencia a la hora de utilizar custom properties en CSS, ya que son
tremendamente útiles y versátiles, permitiéndonos utilizar incluso la cascada de CSS a nuestro favor.

Las custom properties tienen un buen soporte en navegadores en la actualidad, a excepción, como siempre, de
Internet Explorer. Si necesitaras soporte para IE11, quizás podría venirte bien el polyfill ie11CustomProperties.

16
31
49
10
36
10.0-10.2
114
113

css-variables
Diferencia con Sass

También es importante mencionar que las variables CSS no funcionan exactamente igual que las variables Sass (o en
general, las variables de preprocesadores).

Sass al igual que muchos otros preprocesadores de CSS, no trabajan directamente en el navegador, sino en una capa
previa (capa de preprocesamiento). Por lo tanto, muchas tareas se realizan antes de llegar al navegador.

Es el caso de las variables de Sass, dichas variables son leídas por Sass y convertidas a CSS «plano» (sin variables):

/* En Sass las variables se declaran en el top */

$var: #fff;

.parent {

background: $var; /* Será #fff */

.parent .element {

$var: #888;

.element {

background: $var; /* Será #fff */


}

Es por eso que no deben tomarse las custom properties como equivalente de las variables SCSS, ya que tienen
matices diferentes.

De forma muy frecuente, en CSS necesitaremos utilizar tamaños. Para indicarlo de una forma apropiada,
necesitaremos conocer las unidades que podemos utilizar en CSS para definir dichos tamaños. Existen multitud de
unidades. Quizás las más populares son unidades como px (píxels) o % (porcentajes), entre muchas otras.

Antes de comenzar a utilizar propiedades que utilicen medidas, como por ejemplo width (propiedad que sirve para
establecer un ancho a un elemento concreto), es conveniente conocer los tipos de unidades que pueden utilizarse.

Tipos de unidades

Cuando estamos empezando a trabajar con CSS, mi consejo suele ser entender primero las unidades de tamaño fijo
(o absolutas) y utilizar alguna de ellas, como por ejemplo, el píxel: px. Una vez se entiendo su uso, vamos pasando a
utilizar unidades más complejas.

A continuación una lista de las diferentes unidades que existen en CSS, y sus diferencias:
+
Tipo de unidad Unidades Descripción
info

Unidades absolutas px, cm, mm, Q, in, pt, pc Unidades estáticas o de tamaño fijo. Ver

Unidades relativas Unidades que dependen de otros factores. Ver

% Unidades basadas en el tamaño del padre inmediato.

em, rem Unidades basadas en el tamaño de una tipografía.

ex, rex Unidades basadas en la altura de una minúscula.

cap, rcap Unidades basadas en la altura de una mayúscula.

Unidades basadas en las medidas de un carácter


ch, rch
europeo.

ic, ric Unidades basadas en las medidas de un carácter CJK.

lh, rlh Unidades basadas en en el interlineado.

Unidades basadas en la región visible del


Relativas al viewport vw, vh, vmin, vmax, vi, vb Ver
navegador.
+
Tipo de unidad Unidades Descripción
info

svw, svh, svmin, svmax, svi, svb Idem, en pantallas pequeñas (small viewport)

lvw, lvh, lvmin, lvmax, lvi, lvb Idem, en pantallas grandes (large viewport).

dvw, dvh, dvmin, dvmax, dvi, dvb Idem, en pantallas dinámicas (dynamic viewport).

Relativas al Unidades basadas en un contenedor padre


cqw, cqh, cqmin, cqmax, cqi, cqb Ver
contenedor específico.

Unidad basada en la fracción restante (sólo


Relativas al grid fr Ver
para grids).

Unidades de
deg, grad, rad, turn Unidades para indicar una dirección. Ver
dirección

Unidades de
s, ms Unidades para indicar un tiempo concreto. Ver
duración

Unidades de
hz, khz Unidades para indicar una frecuencia.
frecuencia

Unidades de
dpi, dpcm, dppx Unidades para indicar resoluciones.
resolución

Como se puede ver, existen más de 60 unidades en CSS, sin embargo, lo verdaderamente importante es entender las
categorías, que son sólo 8. Una vez se comprenden bien, entender las diferentes unidades es mucho más sencillo.
Consejo: Cuando se especifican valores de unidades iguales a 0, como por ejemplo 0px, 0em o 0%, podemos omitir
las unidades y escribir simplemente 0, ya que las unidades son redundantes y no son necesarias.

Unidades absolutas

Las unidades absolutas son las más sencillas. Se trata de unidades que son siempre iguales a una unidad de medida
física. La más conocida con diferencia es el píxel, una medida fácil para comenzar a trabajar en CSS.

.container {

width: 200px;

height: 300px;
}

Sin embargo, conforme avanzamos en el mundo del diseño y desarrollo web, la unidad px se nos puede quedar corta.
Sobre todo cuando tenemos en cuenta que necesitamos un tipo de unidad que se adapte dependiendo de ciertos
factores.

► Más sobre unidades absolutas

Unidades relativas a la fuente

A medida que avanzamos en CSS, es recomendable comenzar a utilizar variables relativas a la tipografía o fuente.
Estas son un tipo de unidad que no establece un tamaño fijo, sino que el tamaño depende de ciertas características
de la tipografía actual, como el tamaño, interlineado u otras.

.container {

font-size: 1em;
}

Una de las unidades más conocidas dentro de este apartado es la unidad em. La explicamos en profundidad en el
artículo sobre unidades relativas a fuentes.

► Más sobre unidades relativas a fuentes

Unidades relativas al viewport

Al conocer ciertos apartados relacionados con el resposive o el diseño web en dispositivos móviles, es muy probable
que necesitemos otras unidades un poco más potentes que las anteriores. Por ejemplo, una muy común es necesitar
dar un tamaño a un elemento en relación al tamaño de ancho (o de alto) de la ventana del navegador.

.container {

width: 50vw;

height: 50vh;
}
La unidad vw o vh son ejemplos claros de estas situaciones. Estas unidades dependen exclusivamente
del viewport (región visible del navegador). Las explicamos en profundidad en el siguiente artículo.

► Más sobre unidades relativas al viewport

Unidades relativas al padre

En casos mucho más concretos, podemos tener a nuestra disposición unidades como cqw o cqh. Estas unidades
dependen del tamaño de ancho o de alto de un elemento contenedor específico, y las veremos más adelante en un
apartado donde explicamos las CSS Container Queries.

► Más sobre unidades de CSS Container Queries

Unidades relativas al grid

También existe una unidad fr que veremos más adelante. Dicha unidad, se caracteriza en que sólo puede ser utilizada
en contextos donde estemos diseñando con un layout de tipo grid. Significa fracción restante y es una forma muy
cómoda y sencilla de dar tamaño a varios elementos teniendo en cuenta el espacio sobrante.

► Más sobre Grid y la unidad fr

Unidades de dirección

En CSS, en ciertos casos, necesitaremos indicar una dirección específica, y para ello haremos uso de las unidades de
dirección. A pesar de que la unidad deg (grados) es la más utilizada, existen otras como grad (grados
centesimales), rad (radianes) o especialmente turn, menos utilizadas pero que pueden resultarnos mucho más fácil
para calcular direcciones.

Grados Gradianes Radianes Giro

0 ó 360deg 0 ó 400grad 0 ó 6rad 0 ó 1turn

45deg 50grad 0.78rad (π/4) 0.125turn

90deg 100grad 1.57rad (π/2) 0.250turn

145deg 150grad 2.35rad 0.375turn

180deg 200grad 3.14rad (π) 0.5turn

215deg 250grad 3.92rad 0.625turn


Grados Gradianes Radianes Giro

270deg 300grad 4.71rad (2π) 0.75turn

325deg 350grad 5.49rad 0.875turn

Si quieres ver una explicación real donde se utilizan en CSS, echa un vistazo a la función linear-gradient(), utilizadas
para crear gradientes o degradados en una cierta dirección.

► Direcciones de gradientes en la función linear-gradient

Unidades de duración

Cuando necesitemos controlar el tiempo o la duración que debe tardar en realizarse algo, como por ejemplo una
transición o animación, serán muy útiles las unidades de tiempo. La más conocida es s (segundos), pero también
existe la unidad ms (milisegundos).

.container {

width: 600px;

transition: width 1s linear;


}

En el ejemplo anterior, definimos que la transición debe tener una duración de 1 segundo. Las explicamos en
profundidad en uno de los dos siguientes apartados.

► Más sobre Transiciones CSS y Animaciones CSS

Otras unidades

Existen algunas otras unidades, menos utilizadas actualmente en el día a día, pero que pueden utilizarse en el futuro
para definir frecuencias (cantidad de ocurrencias por segundo) o resoluciones (puntos por pulgada, cm o píxel):

Unidades de frecuencia: como hz o khz.

Unidades de resolución: como dpi, dpcm, dppx.

Es interesante tener en cuenta que existen una serie de funciones para hacer cálculos con unidades CSS. Son las
funciones calc(), min(), max() o clamp(), entre otras. Las veremos más adelante, en el capítulo de funciones CSS.

¿Qué son las unidades absolutas?


Las unidades absolutas son un tipo de medida fija que no cambia, que no depende de ningún otro factor. Son ideales
en contextos donde las medidas no varían como pueden ser en medios impresos (documentos, impresiones, etc...),
pero son unidades poco adecuadas para la web moderna, donde necesitamos adaptarnos a diferentes resoluciones o
pantallas.

No obstante, para comenzar, existe una unidad absoluta recomendable, que nos puede servir para dar nuestros
primeros pasos en el Desarrollo web y ayudarnos a afianzar conocimientos, y así en el futuro, progresar y aprender
de forma más rápida otras unidades CSS.

La unidad px (píxel)

La unidad px (píxel) es probablemente la más comunmente utilizada. Su uso está muy extendido en el desarrollo
web, y es prácticamente una de las primeras unidades de CSS que se recomienda aprender, ya que su valor es
siempre el mismo.

Observa el siguiente fragmento de código:

.container {

width: 200px;

height: 300px;
}

En este fragmento utilizamos las propiedades width (tamaño de ancho) y height (tamaño de alto) para dar un
tamaño concreto al elemento con clase .container. De esta forma, en todos los navegadores que veamos la página,
ese elemento siempre tendrá un tamaño de 200x300 píxels.

Densidad de píxeles

Sin embargo, ten en cuenta que aunque el tamaño en píxeles siempre sea el mismo, puede observarse diferente en
distintos dispositivos, ya que estos dispositivos no suelen tener la misma densidad de píxeles. Y para ello hay que
entender lo que significa las siglas ppp (píxels por pulgada) o ppi en inglés (points per inch).
Imagina un elemento dibujado en una minipantalla de 1 pulgada, que tiene 10 píxels por pulgada. Obviamente, si
tenemos otra minipantalla idéntica pero de 20 píxels por pulgada, se va a ver mucho mejor, porque tenemos más
espacio para representar imágenes, y los píxeles se verán mucho más definidos.

Otras unidades absolutas

A parte del píxel, es conveniente saber que no es la única unidad absoluta que existe, y que probablemente más
adelante nos interese aprender otros tipos de unidades que pueden ser mucho más versátiles y útiles en situaciones
concretas. A continuación, podemos ver las diferentes unidades absolutas que pueden utilizarse en CSS son las
siguientes (de mayor a menor tamaño):

Unidad Significado Medida aproximada

in Pulgadas 1in = 25.4mm

cm Centímetros 1cm = 10mm

pc Picas 1pc = 4.23mm

mm Milímetros 1mm = 1mm

pt Puntos 1pt = 0.35mm

px Píxels 1px = 0.26mm

Q Cuarto de mm 1Q = 0.248mm

La mayoría de estas unidades, a excepción de px, no suelen utilizarse en el día a día del desarrollo web, sino que se
utilizan exclusivamente en casos concretos de medios impresos o similares.

Para entenderlas mejor, veamos en este gráfico el tamaño aproximado en comparación con todas las unidades
absolutas de CSS:
No obstante, recuerda que aunque las unidades absolutas como el px son ideales para comenzar y entender CSS, a la
larga te conviene aprender otro tipo de unidades, como las unidades relativas o las unidades de viewport.

También podría gustarte