CSS sirve para dar estilo y diseño a las páginas web — cambiar de tipo de letra, color, tamaño y

espaciado del contenido, mostrar múltiples columnas, añadir animaciones y otras funcionalidades.
Este módulo nos introducirá en el dominio de las reglas básicas de CSS, selectores, propiedades,
reglas de escritura de CSS, aplicación de CSS a HTML, introducción de medidas, color y otras
unidades en CSS, cascadas y herencias; y depuración de CSS.
Cómo funciona CSS
En este módulo comenzaremos con la base teórica, viendo qué es CSS y cómo el navegador transforma HTML en un DOM, y cómo
se aplica el CSS a las partes del DOM, algunos ejemplos muy básicos de sintaxis y el código necesario para incluir nuestro CSS en
nuestra página web.

Sintaxis CSS
A continuación, profundizaremos todavía más en la sintaxis, viendo cómo las propiedades y sus valores forman bloques declarativos, y
cómo los bloques declarativos y los selectores forman reglas CSS completas. Terminaremos señalando otras características de la sintaxis
CSS como los comentarios y los espacios en blanco.

Selectores
Ya han sido mencionados en el anterior artículo, pero ahora los veremos en mucho más detalle, viendo los tipos de selectores
existentes y su funcionamiento.

Unidades y valores CSS

Hay muchos valores de propiedades CSS, valores numéricos, colores o funciones que realizan una acción (como mostrar una imagen
de fondo o rotar un elemento). Algunos dependen de las unidades en que se expresen los valores a representar — como la medida
de una caja: ¿30 pixels, 30 cm. o 30 ems? En esta guía veremos valores usuales como longitud, color y funciones simples, y otros menos
comunes como grados o valores numéricos sin unidades.

Cascada y herencia
CSS dispone de dos sistemas relacionados para resolver situaciones con conflictos entre selectores (distintos selectores seleccionando
los mismos elementos; ¿Cuál será el que se aplique finalmente?) y elementos anidados en otros elementos (¿Qué estilos se heredarán
por los hijos y cuáles no?). Este artículo tratará de exponer ambos sistemas con el suficiente detalle para qué resulte útil sin llegar a ser
pesado.

El modelo de cajas
El modelo de cajas es la base del diseño web — cada elemento se representa como una caja rectangular, con su contenido, padding
(espacio interior), borde y margen construidos uno sobre otro como las capas de una cebolla. El navegador, para interpretar el diseño
de una página, procesa los estilos que se aplicarán a cada caja, el tamaño de las capas de la cebolla y la ubicación de unas cajas con
respecto a otras. Antes de comprender cómo crear diseños CSS, debemos entender el modelo de cajas — que es lo que veremos en
este artículo.
Cómo funciona CSS
¿Qué es CSS?

Como ya hemos mencionado, CSS es un lenguaje que se usa para diseñar la forma de
presentar los documentos a los usuarios — su estilo, diseño, etc.

Un documento suele ser un archivo de texto estructurado usando un Lenguaje de marcado

— HTML es el más común, pero hay otros como SVG o XML.

Presentar un documento a un usuario implica convertirlo en algo que este pueda utilizar.
Navegadores (Browsers), como Firefox, Chrome o Internet Explorer, están diseñados para
presentar documentos de forma visual, por ejemplo, en una pantalla de ordenador, un
proyector o una impresora.
¿Cómo afecta CSS a un HTML?

Los navegadores Web, al aplicar las reglas CSS a un documento, modifican la manera en que
este es presentado. Una regla CSS se compone de:

Un conjunto de propiedades (properties), con valores establecidos para actualizar la

presentación del contenido HTML, por ejemplo quiero que el ancho de un elemento sea el
50% de su elemento padre, y que su fondo sea rojo.

Un selector, que seleccionará los elementos afectados por el nuevo valor de la propiedad.
Por ejemplo, quiero que mi regla CSS afecte a todos los párrafos (p) de mi documento
HTML.

El conjunto de reglas CSS contenidas en el documento de estilos (stylesheet) afectará a la

presentación de la página web. Profundizaremos en la sintaxis CSS en el siguiente artículo del
módulo — Sintaxis CSS.
 Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>

h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}

p {
color: red;
}
¿Cómo funciona CSS en realidad?

Cuando un navegador muestra un documento, debe combinar su contenido con su

información de estilos. Procesa el documento en dos fases:

El navegador convierte HTML y CSS en un DOM (Objeto Documento Modelo). Este DOM
representa el documento en la memoria del ordenador. Combinando el contenido del
documento con su estilo.

El navegador muestra el contenido del DOM.

El DOM (modelo de objeto de documento)

Un DOM tiene una estructura de árbol. Cada elemento, atributo y sección de texto en el
leguaje de marcado se convierte en un nodo DOM node en la estructura del árbol. Los
nodos se definen por su relación con otros nodos DOM. Algunos elementos son padres de
nodos hijos, y los hijos tienen nodos hermanos.

Entender el DOM nos ayudará a la hora de diseñar, depurar y mantener el CSS, ya que
DOM es donde se unen el CSS y el contenido del documento.

<p> P
Let's use: ├─ "Let's use:"
<span>Cascading</ ├─ SPAN
span> | └─ "Cascading"
<span>Style</span> = ├─ SPAN
<span>Sheets</span> | └─ "Style"
</p> └─ SPAN
└─ "Sheets"
Aplicación de CSS al DOM

Imaginemos que hemos añadido algún CSS a nuestro documento para darle estilo. Dado de
nuevo el documento HTML:

<p>
Let's use:
<span>Cascading</span>
<span>Style</span>
<span>Sheets</span>
</p>

Cuando le aplicamos el CSS:

span {
border: 1px solid black;
background-color: lime;
}

El navegador analiza el HTML y crea un DOM a partir de él, luego analiza el CSS. Como la
única regla en el CSS contiene un selector de un span, aplicará esa regla a cada uno de los
tres spans.
Cómo aplicar un CSS a nuestro HTML

Hay tres maneras distintas de aplicar CSS a un documento HTML, unas más prácticas que
otras. Veamos cada una de ellas:

Documento de estilos externo (CSS externo)

Documento de estilos externo (CSS externo)

Ya hemos visto CSS externos en este artículo, pero no con este nombre. Un CSS externo es
cuando el CSS se encuentra en un archivo separado con una extensión .css, y lo
referenciamos desde HTML con un elemento <link>.

Documento HTML Documento CSS

<!DOCTYPE html>
<html>
h1 {
<head>
color: blue;
<meta charset="utf-8">
background-color: yellow;
<title>My CSS experiment</title>
border: 1px solid black;
<link rel="stylesheet" href="style.css">
}
</head>
<body>
p {
<h1>Hello World!</h1>
color: red;
<p>This is my first CSS example</p>
}
</body>
</html>
Documento de estilos interno (CSS interno)

En un CSS interno no tenemos un CSS externo, sino que lo ubicamos dentro de un

elemento <style>, en el apartado HTML head.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}

p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
Estilos en una línea

Los estilos en una línea son declaraciones CSS que afetan solo a un elemento que está
contenido dentro de un atributo style

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
<p style="color:red;">This is my first CSS example</p>
</body>
</html>
Sintaxis CSS
Sintaxis CSS

A continuación, profundizaremos todavía más en la sintaxis, viendo cómo las propiedades y

sus valores forman bloques declarativos, y cómo los bloques declarativos y los selectores
forman reglas CSS completas. Terminaremos señalando otras características de la sintaxis CSS
como los comentarios y los espacios en blanco.
Un poco de vocabulario

En el nivel más básico, CSS se compone de dos bloques:

Propiedades: Son identificadores que indican a las personas qué característica de estilo
(ancho, color de fondo, fuente) queremos cambiar.

Valores: A cada propiedad se le da un valor, que indica cómo queremos cambiar esta
característica (por ejemplo qué fuente, qué ancho o qué color usar)

h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}

p {
color: red;
}

p, li {
text-decoration: underline;
}
Declaraciones CSS

La principal función del lenguaje CSS es asignar valores a las propiedades CSS. El motor CSS
calcula qué declaraciones debe aplicar a cada elemento de una página para mostrarla y darle
estilo de manera adecuada.

Hay más de 300 propiedades diferentes en CSS y casi infinitos valores diferentes.

Hay más de 300 propiedades diferentes en CSS y casi infinitos valores diferentes.
Hacer CSS legible

body {
font: 1em/150% Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0 auto;
max-width: 33em;
}

h1 {
font-size: 1.5em;
}

div p, #id:first-line {
background-color: red;
background-style: none
}

-
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; background-style: none}

div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}
Selectores
Selectores

En CSS, los selectores se usan para elegir los elementos HTML que queremos estilizar de
nuestra web. Disponemos de gran variedad de selectores CSS, que proporcionan mucha
precisión para seleccionar el elemento deseado.
Tipos de selectores

Podemos dividir los selectores en las siguientes categorías:

Selectores simples: Seleccionan los elementos por el nombre del tipo de elemento, class, o su id.

Selectores de atributos: Seleccionan los elementos por los valores de sus atributos.
Pseudo-clases: Seleccionan los elementos por el estado en que se encuentran, cómo haber aparecido al pasar el ratón, o
el tic deshabitado o seleccionado, o por ser el primer hijo de su padre en el árbol DOM.

Pseudo-elementos: Selecciona los elementos por su situación en relación a otro elemento, por ejemplo: la primera
palabra de cada párrafo, o el contenido que se encuentra justo después de un elemento.

Combinaciones: No son en sí mismos selectores, sino formas de combinar dos o más selectores de forma práctica
para una selección especial. Por ejemplo, se pueden seleccionar párrafos que sean descendientes de divs, o párrafos
situados justo después de títulos.

Selectores múltiples: Tampoco son selectores en sí mismos; podemos agrupar múltiples selectores en la misma
regla CSS separados por comas, para aplicarlos a una de las declaraciones o a todos los elementos seleccionados por
estos selectores.
Selectores simples

Son así llamados porque referencian directamente a uno o más elementos de un documento
en función del tipo de elemento(o su class o id).
Selector de elementos (selector de tipos)

Este selector hace referencia directamente a un tipo de elemento HTML. Es la manera más
sencilla para referirse a todos los elementos de un mismo tipo. Veamos el ejemplo:

<p>What color do you like?</p>

<div>I like blue.</div>
<p>I prefer red!</p>

/* Todos los elementos p son rojos */

p {
color: red;
}

/* Todos los elementos div son azules */

div {
color: blue;
}
Selectores de clases

El selector de clase se forma con un punto, '.', seguido de un nombre de clase. Un nombre
de clase puede ser cualquier valor sin espacios usado dentro de un atributo HTML class.
Podemos elegir el nombre que deseemos para la clase. Es conveniente saber que en un
mismo documento varios elementos pueden compartir el mismo valor de clase y que un
elemento puede tener varios nombres de clases separados por un espacio en blanco.

<ul>
<li class="first done">Create an HTML document</li>
<li class="second done">Create a CSS style sheet</li>
<li class="third">Link them all together</li>
</ul>

/* El elemento con la clase "first" está en negrita */

.first {
font-weight: bold;
}

/* Todos los elementos con la clase "done" están tachados */

.done {
text-decoration: line-through;
}
Selectores ID

El selector ID está formado por una almohadilla (#), seguida del nombre ID de determinado
elemento. Cualquier elemento solo puede tener un único nombre ID fijado con el atributo
id. Podemos usar cualquier nombre para el ID. Es la forma más efectiva de selecionar un solo
elemento.

<p id="polite"> — "Good morning."</p>

<p id="rude"> — "Go away!"</p>

#polite {
font-family: cursive;
}

#rude {
font-family: monospace;
text-transform: uppercase;
}
Selector Universal

El selector universal (*) es el comodín. Nos permite seleccionar todos los elementos de una
página, se suele usar en combinación con otros selectores (ver Combinators más adelante).

<div>
<p>I think the containing box just needed
a <strong>border</strong> or <em>something</em>,
but this is getting <strong>out of hand</strong>!</p>
</div>

* {
padding: 5px;
border: 1px solid black;
background: rgba(255,0,0,0.25)
}
Combinaciones

En CSS, podemos combinar varios selectores juntos y con ello seleccionar elementos
contenidos en otros elementos, o elementos adyacentes a otros. Disponemos de cuatro
tipos:

El selector descendiente — (espacio) — permite seleccionar un elemento anidado en alguna parte dentro de
otro elemento (no tiene por qué ser un hijo; puede ser un nieto, por ejemplo)
El selector hijo — > — permite seleccionar un elemento que es hijo directo de otro elemento.
El selector hermano — + — permite seleccionar un elemento que es hermano directo de otro elemento (a la
derecha por ejemplo, en el mismo nivel jerárquico).
El selector hermano en general — ~ — permite seleccionar cualquier elemento hermano de otro (por
ejemplo en el mismo nivel jerárquico, pero no necesariamente adyacente a él).

section p {
color: blue;
}
<section>
<h2>Heading 1</h2>
section > p {
<p>Paragraph 1</p>
background-color: yellow;
<p>Paragraph 2</p>
}
<div>
<h2>Heading 2</h2>
h2 + p {
<p>Paragraph 3</p>
text-transform: uppercase;
<p>Paragraph 4</p>
}
</div>
</section>
h2 ~ p {
border: 1px dashed black;
}
Valores y unidades CSS

Hay muchos valores de propiedades CSS, valores numéricos, colores o funciones que
realizan una acción (como mostrar una imagen de fondo o rotar un elemento). Algunos
dependen de las unidades en que se expresen los valores a representar — como la medida
de una caja: ¿30 pixels, 30 cm. o 30 ems? En esta guía veremos valores usuales como longitud,
color y funciones simples, y otros menos comunes como grados o valores numéricos sin
unidades.
Unidades y valores CSS
Tipos

Valores numéricos: Valores de longitud para expresar el ancho de elementos, de bordes, o tamaño de fuentes;
también enteros sin unidades para expresar anchos de línea o veces que se repite una animación.

Porcentajes: Se usan para expresar tamaño o longitud — relativos por ejemplo al ancho y alto del contenedor previo
o al tamaño de fuente predeterminado.

Colores: Para expresar colores de fondo, de texto, etc.

Coordenadas: Para expresar la posición relativa de un elemento desde, por ejemplo, el margen superior izquierdo de
la pantalla.
Funciones: Para expresar imágenes de fondo o el degradado de la imagen de fondo.
Valores numéricos

Veremos los números utilizados en muchos sitios en unidades CSS. Esta sección trata acerca
de los tipos más utilizados de valores numéricos.

Nos referimos a píxeles (px) como unidades absolutas pues siempre tienen el mismo
tamaño independientemente de cualquier otra medida.

Otras unidades absolutas:

mm, cm, in: Milímetros, centímetros, o pulgadas.
pt, pc: Puntos (1/72 de una pulgada) or picas (12 puntos.)

En algunas ocasiones encontramos en CSS valores sin unidades — no siempre es un error,

de hecho, es algo permitido bajo determinadas circunstancias.
 p {
margin: 5px;
padding: 10px;
border: 2px solid black;
background-color: cyan;
}

<p>This is a paragraph.</p> p:nth-child(1) {

<p>This is a paragraph.</p>
<p>This is a paragraph.</p> - width: 150px;
font-size: 18px;
}

p:nth-child(2) {
width: 250px;
font-size: 24px;
}

p:nth-child(3) {
width: 350px;
font-size: 30px;
}
Porcentajes

También podemos usar valores porcentuales para expresar la mayoría de cosas que
requieran de valores numéricos, lo que nos permite crear, por ejemplo, cajas cuya anchura
siempre cambie según el ancho del contenedor padre.

En contraposición a las cajas cuya anchura este definida por un cierto valor (en px o en
ems), que siempre serán de la misma longitud, incluso aunque cambie el ancho de los
contenedores padres.
<div>Fixed width layout with pixels</div>
<div>Liquid layout with percentages</div>

div {
margin: 10px;
font-size: 200%;
color: white;
height: 150px;
border: 2px solid black;
}

div:nth-child(1) {
background-color: red;
width: 650px;
}

div:nth-child(2) {
background-color: blue;
width: 75%;
}
Colores

Hay varias formas de referenciar colores en CSS, algunas más recientes que otras. Los
mismos valores de color pueden utilizarse en todos los sitios en CSS, si nos referimos a color
de texto, de fondo o cualquier otro.

El sistema de color estándar en los ordenadores actuales es el de 24 bits, que permite

representar unos 16,7 millones de colores diferentes por canal (256 x 256 x 256 =
16.777.216).
<p>This paragraph has a red background</p>

p {
background-color: red;
}
Valores hexadecimales

El siguiente sistema de color universal es el sistema hexadecimal, o códigos hex. Cada valor
hex está compuesto por una almohadilla (#) seguida por seis números hexadecimales, cada
uno de los cuales puede estar comprendido entre el 0 y la f (que representa el 15) —
0123456789abcdef (16 símbolos).

Cada par de valores representa uno de los canales primarios — rojo, verde y azul — y nos
permite referenciar cualquiera de los 256 valores disponibles para cada uno (16 x 16 = 256).
<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>

/* equivalent to the red keyword */

p:nth-child(1) {
background-color: #ff0000;
}

/* equivalent to the blue keyword */

p:nth-child(2) {
background-color: #0000ff;
}

/* has no exact keyword equivalent */

p:nth-child(3) {
background-color: #e0b0ff;
}
RGB

El tercer sistema al que vamos a hacer referencia es RGB. Un valor RGB es una función —
rgb() — a la que pasamos tres parámetros que representas los colores primarios rojo, verde
y azul, parecido al sistema hex. La diferencia radica en que, en lugar de representar cada canal
por un par de números, ahora lo hacemos simplemente por un número decimal entre el 0 y
el 255.
<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>

/* equivalent to the red keyword */

p:nth-child(1) {
background-color: rgb(255,0,0);
}

/* equivalent to the blue keyword */

p:nth-child(2) {
background-color: rgb(0,0,255);
}

/* has no exact keyword equivalent */

p:nth-child(3) {
background-color: rgb(224,176,255);
}
Funciones

En programación, una function es una sección de código reutilizable que puede ser ejecutada
muchas veces para realizar una tarea repetitiva con el mínimo esfuerzo para el desarrollador
y para el ordenador. Las funciones se asocian normalmente con lenguajes como JavaScript,
Python, o C++, pero también existen en CSS, como valores de propiedad.
 background-color: rgba(255,0,0,0.5);
background-color: hsla(240,100%,50%,0.5);

/* calculate the new position of an element after it has been rotated by 45 degress */
transform: rotate(45deg);
/* calculate the new position of an element after it has been moved across 50px and down 60px */
transform: translate(50px, 60px);
/* calculate the computed value of 90% of the current width minus 15px */
width: calc(90%-15px);
/* fetch an image from the network to be used as a background image */
background-image: url('myimage.png');
El modelo de cajas
El modelo de cajas

El modelo de cajas es la base del diseño web — cada elemento se representa como una caja
rectangular, con su contenido, padding (espacio interior), borde y margen construidos uno
sobre otro como las capas de una cebolla. El navegador, para interpretar el diseño de una
página, procesa los estilos que se aplicarán a cada caja, el tamaño de las capas de la cebolla y
la ubicación de unas cajas con respecto a otras. Antes de comprender cómo crear diseños
CSS, debemos entender el modelo de cajas.
Propiedades de las cajas

Cualquier elemento contenido en un documento tiene la estructura de una caja rectangular

dentro del formato del documento, el tamaño y las capas que serán retocadas usando las
propiedades CSS.
Trabajando con cajas
<div id="wrapper">
<header>Header</header>
<main>Main content</main>
<footer>Footer</footer>
</div>

/* General styles */
body {
margin: 0;
}

#wrapper * {
padding: 20px;
font-size: 20px;
border: 20px solid rgba(0,0,0);
}

/* specific boxes */

#wrapper header, #wrapper footer {

background-color: blue;
color: white;
}

#wrapper main {
background-color: yellow;
}

#wrapper header {

#wrapper footer {

}
Cascada y herencia
Cascada y herencia

Podemos encontrar varios selectores de reglas CSS afectando al mismo elemento, en estos
casos, ¿Qué regla será la que finalmente se aplicará al elemento? Esto está regulado por un
mecanismo llamado Cascada; también está relacionado con la Herencia (unos elementos
toman "heredan" valores de las propiedades de sus padres, pero otros no).
La cascada

CSS (Cascading Style Sheets) ya nos indica que cascada es un concepto importante. A su
nivel más básico indica que el orden de las reglas CSS importa, pero es algo más que eso.
Que prevalezcan unos selectores sobre otros en la cascada depende de tres factores (en
orden de importancia — los primeros prevalecen sobre los últimos):

1. Importancia
2. Especificidad
3. Orden del código
Importancia

En CSS, hay un trozo de sintaxis que podemos usar para asegurarnos que una determinada
regla siempre "gane" sobre todas las demás: !important.

<p class="better">This is a paragraph.</p>

<p class="better" id="winning">One selector to rule them all!</p>

#winning {
background-color: red;
border: 1px solid black;
}

.better {
background-color: gray;
border: none !important;
}

p {
background-color: blue;
color: white;
padding: 5px;
}
Veamos qué ha pasado:

Vemos que se han aplicado los valores de color y padding, pero no el de background-color
¿Porqué? En realidad deberían haberse aplicado las tres pues las reglas declaradas más tarde
normalmente prevalecen sobre las anteriores.

Sin embargo, ganan las reglas anteriores, pues los selectores de ID/clase son más específicos
que los selectores de elemento (lo veremos en la siguiente sección).

Ambos elementos pertenecen a la class better, pero el 2do tiene además la id winning. Las
IDs son más específicas que las clases (solo podemos tener un elemento para cada ID en
una página, pero podemos tener varios elementos de la misma clase — los selectores ID son
muy específicos en aquello que seleccionan), el fondo de color rojo y el borde de 1px negro
se deberían aplicar al segundo elemento, y el primer elemento tomará el fondo gris, sin
borde, como indica la clase.

El 2do elemento toma el fondo rojo, pero no el borde. ¿Porqué? La declaración !important
de la segunda regla — declarada después de (border: none) hará que esta declaración
prevalezca sobre el valor del borde de la regla anterior, incluso aunque ID tenga una
especificidad mayor.
Especificidad

La Especificidad es en sí una medida de cómo de específico es un selector — cuantos

elementos puede seleccionar. Como hemos mostrado, los selectores de elementos son poco
específicos. Los selectores de clase son más específicos, por lo que prevalecen sobre los
selectores de elementos. Los selectores ID son todavía más específicos, por lo tanto ganan
frente a los de clase. La única forma de vencer a los selectores ID es usando la declaración !
important.
<div id="outer" class="container">
<div id="inner" class="container">
<ul>
<li class="nav"><a href="#">One</a></li>
<li class="nav"><a href="#">Two</a></li>
</ul>
</div>
</div>
 /* specificity: 0023 */
div li:nth-child(2) a:hover {
/* specificity: 0101 */
border: 10px dashed black;
#outer a {
}
background-color: red;
}
/* specificity: 0033 */
div div .nav:nth-child(2) a:hover {
/* specificity: 0201 */
border: 10px double black;
#outer #inner a {
}
background-color: blue;
}
a {
display: inline-block;
/* specificity: 0104 */
line-height: 40px;
#outer div ul li a {
color: yellow; - font-size: 20px;
text-decoration: none;
}
text-align: center;
width: 200px;
/* specificity: 0113 */
margin-bottom: 10px;
#outer div ul .nav a {
}
color: white;
}
ul {
padding: 0;
/* specificity: 0024 */
}
div div li:nth-child(2) a:hover {
border: 10px solid black;
li {
}
list-style-type: none;
}
¿Qué ha pasado aquí?

Primero, solo nos interesan las primeras siete reglas del ejemplo, y como comprobaremos,
hemos incluido sus valores de especificidad en un comentario antes de cada uno:

Los dos primeros selectores compiten para dar estilo al color de fondo del link — el
segundo gana y hace que el fondo se establezca en color azul porque tiene un selector de ID
más en la cadena: su especificidad es de 201 contra 101.

Los selectores tercero y cuarto compiten para dar estilo al color del texto de los links — el
segundo gana y hace el texto blanco aun teniendo un elemento selector menos, el selector
que falta se ha cambiado por un selector de clase, que vale 10 en lugar de 1. Con todo, gana
la especificidad de 113 frente a 104.

Los selectores del 5–7 compiten para estilizar los marcos de los links cuando pasa el ratón. El
selector 6 pierde contra el 5 con especificidades de 23 contra 24 — tiene un selector de
elementos menos en la cadena. El selector 7 gana al 5 y al 6 — tiene el mismo número de
sub-selectores en la cadena que el 5, pero uno de los elementos se ha cambiado por un
selector de clase. Por lo que la especificidad ganadora es de 33 contra 23 y 24.
Orden del código

Como hemos mencionado, si varios selectores competidores tienen la misma importancia y

especificidad, el tercer factor que interviene para decidir qué regla vence es el orden del
código
p {
color: blue;
}

/* This rule will win over the first one */

p {
color: red;
}

/* This rule will win */

.footnote {
color: blue;
}

p {
color: red;
}
Herencia

La herencia en CSS es la última pieza que necesitamos conocer para tener la información
completa y comprender qué estilo se aplicará a un elemento. La idea es que unos elementos
se heredarán por los elementos hijos, y otros no.

Por ejemplo, tiene sentido que font-family y color sean heredadas, pues nos facilita establecer
un ancho de fuente básico aplicando una familia de fuentes al elemento <html>; después
podemos reemplazar las fuentes de elementos individuales si es necesario. Sería realmente
molesto tener que establecer la fuente base para cada elemento por separado.

Otro ejemplo: tiene sentido que margin, padding, border, y background-image NO se

hereden. Imaginemos el lio de formato/estilo que ocurriría si aplicamos estas propiedades en
un elemento y fuera heredado por todos y cada uno de sus hijos, y después tener que
"desaplicarlas" a todos los elementos también.
Control de la herencia

CSS dispone de tres valores especiales para manejar las herencias:

inherit : Este valor establece el valor de la propiedad de un elemento seleccionado en el

mismo que su elemento padre.

initial : Este valor establece el valor de la propiedad de un elemento seleccionado en el valor

por defecto que establece la hoja de estilos del navegador, si este no existe, la propiedad se
hereda naturalmente, adoptando el valor de inherit.

unset : Este valor reestablece la propiedad a su valor natural, esto es: si la propiedad se
hereda de forma natural entonces actuará como inherit, sino, actuará como initial.
<ul>
<li>Default <a href="#">link</a> color</li>
<li class="inherit">Inherit the <a href="#">link</a> color</li>
<li class="initial">Reset the <a href="#">link</a> color</li>
<li class="unset">Unset the <a href="#">link</a> color</li>
</ul>

-
body {
color: green;
}

.inherit a {
color: inherit;
}

.initial a {
color: initial
}

.unset a {
color: unset;
}
Veamos que ha pasado aquí:

Primero hemos puesto en verde el color de <body>.

Como la propiedad color es heredada naturalmente, todos los elementos hijos de body
tendrán color verde. Cabe señalar que los navegadores establecen por defecto los links en
color azul en vez de permitir heredar naturalmente la propiedad color, entonces el primer
link de la lista será azul.

La segunda regla establece que los links dentro de un elemento con la clase inherit hereden
el color de su padre. En este caso, el link hereda el color de su padre <li>, que por defecto,
hereda su color de su padre <ul>, que por último hereda el color del elemento <body>,
cuyo color se estableció a green en la primera regla.

La tercera regla selecciona cualquier link dentro de un elemento con la clase initial y
establece el color a initial. Normalmente, el valor inicial de los navegadores para el color de
texto es el negro, luego este link será negro.

La última regla selecciona todos los links dentro de los elementos con la clase unset y pone
su valor a unset — no establece valor. Al ser la propiedad color una propiedad heredada
naturalmente actúa como si la clase fuera inherit. En consecuencia, este link se pondrá al
mismo color que body — esto es verde.
JavaScript es un lenguaje de programación que provee de interactividad y efectos especiales a las
páginas web. Cada vez que una página web hace algo más que estar ahí y mostrar información
estática que se pueda ver — mostrando actualizaciones de contenido oportunas , o mapas
interactivos, o gráficos animados 2D/3D, o desplazarse por reproductores de video, etc. —
puedes apostar a que JavaScript probablemente esté involucrado.
Primeros pasos con JavaScript
En nuestro primer módulo de JavaScript, primero contestaremos algunas preguntas fundamentales tales como "¿qué es
JavaScript?,"¿Cómo se ve?", y "¿Qué puede hacer?", antes de continuar con su primera experiencia práctica de escribir
JavaScript. Después de eso, discutimos algunas características clave de JavaScript en detalle, tales como las variables,
cadenas, números y matrices.

Bloques de construcción de JavaScript

En este módulo, continuamos nuestra cobertura de todas las características fundamentales de JavaScript, dirigiendo
nuestra atención a los tipos de bloque de código comúnmente encontrados, como los enunciados condicionales, bucles,
funciones, y eventos. Ya ha visto esto en el curso, pero sólo de pasada — aquí lo discutiremos todo explícitamente.

Lo básico de los objetos JavaScript

En JavaScript, la mayoría de las cosas son objetos, desde las características principales de JavaScript como las cadenas y las
matrices, hasta las APIs del navegador construidas encima de JavaScript. Puede incluso crear sus propios objetos para
encapsular funciones y variables relacionadas en paquetes eficientes. Es importante entender la naturaleza orientada-a-
objetos de JavaScript si quiere ir más lejos con sus conocimientos del lenguaje y escribir código más eficiente, así le
ofrecemos este módulo para ayudarle. Aquí le enseñamos la teoría y la sintaxis de objetos en detalle, vemos cómo crear
tus propios objetos, y explicamos que son los datos JSON y cómo trabajar con ellos.

Client-side web APIs

Cuando escribe JavaScript del lado del cliente para sitios web o aplicaciones, no irá muy lejos antes de que empieze a
usar APIs — interfaces para manipular diferentes aspectos del navegador y del sistema operativo en el sitio donde se
está ejecutando, o incluso datos de otros sitios web o servicios. En este módulo exploraremos qué APIs son, y cómo usar
algunas de las APIs más comunes con las que te encontrarás a menudo en tu trabajo de desarrollo.
Primeros pasos con JavaScript

En nuestro primer módulo de JavaScript, responderemos algunas preguntas fundamentales

como: "¿Qué es JavaScript?", "¿Cómo se ve?" y "¿Qué me permite hacer?", antes de empezar
con tu primera experiencia práctica escribiendo en JavaScript. Luego de eso, comentaremos
algunos bloques de código a detalle, como variables, cadenas, números y arreglos.
¿Qué es JavaScript?
Bienvenido al curso de JavaScript para principiantes de MDN. En este primer artículo vamos a conocer JavaScript desde un nivel muy
general, contestando las preguntas ¿Qué es? y ¿Qué hace?, con el propósito de que te sientas a gusto al usar JavaScript.

Un primer acercamiento a JavaScript

Ahora que ya aprendiste algo teórico sobre JavaScript, y qué te permite hacer vamos a dar un recorrido rápido por sus características
básicas a tráves de un tutorial completamente práctico. Aquí vas a armar paso a paso un juego de "Adivina el número”.

¿Qué salió mal? Troubleshooting JavaScript

Mientras armábas el juego "Adivina el número" del artículo anterior quizá notaste que no funcionaba. No tengas miedo —pusimos
este artículo aquí para salvarte de arrancarte el pelo por problemas así y proporcionarte algunos consejos sobre cómo encontrar y
corregir errores en los programas escritos con JavaScript.

Guardando la información que necesitas— variables

Después de leer los dos artículos anteriores debes contar ahora con una mejor idea de qué es JavaScript y todo lo que puede hacer
por ti, cómo usarlo en conjunto con otras técnologías de la Web y en general cómo lucen sus principales características. En este
artículo vamos a ir a lo más básico, al ver cómo trabajar con la pieza de código más elemental de JavaScript: las variables.

Matemáticas básicas en JavaScript — números y operadores

Llegamos al momento de hablar sobre las matemáticas en JavaScript: cómo podemos combinar operadores y otras características para
manipular eficazmente números para realizar nuestros cálculos.

Manejo de texto — cadenas en JavaScript

A continuación pondrémos nuestra atención en las cadenas, así es como se llama a los fragmentos de texto en el mundo de la
programación. En este artículo vamos a darle un vistazo a todo lo que de verdad te hace falta saber sobre las cadenas mientras
aprendes JavaScript: creación de cadenas, escapar signos de puntuación dentro de las cadenas y concatenarlas.

Métodos útiles para el manejo de cadenas

Luego de ver lo más fundamental sobre las cadenas, vamos a echar a andar los motores y empezaremos a pensar qué operaciones
útiles podemos realizar sobre ellas con los métodos predeterminados, como encontrar la longitud de una cadena de texto, unir y
dividir cadenas, sustituir un carácter por otro y muchas más.

Arreglos
En el artículo final de este módulo vamos a ver los arreglos, que son una manera ordenada de almacenar una serie de datos bajo el
nombre de una sola variable. Aquí vamos a ver cuál es su utilidad y luego exploraremos la manera de crear uno, acceder, añadir y
eliminar elementos almecanados en un arreglo y otras de sus características.
¿Qué es JavaScript?

Bienvenido al curso de JavaScript para principiantes de MDN. En este primer artículo vamos
a conocer JavaScript desde un nivel muy general, contestando las preguntas ¿Qué es? y ¿Qué
hace?, con el propósito de que te sientas a gusto al usar JavaScript.
Definición General

JavaScript es un lenguaje de programación que te permite realizar actividades complejas en

una página web — cada vez más una página web hace más cosas que sólo mostrar
información estática — como mostrar actualizaciones de contenido en el momento,
interactuar con mapas, animaciones gráficas 2D/3D etc. — puedes estar seguro que
JavaScript está involucrado.

Es la tercera capa del pastel de los estándares en las tecnologías para la web, dos de las
cuales son (HTML y CSS), hablaremos de ellas más adelante con más detalle en otra parte
de nuestra Área de Aprendizaje.

HTML es un lenguaje de marcado que usa la estructura para dar un sentido al contenido
web, por ejemplo define párrafos, cabeceras, tablas, imágenes y vídeos en la página.

CSS es un lenguaje de reglas en cascada que usamos para aplicar un estilo a nuestro
contenido en HTML, por ejemplo colocando colores de fondo, fuentes y marginando nuestro
contenido en múltiples columnas.

JavaScript Es un lenguaje de programación que te permite crear contenido nuevo y

dinámico, controlar archivos de multimedia, crear imágenes animadas y muchas otras cosas
más.
HTML es un lenguaje de marcado que usa la estructura para dar un sentido al contenido
web, por ejemplo define párrafos, cabeceras, tablas, imágenes y vídeos en la página.

CSS es un lenguaje de reglas en cascada que usamos para aplicar un estilo a nuestro
contenido en HTML, por ejemplo colocando colores de fondo, fuentes y marginando nuestro
contenido en múltiples columnas.

JavaScript Es un lenguaje de programación que te permite crear contenido nuevo y

dinámico, controlar archivos de multimedia, crear imágenes animadas y muchas otras cosas
más.
 HTML CSS
p {
<p>Player 1: Chris</p>
font-family: 'helvetica neue', helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
border: 2px solid rgba(0,0,200,0.6);
background: rgba(0,0,200,0.3);
color: rgba(0,0,200,0.6);
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
cursor: pointer;
}

Javascript

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
let name = prompt('Ingresa un nuevo nombre');
para.textContent = 'Player 1: ' + name;
}
Entonces, ¿Qué es lo que realmente podemos hacer?

El núcleo de JavaScript consiste en características comunes de programación que te permiten

hacer cosas como:

Almacenar valores útiles dentro de variables. En el ejercicio anterior por ejemplo,

preguntamos por un nuevo nombre a introducir para luego almacenarlo en una variable
llamada name.

Las operaciones escritas en formato de texto (Conocidas como "Strings" en lenguaje de

programación). En el ejemplo anterior tomamos el conjunto "Player 1:" y lo adjuntamos a la
variable name para terminar de crear el código, ejemplo: "Player 1: Chris".

Para hacer funcionar el código en respuesta a algunos eventos que están ocurriendo en la
página web. Usamos un evento en nuestro ejemplo anterior llamado clic para detectar
cuando el botón es cliqueado para luego hacer correr el código que actualice la etiqueta de
texto.

¡Y muchas más cosas!

¿Qué es lo que JavaScript hace en tu página web?

En este apartado, actualmente comenzaremos a ver unas cuantas líneas de código, y mientras
hacemos eso vamos explorando lo que actualmente está pasando cuando haces funcionar tu
código JavaScript en tu página Web.

Hagamos un breve recordatorio del historial de lo que sucede cuando cargas una página
web en tu navegador (primero hablamos acerca de cómo funciona CSS en nuestro artículo).
Cuando cargas una página Web en tu navegador, tu código (HTML, CSS y JavaScript) es leído
dentro de un ambiente de ejecución (pestaña del navegador). Esto es como una fábrica que
coge la materia prima (Las líneas de código) y lo presenta como el producto final (la página
Web).
¿Qué es lo que JavaScript hace en tu página web?

En este apartado, actualmente comenzaremos a ver unas cuantas líneas de código, y mientras
hacemos eso vamos explorando lo que actualmente está pasando cuando haces funcionar tu
código JavaScript en tu página Web.

Hagamos un breve recordatorio del historial de lo que sucede cuando cargas una página
web en tu navegador (primero hablamos acerca de cómo funciona CSS en nuestro artículo).
Cuando cargas una página Web en tu navegador, tu código (HTML, CSS y JavaScript) es leído
dentro de un ambiente de ejecución (pestaña del navegador). Esto es como una fábrica que
coge la materia prima (Las líneas de código) y lo presenta como el producto final (la página
Web).
JavaScript funciona con un orden

Cuando el navegador encuentra un bloque de JavaScript, generalmente lo corre en orden, de

arriba hacia abajo.

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
var name = prompt('Enter a new name');
para.textContent = 'Player 1: ' + name;
}
¿Cómo añadir JavaScript a tu página web?

JavaScript es aplicado a tu página en HTML de una manera similar al CSS. Donde el CSS usa
el elemento <link> para aplicar estilos-de-hoja externos y el tag <style> es un elemento
para aplicar estilos-de-hoja interno al HTML, JavaScript solamente necesita de un solo amigo
en el mundo del HTML - que es el elemento <script>.
JavaScript por dentro

function createParagraph() {
var para = document.createElement('p');
para.textContent = 'You clicked the button!';
<script> document.body.appendChild(para);
}
// JavaScript goes here
var buttons = document.querySelectorAll('button');
</script>
for (var i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener('click', createParagraph);
}
JavaScript Externo

Esto trabaja muy bien, pero, ¿qué pasa si queremos poner nuestro JavaScript en un archivo
externo? Entonces exploremos esto ahora.

<script src="script.js"></script>

function createParagraph() {
var para = document.createElement('p');
para.textContent = 'You clicked the button!';
document.body.appendChild(para);
}

var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length ; i++) {

buttons[i].addEventListener('click', createParagraph);
}
Gestores de JavaScript en línea

A veces puedes notar que te encontraras con algunas líneas de JavaScript dentro de archivos
HTML

<button onclick="createParagraph()">¡Presioname!</button>

function createParagraph() {
var para = document.createElement('p');
para.textContent = '¡Presionaste el Botón!';
document.body.appendChild(para);
}
Comentarios

Así como en HTML y CSS, es posible escribir comentarios dentro de tu código de JavaScript
que serán ignorados por el navegador, simplemente existe para proveer instrucciones a tus
colegas desarrolladores de como el código funciona (y para ti, por si regresas a tu código
después de 6 meses y no recuerdas lo que hiciste). Los comentarios son muy útiles, deberías
usarlos más a menudo, particularmente para grandes aplicaciones.
// Soy un comentario

/*
Yo tambíen
soy un commentario
*/

// Función: crea un nuevo párrafo y lo añade en la parte inferior del cuerpo HTML.

function createParagraph() {
let para = document.createElement('p');
para.textContent = 'You clicked the button!';
document.body.appendChild(para);
}

/*
1. Obtiene referencias de todos los botones de la página y los ordena en una matriz.
2. Recorre todos los botones y añade un clic event listener a cada uno de ellos.

Cuando se pulsa cualquier botón, se ejecuta la función createParagraph().

*/

const buttons = document.querySelectorAll('button');

for (let i = 0; i < buttons.length ; i++) {

buttons[i].addEventListener('click', createParagraph);
}
FIN