1.

RAZÓN DE SER Y UTILIDAD DE LAS HOJAS DE ESTILO

En los capítulos anteriores se aprendió a desarrollar

documentos HTML; como recordará, gran parte de las etiquetas y
atributos tenían como única finalidad establecer colores, fuentes,
tamaños de letra, estilos de texto... En definitiva, el documento
contenía la información, la estructura de la misma y cuestiones
estéticas respecto a la visualización de dicha información.

Esta forma de preparar documentos no presenta grandes

problemas cuando se trata de páginas pequeñas pero se convierte en
un quebradero de cabeza cuando hay que desarrollar un documento
HTML complejo. Por ello, se hace muy necesario separar por un lado
el contenido y por otro la forma; de esta manera el autor puede
ocuparse de estructurar y organizar la información de la forma más
conveniente y, posteriormente, ocuparse de las cuestiones de forma
(que por estar separadas del contenido son mucho más sencillas de
mantener y cambiar).

La principal utilidad que se da a las hojas de estilo es eliminar

del contenido del documento todas las cuestiones de forma (fuentes,
colores, alineación del texto, etc.), el autor especificará en una o más
hojas de estilo todo lo relacionado con la visualización del documento
y sólo tendrá que hacer uso de dicha hoja en todos los documentos
HTML para que tengan el mismo aspecto. Sin embargo, las hojas de
estilo ofrecen muchas más posibilidades puesto que pueden
emplearse para desarrollar páginas web dinámicas.

Además otra utilidad es que problemas con:

 Imágenes: Alguna vez tendremos la necesidad de tener una
pequeña imagen en la parte inferior de nuestra pagina.
¿Como hacemos para que, sin importar lo que haga el
visitante, se quede ahí? Es sabido por ejemplo que el
navegador IExplorer permite ver en pantalla completa por lo
que nuestra pagina se alarga, así que todas las imágenes en
la parte inferior ya no estarán en el fin de la pagina.
 Texto: ¿Porque en HTML solo existen 7 tamaños de letra si
en nuestra computadora podemos especificar un tamaño en
píxeles (px) como se nos antoje? ¿Que pasa si yo necesito
una letra mas grande de la que me puede ofrecer la etiqueta
<H1>? ¿Que pasaría si yo pusiera un texto en negritas pero
quisiera poner un texto que resaltara mas?

1
 Definitivamente hay mas problemas y mencionarlos no serviría
de mucho pues solo nos recordarían aquellos momentos en que los
sufrimos en carne propia; lo que buscamos son soluciones.

2. COMPROBAR SU NAVEGADOR Y SOPORTE DEL NAVEGADOR

El W3C dispone de una aplicación online donde podemos
comprobar la forma en que nuestro navegador maneja determinadas
propiedades de CSS. Esta aplicación se encuentra en
[Link] . Hay tres tipos diferentes de
especificaciones CSS: CSS1, CSS2 y CSS3 versión 1, todas ellas
conviviendo simultáneamente. CSS1 fue desarrollado en los míticos
albores de la historia de la Web (1996) y CSS2 apareció en 1998.
CSS1 fue revisado en 1999 no para dar lugar a CSS2, que aprecería
un año después. En 2007 apareció la versión 2.1 y en 2011 se tomó la
decisión de modularizar css y cada módulo está en versiones
diferentes algunos en la uno y otros en la cuatro o cinco, así que el
css se convirtió en algo acumulativo.. Los sitios oficiales de las tres
especificaciones CSS son:
 CSS1: [Link]/TR/REC-CSS1
 CSS2: [Link]/TR/REC-CSS2
 CSS2 revisión 1: [Link]
20040225/
 CSS 2.1 Cascading Style Sheets Level 2 Revision 1:
[Link]
 CSS 2.2 Cascading Style Sheets Level 2 Revision 2:
[Link]
 CSS 3 (MDN): [Link]
 CSS Snapshot 2020: [Link]

Las nuevas versiones de navegadores, tanto las principales

como las menos conocidas, van apareciendo a intervalos tan
impredecibles que resulta imposible que cualquier tutorial esté
totalmente actualizado. Aunque hemos recurrido a la documentación
más reciente sobre las capacidades de soporte CSS Existen varios
sitios Web donde podemos realizar un seguimiento del estado de las
distintas versiones de los diferentes navegadores, incluyendo el
estado de las distintas versiones de los diferentes navegadores,
incluyendo el estado de su soporte de las características CSS. Veamos
algunos sitios en inglés donde podrá conocer las últimas noticias:

Sitio Dirección
QuirksMode [Link]
paradigmadigit [Link]
al css/
carontestudio [Link]

2
 para-2022-css4-no-existe/
uniwebsidad [Link]
Uniwebsidad [Link]
avanzado from=librosweb

Por último sitios sobre CSS en inglés de interés:

Sitio URL
sitepoint [Link]
css/css/
W3org [Link]
CSS Tutorial [Link]/css/

3. UN EJEMPLO SENCILLO

Aquí es en donde comenzamos el aprendizaje; no hay porque

asustarse pues CSS es un lenguaje extremadamente sencillo. A
continuación se muestra el código de una pagina a la que se aplico un
estilo y seria una buena idea el que abriéramos notepad y
escribiéramos lo siguiente:

(Un ejemplo sencillo de hojas de estilo)

<html>
<head>
<title>Hoja de Estilo</title>
<style type="text/css">
p { font-size: 30 px; font-family: arial; background:
#FF6600 }
</style>

</head>
<body>
<p>Hola Mundo.</p>
<body>
</html>

Realmente fácil ¿no? ¿Como habrías creado el fondo naranja

con solo HTML? Esta bien, pudiste hacer una tabla pero ¿No tardarías
mas creando todo ese código? Esa es una de las ventajas principales
de CSS, hacer mas en menos tiempo. Desentrañar este código no
implica demasiados problemas, pues solo vemos dos elementos
nuevos: La etiqueta <STYLE> que se vera en un capitulo posterior y
una regla de CSS:
P { font-size: 30 px; font-family: arial; background: #FF6600 }

3
 Una regla de CSS consiste de dos partes que son el selector y la
declaración.
Un selector no es mas que una etiqueta HTML sin encerrar entre
< y >.
En el ejemplo el selector es P Una declaración ira encerrada
entre { y }. Consta de dos partes que son la propiedad (font-size,
font-family y background en este ejemplo) y el valor ( 30 px, arial y
#FF6600 respectivamente en el ejemplo).

Cabe mencionar que existen unas 50 propiedades que

permitirán especificar la presentación de un documento. Este tutorial
fue creado para abarcar la mayor parte de ellas así como facilitar la
navegación entre ellas. Ahora que ya sabemos como escribir CSS,
pasemos a la forma de incluirlo en el código HTML.

4 AGREGANDO EN HTML
Este método fue el utilizado en el ejemplo del capitulo anterior,
en donde utilizamos la etiqueta <STYLE> y su atributo TYPE con el
valor text/css. Este método resulta práctico para agregar estilos
cuando estos son únicos para cada página. Es recomendable usar la
etiqueta de comentario para evitar que navegadores que no soporten
CSS hagan caso omiso del código, tal y como se utiliza en JavaScript.

<style type="text/css">
<!--[...]-->
</style>
Nota: el símbolo [...] no forma parte del código, solo indica que
el código continúa.

Veamos un documento típico en HTML:

<!doctype html>
<html>
<head>
<title>Mi página</title>
</head>
<body>
<h1 align="center">
Bienvenidos todos a mi página
</h1>
<hr>
<b> <font size="3" color="#3366CC" face="Arial">
<p>Un párrafo cualquiera . </p>
<P>Otro párrafo cualquiera. </p>
</font>
</b>
</body>
</html>

Ahora utilicemos CSS dentro de HTML:

<!doctype html>

4
<html>
<head>
<title>Mi página</title>
<style type="text/css">
p { color: #3366CC; font-family: Arial; font-weight:
bold}
h1 { text-align: center}
</style>
</head>
<body>
<h1>Bienvenidos todos a mi página</h1>
<hr>
<p>Un párrafo cualquiera . </p>
<p>Otro párrafo cualquiera. </p>
</body>
</html>

Así, cada vez que coloquemos una etiqueta <p> o una <h1>
estaremos utilizando los estilos definidos y nos evitaremos poner
código adicional. En este ejemplo los selectores son P y H1; las
propiedades son color, font-family y font-weight.

5 LINKS A HOJAS DE ESTILO EXTERNAS

El problema con el método anterior es que si deseamos cambiar
los estilos, tendremos que ir cambiando todas las definiciones en
cada una de las hojas. Una forma de evitar esto es crear un
documento de estilos y aplicarlo a todas las paginas de nuestro sitio.
Es realmente sencillo y altamente recomendable pues al cambiar este
documento CSS los cambios se verán en cada uno de los documentos
HTML a los que se aplico este método. Siguiendo con el ejemplo
anterior:
<!doctype html>
<html>
<head>
<title>Mi página</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Bienvenidos todos a mi página</h1>
<hr>
<p>Un párrafo cualquiera . </p>
<p>Otro párrafo cualquiera. </p>
</body>
</html>

El vinculo es al archivo [Link] el cual se ve de la siguiente

forma:
p { color: #3366CC; font-family: Arial; font-weight: bold;}H1 { text-align:
center;}

5
6 IMPORTAR HOJAS DE ESTILO
El problema con el método anterior es que no puede ser
utilizado junto con otros métodos. Para evitar esto utilizaremos el
método de importar, que es casi igual al anterior, los problemas es
que tarda mas en cargarlo y puede notarse en la visualización de la
web solo se utiliza si no queda otro remedio:
<!doctype html>
<html>
<head>
<title>Mi página</title>
<style type="text/css">
<!--@import "[Link]";
i { font-family: "Times New Roman"; font-style: italic;
font-weight: lighter}
-->
</style>
</head>
<body>
<h1>Bienvenidos todos a mi página</h1>
<hr>
<p>Un párrafo cualquiera . </p>
<p>Otro párrafo cualquiera. </p>
</body>
</html>

Así agregamos los estilos definidos para P y H1 del ejemplo

anterior y definimos un estilo para I dentro del código HTML.

7 ESTILOS DE LÍNEA EN HTML

Este método consiste en agregar estilos dentro del código HTML
de la siguiente manera:
<!doctype html>
<html>
<head>
<title>Mi página</title>
</head>
<body>
<h1 style="text-align: center">Bienvenidos todos a mi
página</h1>
<hr>
</body>
</html>

Lo único que estamos haciendo es redefinir una etiqueta HTML

por lo que si queremos utilizar otra vez ese estilo tendremos que
definir la etiqueta cuando sea necesario.

Hemos visto 4 métodos de agregar estilos a documentos HTML,

cada uno tiene desventajas y ventajas sobre el otro así que el decidir
usar uno u otro es decisión del webmaster :-)

6
 Pequeñas partes de la página

Para definir estilos en secciones reducidas de una página se

utiliza la etiqueta <span>. Con su atributo style indicamos en sintaxis
CSS las características de estilos. Lo vemos con un ejemplo,
pondremos un párrafo en el que determinadas palabras las vamos a
visualizar en color verde.
<p>
Esto es un párrafo en varias palabras <span style="color:green">en
color verde</span>. resulta muy fácil.

Estilo definido para una etiqueta

De este modo podemos hacer que toda una etiqueta muestre

un estilo determinado. Por ejemplo, podemos definir un párrafo
entero en color rojo y otro en color azul. Para ello utilizamos el
atributo style, que es admitido por todas las etiquetas del HTML
(siempre y cuando dispongamos de un navegador compatible con
CSS).
<p style="color:#990000">
Esto es un párrafo de color rojo.
</p>
<p style="color:#000099">
Esto es un párrafo de color azul.
</p>

Estilo definido en una parte de la página

Con la etiqueta <div> podemos definir secciones de una página

y aplicarle estilos con el atributo style, es decir, podemos definir
estilos de una vez a todo un bloque de la página.
<div style="color:#000099; font-weight:bold">
<h3>Estas etiquetas van en <i>azul y negrita</i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los etilos
</p>
</div>

8 TIPOS DE SELECTORES
A) Selectores Simples
a. Selectores elementales
i. Selector Universal -> *: Se utiliza para aplicar
algún estilo a toda la página, y se debe usar con
cuidado.

7
 ii. Selector de tipo o etiqueta -> Simplemente se
pone el nombre de la etiqueta y todo lo que
pongamos se aplicará a todo lo que se encuentre
dentro de esa etiqueta en la página web.
b. Selectores de atributo
i. id -> id del elemento
ii. clase -> clase del elemento
iii. otros atributos:
1. [atributo]->Selecciona los elementos con
ese atributo.
2. [atributo=valor]->Selecciona los elementos
que coincidan con el atributo=valor.
3. [atributo^=valor]-> Selecciona los
elementos cuyo atributo comience con
valor.
4. [atributo*=valor]-> Selecciona los
elementos cuyo atributo contenga valor.
5. [atributo$=valor]-> Selecciona los
elementos cuyo atributo termine con valor
6. [atributo|=valor]-> Selecciona los
elementos cuyo atributo comience con
valor o valor-
B) Selectores Compuestos:
a. Selectores Agrupados -> Se agrupan los selectores
separados por comas y se escribe el estilo una sola vez
b. Selectores Combinadores.
i. Selector descendente -> Selecciona un elemento
dentro de otro
ii. Selector de hermano siguiente + -> Selecciona
al hermano siguiente adyacente
iii. Selector de hermanos siguientes ~ -> Selecciona
a todos los hermanos siguientes
iv. Selector de hijo directo > -> Selecciona SOLO los
hijos directos
8.1 SELECTOR UNIVERSAL:
*{
Background-color:black;
}
Selector de etiqueta:
h1{
background-color: lightcyan;
}
p{
background-color:lightgreen;
}

8
8.2 CLASES
La manera de utilizar estas tres clases de H1 se muestra a
continuación:
<h1 class=uno>Primer encabezado H1.</h1>
<h1 class=dos>Segundo encabezado H1.</h1>
<h1 class=tres>Tercer encabezado H1.</h1>

El nombre de las clases puede ser cualquiera que se nos venga

a la mente pero al igual que los id son case sensitive, distingue entre
mayúsculas y minúsculas. Estas clases fueron creadas
específicamente para la etiqueta H1 pero si quisiéramos utilizar
alguna de estas clases para cualquier otra etiqueta debemos omitir,
precisamente, cualquier etiqueta:
*.uno { color: #FF6600 }
o simplemente:
.uno { color: #FF6600 }

Cualquier elemento dentro de BODY puede ser vinculado a una

clase.
<h1 class="uno">...
<p class="uno">...
<i class="uno">...
<div class="uno">...

Se puede aplicar varias clases, no hay límite a una misma

etiqueta de la siguiente forma:
<p class=”name1 name2 name3> Texto del párrafo </p>
La mayoría del tiempo, en lugar de utilizar el atributo id para
propósitos de estilos es mejor utilizar class. Este atributo es más
flexible y puede ser asignado a cada elemento HTML en el documento
que comparte un diseño similar:

.texto1 { font-size: 20px }

Para trabajar con el atributo class, debemos declarar la regla
CSS con un punto antes del nombre. La ventaja de este método es
que insertar el atributo class con el valor texto1 será suficiente para
asignar estos estilos a cualquier elemento que queramos:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<p class=”texto1”>Mi texto</p>
<p class=”texto1”>Mi texto</p>
<p>Mi texto</p>
</body>
</html>

9
 Los elementos <p> en las primeras dos líneas dentro del
cuerpo del código en el Listado anterior tienen el atributo class con el
valor texto1. Como dijimos previamente, la misma regla puede ser
aplicada a diferentes elementos en el mismo

documento. Por lo tanto, estos dos primeros elementos

comparten la misma regla y ambos serán afectados por el estilo del
listado del atributo class. El último elemento <p> conserva los estilos
por defecto otorgados por el navegador.

La razón por la que debemos utilizar un punto delante del

nombre de la regla es que es posible construir referencias más
complejas. Por ejemplo, se puede utilizar el mismo valor para el
atributo class en diferentes elementos pero asignar diferentes estilos
para cada tipo:

p.texto1 { font-size: 20px }

En el Listado de arriba creamos una regla que referencia la

clase llamada texto1 pero solo para los elementos de tipo <p>.

Si cualquier otro elemento tiene el mismo valor en su atributo

class no será modificado por esta regla en particular.

8.3 ID
Si queremos referirnos a una etiqueta en particular podemos
usar # seguido del nombre asignado al id de esa etiqueta que es
único y que por tanto no debe ser repetido, debemos saber que es
case sensitive o sea que la mayúscula y la minúscula no es lo mismo,
de todas formas siempre se pone el nombre en minúsulas por norma,
se tiende a no usar id apenas, pues el código no sería reutilizable:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<p id=”texto1”>Mi texto</p>
</body>
</html>

El atributo id es como un nombre que identifica al elemento.

Esto significa que el valor de este atributo no puede ser duplicado.
Este nombre debe ser único en todo el documento.

10
 Para referenciar un elemento en particular usando el atributo id
desde nuestro archivo CSS la regla debe ser declarada con el símbolo
# al frente del valor que usamos para identificar el elemento:

#texto1 { font-size: 20px }

La regla en el listado de arriba será aplicada al elemento HTML

identificado con el atributo id=”texto1”. Ahora nuestro código HTML
lucirá de esta manera:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<p id=”texto1”>Mi texto</p>
</body>
</html>

El resultado de este procedimiento es que cada vez que

hacemos una referencia usando el identificador texto1 en nuestro
archivo CSS, el elemento con ese valor de id será modificado, pero el
resto de los elementos <p>, o cualquier otro elemento en el mismo
documento, no serán afectados.

Esta es una forma extremadamente específica de referenciar un

elemento y es normalmente utilizada para elementos más generales,
como etiquetas estructurales. El atributo id y su especificidad es de
hecho más apropiado para referencias en Javascript, como veremos
en próximos capítulos.

8.4 REFERENCIANDO CON CUALQUIER ATRIBUTO

Aunque los métodos de referencia estudiados anteriormente
cubren un variado espectro de situaciones, a veces no son suficientes
para encontrar el elemento exacto. La última versión de CSS ha
incorporado nuevas formas de referenciar elementos HTML. Uno de
ellas es el Selector de Atributo. Ahora podemos referenciar un
elemento no solo por los atributos id y class sino también a través de
cualquier otro atributo:

p[name] { font-size: 20px }

La regla en el Listado anterior cambia solo elementos <p> que

tienen un atributo llamado name. Para imitar lo que hicimos

11
previamente con los atributos id y class, podemos también especificar
el valor del atributo:

p[name=”mitexto”] { font-size: 20px }

CSS3 permite combinar “=” con otros para hacer una selección
más específica:

p[name^=”mi”] { font-size: 20px }

p[name$=”mi”] { font-size: 20px }
p[name*=”mi”] { font-size: 20px }
[name|=”mi”] { font-size: 20px }

Si usted conoce Expresiones Regulares desde otros lenguajes

como Javascript o PHP, podrá reconocer los selectores utilizados en el
Listado anterior. En CSS3 estos selectores producen similares
resultados:

 La regla con el selector ^= será asignada a todo elemento

<p> que contiene un atributo name con un valor
comenzado en “mi” (por ejemplo, “mitexto”, “micasa”).
 La regla con el selector $= será asignada a todo elemento
<p> que contiene un atributo name con un valor finalizado
en “mi” (por ejemplo “textomi”, “casami”).
 La regla con el selector *= será asignada a todo elemento
<p> que contiene un atributo name con un valor que
incluye el texto “mi” (en este caso, el texto podría también
encontrarse en el medio, como en “textomicasa”).
 La regla con el selector |= es usado en atributos de Lang e
indica que debe contener la palabra que ponga o la palabra
que ponga seguida con un guión, como es habitual en este
atributo.

En estos ejemplos usamos el elemento <p>, el atributo name, y

una cadena de texto al azar como “mi”, pero la misma técnica puede
ser utilizada con cualquier atributo y valor que necesitemos. Solo
tiene que escribir los corchetes e insertar entre ellos el nombre del
atributo y el valor que necesita para referenciar el elemento HTML
correcto.

Un ejemplo del último podría ser:

<p lang=”en-GB”> </p>

8.5 SELECTORES AGRUPADOS

12
 Para reducir el tamaño de las hojas de estilo es posible agrupar
varios selectores separándolos por medio de una coma:

h1, h2, h3 { font-color: blue }

También las declaraciones pueden ser agrupadas.

8.6 COMBINADORES
Selectores descendentes

Si queremos seleccionar todos los párrafos que hay dentro de

una etiqueta article pondríamos:

article p{}
Técnicamente no hay límite en colocar sucesivas clases o
etiquetas dentro de otras, las buenas prácticas nos dicen que no es
recomendable usar mas de dos niveles. A esta forma de seleccionar
se le llama seleccionar hijos. En css no tenemos forma de subir en la
escala, actualmente se está trabajando en poder seleccionar padres.
De momento solo tenemos acceso a los elementos que están por
debajo.

Hay algunos selectores más que fueron agregados o que ahora

son considerados parte de CSS3 y pueden ser útiles para nuestros
diseños. Estos selectores usan los símbolos >, + y ~ para especificar
la relación entre elementos.

div > p.mitexto2{

color: #990000;
}

El selector > está indicando que el elemento a ser afectado por

la regla es el elemento de la derecha cuando tiene al de la izquierda
como su padre. La regla en el Listado de arriba modifica los
elementos <p> que son hijos de un elemento <div>. En este caso,
fuimos bien específicos y referenciamos solamente el elemento <p>
con el valor mitexto2 en su atributo class.

Selector hermano siguientes

El próximo ejemplo construye un selector utilizando el símbolo

+. Este selector referencia al elemento de la derecha cuando es
inmediatamente precedido por el de la izquierda. Ambos elementos
deben compartir el mismo padre:

p.mitexto2 + p{
color: #990000;

13
}
La regla del Listado anterior afecta al elemento <p> que se
encuentra ubicado luego de otro elemento <p> identificado con el
valor mitexto2 en su atributo class. Si abre en su navegador el
archivo HTML con el código del Listado de pseudo clases, el texto en
el tercer elemento <p> aparecerá en la pantalla en color rojo debido
a que este elemento <p> en particular está posicionado
inmediatamente después del elemento <p> identificado con el valor
mitexto2 en su atributo class. Siempre es la siguiente etiqueta sea
por definida por su clase o nombre, siempre que sean hermanos.

Selector hermanos siguientes

El siguiente selector que estudiaremos es el construido con el

símbolo ~. Este selector es similar al anterior pero el elemento
afectado no necesita estar precediendo de inmediato al elemento de
la izquierda. Además, más de un elemento puede ser afectado,
siempre que sea de la etiqueta que colocamos en segundo lugar, en
este ejemplo si hubier h2 como hermanos, no se verían afectados:

p.mitexto2 ~ p{
color: #990000;
}
La regla de este listado afecta al tercer y cuarto elemento <p>
de nuestra plantilla de ejemplo. El estilo será aplicado a todos los
elementos <p> que son hermanos y se encuentran luego del
elemento <p> identificado con el valor mitexto2 en su atributo class.
No importa si otros elementos se encuentran intercalados, los
elementos <p> en la tercera y cuarta posición aún serán afectados.
Puede verificar esto último insertando un elemento
<span>mitexto</span> luego del elem ento <p> que tiene el valor
mitexto2 en su atributo class. A pesar de este cambio solo los
elementos <p> serán modificados por esta regla.

Referenciando con pseudo clases

CSS3 también incorpora nuevas pseudo clases que hacen la

selección aún más específica.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div id="wrapper">
<p class="mitexto1">Mi texto1</p>
<p class="mitexto2">Mi texto2</p>
<p class="mitexto3">Mi texto3</p>

14
 <p class="mitexto4">Mi texto4</p>
</div>
</body>
</html>
Miremos por un momento el nuevo código HTML del Listado de
arriba. Contiene cuatro elementos <p> que, considerando la
estructura HTML, son hermanos entre sí e hijos del mismo elemento
<div>.

Usando pseudo clases podemos aprovechar esta organización y

referenciar un elemento específico sin importar cuánto conocemos
sobre sus atributos y el valor de los mismos:

p:nth-child(2){
background: #999999;
}

La pseudo clase es agregada usando dos puntos luego de la

referencia y antes del su nombre. En la regla del Listado superior
referenciamos solo elementos <p>. Esta regla puede incluir otras
referencias. Por ejemplo, podríamos escribirla como .miclase:nth-
child(2) para referenciar todo elemento que es hijo de otro elemento
y tiene el valor de su atributo class igual a miclase. La pseudo clase
puede ser aplicada a cualquier tipo de referencia estudiada
previamente.

La pseudo clase nth-child() nos permite encontrar un hijo

específico. Como ya explicamos, el documento HTML del Listado de
pseudo clases tiene cuatro elementos <p> que son hermanos. Esto
significa que todos ellos tienen el mismo padre que es el elemento
<div>. Lo que esta pseudo clase está realmente indicando es algo
como: “el hijo en la posición…” por lo que el número entre paréntesis
será el número de la posición del hijo, o índice. La regla del Listado de
arroba está referenciando cada segundo elemento <p> encontrado
en el documento.

Usando este método de referencia podemos, por supuesto,

seleccionar cualquier hijo que necesitemos cambiando el número de
índice. Por ejemplo, la siguiente regla tendrá impacto sólo sobre el
último elemento <p> de nuestra plantilla:

p:nth-child(4){
background: #999999;
}
Como seguramente se habrá dado cuenta, es posible asignar
estilos a todos los elementos creando una regla para cada uno de
ellos:

15
*{
margin: 0px;
}
p:nth-child(1){
background: #999999;
} p:nth-child(2){
background: #CCCCCC;
} p:nth-child(3){
background: #999999;
} p:nth-child(4){
background: #CCCCCC;
}
La primera regla del listado de arriba usa el selector universal *
para asignar el mismo estilo a cada elemento del documento. Este
nuevo selector representa cada uno de los elementos en el cuerpo del
documento y es útil cuando necesitamos establecer ciertas reglas
básicas. En este caso, configuramos el margen de todos los
elementos en 0 pixeles para evitar espacios en blanco o líneas vacías
como las creadas por el elemento <p> por defecto.

En el resto del código usamos la pseudo clase nth-child() para

generar un menú o lista de opciones que son diferenciadas
claramente en la pantalla por

Para agregar más opciones al menú, podemos incorporar

nuevos elementos <p> en el código HTML y nuevas reglas con la
pseudo clase nth-child() usando el número de índice adecuado. Sin
embargo, esta aproximación genera mucho código y resulta imposible
de aplicar en sitios webs con contenido dinámico. Una alternativa
para obtener el mismo resultado es aprovechar las palabras clave odd
y even disponibles para esta pseudo clase:

*{
margin: 0px;
}
p:nth-child(odd){
background: #999999;
}
p:nth-child(even){
background: #CCCCCC;
}

Ahora solo necesitamos dos reglas para crear la lista completa.

Incluso si más adelante agregamos otras opciones, los estilos serán
asignados automáticamente a cada una de ellas de acuerdo a su
posición. La palabra clave odd para la pseudo clase nth-child() afecta
los elementos <p> que son hijos de otro elemento y tienen un índice

16
impar. La palabra clave even, por otro lado, afecta a aquellos que
tienen un índice par.

Existen otras importantes pseudo clases relacionadas con esta

última, como first-child, last-child y only-child, algunas de ellas
recientemente incorporadas. La pseudo clase first-child referencia
solo el primer hijo, last-child referencia solo el último hijo, y only-child
afecta un elemento siempre y cuando sea el único hijo disponible.
Estas pseudo clases en particular no requieren palabras clave o
parámetros, y son implementadas como en el siguiente ejemplo:

*{
margin: 0px;
}
p:last-child{
background: #999999;
}

Otra importante pseudo clase llamada not() es utilizada realizar

una negación:

:not(p){
margin: 0px;
}

La regla del Listado anterior asignará un margen de 0 pixeles a

cada elemento del documento excepto los elementos <p>. A
diferencia del selector universal utilizado previamente, la pseudo
clase not() nos permite declarar una excepción. Los estilos en la regla
creada con esta pseudo clase serán asignados a todo elemento
excepto aquellos incluidos en la referencia entre paréntesis. En lugar
de la palabra clave de un elemento podemos usar cualquier otra
referencia que deseemos. En el próximo listado, por ejemplo, todos
los elementos serán afectados excepto aquellos con el valor mitexto2
en el atributo class:

:not(.mitexto2){
margin: 0px;
}

Cuando aplicamos la última regla al código HTML del Listado de

pseudo clases el navegador asigna los estilos por defecto al elemento
<p> identificado con el atributo class y el valor mitexto2 y provee un
margen de 0 pixeles al resto.

17
ESPECIFICIDAD
La especificidad es una de las cuatro etapas distintas de la
cascada,

Para entender por qué tus estilos CSS no se están aplicando a

un elemento, primero debes tener una comprensión básica de la
Especificidad en CSS.

Es muy fácil poner el valor !important a tus estilos CSS, pero

esto hace que tu CSS se descontrole rápidamente.

Entendiendo cómo se aplican los estilos, puedes asegurarte de

que los estilos que quieres que se apliquen se muestren.

Es más fácil cambiar rápidamente un estilo cuando se sabe

exactamente qué selector da estilo a ese elemento específico.
Además, probablemente te encontrarás escribiendo menos código
CSS en general, lo que ayudará a su mantenimiento.

¿Qué es la especificidad?

La especificidad en CSS es un grupo de reglas aplicadas a los

selectores CSS para determinar qué estilo se aplica a un elemento.
Cuanto más específico sea un selector, mayor será su valor en puntos
y más probable será que esté presente en el estilo del elemento.

La documentación oficial de la MDN describe la especificidad de

la siguiente manera:

La especificidad es la manera mediante la cual los navegadores

deciden qué valores de una propiedad CSS son más relevantes para
un elemento y, por lo tanto, serán aplicados

Esto significa que la especificidad de CSS es un conjunto de

reglas usadas por los navegadores para determinar cuál de los estilos
definidos por el desarrollador se aplicará a un elemento específico.
Para que un estilo se aplique a un elemento en particular, el
desarrollador tiene que cumplir con las reglas, de modo que el
navegador sepa cómo aplicar el estilo.

El navegador evalúa la especificidad en dos partes:

1. Los estilos aplicados en línea en el HTML (Inline Styles).

2. Los estilos aplicados mediante un selector (Especificidad del
selector).

Jerarquía de la especificidad

Piense en la especificidad como un score/rank que determina

qué declaraciones de estilo se aplican finalmente a un elemento.

18
 La especificidad utiliza un sistema de ponderación o puntuación.

Cada tipo de selector recibe puntos que indican su

especificidad, y se suman los puntos de todos los selectores que
hayas utilizado. para calcular la especificidad total del selector.

Cada selector tiene su lugar en la jerarquía de especificidad.

Hay cuatro categorías que definen el nivel de especificidad de un
selector.

Puntuación de cada tipo de selector

Antes de comenzar, debes conocer primero cuales son los tipos

de selectores en CSS, estos se dividen en varias categorías. Un
ejemplo son las pseudoclases que vas a poder encontrar muchas de
ellas, sin embargo, te recomiendo que solo aprendas las mas
importantes.

Selectores CSS:

 Selectores básicos
 Selector de tipo o etiqueta
 Selector de clase (.)
 Selector de id (#)
 Selector universal (*)
 Selector de atributo [~=, | , *, ^, $ ]

Combinadores

 Hermano adyacente (+)

 Hermano general (~)
 Hijo directo (>)
 Descendiente (espacio)

La cantidad de especificidad de un selector se mide usando

cuatro valores diferentes separados por coma que tienen diferente
peso y pueden describirse como millares, centenas, decenas y
unidades (cuatro dígitos individuales dispuestos en cuatro columnas):

19
*Selector Universal

El selector con menor peso ( y menos valor ) es el selector

universal, que en CSS se define de la siguiente forma:

*{
box-sizing: border-box;
}

Este selector en CSS tiene un valor de 0-0-0-0, eso quiere decir

que cualquier otro selector cuyo valor sea 1-0-0-0, 0-1-0-0 o incluso 0-
0-0-1 tendrá mayor peso que el y lo reescribirá. Esto lo podemos
comprobar con el siguiente ejemplo:

<p>Lupita Code</p>
*{
font-size: 1rem;
}

p{
font-size: 3rem;
}
¿Qué tamaño de fuente se va aplicar al elemento <p>?

20
 El selector universal * tiene un peso de 0-0-0-0 mientras que el
selector con un elemento HTML ( en este caso un <p> ) tiene un peso
de 0-0-0-1, al ser un valor mayor que el anterior, su peso es mayor y
CSS entiende que su especificidad también es mayor y gana sobre el
anterior selector a pesar de estar declarado en primer lugar en la hoja
de estilos.

</> Elementos y ::pseudoelementos

Los selectores de tipo o de etiqueta: <p>, <div>,<main> etc.

Tiene un valor de 0-0-0-1

<header>
<h1><span>Welcome</span> to my youtube
channel</h1>
</header>

header h1 span {
text-transform: lowercase;
}
span {
text-transform:uppercase;
}
El elemento <span> solamente tiene un peso de 0-0-0-1 pero
también tenemos en la primera regla 3 etiquetas HTML que tienen un
peso total de 0-0-0-3, ¿Por que 3? la respuesta es que el 3 es la
cantidad de elementos HTML declarados, por lo que todo el texto
estará en minúsculas a pesar de que el <span> tenga mayúscula.

Por lo tanto si agregas 5 Selectores de elementos anidados, el

peso será de 0-0-0-5.

Recuerda que mayor peso en la especificidad será el ganador.

Lo mismo pasa con los pseudo-elementos tienen un valor de 0-

0-0-1. Los pseudo-elementos más usados son ::after y ::before.

.clases, atributos[...] y :pseudoclases

El selector de clase tiene mayor peso (o especificidad) que los

selectores de tipo o elementos HTML y que el selector universal,
seguiremos con el ejemplo anterior pero ahora con una clase llamada
title en la etiqueta <span>:

<header>
<h1><span class="title">Welcome</span> to my
youtube channel</h1>
</header>

header h1 span {

21
 text-transform: lowercase;
}
.title {
text-transform:uppercase;
}
Ahora el texto del elemento <span> si estará en mayúscula y
todo lo demás estará en minúscula, esto sucede porque las clases
tienen un peso de 0-0-1-0 mientras que el selector de 3 elementos
será de 0-0-0-3.

Existen otros selectores que tienen el mismo peso de 0-0-1-0

que son los selectores de atributo y las pseudo-clases. Existen
muchas pseudo-clases un ejemplo son las pseudo-clases child:

Pseudoclases child

:first-child
🔵⚫⚫⚫
:last-child
⚫⚫⚫🔵
:nth-last-child(2)
⚫⚫🔵⚫
:nth-child(3)
⚫⚫🔵⚫
:nth-child(odd)
🔵⚫🔵⚫
:nth-child(even)
⚫🔵⚫🔵
:nth-child(3n+1)
🔵⚫⚫🔵
:nth-child(n+2)
⚫🔵🔵🔵
:nth-child(-n+3)
🔵🔵🔵⚫
:nth-child(2n)
⚫🔵⚫🔵

Selector de id

Este es de los selectores más específicos en este caso el ID

tendrá un peso de 0-1-0-0.

Esto significa que un selector de ID tiene una mayor

especificidad que un selector de clase. De hecho, un único ID tiene
una mayor
especificidad que un selector con cualquier número de clases. Del
mismo modo, un selector de clases tiene una mayor especificidad
que un selector de etiquetas (también llamado selector de tipos).

22
 <header id="header" class="header"> Código html
</header>

#header {
background-color: rebeccapurple;

.header {
background-color: khaki;
}
El valor que se va aplicar al elemento <header> es el color
rebeccapurple ya que el id tiene un valor de 0-1-0-0, mientras que la
clase tiene un valor de 0-0-1-0.

Estilos en línea

Los estilos inline añadidos a un elemento HTML siempre

sobrescriben a cualquier estilo escrito en hojas de estilo externas o
una etiqueta <style>, por lo que se puede decir que tienen la mayor
especificidad. Los estilos en línea no tienen selector porque se aplican
directamente al elemento al que se dirigen.

<li>
<a href="/specials" class="featured"
style="background-color: orange;">
Specials
</a>
</li>
Los estilos en línea tienen un valor de 1-0-0-0.

¿Qué tiene que ver !important con la especificidad?

Para anular los estilos inline, tendrás que añadir un !important a

la declaración de la hoja de estilos externa. Si los estilos en línea
están marcados como !important, entonces nada puede anularlos.

Es preferible que todos tus estilos estén en una hoja de estilos

externa. Utilizar !important es solo para casos desesperados y NO se
recomienda usarlo ya que si comienzas a agregar !important en
varios lugares de tus hojas de estilos te será más complicado
debuggear o reescribir algún elemento. Aunque existen ciertos casos
especiales en los que si puedes usarlo pero si eres principiante
recomiendo NO utilizar !important a menos que sepas lo que estas
haciendo.

Cuando se emplea !important en una declaración de estilo, esta

declaración reescribirá cualquier estilo antes aplicado, esta palabra
clave para el navegador es de prioridad muy alta. Aunque
técnicamente !important no tiene nada que ver con especificidad,
interactúa directamente con esta.

23
 Es posible que te encuentres con situaciones al utilizar
frameworks CSS, como Bootstrap, en las que no puedes utilizar la
especificidad CSS para anular los estilos nativos. En estos casos, el
uso de !important no se considera una mala práctica.

Excepciones

El selector universal (*), los combinadores (+, >, ~, etc ) y la

pseudo-clase de negación :not() no tienen efecto sobre la
especificidad. (Sin embargo, los selectores declarados dentro
de :not() si lo tienen). Por ejemplo:

[Link] p {
color:orange;
}
div:not(.outer) p {
color: lime;
}
<div class="outer">
<p>Esto está en el outer div.</p>
<div class="inner">
<p>Este texto está en el inner div.</p>
</div>
</div>

24
 Como puedes observar la pseudo-clase de negación :not() no es
considerada una pseudo-clase para el cálculo de la especificidad. Pero
los selectores colocados dentro de ella en este ejemplo la
clase .outer, si cuentan en la especificidad.

Diferentes tipos de selectores, diferente especificidad

Cuando usamos diferentes tipos de selectores combinados (por

ejemplo,body #content .data img:hover{}) el navegador contará el
número de ids, pseudo-clases y pseudo-elementos y asignará un valor
de especificidad a la regla, para compararla con las demás y decidir
cuál usar. Por ejemplo:

25
 VSCODE al rescate

Te preguntaras si tienes que hacer estos cálculos siempre para

saber que tan específicos son tus selectores, por fortuna no tienes
que hacer estos cálculos manualmente, gracias al editor de código
vscode podemos saber la especificidad de los selectores.

Lo único que tienes que hacer es posicionar el cursor sobre tus

selectores en la hoja de estilos y vscode automáticamente te da la
especificidad:

Para saber si nuestro código css es bueno, podemos colocarlo

en esta página donde deberá empezar bajo subir y mantenerse mas o
menos estable, si vemos muchos picos es que no es bueno nuestro
css:

[Link]

26
LA CASCADA
La Cascada en CSS: Qué es y cómo funciona

Primero debes saber que la cascada funciona siempre que la

especificidad sea la misma.

¿Alguna vez has escrito una propiedad CSS y el valor no parece

funcionar? Tal vez tuviste que recurrir al uso de !important para que
funcionara. O quizás hayas recurrido a escribir el CSS inline en el
elemento del archivo HTML. Por lo general, el problema puede ser que
has creado dos reglas que podrían aplicarse al mismo elemento.

El CSS consiste en declarar reglas: Bajo varias condiciones,

queremos que ocurran ciertas cosas. Si esta clase se añade a ese
elemento, aplique estos estilos. Si el elemento X es hijo del elemento
Y, aplica estos estilos. El navegador toma estas reglas, calcula cuáles
se aplican y dónde se van aplicar, y las utiliza para representarlas en
la página web.

Recuerda que el aspecto final de una página web es el

resultado de reglas de estilo diferentes.

Pero, ¿Qué es una regla en la sintaxis de CSS? Puede que no

estés familiarizado con el vocabulario en CSS, pero como voy a
utilizar este término a lo largo del articulo, es mejor tener claro lo que
significa:

Una regla también conocida como estilo, es una colección de

declaraciones dirigidas a uno o más selectores, una hoja de estilo se
compone de múltiples reglas.

El primer paso es entender cómo el navegador da importancia a

sus reglas. Por ejemplo, puedes encontrarte con que una de tus
reglas no hace lo que esperabas porque otra regla entra en conflicto
con ella. Predecir cómo se comportan las reglas requiere comprender
la cascada.

Cuando dos o más reglas se dirigen al mismo elemento, las

reglas pueden proporcionar declaraciones contradictorias. En el
siguiente ejemplo se muestra tres conjuntos de reglas, cada uno de
los cuales especifica un estilo de fuente diferente para el título de la
página. El título NO puede tener tres fuentes diferentes a la vez.
Entonces, ¿Cómo sabe CSS que estilo aplicar? o ¿Cuál tiene prioridad
sobre los demás? Aquí es donde utilizamos la cascada.

<h1 class="title" id="page-title">Lupita Code</h1>

h1 {
font-family: serif;
}

27
 #page-title {
font-family: sans-serif;
}

.title {
font-family: monospace;
}
Los tres conjuntos de reglas intentan establecer una familia de
fuentes diferente para este encabezado <h1>. ¿Cuál de ellas ganará?
. Para determinar la respuesta, el navegador (para saber que estilos
tiene prioridad sobre los demás) sigue una serie de reglas o pasos (en
orden) que son: Origen de la hoja de estilo, especificidad de los
selectores y orden en que se declaran los estilos.

En este caso, las reglas dictan que la segunda declaración, que

tiene un selector ID gana; el título tendrá una fuente sans-serif.

Cuando se observan ejemplos pequeños, este proceso suele ser

sencillo. Pero a medida que tu hoja de estilos crece, o el número de
páginas a las que les aplicas aumenta, tu código puede volverse
complejo con sorprendente rapidez.

¿Qué es la cascada?

La cascada es el algoritmo por el cual el navegador decide qué

estilos CSS aplicar a un elemento - a mucha gente le gusta pensar en
esto como el estilo que "gana".

Especifica cómo el navegador debe manejar múltiples estilos

que se aplican a la misma etiqueta HTML y qué hacer cuando las
propiedades CSS entran en conflicto. La cascada es una parte
fundamental del funcionamiento del lenguaje.

28
 Los conflictos de estilo se producen en dos casos: por herencia
y cuando uno o más estilos se aplican al mismo elemento.

Cabe mencionar que las iniciales de CSS significan Cascading

Style Sheets (Hojas de Estilo en Cascada), y es muy importante
entender la palabra cascada ya que como podrás darte cuenta forma
parte del propio nombre.

 En cascada se refiere a la forma en que CSS aplica un estilo

encima de otro.
 Las hojas de estilo controlan la apariencia de los
documentos web.
Podemos decir entonces que la cascada es el algoritmo para
resolver conflictos cuando se aplican varias reglas CSS a un
elemento HTML. La forma en que se comporta la cascada es la
clave para comprender el CSS.

La cascada puede ser una herramienta poderosa, pero su uso

incorrecto puede conducir a hojas de estilo frágiles que dan pesadillas
a los desarrolladores/as de front-end cada vez que tienen que hacer
un cambio. Mientras nos sumergimos en la cascada, veremos algunas
formas de evitar que la cascada se nos vaya de las manos.

Las 4 etapas de la cascada

Entender el algoritmo de cascada ayuda a comprender cómo el

navegador resuelve conflictos de estilos.

Cuando las declaraciones entran en conflicto, la cascada

considera cuatro cosas para resolver la diferencia:

1. Posición y orden de aparición: El orden en que aparecen

tus reglas CSS en la hoja de estilos.
2. Especificidad de los selectores: Qué selectores tienen
prioridad sobre otros.
3. Origen de la hoja de estilo: El orden de aparición del CSS
y su procedencia, ya sea un estilo del navegador, el CSS de
una extensión del navegador o el CSS de tu autoría.
4. Importancia: Algunas reglas CSS tienen más peso que
otras, especialmente con el tipo de regla !important.
Las reglas de la cascada se consideran en este orden. Aunque
hay varios autores de diversos libros de CSS que solo consideran tres
etapas de manera general:

1. Origen de la hoja de estilo.

2. Especificidad de los selectores.
3. Orden en que se declaran los estilos en la hoja de estilos.
El siguiente diagrama de flujo muestra cómo son aplicadas
estas reglas.

29
 Estas reglas permiten que los navegadores se comporten de
forma predecible al resolver cualquier ambigüedad en el CSS. Vamos
a repasarlas una por una.

Posición y orden de aparición:

El orden en el que aparecen tus reglas CSS y cómo aparecen es

tomado en consideración por la cascada mientras ésta calcula la
resolución de conflictos.

Ejemplo 1 - Orden de las reglas

button {
color: red;
}

button {
color: blue;
}
En este ejemplo hay dos reglas que tienen selectores de
idéntica especificidad, por lo que gana la última en ser declarada, es
decir, aquí prevalece siempre la última regla definida, la cuál
sobrescribe las propiedades anteriores.

Ahora te propongo un reto, dada las siguientes clases, ¿De qué

color serían estos divs?

.red {
color: red;
}

.blue {
color: blue;
}
-------

30
 <div class=”red blue”> Lupita Code </div>
<div class=”blue red”> Lupita Code </div>
Si has contestado "ambos divs tienen color blue", felicidades, es
la opción correcta. Pero no te sientas mal si no has acertado...

El verdadero truco de la pregunta es que los navegadores no

miran el orden en que se declaran las clases en el HTML, sino en el
CSS.

Recuerda que cuando dos selectores tienen la misma

especificidad, gana la declaración que aparece en último lugar.

Sin embargo, hay algunos casos que no está muy claro que
estilo debería sobrescribir a los anteriores, ahí es cuando aplicamos el
concepto de cascada, que es la que se encarga de determinar el que
tiene mayor prioridad.

Ejemplo 2 - Orden de las hojas de estilo

Hay cuatro formas de incluir CSS en un documento HTML que

van de mayor a menor prioridad:

1. En línea dentro de la etiqueta HTML usando el

atributo style;: El CSS en línea es el que tiene mayor
precedencia, por lo que siempre será el que tenga prioridad
sobre otras reglas CSS, lo que puede ganarle a este estilo en
línea es el !important.
2. En el <head> a través de la la etiqueta <style>: el CSS
incrustado/interno será el siguiente a tener en cuenta en
orden de prioridad.
3. Asociando una hoja de estilo externa a nuestro
documento HTML usando la etiqueta <link> añadida
en el <head>: CSS externos son la tercera opción de
prioridad al momento de tomar en cuenta las reglas CSS.
4. En el <head> usando @import dentro de la etiqueta
<style>, ejemplo: <style> @import url('[Link]') </style>
(poco usable).

A pesar de que hay muchas maneras de incluir CSS en nuestro

documento HTML, la forma más usada es asociar una hoja de estilo
externa.

Como puedes notar los estilos pueden venir de varias partes en

una página HTML. Si tienes un <link> que incluye CSS en la parte
superior de tu página HTML, y luego otro <link> que incluye CSS en
la parte inferior de tu página: el <link> inferior tendrá la mayor
especificidad. Lo mismo ocurre con los elementos <style>
incrustados. Se vuelven más específicos cuanto más abajo en la
página estén.

31
 <!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<button>I am a button</button>
<style>
button {
background: pink;
}
</style>
</body>
</html>
/*[Link]*/

button {
background: yellow;
}
La etiqueta <style> incrustada está más abajo en la página que
la etiqueta <link>, así que aunque la especificidad del botón es la
misma, la posición de la regla de estilo la hace ganar. Por lo tanto, El
botón tendrá un background de color rosa pink.

Dado que CSS tiene en cuenta el orden de las hojas en la

cascada, el orden en el que se cargan las hojas de estilo es realmente
importante.

Si tienes dos hojas de estilo enlazadas en el <head> de tu

documento HTML, la segunda hoja de estilo anulará las reglas de la
primera. Esta es también la razón por la que si estás usando un reset
de CSS o un framework, querrás cargarlo antes de tus estilos
personalizados.

Ejemplo 3 - La posición de las declaraciones

La posición también se aplica en el orden de su regla CSS. En el

siguiente ejemplo, el elemento tendrá un fondo púrpura porque
background: purple fue declarado en último lugar. Debido a que el
background: green fue declarado antes que el background: purple,
ahora es ignorado por el navegador.

.my-element {
background: green;
background: purple;
}
Poder especificar dos valores para la misma propiedad puede
ser una forma sencilla de crear fallbacks para los navegadores que no
soportan un valor concreto.

32
 En el siguiente ejemplo, la propiedad font-size se declara dos
veces. Si la función clamp() está soportado en el navegador, entonces
la declaración anterior de font-size será descartada. Si clamp() no
está soportado por el navegador, la declaración inicial será respetada,
y el tamaño de la fuente será 1.5rem.

.my-element {
font-size: 1.5rem;
font-size: clamp(1.5rem, calc(1rem + 3vw), 2rem);
}
Este enfoque de declarar la misma propiedad dos veces
funciona porque los navegadores ignoran los valores que no
entienden. A diferencia de los lenguajes de programación, CSS no
lanzará un error o romperá su programa cuando detecte una línea
que no puede analizar - el valor que no puede analizar es inválido y
por lo tanto es ignorado. El navegador continúa entonces procesando
el resto del CSS sin romper lo que ya entiende.

Origen de la hoja de estilo

El CSS que escribes no es el único CSS que se aplica a una

página web. La cascada tiene en cuenta el origen del CSS, es decir de
donde provienen los estilos. Este origen incluye la hoja de estilos
interna del navegador, los estilos añadidos por las extensiones del
navegador o el sistema operativo, y el CSS de tu autoría (CSS de
autor).

Los estilos del agente de usuario (los estilos por defecto del
navegador) tienen menor prioridad, por lo que tus estilos los anulan.

El orden de especificidad de estos orígenes, de menos

específico a más específico, es el siguiente

1. Estilos base del agente de usuario: Son los estilos que su

navegador aplica a los elementos HTML por defecto.

Los estilos del agente de usuario varían ligeramente de un

navegador a otro, pero en general hacen las mismas cosas: a
los títulos (<h1> a <h6>) y a los párrafos (<p>) se les da un
margen superior e inferior, a las listas (<ol> y <ul>) se les da
un padding a la izquierda, y se establecen los colores de los
enlaces y los tamaños de letra por defecto.

Si has trabajado con CSS durante mucho tiempo,

probablemente estés acostumbrado a anular los estilos del
agente de usuario. Cuando lo haces, utilizas la parte de origen
de la cascada. Tus estilos siempre anularán los estilos del
agente de usuario porque los orígenes son diferentes.

33
Para evitar inconsistencias entre navegadores se suele utilizar
algunas hojas de estilo llamadas "reset" una muy popular se
llama Normalize aunque también puedes hacer tu propio
"reset". Estos estilos establecen una base para las propiedades
que se tratan de forma diferente en los distintos navegadores.

2. Estilos propios del usuario: Pueden venir del sistema

operativo, como un tamaño de fuente estándar, o una
preferencia. También pueden venir de las extensiones del
navegador, como una extensión del navegador que permite al
usuario escribir su propio CSS personalizado para una página
web.

Un ejemplo, es la maravillosa extensión para Chrome llamada

VisBug que permite editar visualmente elementos de cualquier
página web, como cambiar los colores, el texto etc.

3. CSS de autor: La hoja de estilos creada por el autor de la

página, es decir, El CSS que escribe el desarrollador o
desarrolladora.

4. CSS de autor con !important: Cualquier !important que el

desarrollador añada a sus declaraciones.

5. Estilos propios del usuario con !important: Cualquier !

important que venga del sistema operativo, o del CSS de la
extensión del navegador.

6. Estilos base del agente de usuario con !important:

Cualquier !important que esté definido en el CSS por defecto del
navegador.

34
 En caso de que la misma propiedad del CSS de usuario y la
propiedad del CSS de autor tuvieran !important, tendra prioridad la del
CSS de usuario sobre la del CSS de autor.

En la siguiente imagen compartida por el sitio Learn CSS se

muestran este orden que va de menor a mayor importancia:

Hay otros autores de diversos libros de CSS que solo consideran

de manera general tres fuentes responsables de los estilos que ves
en una página web y que forman la cascada, las cuales ya vimos
anteriormente:

1. La hoja de estilos creada por el autor de la página.

2. Los estilos por defecto del propio navegador.
3. Los estilos especificados por el usuario.
Considere las siguientes reglas de estilo que estan en distintas
hojas de estilo:

<h1>Lorem ipsum</h1>
Estilos del navegador:

h1 { margin-block-start: 0.83em; }
Bootstrap:

h1 { margin-block-start: 20px; }
Hoja de estilos del autor:

h1 { margin-block-start: 2ch; }

@media (max-width: 480px) {

h1 { margin-block-start: 1ch; }
}
Estilo personalizado del usuario:

h1 { margin-block-start: 2rem !important; }

35
 El margen final que tendrá el <h1> es de 2rem esto es porque
el estilo personalizado del usuario es más especifico ya que contiene
la declaración !important y va a anular cualquier otro estilo.

El concepto de origen de estilo entrará en juego cuando

lleguemos a las transiciones y a las animaciones porque introducen
más orígenes en esta lista.

Importancia

No todas las reglas CSS se calculan de la misma manera ni se

les da la misma especificidad.

El orden de importancia, de menor a mayor, es el siguiente:

1. Tipo de regla común, que tiene las propiedades font-size,

background o color.
2. La regla que contiene la propiedad animation.
3. La regla que contiene !important (siguiendo el mismo orden
que el origen de la hoja de estilos).
4. La regla que contiene la propiedad transition.
El tipo de regla que tiene las propiedades de animation y
transition tienen mayor importancia que las reglas comunes.

En el caso de las transiciones, la importancia es mayor que la

regla que tiene la palabra clave !important. Esto se debe a que
cuando una animación o transición se activa, su comportamiento
esperado es cambiar el estado visual.

Reglas de Oro

Hay dos reglas generales para trabajar con la cascada que

pueden ser útiles:

1. No uses IDs en tu selector. Incluso un ID aumenta mucho la

especificidad, esto lo vamos a tratar con más detalle en el
siguiente articulo.
2. Evita el uso de !important. Esto es aún más difícil de anular
que un ID. Es útil saber que es lo que hace !important. Sin
embargo, te recomiendo que no lo utilices.
En los últimos años han surgido una serie de metodologías de
CSS para ayudar a controlar la especificidad del selector, una de las
más populares es la metodología BEM.

📋 Conclusión:

Los navegadores utilizan un algoritmo conocido como Cascada

(la C de CSS) para decidir qué reglas se aplican a cada elemento
cuando encuentran declaraciones conflictivas (es decir, más de una
regla que asigna valores diferentes a la propiedad de un elemento).

36
 La cascada significa que los estilos que vienen después
sobrescriben a los que estaban antes, es común que la especificidad
rompa la cascada.

La cascada puede se usada para resolver conflictos cuando se

aplican varios estilos a un elemento. Este es uno de sus principales
objetivos, la resolución de conflictos.

La cascada, la especificidad y la herencia controlan qué estilo

CSS se aplica a un elemento.

LA HERENCIA EN CSS
Hay una última manera en la que un elemento puede recibir
estilos: la herencia. La cascada se confunde frecuentemente con el
concepto de herencia. Aunque los dos temas están relacionados,
debes entender cada uno por separado.

¿Qué es la herencia?

Vamos a comenzar por una analogía. Muchas veces los niños y

niñas heredan rasgos de sus padres: el color de los ojos, el color del
cabello, la estatura, etc. A veces heredamos rasgos de antepasados
más lejanos, como abuelos o bisabuelos. La metáfora de las
relaciones familiares también forma parte de la estructura del HTML.
Y al igual que las personas, las etiquetas HTML pueden heredar
propiedades CSS de sus antepasados.

Los descendientes (piense en hijos y nietos) heredan

propiedades de los ancestros (piense en padres y abuelos).

La herencia es el proceso por el cual algunas propiedades CSS

aplicadas a una etiqueta se pasan a las etiquetas anidadas, es decir,
los elementos HTML heredan los estilos de sus padres o ancestros.

Si un elemento no tiene un valor en cascada para una

determinada propiedad, puede heredar uno de un elemento
antecesor. Es común aplicar la propiedad font-family al elemento
<body>. Todas las etiquetas descendientes de la etiqueta <body>,
es decir, las que están dentro de la etiqueta <body> heredarán esta
fuente y no es necesario aplicarla explícitamente a cada elemento de
la página.

Cualquier etiqueta dentro de otra etiqueta es descendiente de

esa etiqueta. por ejemplo, una etiqueta <p> dentro de la etiqueta
<body> es descendiente de <body>, mientras que la etiqueta
<body> es un ancestro de la etiqueta <p>.

La herencia también funciona a través de múltiples

generaciones. Si una etiqueta como <em> o <strong> aparece
dentro de una etiqueta <p>, entonces las etiquetas <em> y

37
<strong> también
heredan las propiedades de cualquier estilo aplicado a la etiqueta
<body>.

La siguiente imagen muestra cómo la herencia fluye hacia abajo

en el árbol del DOM. Las propiedades heredadas se transfieren por el
árbol DOM desde los nodos padres a sus descendientes.

Como puedes notar en la estructura del árbol cada elemento

solo tiene un padre directo.

Propiedades heredadas y propiedades no heredadas

Hay algunas propiedades en CSS que se heredan y otras que

no. Esta diferencia crea dos tipos de grupos de propiedades CSS:

1. Propiedades heredadas (Inherited properties)

2. Propiedades no heredadas (Non-inherited properties)
Para saber cuales son las propiedades heredadas y no
heredadas puede consultar la documentación de la MDN, en cada
propiedad se le proporciona una tabla donde se le explica si es
heredada o no, por ejemplo:

38
Propiedades heredadas

Las propiedades heredadas son las que pertenecen

principalmente al texto:

color, font, font-family, font-size, font-weight, font-

variant, font-style, line-height, letter-spacing, text-align, text-
indent,
text-transform,white-space, y word-spacing.
También se heredan algunas otras, como las propiedades de la
lista:

list-style, list-style-type,list-style-position, y list-style-

image.
Las propiedades del borde de la tabla, border-collapse y border-
spacing, también se heredan. Tenga en cuenta que éstas controlan el
comportamiento de los bordes de las tablas, NO las propiedades para
especificar los bordes de los elementos que no son tablas. No
queremos que un <div> pasara su borde a todos los elementos
descendientes ¿Verdad?.

Propiedades no heredadas

La herencia no siempre se aplica, y eso NO es necesariamente

algo malo. Para algunas propiedades, la herencia tendría un efecto
negativo en la apariencia de una página. Los márgenes, el padding y
los bordes (entre otras propiedades) no son heredados por las
etiquetas y no es deseable que lo hagan. ¿Por que?

Mira el siguiente ejemplo:

<p> Lorem ipsum <em> dolor </em> sit amet. </p>

p{
padding-left: 20px;
border-left: solid red;
}
Observa que la etiqueta <p> tienen un borde a la izquierda. Sin
embargo, la etiqueta <em> dentro de <p> no tienen ningún borde
adicional. Este comportamiento tiene sentido: se vería raro o extraño
si hubiera un borde adicional y 20px de espacio a la izquierda de cada
etiqueta <em> dentro de un párrafo. Por este motivo es que la
propiedad border no se hereda.

¿Por que es importante la herencia?

Aunque esto pueda parecer confuso, la herencia es un gran

ahorro de tiempo. Imagina que no se pasan las propiedades CSS a las
etiquetas anidadas y que tienes un párrafo <p> que contiene otras
etiquetas como una etiqueta <strong>, una etiqueta <em> para
enfatizar el texto y una etiqueta <a> para añadir un enlace.

39
 Si creas un estilo que haga que el texto del párrafo sea blanco y
de 32px, sería raro y extraño que todo el texto dentro de las etiquetas
<em>, <strong> y <a> tuvieran su estilo normal, tal y como se
muestra en la siguiente imagen de muestra:

En ese caso, tendrías que crear otro estilo para dar formato a la
etiqueta <em>, <strong> y <a> para que coincida con la apariencia
de la etiqueta <p>. Qué tedioso. ¡Por eso esta la herencia y por eso
es importante!

La palabra clave inherit

CSS tiene "Global Keywords" o palabras clave por defecto, pero

en este articulo solo hablare de la palabra clave inherit (heredar)
porque tiene relación con la herencia.

La palabra clave inherit hace que el valor de una propiedad en

un elemento sea el mismo que el valor de su elemento padre. En
otras palabras, inherit obliga a que la herencia se produzca incluso en
situaciones en las que normalmente no funcionaría.

El proceso ocurre de la siguiente manera:

1. La palabra clave inherit le dice al navegador que busque el

valor del elemento padre más cercano y que el elemento
actual herede ese valor.

40
 2. Si el padre más cercano también tiene el valor inherit, el
navegador continuará subiendo por el DOM hasta encontrar
algún valor.
3. Si no hay ningún valor, el navegador utilizará su estilo de
agente de usuario, y si no hay ningún estilo de agente de
usuario, utilizará el estilo base inicial o el valor inicial.
Vamos a ver el siguiente ejemplo:

<nav class="toolbar">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</nav>
.toolbar {
background-color: blue;
color: white;
}
El nav tendrá un fondo azul, pero los enlaces tendrán otro estilo
acorde con la configuración de preferencias del navegador.

Puede escribir una regla que establezca explícitamente que los

enlaces sean de color blanco pero puede hacer que las cosas sean un
poco más robustas usando inherit. Sólo tiene que añadir la siguiente
regla a la hoja de estilos:

.toolbar {
background-color: blue;
color: white;
}
.toolbar a{
color: inherit;
}
Esto hará que los enlaces utilicen el valor heredado del color en
lugar de los estilos por defecto del agente de usuario.

Como dije al principio podemos hacer que la herencia se

produzca incluso en situaciones en las que normalmente no
funcionaría, por ejemplo la propiedad padding por defecto, no se
puede heredar pero podemos hacer que si se herede, seguiremos con
el ejemplo anterior:

.toolbar {
padding: 20px;
}
.toolbar a{
padding: inherit;
}

41
 En este ejemplo todos los enlaces heredaran el valor de la
propiedad padding del elemento padre, a pesar de que dicha
propiedad no se herede por defecto.

En muchos casos, no es necesario especificar la herencia, ya

que muchas propiedades se heredan de forma natural. Sin embargo,
heredar puede ser muy útil.

Inspector de los navegadores

Para poder comprobar un problema de css usaremos el

inspector de los navegadores, Chrome y Firefox nos ofrecen muchas
opciones. En este inspector tenemos una ficha de estilos donde
aparecen los estilos y en Chrome nos muestra los estilos por defecto
del navegador, e incluso nos muestra tachado aquellos estilos que por
especificidad, cascada o herencia no se muestran, y es muy útil como
un depurador de nuestro código.

Normalizar la pag web para todos los navegadores o

resetearla

¿Alguna vez de has desarrollado una página web, y ésta se ve

diferente según el navegador que utilices?

Una posible solución es [Link], alternativa a los

conocidos CSS reset.

¿Qué es [Link]?

42
 Normalize es un fichero CSS que apenas ocupa 8 KB, cuyo
principal objetivo es mantener los estilos similares en los
navegadores, ya que cada uno agrega sus propios estilos por defecto,
por ejemplo te suelen agregar distintos paddings, margins, font-
sizes,etc. Con Normalize CSS lo que hacemos es regularizarlos y que
nuestra web se vea igual independientemente del navegador
donde se visualice. Además está preparado para adaptarse
completamente a HTML5.

Se puede descargar de esta dirección y colocarlo siempre antes

de la hoja de estilos que usamos.

[Link]

¿Qué hace?

 Al contrario que algunos CSS reset, preserva los valores por

defecto de los navegadores.
 Corrige errores e inconsistencias de los navegadores.
 Normaliza estilos para una amplia gama de elementos HTML.
 Incluso mejora la usabilidad con mejoras sutiles.
A continuación se muestra un ejemplo de lo que hace normalize
con los “input” de tipo checkbox y radio, en concreto cambia dos
propiedades que causan problemas al utilizar internet explorer, el
padding y box-sizing.

/**
* It's recommended that you don't attempt to style
these elements.
* Firefox's implementation doesn't respect box-sizing,
padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/

input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
¿Cómo usarlo en nuestros proyectos?

Para usarlo en nuestros proyectos es muy sencillo, basta con

seguir los siguientes pasos:

1. Descargar el fichero desde su página oficial y colocarlo en la

carpeta de nuestra web.

43
 Archivo Normalize CSS

2. Al tratarse de una hoja de estilo (.css), debe ser tratado

como tal, y por tanto simplemente hay que referenciarlo en
el <head> del documento html <link rel="stylesheet"
href="[Link]" />. Muy importante colocar la
referencia a este fichero antes que cualquier otro estilo.
3. Listo!, ya tendríamos normalizada nuestra página web, sin
configuraciones ni instalaciones. Ya se debería ver igual en
todos los navegadores.
Como hemos podido comprobar, Normalize es de tamaño
reducido, práctico, y muy útil para todo desarrollador web,
aunque siempre es aconsejable probarlo y ver si encaja con tu
enfoque de desarrollo y preferencias.

¿QUÉ SON LOS PREFIJOS DE NAVEGADORES? (VENDOR

PREFIXES)

¿Qué son?

Los prefijos de navegadores (vendor prefixes) son aquellos

prefijos que se anteponen a algunas propiedades CSS con el fin de

44
que estas sean leídas y aplicadas exclusivamente por un navegador
en concreto y no por los otros.

Estos prefijos suelen aplicarse a propiedades que se encuentran

en fase experimental o que bien no se han estandarizado aún.

Básicamente se trata de filtros que permiten que una

instrucción CSS se aplique específicamente a un navegador o familia
de navegadores pero no a los demás.

Los prefijos más usados son:

 Para Chrome, Safari, Android y iOs: -webkit-

 Para Firefox: -moz-
 Para Opera: –o-
 Para Internet Explorer: -ms-

Ejemplo

.circulo {
-webkit-border-radius: 100% ;
-moz-border-radius: 100%;
border-radius: 100%;
}
El ejemplo anterior quizás no sea válido el día que lean esto ya
que como dije antes, los prefijos se usan normalmente para
propiedades experimentales, en fase de diseño o prueba.

Una vez que una propiedad se encuentra estandarizada, ya no

necesita mas los prefijos para que el navegador la interprete.

En este dirección los pueden poner por ti:

[Link]

¿Conviene usarlos?

Dependerá del caso en cuestión. Muchas veces no nos va a

quedar otra.

Sin embargo, a la hora de usar estas propiedades

experimentales y empezar a aplicar prefijos a lo loco, conviene
plantearse seriamente cuáles serían las ventajas y los inconvenientes
existentes para cada caso particular.

A veces es mejor simplemente ir con los estándares del día y

evitarse complicaciones de compatibilidad mas adelante.

Programa prepos

45
 Hay muchos programas que nos lo permitirán hacer mas
fácilmente, este de prepos es un programa gratuito y que solo nos
dará algún mensaje de publicidad de vez en cuando:

[Link]

Se descarga el archivo se ejecuta para instalarlo y después se

arrastra desde el explorador de Windows donde tenemos el sitio, y a
partir de ahí podremos meter nuevo código en el css y se
transformará en otra hoja de estilos llamada [Link].

INTRODUCCIÓN AL MODELO DE CAJA O BOX MODEL

El nombre 'box-model' (modelo de caja) se llama así porque, en
los navegadores, todo se construye a partir de cajas.

Entonces, lo primero que debemos de entender, es que cada

elemento que definimos en un documento HTML se mostrará en el
navegador como una caja rectangular esta es la forma en que se
representan todos los elementos, no existen elementos triangulares,
redondos, poligonales etc. Todos los elementos en HTML por defecto
son rectangulares ya que internamente el navegador dibuja un
rectángulo.

⚠️ Las únicas excepciones son las listas y las tablas, que

generan más de una caja, y los elementos con display: none o
display: contents, que no crean ninguna caja.

Aunque usted visualice en un sitio web algún elemento

diseñado en CSS que utiliza border-radius para parecer un círculo, ese
elemento seguirá siendo rectangular y esto es porque como he dicho
anteriormente cada elemento del diseño web es una caja, el
navegador renderiza cada elemento de la página web como un
elemento rectangular y con CSS nosotros definimos las propiedades
como el tamaño, el color, los estilos, el margen y mucho más de estos
elementos rectangulares.

Esto puedes comprobarlo con el siguiente ejemplo, con ayuda

de la propiedad outline, podemos ver todos los elementos de la
pagina de inicio de Google de forma rectangular y esto lo puedes
hacer con cualquier otro sitio web.

*{
outline: 1px solid red;
}

46
 El navegador Microsoft Edge tiene una herramienta llamada 3D
view que además de encontrar áreas de anidamiento profundo del
DOM y ayudar a la depuración de z-index también muestra todas las
cajas contenedoras de forma visual en 3D. Es uno de los mejores
ejemplos visuales para poder comprender el box model:

Como ya lo mencione anteriormente cada elemento HTML en

una página web es una caja, pero hay dos tipos básicos de cajas:

 Block boxes.
 Inline boxes.

Estos dos tipos de cajas, existieron desde el principio de la web:

Cajas de bloque (Block boxes)

47
 Las cajas de bloque, por defecto, ocupan todo el espacio a lo
ancho del contenedor. El elemento HTML común para una caja de
bloque es el elemento <div>.

Cajas en línea (Inline boxes)

Las cajas en línea, por defecto, toman el espacio según el

contenido envuelto. El elemento HTML más común para una caja en
línea es el elemento <span>. No funcionarán los width y los height.

El comportamiento de todas las cajas proviene de la propiedad

display de CSS.

Las áreas del modelo de caja

Como ya explique, cada elemento HTML es una caja que tiene 4

lados y se compone de cuatro áreas:

Internos:

 content
 padding
 border

Externos

 margin

Estas áreas se apilan para formar el modelo de caja o box

model. Cada elemento HTML es una caja que podemos controlar en el
espacio exterior con la propiedad margin, después, podemos darle un
borde y con la propiedad padding, también podemos proporcionar los
espacios interiores entre el contenido y el borde dentro de la caja.

Herramienta de Desarrollo (DevTools)

Si vas a inspeccionar cada elemento HTML, En la herramienta

de desarrollador de cada navegador hay una pestaña llamada
"Estilos" y lo que hace es mostrar el modelo de caja.

 El content o contenido es representado por el color azul.

 El padding es representado por el color verde claro.
 El border es representado por un color amarillo.
 El margen es representado por un color naranja.

48
 Si te posicionas en cada elemento HTML de la página web y lo
seleccionas, estos elementos se pintaran de los colores que he
mencionado y esto nos ayuda a detectar cuanto de padding o margin
tiene cada elemento.

Content

El contenido de la caja, donde aparecen texto, imágenes, etc.

El área del content (como su nombre lo dice) contiene el

“contenido” central a mostrar, es decir, un texto, una imagen, un
video, etc. El contenido siempre es lo que queremos mostrarle al
usuario. Esta área en muchas ocasiones tiene un color o imagen de
fondo para hacerla más atractiva.

Como podemos observar en la imagen, el contenido es el área

central de todo el elemento, de tal forma, que el siguiente elemento
que lo rodea es el padding. El tamaño de esta área se puede
modificar con las propiedades height , width , max-height , max-width
, min-height , min-width.

49
 Cuando se establece una anchura o una altura en un elemento,
esto sólo se aplica al área de contenido (content) de la caja, no a la
caja completa. El padding y border se añaden a la anchura y la altura
para obtener el tamaño total de la caja. Y solo se aplicará como
hemos dicho antes a los elementos de bloque no a los de línea.

Margin

Es la separación entre una caja y las cajas adyacentes.

El margen es la última área del Box Model y se puede ver como

una separación invisible o transparente que ayuda a separar un
elemento de otro. Cuando definimos un color o imagen de fondo, este
no se propaga a esta sección.

Los márgenes siempre quedan fuera del modelo de caja, por lo

que pueden utilizarse para crear espacio entre los elementos.

Recuerda que los valores pueden ser positivos o negativos.

margin-top: 10px;
margin-right: 20px;
margin-bottom: 25px;
margin-left: 5px;
/* Los 4 valores son igual a esto: */
margin: 10px 20px 25px 5px;

margin: 10px; /* Aplica a los cuatro lados */

margin: 10px 20px; /* vertical | horizontal */
margin: 10px 20px 30px; /* top | horizontal | bottom */

50
 Cada elemento tiene un margen gracias a las hojas de estilo del
navegador.

Los elementos en línea solo funcionan los márgenes

horizontales y no el top y el bottom.

Hay unos trucos con la propiedad margin si es de bloque la

etiqueta y le hemos dado un ancho pues si no se lo damos ocupará
toda la ventana:

 Margin-right:auto -> pega el elemento a la izquierda.

 Margin-left:auto -> pega el elemento a la derecha.
 Si los dos márgenes anteriores son auto -> centra la etiqueta
de bloque.

Hay un error común en css que es hacer esto:

*{
margin:0px:
padding:0px
}

El problema aquí es que todos los elementos carecerían de

margen y tendría que ir poniéndolos uno a uno, lo cual sería largo.

Otro error sería esta para centrar una caja:

div{
margin:0px auto;
}

Esto cambiaría el margen superior e inferior si lo tenemos, para

que esto no ocurra sería major:

div{
margin-left:auto;
margin-right:auto;
}
Lo que si es muy recommendable es asignar al body un
margin:0px al body pues los navegadores dan un margin de unos
8px, en el body no tiene sentido poner el padding, pues no lo tiene.

Padding

Es el área alrededor del contenido. El padding es transparente.

El padding es una separación o espacio interior que existe entre

el contenido y el borde de la caja, el cual se utiliza para dar una

51
apariencia estética más atractiva y que el contenido no este pegado
al borde.

Cabe mencionar que el padding sigue siendo parte de la caja

visible, por lo que, si tenemos una imagen o color de fondo, este se
extenderá a través del padding. El padding está delimitado por el
borde.

Puedes usar el mismo valor en toda la caja, por ejemplo,

padding: 20px o puedes darle padding sólo a un lado de la caja, por
ejemplo, padding-right: 10px.

Recuerda que los valores pueden ser positivos o negativos.

Además, el shorthand padding permite dar un valor diferente a

cada lado, sin necesidad de escribirlos por separado. Por ejemplo:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 25px;
padding-left: 5px;
/* Los 4 valores son igual a esto con la opcion shorthand:
*/
padding: 10px 20px 25px 5px;

padding: 10px; /* Aplica a los cuatro lados */

padding: 10px 20px; /* vertical | horizontal */
padding: 10px 20px 30px; /* top | horizontal | bottom */
Esto podemos verlo como un reloj. Si usamos un padding a un
texto centrado podría cambiar ese centrado.

Cuando utilizar margin y cuando utilizar padding. Si el objetivo

es separar nuestra caja de los otros elementos se utilizará margin. Si
el objetivo es hacer mas grande la caja y separar del borde el
contenido utilizaremos padding.

Border

El modelo caja ya tiene borde por defecto pero sin medidas por
eso no se dibuja.

El borde es la línea que rodea la caja, es como la frontera que

rodea al elemento, esta se utiliza para darle una apariencia estética a
la caja, pues nos permite dibujar una línea de algún color, la línea
puede tener los siguientes estilos:

52
Las tres propiedades básicas para crear bordes son:

 border-style: sus valores son solid, dashed y dotted.

 border-width: indica al navegador el tamaño del borde,
normalmente, se utiliza el valor en píxeles para esta
propiedad, por ejemplo, border-width: 5px.

53
  border-color: por defecto, el valor utiliza el currentColor del
texto. Sin embargo, preferimos definirlo aunque no sea
necesario. Por ejemplo, border-color: red.

La mayoría de los desarrolladores web no utilizan estas tres

propiedades por separado. En su lugar, existe un shorthand: border.
Con esta propiedad, podemos escribir sólo border: solid 5px red.

También podemos controlar y dar un estilo diferente a cada

parte de los bordes, por ejemplo:

border-width: 5px 10px 15px 20px;

border-style: solid dashed dotted double;
border-color: red green blue brown;

Bordes múltiples (diferentes)

Hasta ahora, sólo hemos utilizado un parámetro en cada

propiedad, lo que significa que se aplica el mismo valor para cada
borde de un elemento (borde superior, borde derecho, borde inferior
y borde izquierdo). Sin embargo, podemos especificar uno, dos, tres o
cuatro parámetros, dependiendo de lo que queramos hacer:

De la misma forma, podemos hacer exactamente lo mismo con

las propiedades border-width (respecto al ancho del borde) y border-
style (respecto al estilo del borde). Teniendo en cuenta esto,
disponemos de mucha flexibilidad a la hora de especificar esquemas
de bordes más complejos:

div {
border-color: red blue green;

54
 border-width: 2px 10px 5px;
border-style: solid dotted solid;
}
En el ejemplo anterior hemos utilizado 3 parámetros,
indicando un elemento con borde superior rojo sólido de 2 píxeles de
grosor, con borde izquierdo y derecho punteado azul de 10 píxeles de
grosor y con un borde inferior verde sólido de 5 píxeles de grosor.

Box-sizing

Existe una propiedad adicional incorporada en CSS3 relacionada

con la estructura y el Modelo de Caja Tradicional. La propiedad box-
sizing nos permite cambiar cómo el espacio total ocupado por un
elemento en pantalla será calculado forzando a los navegadores a
incluir en el ancho original los valores de las propiedades padding y
border.

Como explicamos anteriormente, cada vez que el área total

ocupada por un elemento es calculada, el navegador obtiene el valor
final por medio de la siguiente fórmula: tamaño + márgenes +
márgenes internos + bordes.

Por este motivo, si declaramos la propiedad width igual a 100

pixeles, margin en 20 pixeles, padding en 10 pixeles y border en 1
pixel, el área horizontal total ocupada por el elemento será:
100+40+20+2= 162 pixeles (note que tuvimos que duplicar los
valores de margin, padding y border en la fórmula porque
consideramos que los mismos fueron asignados tanto para el lado
derecho como el izquierdo).

Esto significa que cada vez que declare el ancho de un

elemento con la propiedad width, deberá recordar que el área real
para ubicar el elemento en pantalla será seguramente más grande.

Dependiendo de sus costumbres, a veces podría resultar útil

forzar al navegador a incluir los valores de padding y border en el
tamaño del elemento. En este caso la nueva fórmula sería
simplemente: tamaño + márgenes.

div {
width: 100px;
margin: 20px;
padding: 10px;
border: 1px solid #000000;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

55
 La propiedad box-sizing puede tomar dos valores. Por defecto
es configurada como content-box, lo que significa que los
navegadores agregarán los valores de padding y border al tamaño
especificado por width y height. Usando el valor border-box en su
lugar, este comportamiento es cambiado de modo que padding y
border son incluidos dentro del elemento.

El Listado de arriba muestra la aplicación de esta propiedad en

un elemento <div>. Este es solo un ejemplo y no vamos a usarlo en
nuestra plantilla, pero puede ser útil para algunos diseñadores
dependiendo de qué tan familiarizados se encuentran con los
métodos tradicionales propuestos por versiones previas de CSS.

Es bastante utilizado colocar esta propiedad con el valor border-

box en el selector universal:

*{
Border-sizing:border-box;
}
Border-radius

CSS3 añade interesantes características en materia de bordes,

como la posibilidad de crear bordes con esquinas redondeadas,
característica que en versiones anteriores de CSS era muy
complicado de lograr, necesitando recurrir al apoyo de imágenes
gráficas. Por su parte, en CSS3 es realmente sencillo hacerlo
mediante código.

La idea es especificar un radio para el borde de las esquinas de

la caja. Por defecto, este borde es de tamaño 0, por lo que no hay
borde redondeado. A medida que se aumenta este valor, el borde se
redondea más. Una vez llegado a su máximo, no se apreciará ningún
cambio.

56
La propiedad border-radius

Profundicemos un poco en estos cuatro formatos:

 El primer formato, un único parámetro, aplica ese tamaño

a todas las esquinas del borde.
 El segundo formato, con dos parámetros, aplica el primer
valor, e1, a las esquinas superior-izquierda e inferior-
derecha, y el segundo valor, e2, a las esquinas superior-
derecha e inferior-izquierda.
 En el tercer formato, se aplica el parámetro e1 a la
esquina superior-izquierda, el parámetro e2 a las esquinas
superior-derecha e inferior-izquierda y el parámetro e3 a la
esquina inferior-derecha.

57
  Y por último, en el cuarto formato, se aplica el tamaño de
cada valor a cada esquina por separado, en el sentido de las
agujas del reloj. O lo que es lo mismo, e1 a la esquina
superior-izquierda, e2 a la esquina superior-derecha, e3 a la
esquina inferior-derecha y e4 a la esquina inferior-izquierda.

A modo de ejemplo teórico, pueden ver un ejemplo de la

aplicación de varios formatos:

div {
border-radius: 25px; /* 1 parámetro */
border-radius: 25% 50%; /* 2 parámetros */
border-radius: 50px 25px 10px; /* 3 parámetros */
border-radius: 25px 0 15px 50px; /* 4 parámetros */
}
Esquinas irregulares

Es posible diferenciar el radio horizontal del radio vertical

de una esquina determinada, creando una esquina redondeada
irregular. Para conseguirlo, no hay más que añadir una barra (/) y
repetir nuevamente el número de parámetros escogido. De esta
forma, los parámetros a la izquierda de la barra representan el radio
horizontal, mientras que los que están a la derecha, representan el
radio vertical.

div {
border-radius: 25% / 50%; /* 1 parámetro (x / y) */
border-radius: 5px 50px / 50px 15px;/* 2 parámetros(x /
y) */
border-radius: 50px 25px 10px / 50px 75px 10px;
/* 3 parámetros (x / y) */
border-radius: 5px 50px 5px 50px / 50px 15px 50px
15px;
/* 4 parámetros (x / y) */

}
Esquinas específicas

Estas propiedades son ideales para aplicar junto a la herencia

de CSS y sobreescribir valores específicos.

58
La propiedad overflow

Volvamos a pensar en la situación de la imagen anterior: Damos

un tamaño de ancho y alto a un elemento HTML, pero su contenido de
texto es tan grande que no cabe dentro de ese elemento. ¿Qué
ocurriría? Probablemente lo que vimos en la imagen: el contenido se
desbordaría.

Podemos modificar ese comportamiento con la propiedad de

CSS overflow, o con alguna de sus propiedades específicas overflow-x
o overflow-y:

Dichas propiedades pueden tomar varios valores, donde visible

es el valor que tiene por defecto, que permite que haya
desbordamiento. Otras opciones son las siguientes, donde no se
permite desbordamiento:

CSS3 añade las propiedades overflow-x y overflow-y para cada

eje individual, que antiguamente solo era posible hacerlo con
overflow para ambos ejes. Estas propiedades son útiles cuando no
quieres mostrar alguna barra de desplazamiento, habitualmente, la
barra de desplazamiento horizontal.

Un uso habitual es poner overflow hidden en una capa

contenedora por si una caja interior pone un fondo que lo desborda.

Comprensión del colapso de márgenes

Los elementos son los bloques de construcción de las páginas

web: al crear sitios web, en realidad estás "colocando ladrillos" de
elementos. Cuando se colocan estos elementos, se usa CSS para
ajustar su apariencia y su ubicación.

59
 Para colocar un elemento en una página web correctamente en
relación con otros elementos hacemos uso de cosas como el relleno
(padding) y los márgenes (margin). Estos son:

 Relleno: el espacio entre el borde del elemento y el área de

contenido.
 Margen: los espacios entre el borde exterior de un
elemento y el de sus elementos vecinos.

Así es como se visualiza el relleno y el margen de un elemento

mediante el Inspector web de Google Chrome:

Esto debería ser suficientemente explicativo, pero hay una

situación en la que el margen entre un elemento y el de un elemento
vecino se fusionarán (o colapsarán) en un espacio unificado; de tal
manera que no hay manera de decir realmente de quién es el
espacio:

60
 Esto podría haber ocurrido en tu propio código si has estado
escribiendo HTML y CSS durante un tiempo. ¡Y puede ser una espina
en tu costado si no tienes idea de lo que está sucediendo entre
bastidores!

Para entenderlo correctamente, necesitamos empezar

definiendo qué significa que los márgenes colapsen.

¿Qué es un margen colapsado?

Según W3C:

"En CSS, los márgenes adyacentes de dos o más bloques (que

podrían o no ser hermanos) pueden combinarse para formar un único
margen. Cuando los márgenes se combinan de esta manera decimos
que colapsan, y el margen combinado resultante se denomina
margen colapsado." –

Vamos a explicar cada palabra poco a poco.

Por lo tanto, los "márgenes adyacentes" son márgenes que

están uno al lado del otro, y pueden combinarse para formar un único
margen. Pero, ¿significa esto que todos los márgenes adyacentes
pueden colapsar? ¡La respuesta es no!

En CSS, los márgenes adyacentes son márgenes verticales que

cumplen algunas reglas. ¡Sí, lo leíste correctamente! Esto significa
que los márgenes horizontales (margin-left y margin-right) no se
consideran márgenes adyacentes. Hay además algunas situaciones
en las que los márgenes verticales no se consideran adyacentes.

61
 Comencemos con algunos escenarios donde se dan los
márgenes colapsables.

1. Elemento padre y primer hijo

En el ejemplo de código siguiente:

<div>Fuera del element padre</div>

<div class="parent">
<p class="child">
Un párrafo alojado en un element padre
</p>
</div>

El segundo div es el padre y contiene un elemento secundario

p. Si aplicamos una propiedad de margen superior (margin-top) al
elemento padre y al primer elemento hijo, ambos márgenes se tocan,
y colapsan.

div {
background: #3d8bb1 /* blue */;
}
.parent {
margin-top: 30px;
background: #49b293 /* green */;
height: 150px;
}
.child {
margin-top: 10px;
background: #b03532 /* red */;
}

Deberías esperar que se muestre un margen justo sobre el

elemento p rojo, lo que nos da una porción de verde sobre él.

Sin embargo, el elemento padre y su elemento hijo se alinean

en su borde superior, después se elige el margen con el valor mayor
(30px) para aparecer ambos, y el más pequeño se contrae a 0. Si el
elemento hijo tuviera el valor más grande (digamos, 50px) entonces
ese sería el margen sobre de ellos.

Si lo mides, verás que el espacio entre el borde del elemento

hijo y el div exterior es de 30px.

Se soluciona dando un overflow hidden al primer hijo, o un

pequeño borde superior o un pequeño padding superior.

2. Elemento padre y último hijo

62
 Como puedes imaginar, los márgenes colapsados también
pueden tener lugar entre el margen inferior (margin-bottom) de un
elemento primario y el margen inferior de un elemento hijo.
Supongamos que tenemos el siguiente código HTML:

<div class="parent">
<p class="child">
Aquí hay un párrafo alojado en un element padre
</p>
</div>
<div>Fuera del padre</div>

Y los siguientes estilos:

.parent {
margin-bottom: 30px;
background: #49b293 /* green */;
height: auto;
}
.child {
margin-bottom: 10px;
background: #b03532 /* red */;
height: 100px;
}

Se utilizará el margen inferior (margin-bottom) con el valor más

grande, mientras que el otro colapsará a 0. La diferencia aquí es que
la altura del padre tiene que estar establecida en auto.

3. Elementos adyacentes

Dentro de un elemento padre, los márgenes colapsados se

producirán cuando el primer elemento hijo tenga margin-bottom
aplicado y el siguiente elemento tenga aplicado margin-top:

<div class="parent">
<p class="first-child">
Here is a paragraph housed in the parent element
</p>
<p class="second-child">
This is the second child
</p>
</div>

Si aplicamos margin-top y margin-bottom de la siguiente

manera:

.first-child {

63
 margin-bottom: 30px;
background: #b03532 /* red */;
height: 150px;
}
.second-child {
margin-top: 20px;
background: #da6f2b /* orange */;
height: 100px;
}

Haciendo los mismos cálculos que antes, el espacio entre el

borde de los elementos hijos será de 30px, no de 20px.

Para arreglar esto se suele siempre solo poner el margin-bottom

y así echar hacia abajo a los otros componentes.

3 puntos a recordar sobre los márgenes colapsados

¡Eso nos lleva al final de esta introducción al colapso de

márgenes en CSS! Además de lo que hemos visto anteriormente, hay
algunas cosas importantes que debo reiterar en relación al valor de
un margen colapsado.

1. Elementos de nivel de bloque

Los márgenes colapsados solo son posibles cuando se utilizan

elementos de nivel de bloque.

2. Los márgenes únicamente colapsan verticalmente

Sólo los márgenes adyacentes verticalmente colapsarán, e

incluso entonces no siempre.

3. Relleno, bordes y distancia

Si añadimos relleno, borde o espacio a los elementos de los

ejemplos anteriores, no se aplicará el colapso. En otras palabras, una
forma de deshacerse del comportamiento del colapso de márgenes
consiste en añadir algún tipo de separación (borde, relleno o espacio
libre) entre los márgenes.

Propiedad Display

Probablemente, una de las partes más complejas de CSS sea la

creación de layouts, colocación y distribución de los elementos de
una página. Sin embargo, es una parte fundamental dentro de CSS, y
es necesario entenderla correctamente para que resulte más fácil de
trabajar y crear nuestros diseños.

64
 ¿Qué es inline y block?

Antes de comenzar, debemos saber que cada etiqueta HTML

tiene un «tipo de representación visual» en el navegador, lo que
habitualmente se suele denominar el tipo de caja. Si no sabes nada
sobre esto, te aconsejo echarle un vistazo antes al apartado Modelo
de cajas.

Volviendo al tema, todos los elementos de una página web

deben tener un tipo de representación, que es la forma en la que
se va a comportar. En principio, partimos de dos tipos básicos y
fundamentales llamados inline y block.

Como se menciona en la tabla anterior, por defecto, todos los

elementos <div> se comportan como elementos de bloque (block) y
todos los elementos <span> se comportan como elementos en línea
(inline). Para entender esto facilmente, crea un documento HTML con
3 etiquetas <div> como las siguientes:

<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>

<style>
div {
background: blue;
color: white;
margin: 1px;
}
</style>
Con esto observaremos que en nuestro navegador nos
aparecen 3 cajas azules colocadas en vertical (una debajo de otra)
que cubren todo el ancho disponible de la página. Esto ocurre porque
la etiqueta <div> es un elemento en bloque, o lo que es lo mismo, un
elemento que se apila uno encima de otro y ocupan todo el ancho de
su contenedor padre. Cada etiqueta HTML tiene un tipo de
representación concreta.

El comportamiento de los elementos HTML puede cambiarse

mediante la propiedad CSS display. Por ejemplo, añadir display: inline
en el ejemplo anterior y veremos como pasan a ser 3 cajas azules
colocadas en horizontal (una al lado de la otra), cubriendo sólamente
el ancho del contenido de cada una. Esto ocurre porque los <div>

65
han pasado a comportarse como elementos en línea (el tipo de
representación visual que tienen los <span> por defecto).

Valores de la propiedad

Recordemos que, por defecto, cada elemento HTML tiene un

tipo de representación concreto. Como norma general (con
excepciones) los elementos que se utilizan dentro de un párrafo, son
de tipo inline, mientras que los que se utilizan para agrupar, son de
tipo block. La propiedad display de CSS permite modificar el
comportamiento de un elemento HTML, cambiándolo al que le
indiquemos, como por ejemplo inline o block (u otro de los que
veremos más adelante).

Existe una amplia gama de tipos de representación de

elementos HTML que podemos utilizar mediante la propiedad display.
Veamos cuales son en la siguiente tabla:

66
 Como se puede observar, mediante la propiedad display
podemos establecer diferentes mecanismos de maquetación, desde
los básicos block e inline que hemos mencionado, pero tenemos
muchos más.

La propiedad display: none

Quizás, la forma más habitual de ocultar un elemento es utilizar

el valor none de la propiedad display. Esto hace que el navegador
ignore por completo ese elemento, no mostrándolo visualmente. Sin
embargo, existen algunas otras formas con ciertas diferencias y
matices. Con esta opción el elemento sigue existiendo y por tanto
ralentizará la carga a persar de no verse.

Formas de Ocultar un elemento.

Existen múltiples formas de ocultar elementos del HTML, de

forma que se ocultan visualmente pero el marcado de etiquetas HTML
continua existiendo en la página. Vamos a explicar cada una de ellas:

67
La propiedad visibility

Existe una propiedad CSS llamada visibility que podemos

utilizar con el valor hidden. Realiza una acción similar a display: none
con la ligera diferencia de que no sólo oculta el elemento, sino que
además mantiene el «hueco», el espacio vacío (con el mismo tamaño
que cuando se mostraba).

Dicha propiedad visibility tiene los siguientes valores posibles:

Utilizar visibility: hidden es muy interesante si queremos que un

elemento y su contenido se vuelva invisible, pero siga ocupando su
espacio y así evitar que los elementos adyacentes se desplacen, lo
que suele ser un comportamiento no deseado en muchas ocasiones.

La propiedad opacity

Por otro lado, otra opción interesante y relacionada podría ser la

posibilidad de utilizar la propiedad opacity, especialmente útil si se
utiliza junto a transiciones o animaciones.

La propiedad opacity permite indicar valores numéricos desde 0

a 1, pudiendo indicar decimales. Si lo prefieres, puedes utilizar
valores en porcentaje, de modo que el valor 0.5 es equivalente a usar
50%. Estos valores, al ser cuantificables, el navegador sabe
perfectamente como transicionarlos o animarlos y se pueden hacer
efectos donde elementos aparezcan o se desvanezcan gradualmente.

El valor inline-block

Si utilizamos la propiedad display con el valor inline-block,

conseguiremos un elemento que funcionará como si fuera un
elemento inline, pero haciendo caso a las propiedades width y height,
las cuales se ignoran si estamos utilizando un display:inline.

68
 <div>Elemento 1</div>
<div>Elemento 2</div>
<style>
div {
display: inline-block;
width: 250px;
background: steelblue;
color: white;
}
</style>
Esto nos puede venir muy bien cuando necesitamos una mezcla
de los dos tipos básicos.

Outline

Outline es la línea que rodea a la caja entre el border y el

margin. Se utiliza para dibujar un contorno alrededor de un elemento.
Un contorno es una línea que se dibuja fuera de los bordes de un
elemento. Se puede utilizar con fines decorativos.

La familia de propiedades outline-* nos permiten modificar el

comportamiento del contorno de los elementos: una línea divisoria
que rodea el contenido externo del propio elemento. A diferencia de
los bordes, esta línea divisoria, por defecto no ocupa espacio y no
puede ser redondeada y tampoco puede controlarse de forma
independiente las 4 partes del borde.

La propiedad outline no pertenece al modelo de caja sin

embargo esta propiedad es una decoración gráfica que hace que los
elementos que ganan el foco, que son por lo general los <input>, se
coloreen como con una ligera aura que los rodea.

Es fácil de observar esta línea divisoria en los navegadores,

pulsando TAB y moviéndonos por los diferentes enlaces de la página.
Generalmente, aparece como una línea punteada y es muy similar al
funcionamiento de los bordes.

La propiedad outline-color permite modificar el color de la línea

divisoria, en el caso de que el tamaño outline-width sea mayor que
cero. Además, al igual que con los bordes, también se puede cambiar
el estilo de la línea con outline-style .

69
 En CSS3 también existe la propiedad outline-offset , que nos
permite ampliar el desplazamiento o espacio interior dentro del perfil
del elemento.

Atajo: Contornos

Es posible, al igual que con muchas otras propiedades, resumir

en una sola propiedad para ahorrar espacio. El orden recomendado es
el siguiente:

div {
outline: <color> <style> <width>
}
Nota: En muchas ocasiones, estas propiedades son usadas por
el desarrollador para indicar un outline: 0 y desactivar esta
característica de contorno. Hay que tener mucho cuidado con esto, ya
que este contorno visual es muy importante en el ámbito de la
accesibilidad, y desactivarlo puede ser contraproducente.

Text-align

En el primer caso, se puede establecer los valores left , right ,

center o justify a la propiedad text-align para alinear horizontalmente
el texto a la izquierda, a la derecha, en el centro o justificar el texto,
respectivamente, de la misma forma que lo hacemos en un
procesador de texto.

Todo esto funcionará siempre que no tengamos un ancho

declarado. También como norma se intenta evitar usar la propiedad
justify, al haber espacios entre palabras diferentes según las líneas. Si
el texto se encuentra dentro de caja no podremos centrar la caja, solo
el contenido dentro de ella.

Para centrar un enlace deberá convertirse a elemento de bloque

pues los inline no me permitiría centrarlo.

Si quisiéramos centrar una imagen, aunque pongamos

display:block, no funcionaría porque el contenido es la propia imagen,
para centrarla respecto a la página, deberíamos poner margin left y
right a auto.

Si tenemos la imagen dentro de un contenedor si podremos

aplicar a ese contenedor un tamaño y centrarla con text-align:center,
eso si manteniendo la imagen como inline.

70
Box-shadow

Se denominan sombras sobre cajas a las sombras en CSS que

se pueden crear en una etiqueta o elemento HTML. Para ello, se
utiliza la propiedad box-shadow, que funciona de forma muy similar a
la que vimos en las sombras de texto, sólo que con algunos añadidos
interesantes.

Sombras en elementos

En primer lugar, las sombras box-shadow están desactivadas

sobre cualquier elemento, lo mismo que ocurriría si aplicamos el valor
none a dicha propiedad. Veamos un resumen de valores que
podemos indicar a esta propiedad de sombras:

La palabra clave inset se puede escribir en cualquier otro orden,

pero se suele indicar al final. Veamos cada uno de estos parámetros,
uno por uno, junto a sus peculiaridades.

Desplazamiento de la sombra

Los dos primeros parámetros, y , son los parámetros

obligatorios mínimos para hacer funcionar la propiedad box-shadow,
donde indicamos el desplazamiento que tendrá la sombra en el eje x
(horizontal) y en el eje y (vertical).

Así pues, si queremos desplazar una sombra ligeramente a la

derecha (eje x, primer parámetro) y hacia abajo (eje y, segundo
parámetro), tendríamos que escribir, como mínimo, algo similar a lo
siguiente:

71
 .element {
box-shadow: 5px 5px;
}
En este caso, la sombra se crea de color currentColor
(habitualmente black) y sin difuminar, como veremos en los
siguientes apartados. Ten en cuenta que valores negativos invierten
la dirección de la sombra. Si 5px 5px mueve la sombra 5 píxels a la
derecha y hacia abajo, -5px -5px movería la sombra 5 píxels a la
izquierda, y 5 píxels hacia arriba.

Desenfoque de la sombra

El tercer parámetro de la propiedad box-shadow indica la

cantidad de desenfoque o difuminado que queremos utilizar en
nuestra sombra. Por defecto, tiene un valor de 0, o lo que es lo
mismo, la sombra será igual a la caja original, por lo que será
completamente lisa, sin difuminar. Este valor puede irse ampliando y
de esta forma conseguiremos una sombra más desenfocada:

.element {
box-shadow: 5px 5px 0; /* Sombra sin desenfoque */
box-shadow: 5px 5px 2px; /* Sombra con ligero
desenfoque */
box-shadow: 5px 5px 10px; /* Sombra desenfocada */
box-shadow: 5px 5px 40px; /* Sombra con un desenfoque
casi disipado */

}
Factor de crecimiento

Un cuarto parámetro opcional permite indicar un factor de

crecimiento para la sombra. Este valor no es obligatorio escribirlo, y
muchas veces comprobarás que el cuarto parámetro de la propiedad
box-shadow es el color, es decir, el siguiente apartado, omitiendo
este parámetro. Esto es absolutamente normal, ya que este
parámetro es opcional y se indica sólo cuando es necesario. En caso
contrario, este parámetro valdrá 0 y será omitido.

El parámetro de factor de crecimiento es un parámetro

donde podemos indicar una unidad que hará crecer la sombra en
todos sus lados el tamaño indicado, de forma que crezca un poco más
de lo que ocupa. Algo que puede ser realmente útil, por ejemplo, en
el caso de que el desplazamiento sea 0 (la sombra está justo detrás
del elemento) y queremos que se muestre ligeramente alrededor de
la etiqueta a la que le aplicamos box-shadow. Veamos un ejemplo:

.element {
box-shadow: 0 0 10px 5px;
}

72
 Esto hará que la sombra esté posicionada justo detrás del
elemento, tenga un nivel de desenfoque de 10px y, además, la
hagamos crecer unos 5px por cada lado.

Esto hará que la sombra esté posicionada justo detrás del

elemento, tenga un nivel de desenfoque de 10px y, además, la
hagamos crecer unos 5px por cada lado.

Color de la sombra

Aunque en los ejemplos anteriores lo hemos omitido por el

momento, lo habitual es que las sombras creadas con box-shadow
incluyan siempre cuatro valores: desplazamiento de x,
desplazamiento de y, nivel de desenfoque y color de la sombra.
Luego, el factor de crecimiento y la palabra clave inset que veremos
posteriormente, son opcionales y se usan sólo cuando son necesarias.

.element {
box-shadow: 15px 5px 10px #48529944;
}
Con el parámetro del color podemos cambiar el color de la
sombra a nuestro antojo, no sólo utilizando palabras clave, valores
hexadecimales y/o las funciones rgb() o hsl(), sino utilizando canales
alfa para conseguir cierta transparencia, si así lo deseamos. En el
ejemplo anterior utilizamos el color #485299 con una transparencia
en hexadecimal de 44, teniendo en cuenta que los valores de canal
alfa en hexadecimal van desde 00 (totalmente transparente) hasta ff
(totalmente opaco).

Sombra interior

Nuestras sombras creadas con box-shadow permiten indicar la

palabra clave inset, lo que hará que la sombra en lugar de colocarse
por fuera de nuestro elemento y ser una sombra exterior (por
defecto), pasará a ser una sombra interior y colocarse por dentro
del elemento. Ten en cuenta que en este caso, los desplazamientos
indicados se invierten, de modo que si teníamos una sombra por la
zona inferior-derecha, tendríamos que invertir los valores para que la
sombra interior también esté en la zona inferior-derecha:

.element {
/* Sombra exterior que se desplaza hacia la zona inferior-
derecha */
box-shadow: 10px 10px 5px black;
/* Sombra interior que se desplaza hacia la zona inferior-
derecha */
box-shadow: -10px -10px 5px black inset;

73
 Observa que hemos invertido los valores de los
desplazamientos de y .

Sombras de texto múltiples

Como hemos visto en otros casos como en propiedades como

background-image o text-shadow, la propiedad box-shadow permite
indicar valores múltiples separados por coma, permitiendo en este
caso, crear sombras múltiples e independientes. No hay límite de
sombras que podemos crear,

La sintaxis es muy sencilla y se suele escribir así para hacerlo

más legible:

.element {
box-shadow:
5px 5px 10px black,
10px 10px 10px red,
20px 20px 10px blue,
10px 10px 10px rgb(0,0,0, 0.5) inset;
}
En este caso hemos creado múltiples sombras de diferentes
colores y con diferentes desplazamientos, incluso una de ellas una
sombra interior. Las sombras se crean en el orden en el que las
ponemos y la primera estará encima de las otras y así las demás.

[Link] CSS

Orden de las css

Ordenar las propiedades es importante, no existe ninguna

norma ni especificación sobre como hacerlo, pero la mayoría de
expertos coinciden en los mismos puntos.

1. Propiedades de posicionamiento
2. Propiedades del box model
3. Propiedades de texto
4. Propiedades visuales (colores, bordes, background...)
5. El resto

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

74
adecuadas para la web, ya que no tienen la capacidad de adaptarse a
diferentes resoluciones o pantallas, que es lo que tendemos a hacer
hoy en día.

Existen varias unidades absolutas, como se puede ver en el

siguiente gráfico:

A continuación, podemos ver las diferentes unidades

absolutas que pueden utilizarse en CSS son las siguientes (de mayor
a menor tamaño):

Consejo: El punto (pt) podría ser una medida ideal para

documentos CSS en los que se fija el tamaño de las fuentes en
medios impresos.

La unidad px (píxel)

El uso de la unidad px está muy extendida en el desarrollo y

diseño web, y es prácticamente una de las primeras unidades de CSS
que se recomienda aprender, representa normalmente el 95% de las
medidas absolutas. La razón, es que se trata de una unidad muy
sencilla para el desarrollador: muy fácil de comprender, conocida y
que nos permitirá afianzar conceptos a la vez que profundizamos en
el diseño web.

No obstante, es conveniente saber que no es la única unidad, y

que probablemente más adelante nos interese aprender otras

75
unidades que pueden ser mucho más versátiles y útiles para
situaciones concretas. ¡Empieza por los px pero una vez los domines
no te quedes ahí!

Unidades relativas

Las unidades relativas son un tipo de medida mucho más

potente y habitual en el CSS que creamos generalmente. Al contrario
que las unidades absolutas, las unidades relativas dependen de algún
otro factor (resolución, tamaño de letra, etc...). Tienen una curva de
aprendizaje más compleja, pero son ideales para trabajar en
dispositivos con diferentes tamaños, ya que son muy flexibles y
versátiles.

Las unidades relativas más conocidas son las siguientes:

La unidad em

La unidad em se utiliza para hacer referencia al tamaño actual

de la fuente (letra m) en el contexto en donde nos encontramos. Por
defecto si estamos en el contexto raíz html, es un valor aproximado a
16px (salvo que se modifique por el usuario). De esta forma, podemos
trabajar simplificando las unidades a medidas en base a ese tamaño.

Por ejemplo, imaginemos que el tamaño de la fuente

establecida en el navegador del usuario es exactamente 16px. Una
cantidad 1em equivaldría a 16px, mientras que una cantidad de 2em
sería justo el doble: 32px. Por otro lado, una cantidad de 0.5em sería
justo la mitad: 8px.

76
 Existen ciertas unidades menos utilizadas dentro de las
unidades relativas, como por ejemplo las unidades ex o ch. Mientras
que la unidad em es el tamaño de la fuente (letra m) en el contexto
donde se usa, la unidad ex es la mitad del tamaño de la fuente
establecida por el navegador del usuario, por lo que se cumple que
1ex es igual a 0.5em.

Realmente, la medida ex está basada en la altura de la x

minúscula, que es aproximadamente un poco más de la mitad de la
fuente actual (depende de la tipografía utilizada). La unidad ch por su
parte, equivale al tamaño de ancho del 0 de la fuente actual, aunque
como hemos dicho, en la práctica es un tipo de unidad que no se
suele utilizar frecuentemente.

Si la medida que utilizeis debe crecer en función del texto usar

em.

La unidad rem (root em)

Una unidad muy interesante y práctica para tipografías es la

unidad rem (root em). Esta unidad toma la idea de la unidad em, pero
permitiendo establecer un tamaño base personalizado
(generalmente para el documento en general, utilizando html o la
pseudoclase :root). De esta forma, podemos trabajar con múltiplos
del tamaño base, el tamaño raíz como hemos dicho antes es 16px
que es similar a 12pt:

:root {
font-size: 16px; /* Tamaño base */

77
 }
h1 {
font-size: 2rem; /* El doble del tamaño base: 32px */
}
h2 {
font-size: 1rem; /* El mismo tamaño base: 16px */
}
Como podemos ver, posteriormente podremos ir utilizando la
unidad rem en ciertas partes del documento. Con esto, estamos
indicando el factor de escala (respecto al tamaño base). En el ejemplo
anterior, los elementos <h1> tendrán 32 píxels de tamaño, ya que
hemos establecido 2rem, que significa «el doble que el tamaño
base». Por otro lado, los elementos <h2> tendrían el mismo tamaño:
16 píxels.

Esto nos da una ventaja principal considerable: Si queremos

cambiar el tamaño del texto en general, sólo tenemos que cambiar el
font-size de la pseudoclase :root, puesto que el resto de unidades son
factores de escalado y se modificarán todas en consecuencia al
cambio del :root. Algo, sin duda, muy práctico y fácil de mantener.

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 en este caso particular las unidades
son redundantes y no aportan valor.

Para tamaños de fuentes usad siempre rem porque en esos

casos no tendremos problemas con el contexto donde nos
encontramos, en cambio con em deberemos saber en que contexto
estoy.

Uso de porcentajes

En este articulo voy a explicar sobre los porcentajes, estos son

una unidad muy importante en el responsive web design (RWD) ya
que nos permiten crear layouts fluidos.

Cuando especificamos un porcentaje como valor en un

elemento, este se calcula en base a la medida del elemento padre, y
para que esto funcione, la medida del elemento padre debe estar
especificada.

Por ejemplo, si usas el porcentaje en la propiedad width, este

será un porcentaje basado en el ancho (width ) del elemento padre.

Veamos un ejemplo:

.parent {
width: 500px;
height: 100px;

78
 border: 5px solid rebeccapurple;
}
.px {
width: 100px;
}
.percent {
width: 50%;
}
<div class="box percent">50%</div>
<div class="box px">100%</div><div class="parent">
<div class="box percent">50%</div>
<div class="box px">100%</div>
</div>

Como puedes darte cuenta al primer <div> le asigne un 50% de

ancho. Sin embargo no he especificado un elemento padre que lo
contenga, por lo tanto el <div> se coloca respecto al <body> ya que
es el elemento padre mas cercano. Entonces width:50% equivale a la
mitad del ancho de la ventana. Esto es muy útil ya que hay ocasiones
en los que queremos que los elementos se ajusten al tamaño del
viewport.

Ocurre lo contrario con el elemento <div> que se encuentra

dentro del contenedor, el elemento <div> tiene un valor de 50%, por
lo tanto este <div> se coloca respecto a su contenedor padre.
Entonces width:50% equivale a la mitad del ancho de su contenedor
principal.

Si te fijas el contenedor padre .parent tiene una medida fija de

500px, entonces el 50% de 500px serian 250px que es por obvias
razones la mitad del tamaño del contenedor.

En el ejemplo también coloque dos divs con medidas en pixeles,

el primero esta afuera del contenedor y el segundo adentro y esto lo
hice para que notes la diferencia entre pixeles y porcentajes. La
diferencia es que los pixeles tendrán un ancho fijo que siempre será
el mismo sin importar donde se defina y un porcentaje será en
realidad un porcentaje que se basa en el tamaño de su ancestro.

79
 Hasta aquí todo funciona bien, el problema es cuando empiezas
a asignarles márgenes a los elementos o a los contenedores y en un
momento te explico porque.

width:auto vs. width:100%

Lo primero que tienes que saber es que el ancho (width) inicial

de los elementos HTML de bloque como <div> o <p> es auto
(automático), esto hace que se expandan y ocupen todo el espacio
horizontal disponible de su bloque contenedor.

La palabra clave auto usada en la propiedad width, significa

que el navegador va a calcular automáticamente el ancho de un
elemento en función del espacio que tenga disponible de su bloque
contenedor sin llegar a desbordarse. Te lo explico con el siguiente
ejemplo:

.parent {
width: 700px;
height: 200px;
border: 5px solid rebeccapurple;
}
.child {
width: 100%;
height: 40%;
background-color: skyblue;}

<div class="parent">
<div class="child">100%</div>
</div>
En este ejemplo al elemento hijo .child le asigne un ancho del
100%, que como puedes ver ocupa todo el ancho de su contenedor
padre:

width: 100%
También vamos a asignar al elemento .child un padding y
observa lo que sucede:

.child {
padding: 20px;

80
 }

padding: 20px
Al establecer un padding de 20px sucede que una parte del
elemento .child salga del contenedor padre y como puedes notar, el
elemento .child también creció mas que el contenedor padre. ¿Sabes
porque? Una de las razones es que NO se ha añadido la declaración
box-sizing: border-box.

Voy a añadir la siguiente declaración al código de ejemplo:

*{
box-sizing: border-box;
}
Como puedes notar el elemento hijo adopta todo el ancho del
contenedor padre sin desbordarse o salirse del contenedor.

box-sizing: border-box
Ahora vamos a asignar al elemento .child un margin-left y
observa lo que sucede:

.child {
margin-left: 3rem;
}
Al establecer un margin-left de 3rem el elemento .child se
desplaza lo cual provoca que una parte salga del contenedor padre,
pero tenga en cuenta que el elemento hijo sigue conservando el
100% del contenedor padre:

81
 margin-left: 3rem

Para solucionar este problema, reemplazamos el width:100%

del elemento .child por el valor width:auto y con esto dejamos que el
navegador sea quien calcule el ancho y que el elemento hijo se
extienda en función del espacio que tenga disponible:

.child {
width: auto;
}

width: auto

Un breve resumen para que quede mas claro:

Si usted especifica width:100% el ancho total del elemento será

el 100% del bloque que lo contiene, es decir, el elemento hijo ocupa
todo el ancho del elemento contenedor. Sin embargo la propiedad
width por defecto no tiene en cuenta el margin, padding y border, si
alguna de estas propiedades tiene un valor distinto de cero, el
tamaño final del elemento será superior al de su contenedor y como
resultado el elemento hijo se sale de su contenedor padre.

82
 A menos que añada la declaración básica box-sizing: border-box
en cuyo caso solo afectan los márgenes al elemento hijo, lo cual
genera que este elemento salga del elemento que lo contiene. Si
añadiste un margen al elemento hijo entonces la solución es aplicar
width:auto .

Lo que estoy explicando tiene que ver con el modelo de caja y

el box-sizing dos conceptos básicos, que llegado al tema de
porcentajes, usted ya debería entender.

height:auto vs. height:100%

La MDN define los porcentajes usados en la propiedad height de

la siguiente manera:

La propiedad height establece la altura de los elementos de

bloque.
Si se declara en porcentaje, hace referencia a la altura del elemento
en el que se encuentra (a su padre). Si este elemento contenedor no
tiene establecida una altura de forma explícita (es decir, depende de
la altura del contenido) y si este elemento NO tiene position absolute,
se ignora la altura en porcentaje y se sustituye por el valor auto. Una
altura declarada en porcentaje en el elemento raíz (html) es relativa
al bloque inicial de contención (viewport).

La palabra clave auto usada en la propiedad height, significa

que el navegador va a calcular el alto de un elemento en base al
contenido de dicho elemento.

Cuando tienes un elemento dentro de un contenedor, es decir,

una relacion padre-hijo, este contenedor padre debe tener un alto
(height ) declarado, ya que si la caja contenedora no tiene un alto
definido no se podrá calcular el porcentaje. Te lo explico en el
siguiente ejemplo:

83
 .parent {
width: 500px;
height: 200px;
background-color: rebeccapurple;
}
.child {
width: 50%;
height: 50%;
background-color: skyblue;
}
<div class="parent">
<div class="child"></div>
</div>
Como puedes observar el contenedor padre tiene una altura
definida de 200px

.parent { height: 200px; }

Si eliminas la propiedad height del contenedor padre, ambas

cajas desaparecen y por lo tanto el valor de height es cero. Esto
sucede porque no tiene contenido el elemento. Es decir, si existen
dos cajas, pero ambas están vacías. Entonces vamos a añadir algo de
texto al elemento padre:

.parent {
width: 500px;
background-color: rebeccapurple;
}
<div class="parent">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Similique,iure.
<div class="child"></div>
</div>
Al añadir texto al contenedor principal, ahora la altura por
defecto es auto, height: auto, lo que quiere decir que la altura del
elemento es en base al contenido. Si añades mas texto, la caja
seguirá creciendo. Y esto lejos de ser un problema es algo útil, ya que

84
si colocas una medida fija en la altura independientemente de la
unidad de medida que uses, el texto se desborda o se sale del
contenedor principal.

height: auto

Este es uno de los motivos por los que debes tener cuidado al
usar la propiedad height, en muchas ocasiones es mejor dejar que el
contenido determine el alto del elemento. Si en realidad necesitas
una altura es mejor utilizar min-height o tal vez padding-bottom.

html, body { height: 100% }

Cuando se trata del ancho y el alto de la página ¿Sabes qué

configurar del elemento html? ¿Y del elemento body? o ¿Simplemente
colocas los estilos en ambos elementos y esperas lo mejor?

No es raro ver las propiedades CSS aplicadas tanto al elemento

html como al elemento body de la siguiente manera:

html, body {
height: 100%;
}
Es probable que también hayas aplicado este estilo o uno
similar a ambos elementos sin considerar tal vez lo que estas
haciendo. Te lo explico con este ejemplo:

Primero voy a establecer un color de fondo a ambos elementos

(html, body). No voy a asignar medidas a estos elementos, solo
queremos saber cual es el color que se va a pintar en pantalla.

html {
background-color: rebeccapurple;
}
body {
background-color: skyblue;
}
Como puedes ver el viewport (la ventana grafica) se pinto del
color purpura, que corresponde al elemento html

85
 Si eliminamos la propiedad background-color del html y solo nos
quedamos con el color de fondo del body, ahora el viewport se pinta
del color azul ¿Curioso verdad?

body { background-color: skyblue }

En un giro extraño, el elemento html asume el background-

colordel elemento body . ¿Herencia inversa?

Nos da la impresión de que el body es tan grande como el

viewport, es decir, que ocupa todo el ancho y alto de la pantalla, sin
embargo esto no es así. Cuando verificamos los estilos en las
herramientas del desarrollador, el body tiene una altura de cero, pero
si tiene un ancho que se extiende horizontalmente en toda la pantalla
esto es porque body es un elemento de bloque. Miremos la siguiente
captura de pantalla de la DevTools del navegador:

86
 Como puedes ver el body tiene por defecto un margen de 8px
indicado por la barra en la parte superior, pero la altura tiene valor de
0.

Esto sucede porque la altura del body crece conforme haya

contenido, es decir, inicialmente la altura del body es 0, pero
conforme vas añadiendo elementos como texto, imágenes,
encabezados, etc, la altura del body va a ir aumentando.

Vamos a comprobarlo añadiendo texto, y también voy a

reestablecer los colores de fondo para ambos elementos:

html { background-color: rebeccapurple;}

body { background-color: skyblue; }
<body>
<main>
<h1> Lupita Code </h1>
<p>Lorem...</p>
</main>
</body>

87
 Con esto comprobamos lo que explique anteriormente, la altura
del body crece conforme haya contenido, por lo tanto, la altura es
auto: height: auto Si añades mas elementos, el body seguirá
creciendo pero si no hay contenido o hay etiquetas vacías la altura
del body es cero.

Ahora queremos que el elemento body ocupe todo el ancho y el

alto de la pantalla, entonces vamos a asignar un alto del 100%

body { height: 100%;}

Sin embargo, esto no funciona…

88
 La razón es porque el elemento body también tiene un
elemento padre que es <html> . El <html>pese a no tener declarado
un valor para la propiedad height aparenta ocupar todo el alto de la
ventana del navegador en todo momento, pero solo es eso, “una
apariencia”, ya que su altura no es toda la ventana, la altura por
defecto del <html> es auto lo que significa que su altura crece según
el contenido que haya en body, y en ausencia de contenido y/u otras
propiedades que lo modifiquen es 0 (cero).

Entonces, ¿Por qué el color de fondo purpura del <html> ocupa

toda la ventana?, esta pregunta viene seguida por otra pregunta:

¿Te has preguntado si el elemento <html> tiene un padre?

Según la especificacion el elemento raíz no tiene ningún padre. Sin
embargo si tiene un bloque contenedor.

Al asignar medidas en porcentajes al elemento html, este se

basa en el bloque de contención inicial, es decir el viewport. Como lo
dice expresamente la especificación:

Una altura declarada en porcentaje en el elemento raíz (html)

es relativa al bloque inicial de contención (viewport).

html {
width: 50%;
height: 50%;
border: 5px solid white;
background-color: rebeccapurple;
}
<body>
<p>lorem...</p>
</body>
Como puedes ver el html ocupa el 50% de alto y ancho del
viewport, el texto esta delimitado por el tamaño del html. A pesar de
esto el color de fondo purpura del html sigue ocupando toda la
ventana, cuando debería ocupar solo el 50%. El color de fondo del
html (elemento raíz) es “heredado” por su caja de contención (el
viewport).

89
 Entonces para colocar el body al 100% de alto, hace falta que
su ancestro (<html>) también tenga un alto especificado. Recuerda
que el uso de un porcentaje como tamaño necesita usar como
referencia el elemento padre en el que basar el porcentaje.

Entonces para ambos elementos establecemos una altura del

100%

html,body {
height: 100%;
}
Y ahora el <body> ocupa todo lo alto del viewport

90
 ¿Qué pasaría si en lugar de establecer height: 100% lo
reemplazamos por una altura mínima en ambos elementos?:

html,body {
min-height: 100%;
}
Establecer la altura mínima al 100% en ambos elementos NO
permite que el elemento body llene la pagina como cabria esperar,
pero el elemento html si tiene una altura igual a la parte visible de la
pagina en el navegador, es decir, al viewport.

En el codigo solo establecimos el min-height del elemento

html... NO un valor a la propiedad height. Por lo tanto, el elemento
body no tiene un elemento padre al que hacer referencia cuando
establece la propiedad igual al 100%. Entonces podemos re-definir
esto de la siguiente manera:

html {
height: 100%
}
body {
min-height: 100%;
}
Esto permite al elemento html hacer referencia al viewport y
que tenga un valor de altura igual al 100%. Con el elemento html
recibiendo un valor de altura, el min-height asignado al elemento
body le da una altura inicial que coincide con el elemento html. Esto
también permite que el bodycrezca más alto si el contenido supera el
tamaño de lo visible de la página.

El único inconveniente es que el elemento html no crezca más

allá de la altura de la ventana gráfica visible. Sin embargo, se ha
permitido que el elemento bodysupere el elemento html.

Durante años esta fue la configuración de altura ideal para una

página full responsive, pero ahora hay otra opción mas moderna:

body { min-height: 100vh; }

En esta configuración usamos como unidad vh (viewport
height) para permitir que el body establezca una altura mínima
basada en la altura completa del viewport.

Al igual que lo que pasaba con la propiedad background-color,

si nosotros NO asignamos un valor de altura máxima al elemento
html, asumirá el mismo valor de la altura del elemento body.

Por lo tanto, esta solución evita el desbordamiento del elemento

html presente en la solución anterior y ambos elementos crecen con
su contenido.

91
 En otra extraña serie de eventos, puede que tu página tenga
instantáneamente una barra de scroll horizontal, supongo que te ha
pasado. Este problema surge cuando cualquier elemento, no solo los
elementos html o body- se establecen con 100vw (viewport width).

Las unidades de viewport no tienen en cuenta los 10 píxeles

aproximados que ocupa la barra de scroll vertical. Por lo tanto,
cuando se activa la barra de scroll vertical, también se obtiene una
barra de scroll horizontal.

Si establecemos el ancho al 100% en el elemento body, tendrá

un ancho de página completo. Esto es equivalente a no establecer un
valor de ancho y permitir el valor predeterminado.

Si deseamos utilizar el elemento del body como un contenedor

más pequeño y dejar que el elemento HTML llene la página, podemos
establecer un valor de ancho máximo en el body. Aquí un ejemplo:

html { background-color: #000; }

body {
min-height: 100vh;
max-width: 400px;
background-color: papayawhip;
margin: 0 auto;
}

Porcentajes como valor en la propiedad font-size

No es común establecer porcentajes como tamaño de fuente,

aunque si se puede establecer como base en el html, por ejemplo
html{ font-size: 100% } esto equivale a 16px.

Pero usar porcentajes en el font-size de todos los elementos es

poco frecuente, porque para eso están las unidades de tipografía
como em y rem. Sin embargo no esta de mas explicar como funciona
los porcentajes en la propiedad font-size, aquí un ejemplo:

li {
font-size: 80%;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three
<ul>
<li>Three A</li>
<li>Three B
<ul>
<li>Three B 2</li>

92
 </ul>
</li>
</ul>
</li>
</ul>
Cada elemento <li> tiene un font-size del 80%, por lo tanto, los
elementos de la lista anidada se vuelven progresivamente más
pequeños a medida que heredan su tamaño del elemento padre.

¿Dónde utilizar porcentajes?

Los porcentajes se usan frecuentemente en la propiedad width,

se usa sobre todo para dar tamaño a elementos grandes y distribuir
los elementos en pantalla. También se usan junto a unidades
absolutas como los pixeles.

.container {
width: 90%;
min-width: 300px;
}
Como pudiste notar en los ejemplos las unidades en porcentajes
no siempre funcionan como se espera cuando se configura la altura
en un elemento, asi que es mejor usarlas solo para el ancho. Si te ves
forzado a utilizar la altura en los elementos, te recomiendo que uses
min-height en lugar de height, solo si es necesario, pero es mejor
dejar que el contenido determine la altura de los elementos.

El viewport

En muchos casos puede que oigas hablar del viewport del

navegador. Esa palabra hace referencia a la región visible del
navegador, o sea, la parte de la página que está visualizándose
actualmente en el navegador sin scroll. Los usuarios podemos
redimensionar la ventana del navegador para reducir el tamaño del
viewport y simular que se trata de una pantalla y dispositivo más
pequeño.

La mayoría de los navegadores móviles escalan las páginas

HTML al ancho del viewport para que se pueda ver completa en la
pantalla. Sin embargo, HTML5 nos propone una meta tag para
controlar esta acción. El tag viewport nos permite decir al navegador
que emplee el ancho del dispositivo como ancho de viewport y así
además se puede desactivar la escala inicial por defecto del
navegador. Esta meta tag se debe emplear en las cabeceras html
dentro de la etiqueta <head>.

93
 Si queremos editar ciertos comportamientos del viewport del
navegador, podemos editar el documento HTML para especificar el
siguiente campo meta, antes de la parte del </head>:

<meta name="viewport" content="initial-scale=1, width=device-width">

Con esta etiqueta <meta>, estamos estableciendo unos
parámetros de comportamiento para el viewport del navegador.
Veamos que significan y cuales más existen:

Las propiedades initial-scale , minimum-scale y maximum-scale

permiten valores desde el 0.1 al 10 , aunque ciertos valores se
traducen automáticamente a ciertos números determinados:

 yes = 1
 no = 0.1
 device-width = 10
 device-height = 10
Por otra parte, user-scalable permite definir si es posible que el
usuario pueda «pellizcar» la pantalla para ampliar o reducir el zoom.

Por defecto los navegadores muestran un ancho determinado

de página dependiendo del terminal y el navegador, por ejemplo, en
el caso de iPhone el ancho por defecto es de 980 pixeles. Esto tiene
un inconveniente, porque además de mostrarse la página web
reducida no se aplicarán los mediaqueries definidos. Gracias a esta
etiqueta podemos establecer parámetros como el ancho, el alto o el
zoom de la pantalla.

94
 Estableciendo el viewport

El meta viewport posee una lista de parámetros clave-valor

separadas por comas. Un ejemplo de las distintas propiedades
aplicables son las siguientes:

<meta name="viewport" content="

width = [pixels | device-width ],
height = [pixels | device-height],
initial-scale = float,
minimum-scale = float,
maximum-scale = float,
user-scalable = [yes | no] ">
A continuación se detalla cada una de estas propiedades:

Width

Con la propiedad width podremos indicar el ancho que tomará

la página renderizada en el dispositivo. Esta propiedad nos permite
indicar un valor estático en pixeles para páginas con contenido fijo,
pero para el objetivo de este proyecto podremos indicar el valor
device-width, que representa el ancho real del dispositivo,
adaptándose la web al viewport y así pudiendo llevar a cabo las
media queries.

Height

La propiedad height representa al igual que la propiedad

anterior una medida de la pantalla, en concreto indica el alto, aunque
esta propiedad no posee demasiada utilidad funciona exactamente

95
igual que la propiedad width, poseyendo el parámetro device-height
por el cual se toma el alto de la pantalla del dispositivo.

Initial-Scale

La propiedad initial-scale nos indica el zoom inicial que se está

aplicando a la página. Si has visitado alguna página desde un
dispositivo móvil sin Responsive Web Design podrás ver cómo es
necesario realizar zoom para poder leer el contenido o acercarte a
cierta parte de la web. Gracias a esta propiedad podemos regular la
escala de zoom. Este parámetro nos permite indicar el tanto por
ciento, por lo que si ponemos un valor de 0,9 se podrá ver
inicialmente un zoom del 90% respecto el ancho total.

Maximum/Minimum Scale

Al igual que con la propiedad anterior podríamos indicar el

zoom por defecto inicial, con estas dos propiedades podemos indicar
cuál será la escala máxima y mínima a la hora de establecer zoom.

User-Scalable

Esta propiedad está directamente relacionada con la anterior,

ya que podemos controlar la acción del usuario a la hora de hacer
zoom. Con un valor booleano lograremos indicar si deseamos que el
usuario manipule el zoom para visualizar nuestra web.

Respecto al tema de la etiqueta viewport la comunidad web

considera de malas práctica el empleo de las etiquetas user-scalable
y minium-scale, ya que por ejemplo se considera un gran problema
de accesibilidad a personas con problemas de visión el impedir no
poder moverse en la página con total libertad o limitando el zoom.

Existen unas unidades de "nueva generación" que resultan muy

útiles, porque dependen del viewport (región visible de la página
web en el navegador). Con estas unidades podemos hacer referencia
a un porcentaje concreto del tamaño específico que tengamos en la
ventana del navegador, independientemente de si es redimensionado
o no.

Estas unidades son las siguientes:

96
 La unidad vw (viewport width)

La unidad vw es un tipo de unidad que hace referencia al ancho

del viewport (región visible de la página en el navegador). Por
ejemplo, si definimos 50vw, estamos indicando un 50% del ancho
actual del navegador. Esto nos permite utilizar tamaños que
dependan de las dimensiones de la ventana del navegador.

La unidad vh (viewport height)

Por su parte, la unidad vh hace referencia de la misma forma al

alto del viewport. Por ejemplo, mientras 50vw hace referencia al 50%
del ancho del navegador, si indicamos 50vh estaremos haciendo
referencia a la mitad (50%) del alto del navegador. Si indicaramos
100vw, y hubiera una barra de scroll, se crearía una barra de scroll
horizontal pues sobrepasaría el ancho. En móviles no habrá
problemas al no existir esa barra de scroll.

Las unidades vmin / vmax

Por último, tenemos las unidades vmin y vmax. La unidad vmin

(viewport minimum), simplemente hace referencia al valor más
pequeño (mínimo) entre el tamaño de ancho y el tamaño de alto del
viewport del navegador. Por otro lado, la unidad vmax (viewport
maximum) hace referencia al valor más grande (máximo) entre el
tamaño de ancho y el tamaño de alto del viewport del navegador.

Esto puede ser útil en algunas situaciones donde quieres

flexibilidad con diseños adaptables, y no necesitas estar haciendo
cálculos previos para saber cuál es el más pequeño o más grande
antes de utilizarlos.

12 COLORES
Tengo dos propiedades básicas para dar color:

 Background-color:Pone color al fondo de la etiqueta.

 color:Pone color al texto de la etiqueta

97
 En esta página podemos ver nombres de colores que podremos
usar mas adelante, colores básicos y extendidos:

[Link]
A partir de un color básico o extendido podré llegar al color que
quiero mediante transformación hexagesimal.

También tengo el color transparente que no visualiza ningún

color:

Bacground-color:transparent;

Se suele utilizar el color transparente para hacer triángulos

usando bordes.

currentColor

Veamos un ejemplo de currentColor

1. Definimos el color del elemento en curso.

[Link]{ color: green;}

2. Volvemos a utilizar el mismo color.

[Link] button{
border: 1px solid currentColor;
box-shadow: 0 0 1px solid currentColor;
}
Observación: si no declaramos el color del borde, este tendrá
el color actual . si no encuentra un color anterior que englobe a
nuestro elemento, elegirá el color que tenga por defecto en el
navegador, que suele ser el negro.

Notación Funcional Entera:

Este formato es de la forma:

rgb(RRR, VVV, AAA)

Los valores RRR (cantidad de rojo), VVV (cantidad de verde) y

AAA (cantidad de azul), son valores enteros en el rango 0 - 255.

En el modo RGB tenemos tres canales (Red, Green, Blue) y

tenemos 8 bits de color por canal, (cada bit tiene dos posibles valores
0 ó 1) lo que significa que tenemos 2^8 posibles valores, que van
desde 0 hasta 255.

Esto nos da un total de 255 * 255 * 255 = 16.581.375 colores.

Su sintaxis es rgb(R,G,B)

98
 Si ponemos todos los canales a 0 tendremos un negro puro y si
los ponemos a 255 tendremos un blanco.

Para movermos por la gama de grises debemos poner los 3

canales con el mismo valor, si ponemos los 3 canales a 128
tendremos el gris puro.

El modo RGB nos da la opción de utilizar un cuarto canal que

correspondería al canal alpha, es decir, la transparencia, y su valor va
desde 0 a 1. Tenemos dos sintaxis para utilizar el canal aplha

rgba(R,G,B,A)
rgba(23,200,45,.5)

Una nueva forma de hacer lo mismo es

rgb(R G B / A)
rgba(23 200 45 /0 .5)

Hexadecimal

La notación hexadecimal es la más común en desarrollo web, se

basa en los mismos principios que el RGB pero escrito en notación
hexadecimal.

El sistema hexadecimal es un sistema basado en 16 valores del

0 al [Link] los dígitos del 0 al 9 y las letras de la A a la F

En este tipo de notacíon también necesitamos 256 valores.

Se compone de 16 caracteres en parejas ya que 16*16 = 256

0123456789ABCDEF
0123456789ABCDEF

Para indicar que vamos a usar notación hexadecimal debemos

usar el símbolo de hash/almohadilla # y a continuación usaremos
esta notación por parejas.

#RRGGBB

Cuando una pareja usa el mismo valor se puede omitir el

segundo valor, siempre que se haga en las 3 parejas.

rgb(255,255,255) -> #FFFFFF -> #FFF

99
 rgb(0,0,0) -> #000000 -> #000

Se puede utilizar dos números mas para la transparencia al final:

#ff000080 /*Con esto coloco un rojo con 50% de transparencia pues

80 es la mitad de ff*/

Se podría usar algo parecido a lo anterior con cuatro números:

#f008 /*Que sería #ff0088*/

También hay otra forma a partir de CSS3 de definir un color,

llamado HSL o HSLA. Estas siglas provienen del inglés Hue,
Saturation, Ligthness o lo que es lo mismo tono saturación y brillo al
que se le puede añadir la transparencia:

La sintaxis sería la siguiente:

hsl(tono, saturación, brillo);

background-color:hsl(360,100%,20%)

100
 Nótese que el valor tono puede tomar valores del 0 al 360
donde:

 0, sería el rojo
 60, amarillo
 120, sería el verde.
 180 cyan
 240 sería el azul.
 300 magenta
 360 sería el rojo.

El segundo valor es la saturación o intensidad del color.

 0% -> gris
 100% -> color puro

El tercer valor es la luminosidad del color

 0% -> negro, nada de luz

 100% -> blanco, luz máxima

101
 Nota: Es importante que aunque el valor de saturación o
luminancia sea 0 hay que poner 0% si no, no funcionará

El modo HSL también admite transparencia y su sintaxis es la

misma que la del modo RGB. Tenemos dos sintaxis disponible.

hsla(h,s,l,a)

hsl(h s l / a)

En ambos casos el valor alpha va de 0 a 1

Además, como en el caso del modelo RGB, al HSL se le puede

añadir un canal Alpha para definir la transparencia del color. El
resultado en código sería el siguiente, dando resultados análogos a
RGBA.

hsla(300,130%,65%,10%);

Unas páginas web que nos ayudan a elegir colores son:

 [Link]: Es una página donde nos informan de los

colores que usan páginas web oficiales famosas por si
queremos usar los mismos tonos.
 [Link]: Es una página donde puede elegir
un color y me pone otros colores que encajan bien con el.
 [Link] Esta
página de adobe es similar a la anterior pero mas
completa.

13 TIPOGRAFÍAS DE FUENTES

La tipografía es la ciencia que estudia el diseño y uso de los

tipos de letra. Las fuentes son tipos específicos de letra

Los glifos son cada uno de los dibujos que representan cada
símbolo de la fuente, incluidos los espacios.

Los estilos de fuente son las modificaciones que se hacen a las

fuentes, como el grosor o la inclinación.

Familia tipográfica, son las diferentes fuentes que pertenecen

a una misma fuente base.

Cuando usamos una propiedad text-* estamos afectando a un

bloque completo

102
 Cuando utilizamos una propiedad font-* afectamos a la fuente
del texto.

Fuentes predeterminadas, son las fuentes que se consideran

seguras ya que son genéricas y no establecen una familia tipográfica,
si no un estilo de fuente.

 serif: Fuentes que tienen serifas (adornos en los

caracteres)
 sans-serif: Fuentes sin serifas, es la mas utilizada y es la
mas fácil de leer
 monospace: Fuentes que tienen el mismo espaciado
entre todos sus caracteres. Usada en códigos de
programas
 cursive: Fuentes que pretenden emular escritura a mano,
con ligaduras y trazos fluidos
 fantasy: Fuentes que suelen ser decorativas, no se
suelen utilizar en páginas web.

Nombre del atributo Posibles valores Ejemplos

font-size xx-small | x-small | font-size:12pt;

small | medium | font-size: x-large;
large | x-large | xx –
large Unidades de
CSS

Sirve para indicar el tamaño de las fuentes de manera más rígida y

con mayor exactitud.

font-family serif | sans-serif | font-

cursive | fantasy | family:arial,helvetica;
monospace font-size: fantasy;
Todas las fuentes
habituales

Con este atributo indicamos la familia de tipografia del texto.

Los primeros valores son genéricos, es decir, los exploradores las
comprenden y utilizan las fuentes que el usuario tenga en su
sistema.
También se pueden definir con tipografías normales, como ocurría
en html. Si el nombre de una fuente tiene espacios se utilizan
comillas para que se entienda bien.

font-weight normal | bold | bolder font-weight:bold;

| lighter | 100| 200 | font-weight: 200;
300 | 400 | 500 | 600

103
Nombre del atributo Posibles valores Ejemplos

| 700 |800 | 900

Sirve para definir la anchura de los caracteres, o dicho de otra

manera, para poner negrillas con total libertad. Normal y 400 son el
mismo valor, así como bold y 700.

font-style normal | italic | font-style: italic;

oblique font-
style:normal;

Es el estilo de la fuente, que puede ser normal, itálica u oblícua. El

estilo oblique es similar al italic.

font-variant Normal-small-caps Font-variant:small-

caps

Al utilizar el valor small-caps veremos el testo al que se le aplico el

estilo en mayúsculas pero de tamaño similar a las minúsculas.

Fuentes externas

Fuentes desde un servidor remoto, son fuentes que se

encuentran en un servidor y que nosotros descargamos para su uso,
la más famosa es Google Fonts

Siempre que utilicemos fuentes no genéricas, debemos poner

fuentes genéricas de fallback (respaldo)

La web gratuita de fuentes mas famosa es [Link]

Por categorías están ordenadas por:

 serif
 san-serif
 display
 Handwriting
 Moonspace

Por lenguajes podemos elegir el adecuado para las tildes y otros

complementos.

En cuanto a propiedades de la fuente podemos seleccionar:

 Number of styles: El número de estilos de la fuente.

 Thickness: grosor de la fuente.
 Slant: inclinación de la fuente.

104
 Si elegimos una fuente vemos el nombre de la fuente y quien la
ha diseñado, este enlace nos lleva a otras fuentes de esta
diseñador@.

Luego vendría un enlace con el nombre de Download family,

con el que podríamos descargar la familia entera, en la parte de abajo
aparecen los gliphs, son todos los caracteres que contiene esta
familia. Todas las fuentes en Google fonts son gratuitas pero en la
parte inferior de la página nos indica si la licencia tiene algún tipo de
limitación.

Hay también un apartado que pone Popular pairings with

nuestra fuente elegida, aquí nos informa de otras fuentes que
combinan muy bien con la fuente elegida.

Veamos como utilizar nuestra fuente en nuestro sitio web. Si

elegimos un estilo de fuente, en la parte superior nos aparece un
punto amarillo con información de la fuente seleccionada.

Nos aparecerá la opción de link o import, siempre elegiremos

link y copiaremos el código, siempre por encima del enlace de estilos:

<link rel="preconnect" href="[Link]

<link rel="preconnect" href="[Link]

crossorigin>

<link href="[Link]
family=Roboto:wght@400;700&display=swap" rel="stylesheet">

En el css debemos poner lo que nos indica en la ventana css

rules to specify families:

font-family: 'Roboto', sans-serif;

Podemos elegir mas de una fuente, si lo hacemos hay que

intentar que solo haya un link, si hay mas son llamadas que
ralentizarán la página.

<link href="[Link]
family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Google Icons: En la parte superior de la página de Google fonts

hay un enlace a otra página que nos ofrece una gran cantidad de
iconos gratuitos, se puede elegir entre varias formas de esos iconos:

 Outlined.
 Filled.
 Rounded.
 Sharp.

105
  Two tone.

Si elegimos un icono nos ofrece la web en la parte superior

derecha lo siguiente:

 Web: Elegiremos esta opción para la web.

 Android.
 IOS.
 Flutter.

Se puede también elegir, negros o blancos, la densidad del

grosor en píxeles y el tamaño.

Para usar este icono se copia el span que nos nuestra página y
además según el tipo de icono deberíamos colocar un link en el head
de la siguiente forma:

 Para iconos: <link rel=”stylesheet” href=”

[Link]
family=Material+Icons”>.
 Para iconos outlined: <link rel=”
[Link]
family=Material+Icons+Outlined”>.
 Para iconos Two tone: <link rel=”
[Link]
family=Material+Icons+Two+Tone”>.
 Para iconos Rounded: <link rel=”
[Link]
family=Material+Icons+Round”>.
 Para iconos Sharp: <link rel=”
[Link]
family=Material+Icons+Sharp”>.

Si vas a usar una gran cantidad de iconos en tu web

compensa usar la librería remota

Si sólo usarás unos pocos es mejor descargarlos en formato

svg y utilizarlos como imágenes.

El problema de descargar svg es que vendrá en color negro y

un tamaño que no podrán ser cambiados como un carácter, son
imágenes y con la propiedad filter se podría cambiar el color, también
cambiando la propiedad fill del svg.

Formatos para fuentes

 True Type Font (TTF) -> Fue el primer formato estándar.

106
  Open True Type Font (OTF) -> Facilita o implementa la
creación de las curvas.
 Web Open Font Format (WOFF) (WOFF2) -> Es un formato
mucho más ligero y mejora el rendimiento. Funciona a
través de metadatos. WOFF tiene soporte total y WOFF2
no funciona en internet explorer.
 Scalable Vector Graphics (SVG) -> Para efectos y
animaciones sobre el texto, no es recomendable usarlo en
el texto genérico de la web, tiene muchos problemas.
 Embedded Open Type (EOT) -> Primer formato digital
propuesto para sitios WEB y es comprimido. Se quedó
como una propuesta pero no pasó a ser un estándar.

Regla @font-face

Esta es la forma de utilizar fuentes que tenemos

descargadas y que no traemos de un servidor remoto, cuando
usamos google fonts, esto es lo que está pasando por detrás.

@font-face
Obtener un texto con sombra es realmente un muy buen truco
de diseño, imposible de lograr con métodos previos, pero más que
cambiar el texto en sí mismo solo provee un efecto tridimensional.
Una sombra, en este caso, es como pintar un viejo coche, al final será
el mismo coche. En este caso, será el mismo tipo de letra.

El problema con las fuentes o tipos de letra es tan viejo como la

web. Usuarios regulares de la web a menudo tienen un número
limitado de fuentes instaladas en sus ordenadores, usualmente estas
fuentes son diferentes de un usuario a otro, y la mayoría de las veces
muchos usuarios tendrán fuentes que otros no. Por años, los sitios
webs solo pudieron utilizar un limitado grupo de fuentes confiables
(un grupo básico que prácticamente todos los usuarios tienen
instalados) y así presentar la información en pantalla.

La propiedad @font-face permite a los diseñadores proveer un

archivo conteniendo una fuente específica para mostrar sus textos en
la página. Ahora podemos incluir cualquier fuente que necesitemos
con solo proveer el archivo adecuado,

La sintaxis es:

@font-face {

font-family: Nombre de la familia, se lo asignamos

nosotros;

src: aquí pondremos dos tipos de valores.

107
 local() -> pondremos el nombre de la fuente para
buscarla en el ordenador del usuario, de esa forma podremos evitar
descargarla

url() -> Si no encontramos esa fuente procederemos a

descargarla.

Existe otro valor, menos usado que es format

format() -> Este valor lo pasaremos de forma opcional

si queremos ser más específicos con la fuente que vamos a buscar o
descargar, si no lo ponemos cogerá el primer formato soportado, si lo
ponemos sólo usará el que hemos establecido, y si no lo encuentra no
hará nada.

Podemos añadirle más valores como font-style, font-

weight y font-display(experimental), pero esos son opcionales.

veamos un ejemplo, antes deberemos descargar una fuente en

este caso la hemos llamado [Link] y está en la raíz del sitio, podemos
descargar fuentes desde dafont, o [Link]:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Nuevos Estilos CSS3</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header id="principal">
<span id="titulo">Estilos CSS Web 2.0</span>
</header>
</body>
</html>

@font-face {
font-family: 'MiNuevaFuente';
src: url('[Link]');
}
body {
text-align: center;
} #principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;

108
 border: 1px solid #999999;
background: #DDDDDD;
} #titulo {
font: bold 36px MiNuevaFuente, verdana, sans-serif;
text-shadow: rgb(0,0,150) 3px 3px 5px;
}
Se puede colocar primero la opción local, para que si encuentra
la fuente en el sistema operativo del usuario la utilice.
src: local(‘font’), url('[Link]');

IMPORTANTE: El archivo conteniendo la fuente debe

encontrarse en el mismo dominio que la página web (o en el mismo
ordenador, en este caso). Esta es una restricción de algunos
navegadores como Firefox, por ejemplo. Es recomendable colocarl la
propiedad Font-face al comienzo del archivo de estilos css.

La propiedad @font-face necesita al menos dos estilos para

declarar la fuente y cargar el archivo. El estilo construido con la
propiedad font-family especifica el nombre que queremos otorgar a
esta fuente en particular, y la propiedad src indica la URL del archivo
con el código correspondiente a esa fuente. En el Listado de la nueva
fuente, el nombre MiNuevaFuente fue asignado a nuestro nuevo tipo
de letra y el archivo [Link] fue indicado como el archivo
correspondiente a esta fuente.

Una vez que la fuente es cargada, podemos comenzar a usarla

en cualquier elemento del documento simplemente escribiendo su
nombre (MiNuevaFuente). En el estilo font en la regla del Listado de la
nueva fuente, especificamos que el título será mostrado con la nueva
fuente o las alternativas verdana y sans-serif en caso de que la fuente
incorporada no sea cargada apropiadamente.

Hay páginas para convertir entre formatos de fuente, uno de

ellos es [Link]

También hay una extensión de Chrome llamada whatfont que

nos permitirá saber las fuentes que se usan en una página web.

Transformaciones de texto

Text-transform: Esta propiedad nos permite hacer

transformaciones ESTÉTICAS en nuestro texto.

Admite los valores:

 none: No se aplicará ninguna transformación.

 uppercase: El texto se pondrá en mayúsculas
 lowercase: El texto se pondrá en minúsculas

109
  capitalize: Transforma la primera letra de cada palabra en
mayúscula.

Adornos en el texto

Text-decoration: Esta propiedad nos permite controlar la

línea que podemos poner en los textos.

Admite los valores:

 none: Elimina cualquier línea.

 underline: Coloca una linea bajo el texto.
 overline: Coloca una linea sobre el texto.
 line-through: Coloca una linea tachando el texto.

Text-shadow: Para crear sombras para figuras irregulares

como textos, existe una propiedad especial llamada text-shadow.
Funciona exáctamente igual que box-shadow, con la única diferencia
de que no admite el valor inset ni la expansión de la sombra.

Los valores son:

 offsetX: desplazamiento horizontal.

 offsetY: desplazamiento vertical
 blur: desenfoque.
 color: color, por defecto coge el del texto.

body {
text-align: center;
}
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: rgb(150,150,150) 5px 5px 10px;
-webkit-box-shadow: rgb(150,150,150) 5px 5px 10px;
box-shadow: rgb(150,150,150) 5px 5px 10px;
}
#titulo {
font: bold 36px verdana, sans-serif;
text-shadow: rgb(0,0,150) 3px 3px 5px;
}

110
 Los valores para text-shadow son similares a los usados para
box-shadow. Podemos declarar el color de la sombra, la distancia
horizontal y vertical de la sombra con respecto al objeto y el radio de
difuminación.

En el Listado de esta página una sombra azul fue aplicada al

título de nuestra plantilla con una distancia de 3 pixeles y un radio de
difuminación de 5.

Espaciado en fuentes y textos

letter-spacing: Establece la separación entre caracteres, se

puede establecer en cualquier medida válida para CSS

word-spacing: Establece la separación entre palabras,

se puede establecer en cualquier medida válida para CSS

line-height: Establece el alto de cada línea, se puede dar una

medida concreta o se puede poner un número que se multiplicará por
el font size del texto al que se lo estemos aplicando.

Orientación del texto.

writing-mode: Establece la dirección del texto.

La propiedad CSS del writing-mode establece si las líneas de texto se colocan

horizontal o verticalmente, así como la dirección en la que avanzan los bloques. Cuando
se establece para un documento completo, debe establecerse en el elemento raíz
( elemento html para documentos HTML).

Try it

Esta propiedad especifica la dirección del flujo de bloque , que es la dirección en la que
se apilan los contenedores de nivel de bloque y la dirección en la que el contenido de
nivel de línea fluye dentro de un contenedor de bloque. Por lo tanto, también determina
el orden del contenido a nivel de bloque.

Syntax
/ * Valores de palabras clave * /
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/ * Valores globales * /
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: revert-layer;
writing-mode: unset;

111
La propiedad del writing-mode se especifica como uno de los valores que se enumeran
a continuación. La dirección del flujo en los scripts horizontales también se ve afectada
por la direccionalidad de ese script , ya sea de izquierda a derecha ( ltr , como el inglés
y la mayoría de los otros idiomas) o de derecha a izquierda ( rtl , como hebreo o
árabe).

Values
horizontal-tb

Para los scripts ltr , el contenido fluye horizontalmente de izquierda a derecha.

Para los scripts rtl , el contenido fluye horizontalmente de derecha a izquierda.
La siguiente línea horizontal se coloca debajo de la línea anterior.

vertical-rl

Para los scripts ltr , el contenido fluye verticalmente de arriba hacia abajo, y la
siguiente línea vertical se coloca a la izquierda de la línea anterior. Para los
scripts rtl , el contenido fluye verticalmente de abajo hacia arriba y la siguiente
línea vertical se coloca a la derecha de la línea anterior.

vertical-lr

Para los scripts ltr , el contenido fluye verticalmente de arriba hacia abajo y la
siguiente línea vertical se coloca a la derecha de la línea anterior. Para los scripts
rtl , el contenido fluye verticalmente de abajo hacia arriba y la siguiente línea
vertical se coloca a la izquierda de la línea anterior.

sideways-rl Experimental

Para los scripts ltr , el contenido fluye verticalmente de abajo hacia arriba. Para
los scripts rtl , el contenido fluye verticalmente de arriba hacia abajo. Todos los
glifos, incluso los de escritura vertical, están colocados de lado hacia la derecha.

sideways-lr Experimental

Para los scripts ltr , el contenido fluye verticalmente de arriba hacia abajo. Para
los scripts rtl , el contenido fluye verticalmente de abajo hacia arriba. Todos los
glifos, incluso los de escritura vertical, están colocados de lado hacia la
izquierda.

PÁRRAFOS - TEXT

text-align left | right | center | text-align: center;

justify text-align:
right;

112
Sirve para indicar la alineación del texto. Es interesante destacar
que las hojas de estilo permiten el justificado de texto, aunque
recuerda que no tiene por que funcionar en todos los sistemas.

text-indent Unidades CSS text- text-indent: 2in

indent: 10px;

Un atributo que sirve para hacer sangrado o márgenes en las

páginas. Muy útil y novedosa.

FONDO – BACKGROUND

Sirve para indicar el color de fondo de un elemento de la página

background- El nombre de la background-

image imagen con su image:url(má[Link]) ;
camino relativo background-image:
o absoluto url([Link]
f)

Colocamos con este atributo una imagen de fondo en cualquier

elemento de la página, se puede ver una página

El tamaño del borde del elemento al que lo aplicamos.

background- Fixed | scroll background-

attachment attachment:scroll

background-position background-position: background-position:

X% Y% 0% 0%

113
background-repeat Repeat|repeat-x| background-repeat:
repeat-y|no-repeat no-repeat

Una técnica muy habitual, que se puede realizar utilizando las

hojas de estilo en cascada y no se podía en HTML, es la definición de
estilos en los enlaces, quitandoles el subrayado o hacer enlaces en la
misma página con distintos colores.

Para aplicar estilo a los enlaces debemos definirlos para los

distintos tipos de enlaces que existen (visitados, activos...).
Utilizaremos la siguiente sintaxis, en la declaración de estilos global
de la página (<STYLE>) o del sitio (Definición en un archivo externo):

Enlaces normales

A:link {atributos}

Enlaces visitados

A:visited {atributos}

Enlaces activos (Los enlaces están activos en el presiso

momento en que se pincha sobre ellos)

A:active {atributos}

114
 Enlaces hover (Cuando el ratón está encima de ellos, solo
funciona en iexplorer)

A:hover {atributos}

El atributo para definir enlaces sin subrayado es text-

decoration:none, y para darles color es

color:tu_color.

También podemos definir el estilo de cada enlace en la propia

etiqueta <A>, con el atributo style. De esta manera podemos hacer
que determinados enlaces de la página se vean de manera distinta.

Ejemplo de estilos en enlaces

<html>
<head>
<title>Ejemplos de estilo en enlaces</title>
<style type="text/css">
A:link {text-decoration:none;color:#0000cc;}
A:visited {text-decoration:none;color:#ffcc33;}
A:active {text-decoration:none;color:#ff0000;}
A:hover {text-decoration:underline;color:#999999;font-
weight:bold}
</style>
</head>
<body>
<a href="[Link]
normal</a>
<br>
<br>
<a href="[Link]">Enlace visitado</a>
Pulsar este enlace para verlo activo,
poner el ratón por encima para que cambie.
</body>
</html>

1 Propiedades CSS3

1.1 Las nuevas reglas

La web cambió para siempre cuando unos años atrás nuevas

aplicaciones desarrolladas sobre implementaciones Ajax mejoraron el
diseño y la experiencia de los usuarios. La versión 2.0, asignada a la
web para describir un nuevo nivel de desarrollo, representó un
cambio no solo en la forma en que la información era transmitida sino
también en cómo los sitios web y nuevas aplicaciones eran diseñados
y construidos.

115
 Los códigos implementados en esta nueva generación de sitios
web pronto se volvieron estándar. La innovación se volvió tan
importante para el éxito de cualquier proyecto en Internet que
programadores desarrollaron librerías completas para superar las
limitaciones y satisfacer los nuevos requerimientos de los
diseñadores.

La falta de soporte por parte de los navegadores era evidente,

pero la organización responsable de los estándares web no tomó las
tendencias muy seriamente e intentó seguir su propio camino.
Afortunadamente, algunas mentes brillantes siguieron desarrollando
nuevos estándares en paralelo y pronto HTML5 nació. Luego del
retorno de la calma (y algunos acuerdos de por medio), la integración
entre HTML, CSS y Javascript bajo la tutela de HTML5 fue como el
caballero bravo y victorioso que dirige las tropas hacia el palacio
enemigo.

A pesar de la reciente agitación, esta batalla comenzó mucho

tiempo atrás, con la primera especificación de la tercera versión de
CSS. Cuando finalmente, alrededor del año 2005, esta tecnología fue
oficialmente considerada estándar, CSS estaba listo para proveer las
funciones requeridas por desarrolladores (aquellas que
programadores habían creado desde años atrás usando códigos
Javascript complicados de implementar y no siempre compatibles).

En este capítulo vamos a estudiar las contribuciones hechas por

CSS3 a HTML5 y todas las propiedades que simplifican la vida de
diseñadores y programadores.

CSS3 se vuelve loco

CSS fue siempre sobre estilo, pero ya no más. En un intento por

reducir el uso de código Javascript y para estandarizar funciones
populares, CSS3 no solo cubre diseño y estilos web sino también
forma y movimiento. La especificación de CSS3 es presentada en
módulos que permiten a la tecnología proveer una especificación
estándar por cada aspecto involucrado en la presentación visual del
documento. Desde esquinas redondeadas y sombras hasta
transformaciones y reposicionamiento de los elementos ya
presentados en pantalla, cada posible efecto aplicado previamente
utilizando Javascript fue cubierto.

Este nivel de cambio convierte CSS3 en una tecnología

prácticamente inédita comparada con versiones anteriores.

Cuando la especificación de HTML5 fue escrita considerando

CSS a cargo del diseño, la mitad de la batalla contra el resto de las
especificaciones propuesta había sido ganada.

116
 Plantilla

Las nuevas propiedades CSS3 son extremadamente poderosas

y deben ser estudiadas una por una, pero para facilitar su aprendizaje
vamos a aplicar todas ellas sobre la misma plantilla. Por este motivo
comenzaremos por crear un documento HTML sencillo con algunos
estilos básicos:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Nuevos Estilos CSS3</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header id="principal">
<span id="titulo">Estilos CSS Web 2.0</span>
</header>
</body>
</html>

Nuestro documento solo tiene una sección con un texto breve

en su interior. El elemento <header> usado en la plantilla podría ser
reemplazado por <div>, <nav>, <section> o cualquier otro elemento
estructural de acuerdo a la ubicación en el diseño y a su función.
Luego de aplicar los estilos, la caja generada con el código del
ejemplo del Listado anterior lucirá como una cabecera, por
consiguiente decidimos usar <header> en este caso.

Debido a que el elemento <font> se encuentra en desuso en

HTML5, los elementos usados para mostrar texto son normalmente
<span> para líneas cortas y <p> para párrafos, entre otros. Por esta
razón el texto en nuestra plantilla fue insertado usando etiquetas
<span>.

Hágalo usted mismo: Use el código provisto en el Listado 3-1

como la plantilla para este capítulo. Necesitará además crear un
nuevo archivo CSS llamado [Link] para almacenar los estilos
estudiados de aquí en adelante.

Los siguientes son los estilos básicos requeridos por nuestro

documento HTML:

body {
text-align: center;
}
#principal {

117
 display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
}
#titulo {
font: bold 36px verdana, sans-serif;
}

No hay nada nuevo en las reglas del Listado 3-2, solo los estilos
necesarios para dar forma a la plantilla y crear una caja ancha,
posicionada en el centro de la ventana, con un fondo gris, un borde y
un texto grande en su interior que dice “Estilos CSS Web 2.0”.

Una de las cosas que notará sobre esta caja cuando sea
mostrada en pantalla es que sus esquinas son rectas. Esto no es algo
que nos agrade, ¿verdad? Puede ser un factor psicológico o no, lo
cierto es que a casi nadie en este negocio le agradan las esquinas
rectas. Por lo tanto, lo primero que haremos será cambiar este
aspecto.

Gradiente lineal

Los gradientes son uno de los efectos más atractivos entre

aquellos incorporados en CSS3. Este efecto era prácticamente
imposible de implementar usando técnicas anteriores pero ahora es
realmente fácil de hacer usando CSS. Una propiedad background con
algunos pocos parámetros es suficiente para convertir su documento
en una página web con aspecto profesional:

body {
text-align: center;
}
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

118
 -moz-box-shadow: rgb(150,150,150) 5px 5px 10px;
-webkit-box-shadow: rgb(150,150,150) 5px 5px 10px;
box-shadow: rgb(150,150,150) 5px 5px 10px;
background: -webkit-linear-gradient(top, #FFFFFF, #006699);
background: -moz-linear-gradient(top, #FFFFFF, #006699);
}
#titulo {
font: bold 36px MiNuevaFuente, verdana, sans-serif;
text-shadow: rgb(0,0,150) 3px 3px 5px;
}
@font-face {
font-family: 'MiNuevaFuente';
src: url('[Link]');
}

Los gradientes son configurados como fondos, por lo que

podemos usar las propiedades background o backgroundimage para
declararlos. La sintaxis para los valores declarados en estas
propiedades es linear-gradient(posición inicio, color inicial, color
final). Los atributos de la función linear-gradient() indican el punto de
comienzo y los colores usados para crear el gradiente. El primer valor
puede ser especificado en pixeles, porcentaje o usando las palabras
clave top, bottom, left y right (como hicimos en nuestro ejemplo). El
punto de comienzo puede ser reemplazado por un ángulo para
declarar una dirección específica del gradiente:

background: linear-gradient(30deg, #FFFFFF, #006699);

También podemos declarar los puntos de terminación para cada

color:

background: linear-gradient(top, #FFFFFF 50%, #006699 90%);

Gradiente radial

La sintaxis estándar para los gradientes radiales solo difiere en

unos pocos aspectos con respecto a la anterior. Debemos usar la
función radial-gradient() y un nuevo atributo para la forma:

background: radial-gradient(center, circle, #FFFFFF 0%,

#006699 200%);

La posición de comienzo es el origen y puede ser declarada en

pixeles, porcentaje o una combinación de las palabras clave center,
top, bottom, left y right. Existen dos posibles valores para la forma

119
(circle y ellipse) y la terminación para el color indica el color y la
posición donde las transiciones comienzan.

IMPORTANTE: En este momento el efecto de gradientes ha sido

implementado por los navegadores en diferentes formas. Lo que
hemos aprendido en este capítulo es el estándar propuesto por W3C
(World Wide Web Consortium).

Navegadores como Firefox y Google Chrome ya incorporan una

implementación que trabaja con este estándar, pero Internet Explorer
y otros aún se encuentran ocupados en ello. Como siempre, pruebe
sus códigos en cada navegador disponible en el mercado para
comprobar el estado actual de las diferentes implementaciones.

Transform y transition

Los elementos HTML, cuando son creados, son como bloques

sólidos e inamovibles. Pueden ser movidos usando código Javascript o
aprovechando librerías populares como jQuery ([Link]), por
ejemplo, pero no existía un procedimiento estándar para este
propósito hasta que CSS3 presentó las propiedades transform y
transition.

Ahora ya no tenemos que pensar en cómo hacerlo. En su lugar,

solo tenemos que conocer cómo ajustar unos pocos parámetros y
nuestro sitio web puede ser tan flexible y dinámico como lo
imaginamos.

La propiedad transform puede operar cuatro transformaciones

básicas en un elemento: scale (escalar), rotate (rotar), skew (inclinar)
y translate (trasladar o mover). Veamos cómo funcionan:

Transform: scale

#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-transform: scale(2);
-webkit-transform: scale(2);
}

120
 En el ejemplo de este listado anterior partimos de los estilos
básicos utilizados para la cabecera generada en la plantilla y
aplicamos transformación duplicando la escala del elemento. La
función scale recibe dos parámetros: el valor X para la escala
horizontal y el valor Y para la escala vertical. Si solo un valor es
provisto el mismo valor es aplicado a ambos parámetros.

Números enteros y decimales pueden ser declarados para la

escala. Esta escala es calculada por medio de una matriz.

Los valores entre 0 y 1 reducirán el elemento, un valor de 1

mantendrá las proporciones originales y valores mayores que 1
aumentarán las dimensiones del elemento de manera incremental.

Un efecto atractivo puede ser logrado con esta función

otorgando valores negativos:

#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-transform: scale(1,-1);
-webkit-transform: scale(1,-1);
}

En este listado, dos parámetros han sido declarados para

cambiar la escala de la caja principal. El primer valor, 1, mantiene la
proporción original para la dimensión horizontal de la caja. El segundo
valor también mantiene la proporción original, pero invierte el
elemento verticalmente para producir el efecto espejo.

Existen también otras dos funciones similares a scale pero

restringidas a la dimensión horizontal o vertical: scaleX y scaleY.
Estas funciones, por supuesto, utilizan un solo parámetro.

Transform: rotate

La función rotate rota el elemento en la dirección de las agujas

de un reloj. El valor debe ser especificado en grados usando la unidad
“deg”:

#principal {
display: block;
width: 500px;

121
 margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}

Si un valor negativo es declarado, solo cambiará la dirección en

la cual el elemento es rotado.

Transform: skew

Esta función cambia la simetría del elemento en grados y en

ambas dimensiones.

#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-transform: skew(20deg);
-webkit-transform: skew(20deg);
}

La función skew usa dos parámetros, pero a diferencia de otras

funciones, cada parámetro de esta función solo afecta una dimensión
(los parámetros actúan de forma independiente). En el Listado de
arriba, realizamos una operación transform a la caja de la cabecera
para inclinarla. Solo declaramos el primer parámetro, por lo que solo
la dimensión horizontal de la caja será modificada. Si usáramos los
dos parámetros, podríamos alterar ambas dimensiones del objeto.
Como alternativa podemos utilizar funciones diferentes para cada una
de ellas: skewX y skewY.

Transform: translate

Similar a las viejas propiedades top y left, la función translate

mueve o desplaza el elemento en la pantalla a una nueva posición.

122
 #principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-transform: translate(100px);
-webkit-transform: translate(100px);
}

La función translate considera la pantalla como una grilla de

pixeles, con la posición original del elemento usada como un punto de
referencia. La esquina superior izquierda del elemento es la posición
0,0, por lo que valores negativos moverán al objeto hacia la izquierda
o hacia arriba de la posición original, y valores positivos lo harán
hacia la derecha o hacia abajo.

En el Listado de arriba, movimos la caja de la cabecera hacia la

derecha unos 100 pixeles desde su posición original. Dos valores
pueden ser declarados en esta función si queremos mover el
elemento horizontal y verticalmente, o podemos usar funciones
independientes llamadas translateX y translateY.

Transformando todo al mismo tiempo

A veces podría resultar útil realizar sobre un elemento varias

transformaciones al mismo tiempo. Para obtener una propiedad
transform combinada, solo tenemos que separar cada función a
aplicar con un espacio:

#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-transform: translateY(100px) rotate(45deg) scaleX(0.3);
-webkit-transform: translateY(100px) rotate(45deg) scaleX(0.3);
}

Una de las cosas que debe recordar en este caso es que el

orden es importante. Esto es debido a que algunas funciones mueven

123
el punto original y el centro del objeto, cambiando de este modo los
parámetros que el resto de las funciones utilizarán para operar.

Transformaciones dinámicas

Lo que hemos aprendido hasta el momento en este capítulo

cambiará la forma de la web, pero la mantendrá tan estática como
siempre. Sin embargo, podemos aprovecharnos de la combinación de
transformaciones y pseudo clases para convertir nuestra página en
una aplicación dinámica:

#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
} #principal:hover{
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}

En este listado, la regla original del Listado inicial de plantilla

para la caja de la cabecera fue conservada intacta, pero una nueva
regla fue agregada para aplicar efectos de transformación usando la
vieja pseudo clase :hover. El resultado obtenido es que cada vez que
el puntero del ratón pasa sobre esta caja, la propiedad transform rota
la caja en 5 grados, y cuando el puntero se aleja la caja vuelve a rotar
de regreso a su posición original. Este efecto produce una animación
básica pero útil con nada más que propiedades CSS.

Transiciones

De ahora en más, hermosos efectos usando transformaciones

dinámicas son accesibles y fáciles de implementar. Sin embargo, una
animación real requiere de un proceso de más de dos pasos.

La propiedad transition fue incluida para suavizar los cambios,

creando mágicamente el resto de los pasos que se encuentran
implícitos en el movimiento. Solo agregando esta propiedad forzamos
al navegador a tomar cartas en el asunto, crear para nosotros todos
esos pasos invisibles, y generar una transición suave desde un estado
al otro.

124
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-transition: -moz-transform 1s ease-in-out 0.5s;
-webkit-transition: -webkit-transform 1s ease-in-out 0.5s;
} #principal:hover{
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}

Como puede ver en este Listado, la propiedad transition puede

tomar hasta cuatro parámetros separados por un espacio. El primer
valor es la propiedad que será considerada para hacer la transición
(en nuestro ejemplo elegimos transform). Esto es necesario debido a
que varias propiedades pueden cambiar al mismo tiempo y
probablemente necesitemos crear los pasos del proceso de transición
solo para una de ellas. El segundo parámetro especifica el tiempo que
la transición se tomará para ir de la posición inicial a la final. El tercer
parámetro puede ser cualquiera de las siguientes palabras clave:
ease, linear, ease-in, ease-out o ease-in-out. Estas palabras clave
determinan cómo se realizará el proceso de transición basado en una
curva Bézier. Cada una de ellas representa diferentes tipos de curva
Bézier, y la mejor forma de saber cómo trabajan es viéndolas
funcionar en pantalla. El último parámetro para la propiedad
transition es el retardo. Éste indica cuánto tiempo tardará la
transición en comenzar.

Para producir una transición para todas las propiedades que

están cambiando en un objeto, la palabra clave all debe ser
especificada. También podemos declarar varias propiedades a la vez
listándolas separadas por coma.

IMPORTANTE: En el Listado anterior realizamos una transición

con la propiedad transform. No todas las propiedades CSS son
soportadas por la propiedad transition en este momento y
probablemente la lista cambie con el tiempo.

Deberá probar cada una de ellas por usted mismo o visitar el

sitio web oficial de cada navegador para encontrar más información al
respecto.

125