99 files changed, 1375 insertions, 4191 deletions

diff --git a/files/es/web/css/-moz-cell/index.html b/files/es/web/css/-moz-cell/index.html
deleted file mode 100644
index 213b3607c0..0000000000
--- a/files/es/web/css/-moz-cell/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: '-moz-cell'
-slug: Web/CSS/-moz-cell
-tags:
-  - CSS
-translation_of: Web/CSS/cursor
-translation_of_original: Web/CSS/-moz-cell
----
-<div>{{CSSRef}}{{obsolete_header}}</div>
-
-<p><em>¡No uses este valor!Don't use this value! </em> Usa el valor  {{cssxref("cursor#cell","cell")}} en su lugar.</p>
diff --git a/files/es/web/css/@media/altura/index.html b/files/es/web/css/@media/height/index.html
index 7cb29fe768..7cb29fe768 100644
--- a/files/es/web/css/@media/altura/index.html
+++ b/files/es/web/css/@media/height/index.html
diff --git a/files/es/web/css/@media/resolución/index.html b/files/es/web/css/@media/resolution/index.html
index bd2beb4866..bd2beb4866 100644
--- a/files/es/web/css/@media/resolución/index.html
+++ b/files/es/web/css/@media/resolution/index.html
diff --git a/files/es/web/css/@viewport/height/index.html b/files/es/web/css/@viewport/height/index.html
deleted file mode 100644
index bb9c54b069..0000000000
--- a/files/es/web/css/@viewport/height/index.html
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: height
-slug: Web/CSS/@viewport/height
-tags:
-  - Descriptor CSS
-  - Referencia
-translation_of: Web/CSS/@viewport
-translation_of_original: Web/CSS/@viewport/height
----
-<div>{{CSSRef}}</div>
-
-<h2 id="Resumen">Resumen</h2>
-
-<p>El descriptor CSS <code><strong>height</strong></code> es un descriptor de forma reducida para establecer {{cssxref("@viewport/min-height", "min-height")}} y {{cssxref("@viewport/max-height", "max-height")}} en el viewport. Definiendo un valor de longitud para viewport se establecerán los dos, altura mínima y altura máxima, con el valor definido.</p>
-
-<p>Si se definen dos valores de viewport, el primero corresponderá a la altura mínima, y el segundo, a la altura máxima.</p>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Sintaxis">Sintaxis</h2>
-
-<pre class="brush: css">/* Un valor */
-height: auto;
-height: 320px;
-height: 15em;
-
-/* Dos valores */
-height: 320px 200px;
-</pre>
-
-<h3 id="Valores">Valores</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>El valor a usar es calculado con los valores de otros descriptores CSS.</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Un valor {{cssxref("&lt;length&gt;")}} de longitud absoluta o relativa no negativa.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Un valor {{cssxref("&lt;percentage&gt;")}} del porcentaje relativo a la anchura o altura del viewport inicial, con factor de zoom de 1.0, para longitudes verticales y horizontales respectivamente. No puede ser negativo.</dd>
-</dl>
-
-<h3 id="Sintaxis_formal">Sintaxis formal</h3>
-
-<pre class="syntaxbox">{{csssyntax}}
-</pre>
-
-<h2 id="Ejemplo">Ejemplo</h2>
-
-<pre class="brush: css">@viewport {
-  height: 500px;
-}</pre>
-
-<h2 id="Especificaciones">Especificaciones</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Especificación</th>
-   <th scope="col">Estado</th>
-   <th scope="col">Comentarios</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td>
-   <td>{{Spec2('CSS3 Device')}}</td>
-   <td>Definición inicial</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>29 (usando una bandera)</td>
-   <td>{{CompatNo}}</td>
-   <td>10 {{property_prefix("-ms")}}</td>
-   <td>11.10<br>
-    Removido en 15<br>
-    Reintroducido con una bandera en 16</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>4.4</td>
-   <td>29</td>
-   <td>{{CompatNo}}</td>
-   <td>10{{property_prefix("-ms")}}</td>
-   <td>11.10<br>
-    Removido en 15<br>
-    Reintroducido con una bandera en 16</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
diff --git a/files/es/web/css/@viewport/width/index.html b/files/es/web/css/@viewport/width/index.html
deleted file mode 100644
index 2c550153bc..0000000000
--- a/files/es/web/css/@viewport/width/index.html
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: width
-slug: Web/CSS/@viewport/width
-translation_of: Web/CSS/@viewport
-translation_of_original: Web/CSS/@viewport/width
----
-<div>{{CSSRef}}</div>
-
-<h2 id="Resumen">Resumen</h2>
-
-<p>El descriptor CSS <strong>width</strong> es una forma reducida para establecer {{cssxref("@viewport/min-width", "min-width")}} y {{cssxref("@viewport/max-width", "max-width")}} en el viewport. Definiendo un valor de longitud para viewport se establecerán los dos, anchura mínima y anchura máxima, con el valor definido.</p>
-
-<p>Si se definen dos valores de viewport, el primero corresponderá a la anchura mínima, y el segundo, a la anchura máxima.</p>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">Sintaxis</h2>
-
-<pre class="brush: css">/* Ejemplo con un valor de viewport: */
-@viewport {
-    width: 320px;
-}
-
-/* Ejemplo con dos valores de viewport: */
-@viewport {
-    width: 320px, 120px;
-}
-
-</pre>
-
-<p> </p>
-
-<h3 id="Values" name="Values">Valores</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>El valor a usar es calculado con los valores de otros descriptores CSS.</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Un valor {{cssxref("&lt;length&gt;")}} de longitud absoluta o relativa no negativa.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Un valor {{cssxref("&lt;percentage&gt;")}} del porcentaje relativo a la anchura o altura del viewport inicial, con factor de zoom de 1.0, para longitudes verticales y horizontales respectivamente. No puede ser negativo.</dd>
-</dl>
-
-<h3 id="Sintaxis_formal">Sintaxis formal</h3>
-
-<pre class="syntaxbox">{{csssyntax}}</pre>
-
-<h2 id="Specifications" name="Specifications">Especificaciones</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Especificación</th>
-   <th scope="col">Estado</th>
-   <th scope="col">Comentarios</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}</td>
-   <td>{{Spec2('CSS3 Device')}}</td>
-   <td>Definición inicial</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table" style="height: 93px; width: 950px;">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>29 (usando una bandera)</td>
-   <td>{{CompatNo}}</td>
-   <td>10 {{property_prefix("-ms")}}</td>
-   <td>11.10<br>
-    Removido en 15<br>
-    Reintroducido con una bandera en 16</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table" style="height: 93px; width: 948px;">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>4.4</td>
-   <td>29</td>
-   <td>{{CompatNo}}</td>
-   <td>10{{property_prefix("-ms")}}</td>
-   <td>11.10<br>
-    Removido en 15<br>
-    Reintroducido con una bandera en 16</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p> </p>
diff --git a/files/es/web/css/_colon_-moz-placeholder/index.html b/files/es/web/css/_colon_-moz-placeholder/index.html
deleted file mode 100644
index c7f84a0273..0000000000
--- a/files/es/web/css/_colon_-moz-placeholder/index.html
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: ':-moz-placeholder'
-slug: 'Web/CSS/:-moz-placeholder'
-tags:
-  - CSS
-  - Marcador de Posición INPUT
-  - Marcador de posición
-  - No estándar(2)
-  - Placeholder
-  - Pseudo-Clase CSS
-  - Referencia CSS
-translation_of: 'Web/CSS/:placeholder-shown'
-translation_of_original: 'Web/CSS/:-moz-placeholder'
----
-<div class="note"><strong>Nota:</strong> La pseudo-clase CSS <code>:-moz-placeholder</code> está depreciada desde la versión Firefox 19 siendo desde entonces sustituida por el pseudo-elemento {{cssxref('::-moz-placeholder')}}.</div>
-
-<div class="note"><strong>Nota: </strong> El CSSWG ha decidido introducir  <code>:placeholder-shown</code>. Esta funcionalidad volverá a ser incluida en Gecko en algún momento futuro, sin prefijo y con un nuevo nombre.  {{bug(1069012)}}</div>
-
-<div>{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}</div>
-
-<h2 id="Resumen">Resumen</h2>
-
-<p><code>La </code><a href="/es/docs/CSS/Pseudo-classes">pseudo-clase </a><code>:-moz-placeholder</code> representa a cualquier elemento que muestre un  <a href="/es/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">texto del marcador de posición (placeholder)</a>. Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia del texto de los marcadores de posición (placeholders) que, por defecto, son grises. Puede que esto no funcione bien si ha cambiado el color de fondo de los campos de sus formularios a un color similar así que, puede usar esta pseudo-clase para cambiar el color del texto de los marcadores de posición (placeholders).,</p>
-
-<h2 id="Ejemplo">Ejemplo</h2>
-
-<h3 id="Ejemplo_básico">Ejemplo básico</h3>
-
-<p>Este ejemplo le da estilo a un <em>placeholder</em> (marcador de posición) haciendo que el color del texto sea verde.</p>
-
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;title&gt;Placeholder demo&lt;/title&gt;
-  &lt;style type="text/css"&gt;
-    input::-moz-placeholder {
-      color: green;
-    }
-    input:-moz-placeholder {
-      color: green;
-    }
-  &lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;input id="test" placeholder="Placeholder text!"&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<p>{{EmbedLiveSample("Basic_example")}}</p>
-
-<h3 id="Desbordamiento">Desbordamiento</h3>
-
-<p>En numerosas ocasiones las cajas para las búsquedas y otros campos de los formularios son fuertemente acortados al ser mostrados en dispositivos móviles. Desafortunadamente , en algunas circunstancias, el texto del marcador de posición de los elementos INPUT no cabe y  es recortado de una manera poco afortunada y fea. Para evitar esto se puede usar la regla CSS <code>text-overflow: ellipsis</code> para envolverlo.</p>
-
-<pre class="brush: css">input[placeholder] { text-overflow: ellipsis; }
-::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
-input:-moz-placeholder { text-overflow: ellipsis; }
-</pre>
-
-<h2 id="Especificaciones">Especificaciones</h2>
-
-<p>No es parte de ninguna especificación.</p>
-
-<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] Implementado en {{bug("457801")}}.</p>
-
-<h2 id="Ver_además">Ver además</h2>
-
-<ul>
- <li><a href="/es/docs/Web/Guide/HTML/Forms_in_HTML">Formularios en HTML</a></li>
- <li>{{HTMLElement("input")}}</li>
- <li>{{HTMLElement("textarea")}}</li>
-</ul>
diff --git a/files/es/web/css/_colon_-ms-input-placeholder/index.html b/files/es/web/css/_colon_-ms-input-placeholder/index.html
deleted file mode 100644
index b83b72db1a..0000000000
--- a/files/es/web/css/_colon_-ms-input-placeholder/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: ':-ms-input-placeholder'
-slug: 'Web/CSS/:-ms-input-placeholder'
-tags:
-  - CSS
-  - No estándar(2)
-  - Pseudo clase CSS
-  - Referencia
-translation_of: 'Web/CSS/:placeholder-shown'
-translation_of_original: 'Web/CSS/:-ms-input-placeholder'
----
-<div>{{Non-standard_header}}{{CSSRef}}</div>
-
-<h2 id="Resumen">Resumen</h2>
-
-<p>La  <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a>propietaria y no estándar  <code>:-ms-input-placeholder</code> representa el  <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">texto del marcador de posición (placeholder) </a> de un elemento de un formulario. Esto permite personalizar el texto de los marcadores de posición (placeholders) a los desarrolladores web y a los diseñadores de temas. Sólo es soportada por los navegadores Internet Explorer y Microsoft Edge.</p>
-
-<h2 id="Ejemplo">Ejemplo</h2>
-
-<p>El siguiente ejemplo destaca con un estilo personalizado los campos <em>"Branch"</em> y código "<em>ID"</em>. El texto del marcardor de posición (placeholder) se muestra con un estilo hasta que el campo obtiene el foco, momento a partir del cual podemos escribir en él. Cuando el campo obtiene el foco vuelve a tener el estilo normal para un campo input y el texto del marcador de posición (placeholder) desaparece.</p>
-
-<h3 id="HTML">HTML</h3>
-
-<pre>&lt;form id="test"&gt;
-  &lt;p&gt;&lt;label&gt;Enter Student Name: &lt;input id="name" placeholder="Student Name"/&gt;&lt;/label&gt;&lt;/p&gt;
-  &lt;p&gt;&lt;label&gt;Enter Student Branch: &lt;input id="branch" placeholder="Student Branch" /&gt;&lt;/label&gt;&lt;/p&gt;
-  &lt;p&gt;&lt;label&gt;Enter Student ID: &lt;input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id" /&gt;&lt;/label&gt;&lt;/p&gt;
-  &lt;input type="submit" /&gt;
-&lt;/form&gt;</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">input {
-   background-color:#E8E8E8;
-   color:black; }
-/* placeholder only style */
-input.studentid:-ms-input-placeholder {
-   font-style:italic;
-   color: red;
-   background-color: yellow;
-}</pre>
-
-<h3 id="Resultado">Resultado</h3>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/12684/bandicam%202016-03-08%2001-48-59-851.jpg" style="border-style: solid; border-width: 1px; height: 160px; margin: 0px; width: 650px;"></p>
-
-<h2 id="Especificaciones">Especificaciones</h2>
-
-<p>No es parte de ninguna especificación aunque  Microsoft tiene <a href="https://msdn.microsoft.com/en-us/library/hh772745(v=vs.85).aspx">una descripción en MSDN.</a></p>
-
-<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>10</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>Firefox OS</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Ver_además">Ver además</h2>
-
-<ul>
- <li>{{cssxref("::placeholder")}}</li>
- <li>{{cssxref("::-webkit-input-placeholder")}}</li>
- <li>{{cssxref("::-moz-placeholder")}}</li>
- <li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li>
- <li>{{HTMLElement("input")}}</li>
- <li>{{HTMLElement("textarea")}}</li>
-</ul>
diff --git a/files/es/web/css/_colon_-webkit-autofill/index.html b/files/es/web/css/_colon_autofill/index.html
index 98c1c68215..98c1c68215 100644
--- a/files/es/web/css/_colon_-webkit-autofill/index.html
+++ b/files/es/web/css/_colon_autofill/index.html
diff --git a/files/es/web/css/_colon_any/index.html b/files/es/web/css/_colon_is/index.html
index 7fe55d57c4..7fe55d57c4 100644
--- a/files/es/web/css/_colon_any/index.html
+++ b/files/es/web/css/_colon_is/index.html
diff --git a/files/es/web/css/_colon_not()/index.html b/files/es/web/css/_colon_not/index.html
index 5182d83d77..5182d83d77 100644
--- a/files/es/web/css/_colon_not()/index.html
+++ b/files/es/web/css/_colon_not/index.html
diff --git a/files/es/web/css/_colon_-moz-ui-invalid/index.html b/files/es/web/css/_colon_user-invalid/index.html
index 6f12ca97a6..6f12ca97a6 100644
--- a/files/es/web/css/_colon_-moz-ui-invalid/index.html
+++ b/files/es/web/css/_colon_user-invalid/index.html
diff --git a/files/es/web/css/_doublecolon_-moz-placeholder/index.html b/files/es/web/css/_doublecolon_-moz-placeholder/index.html
deleted file mode 100644
index 3c8fbb8c3a..0000000000
--- a/files/es/web/css/_doublecolon_-moz-placeholder/index.html
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: '::-moz-placeholder'
-slug: 'Web/CSS/::-moz-placeholder'
-tags:
-  - CSS
-  - No estándar(2)
-  - Pseudo-elemento CSS
-  - Referencia CSS
-translation_of: 'Web/CSS/::placeholder'
-translation_of_original: 'Web/CSS/::-moz-placeholder'
----
-<div>{{Non-standard_header}}{{CSSRef}}</div>
-
-<div class="note"><strong>Nota:</strong> El pseudo-elemento <code>::-moz-placeholder</code> fue creado como sustituto de la pseudo-clase {{cssxref(':-moz-placeholder')}} que fue depreciada a partir de la versión de 19 de Firefox.</div>
-
-<h2 id="Resumen">Resumen</h2>
-
-<p>El  <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a><code>::-moz-placeholder</code> sirve para seleccionar cualquier elemento de un formulario que esté mostrando un  <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">marcador de posición de texto (placeholder text) </a>. Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia de estos elementos, cuyo estilo por defecto es de color gris claro. Puede que no funcione correctamente si se cambia el color de fondo de los campos de los formularios para que sean, por ejemplo, de un color similar, así que en ese caso se puede usar este pseudo-elemento para cambiar el color del marcador de posición de texto (placeholder text).</p>
-
-<h2 id="Ejemplo">Ejemplo</h2>
-
-<p>En este ejemplo se da estilo al marcador de posición del texto (placeholder text) haciendo que el color del texto sea verde (green).</p>
-
-<h3 id="Contenido_HTML">Contenido HTML</h3>
-
-<pre class="brush:html">&lt;input id="test" placeholder="Placeholder text!"&gt;
-</pre>
-
-<h3 id="Contenido_CSS">Contenido CSS</h3>
-
-<pre class="brush:css">input::-moz-placeholder {
-  color: green;
-}
-</pre>
-
-<p>Obtendremos el siguiente resultado:</p>
-
-<p>{{EmbedLiveSample("Example")}}</p>
-
-<h2 id="Especificaciones">Especificaciones</h2>
-
-<p>No es parte de ninguna especificación.</p>
-
-<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatGeckoDesktop("19.0")}}<sup>[1]</sup></td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>Firefox OS</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatGeckoMobile("19.0")}}<sup>[1]</sup></td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] Firefox aplica un estilo por defecto de  <code>{{cssxref("opacity")}}: 0.54</code> al marcador de posición del texto (placeholder). Ver {{Bug("556145")}}. La mayoría de los demás navegadores importante no comparten este estilo ni para el pseudo-elemento ni para la pseudo-clase.</p>
-
-<p>La implementación previa en el motor Gecko era como la pseudo-clase  {{cssxref(":-moz-placeholder")}}. Ver {{Bug("737786")}}.</p>
-
-<h2 id="Ver_además">Ver además</h2>
-
-<ul>
- <li>{{cssxref("::placeholder")}}</li>
- <li>{{cssxref("::-webkit-input-placeholder")}}</li>
- <li>{{cssxref(":-ms-input-placeholder")}}</li>
- <li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li>
- <li>{{HTMLElement("input")}}</li>
- <li>{{HTMLElement("textarea")}}</li>
-</ul>
diff --git a/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html b/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html
deleted file mode 100644
index 181f0a966c..0000000000
--- a/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: '::-webkit-input-placeholder'
-slug: 'Web/CSS/::-webkit-input-placeholder'
-tags:
-  - CSS
-  - NeedsExample
-  - No estándar(2)
-  - Pseudo-elemento
-  - Pseudo-elemento CSS
-  - Referencia
-  - Referencia CSS
-translation_of: 'Web/CSS/::placeholder'
-translation_of_original: 'Web/CSS/::-webkit-input-placeholder'
----
-<div>{{Non-standard_header}}{{CSSRef}}</div>
-
-<h2 id="Resumen">Resumen</h2>
-
-<p>El  <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> no estándar y propietario <code>::-webkit-input-placeholder</code> representa el <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">marcador de posición de texto (placeholder text)</a> de un elemento formulario. Permite que desarrolladores y diseñadores de temas puedan personalizar este marcador de posición de texto (placeholder). Sólo está soportado por WebKit/Blink.</p>
-
-<h2 id="Especificaciones">Especificaciones</h2>
-
-<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p>
-
-<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>Firefox OS</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Ver_además">Ver además</h2>
-
-<ul>
- <li>{{cssxref("::placeholder")}}</li>
- <li>{{cssxref("::-moz-placeholder")}}</li>
- <li>{{cssxref(":-ms-input-placeholder")}}</li>
- <li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li>
- <li>{{HTMLElement("input")}}</li>
- <li>{{HTMLElement("textarea")}}</li>
-</ul>
diff --git a/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html b/files/es/web/css/_doublecolon_file-selector-button/index.html
index 5d14e35e58..5d14e35e58 100644
--- a/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html
+++ b/files/es/web/css/_doublecolon_file-selector-button/index.html
diff --git a/files/es/web/css/selectores_hermanos_adyacentes/index.html b/files/es/web/css/adjacent_sibling_combinator/index.html
index 1200c4bd61..1200c4bd61 100644
--- a/files/es/web/css/selectores_hermanos_adyacentes/index.html
+++ b/files/es/web/css/adjacent_sibling_combinator/index.html
diff --git a/files/es/web/css/selectores_atributo/index.html b/files/es/web/css/attribute_selectors/index.html
index a7b59d03c6..a7b59d03c6 100644
--- a/files/es/web/css/selectores_atributo/index.html
+++ b/files/es/web/css/attribute_selectors/index.html
diff --git a/files/es/web/css/auto/index.html b/files/es/web/css/auto/index.html
deleted file mode 100644
index c380b1b891..0000000000
--- a/files/es/web/css/auto/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: auto
-slug: Web/CSS/auto
-tags:
-  - CSS
-  - 'CSS:Referencias'
-  - Todas_las_Categorías
-translation_of: Web/CSS/width
-translation_of_original: Web/CSS/auto
----
-<p>
-</p><p>&lt;&lt; <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a>
-</p>
-<h3 id="Resumen" name="Resumen"> Resumen </h3>
-<p>Un valor computado automáticamente por el 'useragent.'
-</p><p>Usando el valor <i>auto</i> en cualquier propiedad, dejamos al navegador que calcule el valor requerido. </p><p><br>
-FIXME
-</p>
-<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3>
-<pre class="eval">div {
-   height: 600px;
-   border: 1px solid #000;
-}
-</pre>
-<pre class="eval">div img {
-   height: auto;
-   border: 1px solid red;
-}
-</pre>
-<h3 id="Se_utiliza_en" name="Se_utiliza_en"> Se utiliza en </h3>
-<ul><li> {{ Cssxref("overflow") }}
-</li><li> {{ Cssxref("cursor") }}
-</li><li> {{ Cssxref("width") }}
-</li><li> {{ Cssxref("marker-offset") }}
-</li><li> {{ Cssxref("margin") }}
-</li><li> margin-* (left|bottom|top|right|start|end)
-</li><li> {{ Cssxref("bottom") }}
-</li><li> {{ Cssxref("left") }}
-</li><li> {{ Cssxref("table-layout") }}
-</li><li> {{ Cssxref("z-index") }}
-</li><li> {{ Cssxref("-moz-column-width") }}
-</li></ul>
-<p><br>
-</p>
-<div class="noinclude">
-<p><span class="comment">Categorías</span>
-<span class="comment">Interwiki Languages</span>
-</p>
-</div>
-{{ languages( { "en": "en/CSS/auto" } ) }}
diff --git a/files/es/web/css/-moz-box-flex/index.html b/files/es/web/css/box-flex/index.html
index c7491aea2d..c7491aea2d 100644
--- a/files/es/web/css/-moz-box-flex/index.html
+++ b/files/es/web/css/box-flex/index.html
diff --git a/files/es/web/css/-moz-box-ordinal-group/index.html b/files/es/web/css/box-ordinal-group/index.html
index 9f6af1c315..9f6af1c315 100644
--- a/files/es/web/css/-moz-box-ordinal-group/index.html
+++ b/files/es/web/css/box-ordinal-group/index.html
diff --git a/files/es/web/css/-moz-box-pack/index.html b/files/es/web/css/box-pack/index.html
index 118d60287a..118d60287a 100644
--- a/files/es/web/css/-moz-box-pack/index.html
+++ b/files/es/web/css/box-pack/index.html
diff --git a/files/es/web/css/grid-column-gap/index.html b/files/es/web/css/column-gap/index.html
index e7a607a5bc..e7a607a5bc 100644
--- a/files/es/web/css/grid-column-gap/index.html
+++ b/files/es/web/css/column-gap/index.html
diff --git a/files/es/web/css/comenzando_(tutorial_css)/index.html b/files/es/web/css/comenzando_(tutorial_css)/index.html
deleted file mode 100644
index 54997a5f6e..0000000000
--- a/files/es/web/css/comenzando_(tutorial_css)/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Comenzando (tutorial CSS)
-slug: Web/CSS/Comenzando_(tutorial_CSS)
----
-<p> </p>
-<h2 id="Introducción">Introducción</h2>
-<p>Este tutorial te introducirá en las Hojas de Estilo en Cascada (CSS).</p>
-<p>Este tutorial te guiará a través de las características básicas de CSS con ejemplos prácticos que puedes probar tu mismo desde tu computadora. Está dividido en dos partes.</p>
-<ul> <li>La Parte I ilustra las características estándares de CSS que funcionan con los navegadores de Mozilla así como también con la mayoría de navegadores modernos.</li>
-</ul>
-<ul> <li>La Parte II contiene algunos ejemplos de características básicas que funcionan en Mozilla pero no necesariamente funciona en otros entornos.</li>
-</ul>
-<p>Este tutorial se base en la <a class=" external" href="http://www.w3.org/TR/CSS21/" title="http://www.w3.org/TR/CSS21/">especificación CSS 2.1</a></p>
-<h3 id="¿Quienes_deberían_usar_este_tutorial">¿Quienes deberían usar este tutorial?</h3>
-<p>Este tutorial es principalmente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia con CSS.</p>
-<p>Si eres un principiante en CSS, usa la Parte I de este tutorial para entender y aprender como usar CSS. Luego usa la Parte II para entender el alcance de CSS en Mozilla.</p>
-<p>Si conoces algo de CSS, puedes saltarte las partes del tutorial que ya conozcas, y solo usar las partes que te interesan.</p>
-<p>Si tienes experiencia con CSS pero no con Mozilla, puedes saltarte a la Parte II.</p>
-<h3 id="¿Qué_necesitas_antes_de_empezar">¿Qué necesitas antes de empezar?</h3>
-<p>Para obtener el mayor provecho de este tutorial, necesitas un editor para archivos de texto, especialmente para la Parte II, un navegador de Mozilla (Firefox, Camino o SeaMonkey). También debes saber como usarlos de forma básica.</p>
-<p>Si no quieres editar archivos, puedes solo leer el tutorial y ver las imágenes, pero es una forma menos efectiva de aprender.</p>
-<p>Algunas partes de este tutorial requieren otros programas de Mozilla. Estas partes son opcionales. Si no quieres descargar otros programas de Mozilla, puedes saltarte estas partes.</p>
-<ul> <li><a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a></li>
-</ul>
-<p><strong>Nota: </strong> CSS provee formas de trabajar con color, así que partes de este tutorial dependen del color. Puedes usar estas partes del tutorial fácilmente si tienes una pantalla a color y puedes visualizar normalmente los colores.</p>
-<h3 id="Como_usar_este_tutorial">Como usar este tutorial</h3>
-<p>Para usar este tutorial, lee las páginas cuidadosamente y en secuencia. Si te pierdes alguna página, entonces puedes tener dificultades para entender las páginas siguientes.</p>
-<p>En cada página, usa la sección <em>Información</em> para entender como funciona CSS. Usa la sección <em>Acción</em> para tratar de usar CSS en tu computadora.</p>
-<p>Para probar tu entendimiento, toma los retos al final de cada página. Las soluciones a los retos están enlazados bajo los mismos retos, así que no necesitas mirar las respuestas si no quieres hacerlo.</p>
-<p>Para entender CSS con mayor profundidad, lee la información que encuentres en las cajas subtituladas <em>Más detalles</em>. Usa los enlaces allí para encontrar información de referencia acerca de CSS.</p>
-<h2 id="Tutorial_Parte_I">Tutorial Parte I</h2>
-<p>Una guía de CSS paso a paso.</p>
-<ol> <li><strong><a href="/es/CSS/Getting_Started/Que_es_css" title="es/CSS/Getting_Started/Que_es_css">Que es CSS</a></strong></li> <li><a href="/es/CSS/Getting_Started/Por_que_usar_css" title="es/CSS/Getting_Started/Por_que_usar_css"><strong>Por qué usar CSS</strong></a></li> <li><a href="/es/CSS/Getting_Started/Como_funciona_css" title="es/CSS/Getting_Started/Como_funciona_css"><strong>Como funciona CSS</strong></a></li> <li><strong><a href="/es/CSS/Getting_Started/Cascada_y_herencia" title="es/CSS/Getting_Started/Cascada_y_herencia">Cascada y herencia</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Selectores" title="es/CSS/Getting_Started/Selectores">Selectores</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/CSS_legible" title="es/CSS/Getting_Started/CSS_legible">CSS legible</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Estilos_de_texto" title="es/CSS/Getting_Started/Estilos_de_texto">Estilos de texto</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Color" title="es/CSS/Getting_Started/Color">Color</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Contenido" title="es/CSS/Getting_Started/Contenido">Contenido</a> </strong></li> <li><strong><a href="/es/CSS/Getting_Started/Listas" title="es/CSS/Getting_Started/Listas">Listas</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Cajas" title="es/CSS/Getting_Started/Cajas">Cajas</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Estructura" title="es/CSS/Getting_Started/Estructura">Estructura</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Tablas" title="es/CSS/Getting_Started/Tablas">Tablas</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Media" title="es/CSS/Getting_Started/Media">Media</a></strong></li>
-</ol>
-<h2 id="Tutorial_Parte_II">Tutorial Parte II</h2>
-<p>Ejemplos que muestran el alcance de CSS usado con otras tecnologías web y de Mozilla.</p>
-<ol> <li><strong><a href="/es/CSS/Getting_Started/Javascript" title="es/CSS/Getting_Started/Javascript">JavaScript</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Graficos_svg" title="es/CSS/Getting_Started/Graficos_svg">Gráficos SVG</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Data_xml" title="es/CSS/Getting_Started/Data_xml">Data XML</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/XBL_bindings" title="es/CSS/Getting_Started/XBL_bindings">XBL bindings</a> </strong></li> <li><strong><a href="/es/CSS/Getting_Started/Interfaces_de_usuario_XUL" title="es/CSS/Getting_Started/Interfaces_de_usuario_XUL">Interfaces de usuario XUL</a></strong></li>
-</ol>
-<p>{{ CSSTutorialTOC() }}</p>
-<p>{{ languages( { "es": "es/CSS/Introducción", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p>
diff --git a/files/es/web/css/comentarios/index.html b/files/es/web/css/comments/index.html
index f09cac662a..f09cac662a 100644
--- a/files/es/web/css/comentarios/index.html
+++ b/files/es/web/css/comments/index.html
diff --git a/files/es/web/css/como_iniciar/index.html b/files/es/web/css/como_iniciar/index.html
deleted file mode 100644
index facb250cb3..0000000000
--- a/files/es/web/css/como_iniciar/index.html
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: Como iniciar
-slug: Web/CSS/Como_iniciar
----
-This page was auto-generated because a user created a sub-page to this page.
diff --git a/files/es/web/css/como_iniciar/por_que_usar_css/index.html b/files/es/web/css/como_iniciar/por_que_usar_css/index.html
deleted file mode 100644
index 941f96a0e5..0000000000
--- a/files/es/web/css/como_iniciar/por_que_usar_css/index.html
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: Por que usar CSS
-slug: Web/CSS/Como_iniciar/Por_que_usar_CSS
-translation_of: Learn/CSS/First_steps/How_CSS_works
-translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS
----
-<p> </p>
-<p>Esta página explica por qué los documentos usan CSS. Usas CSS para añadir una hoja de estilos a tu documento de prueba.</p>
-<p>Esta es la segunda sección del <a href="/es/CSS/Introducción" title="../../../../es/CSS/Introducci%C3%B3n">tutorial</a>.</p>
-<p>Sección anterior: <a href="/es/CSS/Como_iniciar/Que_es_CSS" title="es/CSS/Como_iniciar/Que_es_CSS">Que es CSS</a><br>
- Sección siguiente: <a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting Started/How CSS works">How CSS works</a></p>
-<h2 id="Información_¿Por_qué_usar_CSS">Información: ¿Por qué usar CSS?</h2>
-<p>CSS ayuda a mantener la información de contenido de un documento separado de los detalles de como mostrarlo. Los detalles de como se muestra el documento son conocidos como <em>estilos. </em>Si mantienes los estilos separados del contenido puedes:</p>
-<ul>
- <li>Evitar duplicación</li>
- <li>Hacer el mantenimiento más simple</li>
- <li>Usar el mismo contenido con diferentes estilos para diferentes propositos.</li>
-</ul>
-<table>
- <caption>
-  Ejemplo</caption>
- <tbody>
-  <tr>
-   <td>
-    <p>Tu sitio web podría mostrar miles de páginas que se ven similar. Usando CSS, almacenas la información de estilos en archivos comunes que todas las páginas comparten.Cuando un usuario visualiza una página web, el navegador carga la información de estilos junto con el contenido de la página.</p>
-    <p>Cuando un usuario imprime una página web, podrías proveerle diferente información de estilos que hace que las páginas impresas sean fáciles de leer.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-<p>En general con HTML, usas el lenguaje de marcado para describir la información del contenido del documento, no sus estilos. Usas CSS para especificar sus estilos, no su contenido. (Más adelante en este tutorial, verás algunas excepciones a este acuerdo).</p>
-<table>
- <caption>
-  Más detalles</caption>
- <tbody>
-  <tr>
-   <td>
-    <p>Un lenguaje de marcado como HTML también provee algunas maneras de especificar estilos.</p>
-    <p>Por ejemplo en HTML puedes usar una etiqueta <code>&lt;b&gt; </code>para hacer acentuar el texto, y puedes especificar un color de fondo de la página en la etiqueta <code>&lt;body&gt;</code>.</p>
-    <p>Cuando usas CSS, normalmente evitas usar estas características del lenguaje de marcado así toda la información de estilos de tu documento está en un solo lugar.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Acción_Creando_una_hoja_de_estilos">Acción: Creando una hoja de estilos</h2>
-<ol>
- <li>Crea un archivo de texto en el mismo directorio anterior.  Este archivo será tu hoja de estilos. Nombrala como: <code>style1.css</code></li>
- <li>En tu archivo CSS, copia y pega esta única línea, luego graba el archivo:</li>
- <li>
-  <div>
-   <pre class="eval">strong {color: red;}
-</pre>
-  </div>
- </li>
-</ol>
-<h3 id="Enlazando_tu_documento_a_tu_hoja_de_estillos">Enlazando tu documento a tu hoja de estillos</h3>
-<ol>
- <li>Para enlazar tu documento a tu hoja de estilos, edita tu archivo HTML. Añade la línea acentuada aquí:</li>
- <li>
-  <div>
-   <pre class="eval">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"<span class="nowiki">http://www.w3.org/TR/html4/strict.dtd</span>"&gt;
-&lt;html&gt;
-  &lt;head&gt;
-  &lt;meta http-equiv="Content-Type" content="text/html;
-charset=iso-8859-1"&gt;
-  &lt;title&gt;Sample document&lt;/title&gt;
-  <strong>&lt;link rel="stylesheet" type="text/css" href="style1.css"&gt;</strong>
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p&gt;
-      &lt;strong&gt;C&lt;/strong&gt;ascading
-      &lt;strong&gt;S&lt;/strong&gt;tyle
-      &lt;strong&gt;S&lt;/strong&gt;heets
-    &lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-  </div>
- </li>
- <li>Graba el archivo y refresca la pantalla del navegador. Esta hoja de estilos hace que las letras inicales sean rojas, como esto:
-  <table>
-   <tbody>
-    <tr>
-     <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
- </li>
-</ol>
-<table>
- <caption>
-  Reto</caption>
- <tbody>
-  <tr>
-   <td>En adición al rojo, CSS permite algunos otros nombres de colores.
-    <p>Sin mirar la referencia, encuentra cinco o más nombres de colores que funcionen en tu hoja de estilos.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Why_use_CSS_colors" title="en/CSS/Getting Started/Challenge solutions#Why use CSS colors">See a solution for the challenge.</a> Ver la solución al reto.</p>
-<h2 id="¿Qué_sigue">¿Qué sigue?</h2>
-<p>Si tienes alguna dificultad entendiendo esta página, o si tienes comentarios acerca de la misma, por favor contribuye en esta página de <a href="/Talk:en/CSS/Getting_Started/Why_use_CSS%3f" title="Talk:en/CSS/Getting_Started/Why_use_CSS%3f">Discusión</a>.</p>
-<p>Ahora que tienes un archivo de ejemplo enlazado a una hoja de estilos separada, estás listo para aprender más acerca de como tu navegador combina ellos cuando muestra el documento: <a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting_Started/How_CSS_works">Como funciona CSS</a>.</p>
-<p>{{ CSSTutorialTOC() }}</p>
-<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "it": "it/Conoscere_i_CSS/Perch\u00e9_usare_i_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Po_co_u\u017cywa\u0107_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS", "es": "es/CSS/Como_iniciar/Por_que_usar_CSS", "zh-cn": "cn/CSS/Getting_Started/Why_use_CSS" } ) }}</p>
diff --git a/files/es/web/css/como_iniciar/que_es_css/index.html b/files/es/web/css/como_iniciar/que_es_css/index.html
deleted file mode 100644
index 18852f2439..0000000000
--- a/files/es/web/css/como_iniciar/que_es_css/index.html
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: Que es CSS
-slug: Web/CSS/Como_iniciar/Que_es_CSS
-tags:
-  - para_revisar
-translation_of: Learn/CSS/First_steps/How_CSS_works
-translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS
----
-<p>En esta página se explica que es CSS. Usted creará un documento simple con el cual trabajará en las próximas páginas del tutorial.</p>
-
-<p>Esta es la primera sección del tutorial <a href="/es/CSS/Introducción" title="es/CSS/Introducción">Como iniciar</a>.<br>
- Siguiente sección: <a href="/es/docs/CSS/Como_iniciar/Por_que_usar_CSS" title="en/CSS/Getting Started/Why use CSS">Por qué usar CSS</a></p>
-
-<h2 id="Información_¿Qué_es_CSS">Información: ¿Qué es CSS?</h2>
-
-<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>), traducido literalmente al español, como <em>Hojas de estilo en cascada</em>, es un lenguaje para especificar cómo los documentos se presentan a los usuarios.</p>
-
-<p>Un <em>documento (document)</em> es una colección de información que está estructurada utilizando un <em>lenguaje de formato (markup language)</em>.</p>
-
-<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
- <caption>Ejemplos</caption>
- <tbody>
-  <tr>
-   <td>
-    <ul>
-     <li>Una página web como la que estás leyendo, es un documento.<br>
-      La información que ves en una página web usualmente está estructurada utilizando el lenguaje de formato de documentos de HiperTexto, HTML (HyperText Markup Language).</li>
-    </ul>
-
-    <ul>
-     <li>Un cuadro de diálogo en una aplicación Mozilla es un documento.<br>
-      Los controles de interfaz de usuario que pude ver en los diálogos de control de aplicaciones Mozilla, están estructurados utilizando el lenguaje de formato XUL (XML User-interface Language - Lenguaje XML de interfaces de usuario).</li>
-    </ul>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>En este tutorial, los cuadros con titulo <strong>Más detalles</strong>, como el que está a continuación, contienen información adicional. Si se cuenta con poco tiempo para progresar con el tutorial, entonces pude omitir estos cuadros, quizás retorne a leerlos luego. De lo contrario léalos cuando llegue a ellos y tal vez siga los enlaces que contienen para aprender más.</p>
-
-<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
- <caption>Más detalles</caption>
- <tbody>
-  <tr>
-   <td>
-    <p>Un documento no es lo mismo que un archivo. Y este puede o no estar almacenado en un archivo.</p>
-
-    <p>Por ejemplo, el documento esta leyendo en este momento no está almacenado en un archivo. Cuando su navegador web solicita esta página, el servidor consulta a la base de datos y genera el documento, obteniendo las partes del mismo de diferentes archivos. Sin embargo, en este tutorial se trabajará con documentos que se almacenan en archivos.</p>
-
-    <p>Para más información acerca de documentos y lenguajes de formato, visite otras partes de este sitio web—por ejemplo:</p>
-
-    <table style="background-color: inherit; margin-left: 2em;">
-     <tbody>
-      <tr>
-       <td><a href="/en/HTML" title="en/HTML">HTML</a></td>
-       <td>para páginas web</td>
-      </tr>
-      <tr>
-       <td><a href="/en/XML" title="en/XML">XML</a></td>
-       <td>para documentos estrucurados, en general</td>
-      </tr>
-      <tr>
-       <td><a href="/en/SVG" title="en/SVG">SVG</a></td>
-       <td>para gráficas</td>
-      </tr>
-      <tr>
-       <td><a href="/en/XUL" title="en/XUL">XUL</a></td>
-       <td>para interfaces de usuario de Mozilla</td>
-      </tr>
-     </tbody>
-    </table>
-
-    <p>En la parte II de este tutorial podrá ver ejemplos de estos lenguajes de formato.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p><em>Presentar</em> un documento a un usuario significa convertirlo en una forma en que el humano pueda hacer uso de el. Mozilla está diseñado para presentar documentos de manera visual—por ejemplo, en la pantalla de una computadora, en un proyector o en una impresora.</p>
-
-<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
- <caption>Más detalles</caption>
- <tbody>
-  <tr>
-   <td>CSS no es sólo para los navegadores web, y no sólo para la presentación visual. En terminos formales CSS, el programa que presenta un documento a un usuario es llamado un <em>agente de usuarios</em> (UA - User Agent). Un navegador es sólo un tipo de UA. Sin embargo, en la parte I de este tutorial, se trabajará únicamente con CSS en un navegador.
-    <p>Para algunas de las definiciones formales de la terminología relacionda con CSS, consulte el enlace <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definiciones</a> (en ingles) en la especificación CSS.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Acción_Crear_un_documento">Acción: Crear un documento</h2>
-
-<ol>
- <li>Utilice su computador para crear un nuevo directorio y un nuevo archivo de texto allí. El archivo contendrá el documento.
-  <ol>
-   <li>Copie y pegue el código HTML que se muestra a continuación. Guarde el archivo con el nombre <code>doc1.html</code>
-
-    <div style="width: 40em;">
-    <pre class="deki-transform">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd"&gt;
-&lt;html&gt;
-  &lt;head&gt;
-  &lt;meta http-equiv="Content-Type" content="text/html;
-  charset=iso-8859-1"&gt;
-  &lt;title&gt;Sample document&lt;/title&gt;
-  &lt;/head&gt;
-
-  &lt;body&gt;
-    &lt;p&gt;
-      &lt;strong&gt;C&lt;/strong&gt;ascading
-      &lt;strong&gt;S&lt;/strong&gt;tyle
-      &lt;strong&gt;S&lt;/strong&gt;heets
-      &lt;strong&gt;B&lt;/strong&gt;heets
-    &lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-    </div>
-   </li>
-  </ol>
- </li>
- <li>En el navegador web, abra una nueva pestaña o una nueva ventana, y abra el archivo allí.
-  <p>Debe observar un texto con las letras iniciales en negrita, así:</p>
-
-  <table style="border: 2px outset #3366bb; padding: 1em;">
-   <tbody>
-    <tr>
-     <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
-
-  <p>Lo que ve en el navegador puede no lucir exactamente como en la imagen, debido a la configuración de su navegador web y esta wiki. Si existen algunas diferencias en el tipo de fuente, espaciado y los colores que ve, no son importantes.</p>
- </li>
-</ol>
-
-<h2 id="¿Qué_sigue">¿Qué sigue?</h2>
-
-<p>Si ha tenido dificultad para entender esta página, o si tiene comentarios acerca de ella, por favor contribuya con esta en la página de <a href="/Talk:en/CSS/Getting_Started/What_is_CSS%3f" title="Talk:en/CSS/Getting_Started/What_is_CSS?">Discusiones</a>.</p>
-
-<p>El documento aún no utiliza CSS. En la siguiente página se utilizará CSS para especificar el estilo: <strong><a href="/es/docs/CSS/Como_iniciar/Por_que_usar_CSS" title="en/CSS/Getting_Started/Why_use_CSS?">¿Por qué utilizar CSS?</a></strong></p>
-
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Pr\u00e9sentation_des_CSS", "it": "it/Conoscere_i_CSS/Che_cosa_sono_i_CSS", "ja": "ja/CSS/Getting_Started/What_is_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Czym_jest_CSS", "pt": "pt/CSS/Como_come\u00e7ar/O_que_\u00e9_CSS", "zh-cn": "cn/CSS/Getting_Started/What_is_CSS", "es": "es/CSS/Como_iniciar/Que_es_CSS" } ) }}</p>
diff --git a/files/es/web/css/valor_calculado/index.html b/files/es/web/css/computed_value/index.html
index 9112bf97b5..9112bf97b5 100644
--- a/files/es/web/css/valor_calculado/index.html
+++ b/files/es/web/css/computed_value/index.html
diff --git a/files/es/web/css/css_animations/detectar_soporte_de_animación_css/index.html b/files/es/web/css/css_animations/detecting_css_animation_support/index.html
index 11bb0c0076..11bb0c0076 100644
--- a/files/es/web/css/css_animations/detectar_soporte_de_animación_css/index.html
+++ b/files/es/web/css/css_animations/detecting_css_animation_support/index.html
diff --git a/files/es/web/css/css_animations/usando_animaciones_css/index.html b/files/es/web/css/css_animations/using_css_animations/index.html
index b9b08bbc0b..b9b08bbc0b 100644
--- a/files/es/web/css/css_animations/usando_animaciones_css/index.html
+++ b/files/es/web/css/css_animations/using_css_animations/index.html
diff --git a/files/es/web/css/css_background_and_borders/border-image_generador/index.html b/files/es/web/css/css_background_and_borders/border-image_generator/index.html
index 3f189b87ea..3f189b87ea 100644
--- a/files/es/web/css/css_background_and_borders/border-image_generador/index.html
+++ b/files/es/web/css/css_background_and_borders/border-image_generator/index.html
diff --git a/files/es/web/css/css_background_and_borders/index.html b/files/es/web/css/css_backgrounds_and_borders/index.html
index 59c2117194..59c2117194 100644
--- a/files/es/web/css/css_background_and_borders/index.html
+++ b/files/es/web/css/css_backgrounds_and_borders/index.html
diff --git a/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
index a80b81bf1a..a80b81bf1a 100644
--- a/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html
+++ b/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
diff --git a/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html b/files/es/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html
index b59b5f677d..b59b5f677d 100644
--- a/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html
+++ b/files/es/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html
diff --git a/files/es/web/css/css_modelo_caja/index.html b/files/es/web/css/css_box_model/index.html
index 320800f82e..320800f82e 100644
--- a/files/es/web/css/css_modelo_caja/index.html
+++ b/files/es/web/css/css_box_model/index.html
diff --git a/files/es/web/css/css_modelo_caja/introducción_al_modelo_de_caja_de_css/index.html b/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.html
index 45571faf77..45571faf77 100644
--- a/files/es/web/css/css_modelo_caja/introducción_al_modelo_de_caja_de_css/index.html
+++ b/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.html
diff --git a/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html b/files/es/web/css/css_box_model/mastering_margin_collapsing/index.html
index dafdf71855..dafdf71855 100644
--- a/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html
+++ b/files/es/web/css/css_box_model/mastering_margin_collapsing/index.html
diff --git a/files/es/web/css/css_colors/index.html b/files/es/web/css/css_color/index.html
index ef36d7954b..ef36d7954b 100644
--- a/files/es/web/css/css_colors/index.html
+++ b/files/es/web/css/css_color/index.html
diff --git a/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html b/files/es/web/css/css_colors/color_picker_tool/index.html
index 7e7819542d..7e7819542d 100644
--- a/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html
+++ b/files/es/web/css/css_colors/color_picker_tool/index.html
diff --git a/files/es/web/css/columnas_css/index.html b/files/es/web/css/css_columns/index.html
index 949f2eca71..949f2eca71 100644
--- a/files/es/web/css/columnas_css/index.html
+++ b/files/es/web/css/css_columns/index.html
diff --git a/files/es/web/css/css_columns/using_multi-column_layouts/index.html b/files/es/web/css/css_columns/using_multi-column_layouts/index.html
new file mode 100644
index 0000000000..8eed415ee2
--- /dev/null
+++ b/files/es/web/css/css_columns/using_multi-column_layouts/index.html
@@ -0,0 +1,68 @@
+---
+title: Columnas con CSS-3
+slug: Columnas_con_CSS-3
+tags:
+  - CSS
+  - Todas_las_Categorías
+translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts
+---
+<p>
+</p>
+<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n"> Introducción </h3>
+<p>Cuando leemos un texto, las líneas muy largas resultan incómodas. Si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas (al ir de un extremo al otro de la página). Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos. Por desgracia esto no es posible con HTML y CSS-2, a no ser que fuerces la ruptura de las columnas en puntos fijos, limites en gran medida el código a utilizar, o uses scripts complejos.
+</p><p><a class="external" href="http://www.w3.org/TR/css3-multicol/">El borrador de CSS-3</a> propone algunas nuevas propiedades para dar respuesta a esta necesidad. En Firefox 1.5 y superior hemos implementado algunas de estas propiedades para comportarnos según lo descrito en el borrador de CSS-3 (con una excepción explicada abajo) </p><p><a class="external" href="http://weblogs.mozillazine.org/roc/">El blog de Robert O'Callahan </a>  usa columnas CSS, pruébalo con Firefox 1.5
+</p>
+<h3 id="Usar_Columnas" name="Usar_Columnas"> Usar Columnas </h3>
+<h4 id="Columnas.2C_Count_y_Width" name="Columnas.2C_Count_y_Width"> Columnas, Count y Width </h4>
+<p>Dos propiedades CSS Controlan el número (Count) y el ancho (Width) de las columnas: <code>-moz-column-count</code> y <code>-moz-column-width</code>.
+</p><p><code>-moz-column-count</code> indica el número concreto de columnas a crear. Por ejemplo:
+</p>
+<pre>&lt;div style="-moz-column-count:2; -moz-column-gap: 1em;"&gt;
+Cuando leemos un texto las líneas muy largas resultan incómodas, si son
+demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
+de la línea en la que estabas. Por ello, pensando en los usuarios con
+monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
+en columnas, más o menos, como hacen los periódicos.&lt;/div&gt;
+</pre>
+<p>Mostrará el contenido en dos columnas (si usas Firefox 1.5 o superior):
+</p>
+<div style="border: 1px solid silver; padding: 1em;">Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.</div>
+<p><code>-moz-column-width</code> fija la anchura mínima de las columnas. Si no se indica un <code>-moz-column-count</code>, entonces el navegador creará automáticamente tantas columnas (con la anchura indicada) como sea posible en el espacio disponible. </p>
+<pre>&lt;div style="-moz-column-width:20em; -moz-column-gap: 1em;"&gt;
+Cuando leemos un texto las líneas muy largas resultan incómodas, si son
+demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
+de la línea en la que estabas. Por ello, pensando en los usuarios con
+monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
+en columnas, más o menos, como hacen los periódicos.&lt;/div&gt;
+</pre>
+<p>Se visualizará así:
+</p>
+<div style="-moz-column-width: 20em; border: 1px solid silver; padding: 1em;">Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.</div>
+<p>Los detalles exactos son descritos en <a class="external" href="http://www.w3.org/TR/css3-multicol/">El borrador de CSS3</a>.
+</p><p>En un bloque multicolumna, el contenido fluye automáticamente de una columna a otra según sea necesario. Todas las funcionalidades de HTML, CSS, y DOM están soportadas dentro de las columnas, tanto al editar como al imprimir.
+</p>
+<h4 id="Equilibrado_de_altura" name="Equilibrado_de_altura"> Equilibrado de altura </h4>
+<p>El borrador de CSS3 especifica que la altura de las columnas debe estar equilibrada, es decir, el navegador debe definir automáticamente la altura máxima de las columnas de modo que la altura del contenido en cada columna sea más o menos igual. Firefox lo hace. </p><p>Sin embargo, en algunas situaciones puede ser útil fijar explícitamente la altura máxima de las columnas, y entonces se empiezan a meter los contenidos en la primera columna y se van creando tantas columnas como sea necesario, posiblemente desbordando por la derecha. Por ejemplo, en <a class=" external" href="http://iht.com/" rel="freelink">http://iht.com/</a> los artículos hacen esto (usando scripts). Por lo tanto extendemos el borrador de modo que si se indica la propiedad CSS <code>height</code> en un bloque multicolumnas, se permite que cada columna tenga esa altura -y no más- antes de agregar la siguiente columna. Esto permite una composición mucho más eficiente. </p>
+<h4 id="Espacio_entre_Columnas" name="Espacio_entre_Columnas"> Espacio entre Columnas </h4>
+<p>Por defecto, cada columna está tocando la columna de al lado. Normalmente esto no es lo más apropiado. Se puede utilizar el <code>padding</code> de las columnas para corregirlo, pero normalmente lo más fácil será aplicar la propiedad <code>-moz-column-gap</code> al bloque con multicolumna: </p>
+<pre>&lt;div style="-moz-column-width:20em; -moz-column-gap:2em;"&gt;
+Cuando leemos un texto las líneas muy largas resultan incómodas, si son
+demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
+de la línea en la que estabas. Por ello, pensando en los usuarios con
+monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
+en columnas, más o menos, como hacen los periódicos.&lt;/div&gt;
+</pre>
+<p>Se visualizará así:
+</p>
+<div style="-moz-column-width: 20em; border: 1px solid silver; padding: 1em;">Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.</div>
+<h4 id="Degradado_elegante" name="Degradado_elegante"> Degradado elegante </h4>
+<p>La propiedad <code>-moz-column</code> será ignorada por los navegadores que no la soporten, por lo tanto, es relativamente fácil crear un diseño que en esos navegadores muestre una sola columna, y al mismo tiempo utilice multi-columnas en Firefox 1.5.
+</p>
+<h3 id="Conclusi.C3.B3n" name="Conclusi.C3.B3n"> Conclusión </h3>
+<p>Las columnas CSS3 son un nuevo método básico de disposición que ayudará a los desarrolladores Web a aprovechar mejor las condiciones reales de la pantalla. Los desarrolladores imaginativos podrán encontrarle muchas aplicaciones, especialmente a la característica de equilibrado automático y dinámico de la altura. </p>
+<h3 id="Referencias_adicionales" name="Referencias_adicionales"> Referencias adicionales </h3>
+<ul><li> <a class=" external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a>
+</li></ul>
+<p><span class="comment">Categorías</span>
+</p><p><span class="comment">interwiki links</span>
+</p>{{ languages( { "en": "en/CSS3_Columns", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_Columns", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }}
diff --git a/files/es/web/css/css_reglas_condicionales/index.html b/files/es/web/css/css_conditional_rules/index.html
index 59c2a9b328..59c2a9b328 100644
--- a/files/es/web/css/css_reglas_condicionales/index.html
+++ b/files/es/web/css/css_conditional_rules/index.html
diff --git a/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
index 38e89c7813..38e89c7813 100644
--- a/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html
+++ b/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
diff --git a/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html
index 9048cbb739..9048cbb739 100644
--- a/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html
+++ b/files/es/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html
diff --git a/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html b/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html
deleted file mode 100644
index e42553fe97..0000000000
--- a/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html
+++ /dev/null
@@ -1,191 +0,0 @@
----
-title: Usando flexbox para componer aplicaciones web
-slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web
-tags:
-  - Avanzado
-  - CSS
-  - Cajas Flexibles CSS
-  - Ejemplo
-  - Guía
-  - Web
-translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
-translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications
----
-<p>{{CSSRef}}</p>
-
-<p>Usar <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">flexbox</a> puede ayudarte a diseñar atractivas composiciones en aplicaciones web que escalen mejor de escritorio a móvil. Pon fin a los elementos flotantes {{HTMLElement("div")}}, <a href="/en-US/docs/Web/CSS/position#Absolute_positioning">el posicionamiento absoluto</a>, y los <em>hacks</em> de JavaScript, y comienza a construir composiciones fluidas en horizontal y vertical en apenas unas líneas de <a href="/es/docs/Web/CSS">CSS</a>. Algunos ejemplos básicos de casos de uso:</p>
-
-<ul>
- <li>Quieres centrar un elemento en la mitad de una página</li>
- <li>Quieres un conjunto de contenedores que fluyan verticalmente, uno tras otro</li>
- <li>Quieres crear una fila de botones u otros elementos que colapse verticalmente en tamaños menores de pantalla</li>
-</ul>
-
-<p>Este artículo sólo aborda el uso de <em>flexbox</em> con navegadores que soportan la implementación moderna y sin prefijos del estándar. Para información sobre prefijos de proveedores para navegadores más antiguos, por favor lee <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">la guía más general para usar cajas flexibles de CSS</a>.</p>
-
-<h2 id="Conceptos_básicos">Conceptos básicos</h2>
-
-<p>Con flexbox puedes hacer que los elementos dentro de cualquier {{HTMLElement("div")}} fluyan estableciendo la propiedad {{cssxref("display")}} como <code>flex</code> y luego dando a la propiedad {{cssxref("flex-flow")}} el valor <code>row</code>, si deseas que los elementos fluyan horizontalmente, o el valor <code>column</code>, si quieres que lo hagan verticalmente. Si estás usando un flexbox horizontal y deseas que tus contenidos queden envueltos verticalmente, especifica además el valor <code>wrap</code>.</p>
-
-<p>Después, para cada elemento que desees sea parte del flujo de cajas, establece la propiedad {{cssxref("flex")}}. Generalmente querrás utilizar uno de los tres siguientes valores:</p>
-
-<ul>
- <li>Si quieres un elemento que sólo ocupa su ancho asignado, como un botón, utiliza <code>flex: none</code> que se expande a <code>0 0 auto</code>.</li>
- <li>Si deseas explícitamente dimensionar un elemento, usa <code>flex: 0 0 <em>tamaño</em></code>. Por ejemplo: <code>flex 0 0 60px</code>.</li>
- <li>Si necesitas un elemento que se expanda para rellenar el espacio disponible, compartiendo el espacio igualmente si hay múltiples elementos de este tipo dentro del flujo, utiliza <code>flex: auto</code>. Se expande a <code>1 1 auto</code>.</li>
-</ul>
-
-<p>Por supuesto, hay otras posibilidades, pero estas deberían cubrir los casos de uso básicos. Veamos cómo se aplica esto en algunos ejemplos.</p>
-
-<h2 id="Centrando_un_elemento_en_una_página">Centrando un elemento en una página</h2>
-
-<p>Para este caso, el método más sencillo es crear dos cajas flexibles, una dentro de otra. Cada flexbox tendrá tres elementos: dos de ellos conteniendo el elemento centrado y después el propio elemento centrado.</p>
-
-<h3 id="Contenido_CSS">Contenido CSS</h3>
-
-<pre class="brush: css;">.vertical-box {
-  display: flex;
-  height: 400px;
-  width: 400px;
-  flex-flow: column;
-}
-.horizontal-box {
-  display: flex;
-  flex-flow: row;
-}
-.spacer {
-  flex: auto;
-  background-color: black;
-}
-.centered-element {
-  flex: none;
-  background-color: white;
-}
-</pre>
-
-<h3 id="Contenido_HTML">Contenido HTML</h3>
-
-<pre class="brush: html;">&lt;div class="vertical-box"&gt;
-  &lt;div class="spacer"&gt;&lt;/div&gt;
-  &lt;div class="centered-element horizontal-box"&gt;
-    &lt;div class="spacer"&gt;&lt;/div&gt;
-    &lt;div class="centered-element"&gt;Centered content&lt;/div&gt;
-     &lt;div class="spacer"&gt;&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class="spacer"&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Resultado">Resultado</h3>
-
-<p>{{ EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500) }}</p>
-
-<h2 id="Haciendo_fluir_verticalmente_un_conjunto_de_contenedores">Haciendo fluir verticalmente un conjunto de contenedores</h2>
-
-<p>Imagina que tienes la composición de una página con una sección de cabecera, una de contenidos y un pie. La cabecera y el pie deberían tener un tamaño fijo, pero la sección de contenidos se debería redimensionar según el espacio disponible. Esto puede lograrse estableciendo la propiedad {{cssxref("flex")}} del contenido como <code>auto</code> y la misma propiedad {{cssxref("flex")}} de la cabecera y el pie como <code>none</code>.</p>
-
-<h3 id="Contenido_CSS_2">Contenido CSS</h3>
-
-<pre class="brush: css;highlight:[8,14,18]">.vertical-box {
-  display: flex;
-  height: 400px;
-  width: 400px;
-  flex-flow: column;
-}
-.fixed-size {
-  flex: none;
-  height: 30px;
-  background-color: black;
-  text-align: center;
-}
-.flexible-size {
-  flex: auto;
-  background-color: white;
-}
-</pre>
-
-<h3 id="Contenido_HTML_2">Contenido HTML</h3>
-
-<pre class="brush: html;">&lt;div id="document" class="vertical-box"&gt;
-  &lt;div class="fixed-size"&gt;&lt;button id="increase-size"&gt;Increase container size&lt;/button&gt;&lt;/div&gt;
-  &lt;div id="flexible-content" class="flexible-size"&gt;&lt;/div&gt;
-  &lt;div class="fixed-size"&gt;&lt;button id="decrease-size"&gt;Decrease container size&lt;/button&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Contenido_JavaScript">Contenido JavaScript</h3>
-
-<pre class="brush: js;">var height = 400;
-document.getElementById('increase-size').onclick=function() {
-  height += 10;
-  if (height &gt; 500) height = 500;
-  document.getElementById('document').style.height = (height + "px");
-}
-
-document.getElementById('decrease-size').onclick=function() {
-  height -= 10;
-  if (height &lt; 300) height = 300;
-  document.getElementById('document').style.height = (height + "px");
-}</pre>
-
-<h3 id="Resultado_2">Resultado</h3>
-
-<p>{{ EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500) }}</p>
-
-<p>Este ejemplo se ha creado para que clicar en el encabezamiento incremente el tamaño y clicar en el pie lo reduzca. Observa cómo el contenido se redimensiona automática y adecuadamente, mientras las dimensiones del encabezamiento y el pie se mantienen constantes.</p>
-
-<h2 id="Creando_un_contenedor_que_colapse_horizontalmente">Creando un contenedor que colapse horizontalmente</h2>
-
-<p>En algunos casos podrías querer componer horizontalmente un conjunto de información donde el tamaño de pantalla lo permita, pero colapsar los contenidos horizontalmente donde no. Esto es bastate sencillo con flexbox. Puedes conseguirlo añadiendo a la propiedad {{cssxref("flex-flow")}} el valor <code>wrap</code>.</p>
-
-<h3 id="Contenido_CSS_3">Contenido CSS</h3>
-
-<pre class="brush: css;highlight:[4]">.horizontal-container {
-  display: flex;
-  width: 300px;
-  flex-flow: row wrap;
-}
-.fixed-size {
-  flex: none;
-  width: 100px;
-  background-color: black;
-  color: white;
-  text-align: center;
-}
-</pre>
-
-<h3 id="Contenido_HTML_3">Contenido HTML</h3>
-
-<pre class="brush: html;">&lt;div id="container" class="horizontal-container"&gt;
-  &lt;div class="fixed-size"&gt;Element 1&lt;/div&gt;
-  &lt;div class="fixed-size"&gt;Element 2&lt;/div&gt;
-  &lt;div class="fixed-size"&gt;Element 3&lt;/div&gt;
-&lt;/div&gt;&lt;button id="increase-size"&gt;Increase container size&lt;/button&gt;&lt;button id="decrease-size"&gt;Decrease container size&lt;/button&gt;
-</pre>
-
-<h3 id="Contenido_JavaScript_2">Contenido JavaScript</h3>
-
-<pre class="brush: js;">var width = 300;
-
-document.getElementById('increase-size').onclick=function() {
-  width += 100;
-  if (width &gt; 300) width = 300;
-  document.getElementById('container').style.width = (width + "px");
-}
-
-document.getElementById('decrease-size').onclick=function() {
-  width -= 100;
-  if (width &lt; 100) width = 100;
-  document.getElementById('container').style.width = (width + "px");
-}
-</pre>
-
-<h3 id="Resultado_3">Resultado</h3>
-
-<p>{{ EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200) }}</p>
-
-<h2 id="Ver_también">Ver también</h2>
-
-<ul>
- <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Usando cajas flexibles CSS</a></li>
-</ul>
diff --git a/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html b/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html
deleted file mode 100644
index dd39986ed4..0000000000
--- a/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html
+++ /dev/null
@@ -1,376 +0,0 @@
----
-title: Usando las cajas flexibles CSS
-slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS
-translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
-translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
----
-<div>{{CSSRef}}</div>
-
-<p><span class="seoSummary">La propiedad <strong>Flexible Box</strong>, o <strong>flexbox</strong>, de CSS3 es un <a href="https://developer.mozilla.org/es/docs/Web/CSS/Layout_mode">modo de diseño</a> que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo "caja flexible" produce una mejora sobre el modelo "bloque" porque no utiliza la propiedad <span style="font-family: courier new,andale mono,monospace;">float</span>, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.</span></p>
-
-<p>Muchos diseñadores verán que el modelo "caja flexible" es más sencillo de utilizar. Los elementos "hijos" de una "caja flexible" pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adapterse al espacio visible. Posicionar los elementos "hijos" es por tanto mucho más sencillo, y los diseños complejos pueden hacerse más fácilmente y con código más limpio, ya que el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente. Esta independencia afecta intencionadamente únicamente a la representación visual, dejando el orden de locución y navegación a lo que diga el código fuente.</p>
-
-<div class="note"><strong>Nota:</strong> Aunque la especificación del diseño de "cajas flexibles" de CSS está en fase de "candidata a recomendación", no todos los navegadores la han implementado. La implementación de WebKit requiere el prefijo <code>-webkit</code>; Internet Explorer implementa una versión antigua de la especificación, con prefijo; Opera 12.10 implementa la última versión, sin prefijo. Revisa la tabla de compatibilidad de cada propiedad para saber cuál es el estado actual de compatibilidad.</div>
-
-<h2 id="El_concepto_de_cajas_flexibles">El concepto de "cajas flexibles"</h2>
-
-<p>Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.</p>
-
-<p>El algoritmo del modelo de diseño de "cajas flexibles" no parte de niguna dirección predeterminada, al contrario de lo que ocurre con el modelo "bloque", que asume una disposición vertical de los elementos, o lo que pasa con el modelo "en línea", que asume una disposición horizontal. Mientras que el modelo "bloque" funciona bien para páginas, se queda muy corto cuando se trata de aplicaciones en las que hay que tener en cuenta el cambio de orientación del dispositivo o los cambios de tamaño realizados por los gestos del usuario. El modelo de "cajas flexibles" es más apropiado para diseños de pequeña escala, mientras que el (emergente) modelo "rejilla" es adecuado para diseños de gran escala. Ambos son parte del gran esfuerzo que el "CSS Working Group" está realizando para proveer de mayor interoperabilidad a las aplicaciones web con todo tipo de usuarios, distintos modos de escritura, y otras necesidades de flexibilidad.</p>
-
-<h2 id="Vocabulario_de_cajas_flexibles">Vocabulario de "cajas flexibles"</h2>
-
-<p>Aunque al hablar de las "cajas flexibles" nos olvidamos de términos como "horizontal/en línea" y "vertical/bloque", se hace necesario emplear una nueva terminología. Fíjate en el siguiente diagrama para afianzar el vocabulario empleado en sus elementos. Se muestra un contenedor flexible que tiene una <code>flex-direction</code> de tipo <code>row</code>, que significa que los elementos flexibles se muestra uno a continuación del otro horizontalmente a lo largo del eje principal (main axis) de acuerdo con el modo de escritura preestablecido, y en este caso, la dirección en que el texto de los elementos fluye es de izquierda-a-derecha.</p>
-
-<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p>
-
-<dl>
- <dt>Contenedor flexible (Flex container)</dt>
- <dd>El elemento "padre" que contiene los elementos flexibles. Un contenedor flexible se define usando los valores <code>flex</code> o <code>inline-flex</code> en la propiedad <a href="/en/CSS/display" rel="internal" title="display"><code>display</code></a>.</dd>
- <dt>Elemento flexible (Flex item)</dt>
- <dd>
- <p>Cada hijo de un contenedor flex se convierte en un elemento flexible. Si hay texto directamente incluido en el contenedor flexible, se envuelve automáticamente en un elemento flexible anónimo.</p>
- </dd>
- <dt>Ejes</dt>
- <dd>
- <p>Cada diseño de "caja flexible" sigue dos ejes. El <strong>eje principal</strong> es el eje a lo largo del cual los elementos flexibles se suceden unos a otros. El <strong>eje secundario</strong> es el eje perpendicular al <strong>eje principal</strong>.</p>
-
- <ul>
-  <li>La propiedad <code><a href="/en/CSS/flex-direction" rel="internal" title="flex-direction">flex-direction</a></code> establece el eje principal.</li>
-  <li>La propiedad <a href="/en/CSS/justify-content" rel="internal" title="en/CSS/justify-content"><code>justify-content</code></a> define cómo los elementos flexibles se disponen a lo largo del eje principal en la línea en curso.</li>
-  <li>La propiedad <a href="/en/CSS/align-items" title="en/CSS/align-items"><code>align-items</code></a> define cómo los elementos flexibles se disponen a lo largo del eje secundario de la línea en curso.</li>
-  <li>La propiedad <a href="/en/CSS/align-self" title="en/CSS/align-self"><code>align-self</code></a> define cómo cada elemento flexible se alinea respecto al eje secundario, y sustituye al valor por defecto establecido por <code>align-items.</code></li>
- </ul>
- </dd>
- <dt>Direcciones</dt>
- <dd>
- <p>Los lados <strong>inicio principal</strong>/<strong>fin principal (main start/main end) </strong>e <strong>inicio secundario</strong>/<strong>fin </strong><strong>secundario (cross start/cross end)</strong> del contenedor flexible describen el origen y final del flujo de los elementos flexibles. Estos siguen el eje principal y secundario según el vector establecido por <code>writing-mode</code> (izquierda-a-derecha, derecha-a-izquierda, etc.).</p>
-
- <ul>
-  <li>La propiedad <a href="/en/CSS/order" rel="internal" title="en/CSS/order"><code>order</code></a> asigna elementos a grupos ordinales y determina qué elementos aparecen primero.</li>
-  <li>La propiedad <a href="/en/CSS/flex-flow" rel="internal" title="flex-flow"><code>flex-flow</code></a> combina las propiedades <a href="/en/CSS/flex-direction" rel="internal" title="flex-direction"><code>flex-direction</code></a> y <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a> para colocar los elementos flexibles.</li>
- </ul>
- </dd>
- <dt>Líneas</dt>
- <dd>
- <p>Los elementos flexibles pueden disponerse en una sola o varias líneas de acuerdo con la propiedad <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a>, que controla la dirección del eje secundario y la dirección en la que las nuevas líneas se apilan.</p>
- </dd>
- <dt>Dimensiones</dt>
- <dd>
- <p>Los términos equivalentes a "altura" y "anchura" usados en los elementos flexibles son <strong>tamaño principal (main size)</strong> and <strong>tamaño secundario (cross size),</strong> que respectivamente siguen al eje principal y al eje secundario del contenedor flexible.</p>
-
- <ul>
-  <li>La propiedades <code><a href="/en/CSS/min-height" title="/en/CSS/min-height">min-height</a></code> y <code><a href="/en/CSS/min-width" title="/en/CSS/min-width">min-width</a></code> tienen un nuevo valor, <code>auto</code> que establece el tamaño mínimo de un elemento flexible.</li>
-  <li>La propiedad <a href="/en/CSS/flex" rel="internal" title="en/CSS/flex"><code>flex</code></a> combina las propiedades <code><a href="/en/CSS/flex-basis" rel="internal" title="en/CSS/flex-basis">flex-basis</a></code>, <a href="/en/CSS/flex-grow" rel="internal" title="en/CSS/flex-grow"><code>flex-grow</code></a>, y <a href="/en/CSS/flex-shrink" rel="internal" title="en/CSS/flex-shrink"><code>flex-shrink</code></a> para establecer el grado de flexibilidad de los elementos flexibles.</li>
- </ul>
- </dd>
-</dl>
-
-<h2 id="Diseñando_una_caja_flexible">Diseñando una "caja flexible"</h2>
-
-<p>Para indicar que unos elementos tienen este estilo CSS, asigna la propiedad <a href="/en/CSS/display" title="/en/CSS/display">display</a> así:</p>
-
-<pre class="brush: css">display : flex</pre>
-
-<p>o</p>
-
-<pre class="brush: css">display : inline-flex</pre>
-
-<p>Haciendo esto, se define el elemento como contenedor flexible y todos sus "hijos" como elementos flexibles. El valor <code>flex</code> hace que el contenedor flexible sea un bloque dentro del elemento "padre" al que pertenezca. El valor <code>inline-flex</code> hace que el contenedor flexible sea un elemento "en línea" dentro del elemento "padre" al que pertenezca.</p>
-
-<div class="note"><strong>Nota:</strong> Cuando utilices un prefijo para el tipo de navegador, ponlo en la propiedad "display" no en el atributo "display". Por ejemplo, <code>display : -webkit-flex</code>.</div>
-
-<h2 id="Consideraciones_de_los_elementos_flexibles">Consideraciones de los elementos flexibles</h2>
-
-<p>El texto que se encuentre directamente dentro de un contenedor flexible, será automáticamente envuelto en un elemento flexible anónimo. Sin embargo, si un elemento flexible contiene solamente espacios en blanco no será mostrado, como si tuviera la propiedad <code style="color: rgb(93,86,54); font-size: 14px;">display:none</code>.</p>
-
-<p>Los "hijos" de un contenedor flexible que tengan un posicionamiento absoluto, se situarán de manera que su posición estática se determine en referencia a la esquina del <strong>inicio principal (main start)</strong> de su contenedor flexible.</p>
-
-<p>Actualmente, debido a un problema conocido, asignar <code style="font-size: 14px;">visibility:collapse</code> a un elemento flexible causa que sea tratado como si fuera <code style="font-size: 14px;">display:none</code> en vez de lo que se supone que debería ocurrir, es decir, como si fuera <code style="font-size: 14px;">visibility:hidden</code>. La alternativa mientras se resuelve este problema es usar <code>visibility:hidden</code> para elementos flexibles que deban comportarse como <code>visibility:collapse</code>.</p>
-
-<p>Los márgenes de elementos flexibles adyacentes no se colapsan. Usando márgenes <code>auto</code> se absorbe el espacio extra vertical y horizontalmente y puede ser utilizado para alinear o separar elementos flexibles adyacentes. Ver <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins" title="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Aligning with 'auto' margins</a> en la especificación "W3C Flexible Box Layout Model" para más detalles al respecto.</p>
-
-<p>Para asegurar un tamaño mínimo por defecto de los elementos flexibles, usa <code>min-width:auto</code> y/o <code>min-height:auto</code>. Para los elementos flexibles, el valor de atributo <code>auto</code> calcula la mínima anchura/altura del elemento para que no sea menor que la anchura/altura de su contenido, garantizando que el elemento es mostrado suficientemente grande como para que se vea su contenido. Ver {{cssxref("min-width")}}  y {{cssxref("min-height")}} para más detalles al respecto.</p>
-
-<p>Las propiedades de alineación de "cajas flexibles" realizan un "verdadero" centrado en CSS. Esto significa que los elementos flexibles permanecerán centrados, incluso si estos rebasan su contenedor flexible. Esto puede llegar a ser un problema, ya que si sobrepasan el tope superior de la página o el izquierdo (en escritura LTR de izquierda-a-derecha) o el derecho (en escritura RTL de derecha-a-izquierda), no se puede desplazar hacia ese área, incluso habiendo contenido allí. En el futuro, las propiedades de alineación se ampliarán para que tengan una opción "safe" (seguro) para controlar esta situación. De momento, si esto te preocupa, puedes usar los márgenes para conseguir el centrado, ya que estos responderán de modo seguro parando el centrado si se sobrepasan los límites. En vez de usar las propiedades <code>align-</code>, simplemente pon márgenes automáticos en los elementos flexibles que quieras centrar. En vez de usar las propiedades <code>justify-</code>, pon márgenes automáticos en los límites exteriores del primer y último elemento flexible del contenedor flexible. Los márgenes automáticos se adaptarán asumiendo el espacio sobrante, centrando los elementos flexibles donde sobre espacio, y cambiando a alineación normal donde no sobre espacio. Sin embargo, si tratas de reemplazar <code>justify-content</code> con "centrado-basado-en-márgenes" en una "caja flexible" multi-línea, probablemente no funcionará, ya que tendrías que poner márgenes en el primer y último elemento de cada línea. A menos que puedas predecir qué elementos encajarán en cada línea, no tendrás una respuesta fiable usando el "<span style="line-height: inherit;">centrado-basado-en-márgenes</span><span style="line-height: inherit;">" en el eje principal al reemplazar la propiedad </span><code style="font-size: 14px; line-height: inherit;">justify-content</code><span style="line-height: inherit;">.</span></p>
-
-<p>Recuerda que mientras el orden en que se muestran los elementos es independiente de su orden en el código fuente, esta independecia afecta solamente a la representación visual, y no al orden de locución y navegación que seguirán el orden establecido en el código fuente. Incluso la propiedad {{cssxref("order")}} no afectará a la secuencia de locución ni de navegación. Así que los desarrolladores deben preocuparse del orden de los elementos adecuadamente en el código fuente para que no se deteriore la accesibilidad del documento. </p>
-
-<h2 id="Propiedades_de_las_cajas_flexibles">Propiedades de las "cajas flexibles"</h2>
-
-<h3 id="Propiedades_que_no_afectan_a_las_cajas_flexibles">Propiedades que no afectan a las "cajas flexibles"</h3>
-
-<p>Como las "cajas flexibles" emplean un algoritmo diferente, alguna propiedades no tienen sentido para un contenedor flexible.</p>
-
-<ul>
- <li>Propiedades column-* del <a href="/en/CSS/Using_CSS_multi-column_layouts" title="/en/CSS/Using_CSS_multi-column_layouts">Módulo Multicol</a> no tienen ningún efecto en un elemento flexible.</li>
- <li>{{cssxref("float")}} y {{cssxref("clear")}} no tienen ningún efecto en un elemento flexible. Usar <code>float</code> causa que la propiedad <code>display</code> del elemento se comporte como <code>block</code>.</li>
- <li>{{cssxref("vertical-align")}} no tiene efecto en la alineación de los elementos flexibles.</li>
-</ul>
-
-<h2 id="Ejemplos">Ejemplos</h2>
-
-<h3 id="Ejemplo_básico_flex">Ejemplo básico "flex"</h3>
-
-<p>Este ejemplo básico muestra como aplicar "flexibilidad" a un elemento y como sus "hijos" se comportan flexiblemente. </p>
-
-<pre class="brush:html;">​&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-  &lt;head&gt;
-    &lt;style&gt;
-
-   .flex
-   {
-      /* basic styling */
-      width: 350px;
-      height: 200px;
-      border: 1px solid #555;
-      font: 14px Arial;
-
-      /* flexbox setup */
-      display: -webkit-flex;
-      -webkit-flex-direction: row;
-
-      display: flex;
-      flex-direction: row;
-   }
-
-   .flex &gt; div
-   {
-      -webkit-flex: 1 1 auto;
-      flex: 1 1 auto;
-
-      width: 30px; /* To make the transition work nicely.  (Transitions to/from
-                      "width:auto" are buggy in Gecko and Webkit, at least.
-                      See http://bugzil.la/731886 for more info.) */
-
-      -webkit-transition: width 0.7s ease-out;
-      transition: width 0.7s ease-out;
-   }
-
-   /* colors */
-   .flex &gt; div:nth-child(1){ background : #009246; }
-   .flex &gt; div:nth-child(2){ background : #F1F2F1; }
-   .flex &gt; div:nth-child(3){ background : #CE2B37; }
-
-   .flex &gt; div:hover
-   {
-        width: 200px;
-   }
-
-   &lt;/style&gt;
-
- &lt;/head&gt;
- &lt;body&gt;
-  &lt;p&gt;Flexbox nuovo&lt;/p&gt;
-  &lt;div class="flex"&gt;
-    &lt;div&gt;uno&lt;/div&gt;
-    &lt;div&gt;due&lt;/div&gt;
-    &lt;div&gt;tre&lt;/div&gt;
-  &lt;/div&gt;
- &lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<h3 id="Ejemplo_de_Diseño_del_Santo_Gríal">Ejemplo de "Diseño del Santo Gríal"</h3>
-
-<p>Este ejemplo muestra como la "caja flexible" proporciona la habilidad de cambiar dinámicamente el diseño para distintas resoluciones de pantalla. El diagrama siguiente ilustra la transformación.</p>
-
-<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p>
-
-<p>Aquí se muestra el caso en que el diseño de la página adaptado a un navegador tiene que mostrarse óptimamente en un smartphone. No solamente los elementos se reducen de tamaño, sino que el orden en que se muestran también cambia. La "caja flexible" lo hace muy sencillo.</p>
-
-<pre class="brush:html;">​
-&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-  &lt;head&gt;
-    &lt;style&gt;
-
-  body {
-   font: 24px Helvetica;
-   background: #999999;
-  }
-
-  #main {
-   min-height: 800px;
-   margin: 0px;
-   padding: 0px;
-   display: -webkit-flex;
-   display:         flex;
-   -webkit-flex-flow: row;
-           flex-flow: row;
-   }
-
-  #main &gt; article {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #cccc33;
-   border-radius: 7pt;
-   background: #dddd88;
-   -webkit-flex: 3 1 60%;
-           flex: 3 1 60%;
-   -webkit-order: 2;
-           order: 2;
-   }
-
-  #main &gt; nav {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #8888bb;
-   border-radius: 7pt;
-   background: #ccccff;
-   -webkit-flex: 1 6 20%;
-           flex: 1 6 20%;
-   -webkit-order: 1;
-           order: 1;
-   }
-
-  #main &gt; aside {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #8888bb;
-   border-radius: 7pt;
-   background: #ccccff;
-   -webkit-flex: 1 6 20%;
-           flex: 1 6 20%;
-   -webkit-order: 3;
-           order: 3;
-   }
-
-  header, footer {
-   display: block;
-   margin: 4px;
-   padding: 5px;
-   min-height: 100px;
-   border: 1px solid #eebb55;
-   border-radius: 7pt;
-   background: #ffeebb;
-   }
-
-  /* Too narrow to support three columns */
-  @media all and (max-width: 640px) {
-
-   #main, #page {
-    -webkit-flex-flow: column;
-            flex-flow: column;
-   }
-
-   #main &gt; article, #main &gt; nav, #main &gt; aside {
-    /* Return them to document order */
-    -webkit-order: 0;
-            order: 0;
-   }
-
-   #main &gt; nav, #main &gt; aside, header, footer {
-    min-height: 50px;
-    max-height: 50px;
-   }
-  }
-
- &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
- &lt;header&gt;header&lt;/header&gt;
- &lt;div id='main'&gt;
-    &lt;article&gt;article&lt;/article&gt;
-    &lt;nav&gt;nav&lt;/nav&gt;
-    &lt;aside&gt;aside&lt;/aside&gt;
- &lt;/div&gt;
- &lt;footer&gt;footer&lt;/footer&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<h2 id="Área_de_juego">Área de juego</h2>
-
-<p>Hay varias áreas de juego de "cajas flexibles" disponibles on-line para experimentar:</p>
-
-<ul>
- <li><a href="http://demo.agektmr.com/flexbox/" title="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li>
- <li><a href="http://the-echoplex.net/flexyboxes" title="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li>
-</ul>
-
-<h2 id="Cosas_a_tener_en_mente">Cosas a tener en mente</h2>
-
-<p>El algoritmo de las "cajas flexibles" puede ser un poco complejo de entender a veces. Hay una serie de cosas a considerar para evitar "sorpresas" cuando se utilizan las "cajas flexibles".</p>
-
-<p>Las "cajas flexibles" se comportan en función del <a href="https://developer.mozilla.org/en-US/docs/CSS/writing-mode" title="https://developer.mozilla.org/en-US/docs/CSS/writing-mode">modo de escritura</a> establecido. Esto siginifica que <strong>inicio principal</strong> (<strong>main start</strong>) y <strong>fin principal</strong> (<strong>main end</strong>) se disponen de según la posición de <strong>inicio</strong> (<strong>start</strong>) y <strong>fin</strong> (<strong>end</strong>).</p>
-
-<p><strong>inicio secundario (cross start)</strong> y <strong>fin secundario</strong> (<strong>cross end)</strong> confían en la definición de la posición <strong>inicio</strong> (<strong>start)</strong> o <strong>antes</strong> (<strong>before)</strong> que depende del valor de <a href="/en/CSS/direction" title="direction"><code>direction</code></a>.</p>
-
-<p>Los saltos de página son posibles en el diseño de "cajas flexibles" siempre que la propiedad <code>break-</code> lo permita. Las propiedades CSS3 <code>break-after</code>, <code>break-before</code> y <code>break-inside</code> así como las propiedades CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code> y <code>page-break-inside</code> se aceptan en los contenedores flexibles, también en los elementos flexibles que ellos contienen, y también en los elementos que esos elementos flexibles a su vez contienen.</p>
-
-<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Caraterística</th>
-   <th>Firefox (Gecko)</th>
-   <th>Chrome</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Soporte Básico</td>
-   <td>{{ CompatGeckoDesktop("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]<br>
-    {{ CompatGeckoDesktop("22.0") }}</td>
-   <td>21.0{{ property_prefix("-webkit") }}</td>
-   <td>10{{ property_prefix("-ms") }}(partial)</td>
-   <td>12.1</td>
-   <td>3.1{{ property_prefix("-webkit") }}(partial)<br>
-    6.1{{ property_prefix("-webkit") }}<br>
-    9</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Caraterística</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>Android</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Soporte Básico</td>
-   <td>{{ CompatGeckoMobile("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]<br>
-    {{ CompatGeckoMobile("22.0") }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>10{{ property_prefix("-ms") }}(partial)<br>
-    11</td>
-   <td>12.1</td>
-   <td>
-    <p>3.2{{ property_prefix("-webkit") }}(partial)<br>
-     7.1{{ property_prefix("-webkit") }}<br>
-     9.0</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h3 id="Notas">Notas</h3>
-
-<p>[1] Internet Explorer 10 y Safari soportan un antiguo borrador de la especificación que es incompatible. No han sido actualizados para soportar la versión final.</p>
-
-<p>[2] Firefox soporta solamente la "caja flexible" con una sola línea. Para activar el soporte de "caja flexible" el usuario tiene que cambiar la preferencia about:config "layout.css.flexbox.enabled" a <code>true</code>.</p>
-
-<p>[3] El navegador de Android hasta la versión 4.3 soporta un borrador antiguo e incompatible de la especificación. Android 4.4 ha sido actualizado para dar soporte a la versión final.</p>
-
-<p>[4] Mientras que en la implementación inicial en Opera 12.10 <code>flexbox </code>no estaba en el prefijo, obtuvo prefijos en las versiones de la 15 a la 16 de Opera y 15 a 19 de Opera Mobile con {{property_prefix("-webkit")}}. Este prefijo, fue eliminado de nuevo en Opera 17 y Opera Mobile 24.</p>
-
-<p>[5] Hasta Firefox 29, especificar <code>visibility: collapse</code> en un elemento flex causaba que fuera tratado como si fuera <code>display: none </code>en vez del comportamiento pretendido, tratándolo como si fuera <code>visibility: hidden</code>. El método alternativo sugerido es usar <code>visibility: hidden</code> para los elementos flex que debieran comportarse como si huberan sido designados <code>visibility: collapse</code>. Para más información, ver {{bug(783470)}}.</p>
-
-<h2 id="Ver_también">Ver también</h2>
-
-<ul>
- <li><a href="https://github.com/philipwalton/flexbugs">El Proyecto Flexbugs</a> para información de errores en implementación de flexbox en navegadores.</li>
-</ul>
diff --git a/files/es/web/css/css_grid_layout/conceptos_básicos_del_posicionamiento_con_rejillas/index.html b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
index afb49e2a92..afb49e2a92 100644
--- a/files/es/web/css/css_grid_layout/conceptos_básicos_del_posicionamiento_con_rejillas/index.html
+++ b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
diff --git a/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html b/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html
index 298da1dc5f..298da1dc5f 100644
--- a/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html
+++ b/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html
diff --git a/files/es/web/css/css_images/using_css_gradients/index.html b/files/es/web/css/css_images/using_css_gradients/index.html
new file mode 100644
index 0000000000..2e3f5e13a4
--- /dev/null
+++ b/files/es/web/css/css_images/using_css_gradients/index.html
@@ -0,0 +1,386 @@
+---
+title: Usando gradientes con CSS
+slug: CSS/Using_CSS_gradients
+translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
+---
+<p><a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a> posee soporte para nuevos tipos de <em>gradientes</em>  en las propiedades CSS. Usarlos <span id="result_box" lang="es"><span class="hps">en</span> <span class="hps">un</span> <span class="hps">segundo plano,</span> <span class="hps">permite mostrar</span> <span class="hps">transiciones suaves</span> <span class="hps">entre dos o</span> <span class="hps">más</span> <span class="hps">colores especificados,</span></span> <span id="result_box" lang="es"><span class="hps">evitando así</span> <span class="hps">el uso de imágenes</span> <span class="hps">para estos efectos</span></span>, lo que reduce<span id="result_box" lang="es"><span class="hps"> el tiempo</span> <span class="hps">de descarga y</span> <span class="hps">el uso de</span> <span class="hps">ancho de banda</span></span>. <span id="result_box" lang="es"><span class="hps">Además</span><span>,</span> <span class="hps">debido a que el</span> <span class="hps">gradiente</span> <span class="hps">es generado por el</span> <span class="hps">navegador</span><span>,</span></span> los <span id="result_box" lang="es"><span class="hps">objetos</span> <span class="hps">degradados</span> <span class="hps">se ven mejor</span> <span class="hps">cuando se hace un acercamiento</span></span>, y el ajuste de diseño es mucho más flexible.</p>
+
+<p>Los navegadores soportan dos tipos de gradientes: <em>lineal</em>, definido con la función <em>linear-gradient</em>, y <em>radial</em>, definido con <em>radial-gradient</em>.</p>
+
+<h2 id="Gradientes_lineales">Gradientes lineales</h2>
+
+<p>Para crear un gradiente lineal, <span id="result_box" lang="es"><span class="hps">se establece un</span> <span class="hps">punto</span> <span class="hps">de partida y una</span> <span class="hps">dirección</span> <span class="hps">(indicada por</span> <span class="hps">un ángulo)</span> <span class="hps">a lo largo de</span> <span class="hps">la cual se aplica</span> <span class="hps">el</span> <span class="hps">efecto</span></span>. Usted también puede definir <strong>paradas de color</strong>. las paradas de color son los colores que usted desea que Gecko renderise con suaves transiciones entre ellos, y usted puede específicar al menos dos de ellas, pero puede específicar más para crear efectos de gradientes más complejos.</p>
+
+<h3 id="Gradientes_lineales_simples">Gradientes lineales simples</h3>
+
+<p>Aquí está un gradiente lineal que inicia en el centro (horizontalmente) y arriba (verticalmente), e inicia en azul, transicionando a blanco.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Captura de pantalla</td>
+   <td class="header">Demo en vivo</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="/@api/deki/files/3950/=basic_linear_bluetop.png" style="text-align: center;"></td>
+   <td>
+    <div class="gradient-demo linear-top-bottom" style=""> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div style="margin-right: 255px;">
+<pre class="brush: css">/* La sintaxis vieja, obsoleta, pero todavía necesaria, con prefijo, para Opera y navegadores basados en WebKit-based */
+background: -prefix-linear-gradient(top, blue, white);
+
+/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
+background: linear-gradient(to bottom, blue, white);
+</pre>
+</div>
+
+<h3 id="Cambiando_el_mismo_gradiente_para_correr_de_izquierda_a_derecha">Cambiando el mismo gradiente para correr de izquierda a derecha:</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Captura de pantalla</td>
+   <td class="header">Demo en vivo</td>
+  </tr>
+  <tr>
+   <td><img alt="basic_linear_blueleft.png" class="default internal" src="/@api/deki/files/3951/=basic_linear_blueleft.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">/* la vieja sintaxis, obsoleta, pero todavía necesaria, prefijada, para Opera y Navegadores basados en Webkit */
+background: -prefix-linear-gradient(left, blue, white);
+
+/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
+background: linear-gradient(to right, blue, white);
+</pre>
+
+<p>Usted puede hace el gradiente sea generado diagonalmente mediante la especificación de la posición de inicio vertical y horizontal. Por ejemplo:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Captura de pantalla</td>
+   <td class="header">Demo en vivo</td>
+  </tr>
+  <tr>
+   <td><img alt="basic_linear_bluetopleft.png" class="default internal" src="/@api/deki/files/3952/=basic_linear_bluetopleft.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">/* la vieja sintaxis, obsoleta, pero todavía necesaria, prefijada, para Opera y Navegadores basados en Webkit */
+background: -prefix-linear-gradient(left top, blue, white);
+
+/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
+background: linear-gradient(to bottom right, blue, white);
+</pre>
+
+<h3 id="Usando_Angulos">Usando Angulos</h3>
+
+<p>Si usted no específica un ángulo, uno es determinado automáticamente basado en la dirección dada. Si usted desea más control sobre la dirección del gradiente, usted necesita establecer el ángulo específicamente.</p>
+
+<p>Por ejemplo, aquí hay dos gradientes, el primero con una dirección hacia la derecha, y el segundo tiene un ángulo de 70 grados.</p>
+
+<p><img alt="linear_gradient_angle.png" class="default internal" src="/@api/deki/files/3953/=linear_gradient_angle.png"></p>
+
+<p>El de la derecha usa un CSS Como este:</p>
+
+<pre class="brush: css">background: linear-gradient(70deg, black, white);
+</pre>
+
+<p>El ángulo es especificado como un ángulo entre una línea vertical y la línea del gradiente, contando en el sentido horario. En otras palabras, <code>0deg crea un gradiente vertical desde el fondo hasta el tope, mientras 90deg genera un gradiente horizontal de izquierda a derecha:</code></p>
+
+<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p>
+
+<pre class="brush: css">background: linear-gradient(&lt;angle&gt;, red, white);
+</pre>
+
+<div class="note style-wrap">
+<p><strong>Note:</strong> several browsers implement, prefixed, an older draft of the specification where <code>0deg</code> was pointing to the right rather than to the top. Pay attention in the value of the angle when mixing prefixed and standard linear-gradient, some may need to have <code>90deg</code> added to the <code>&lt;angle&gt;</code>.</p>
+</div>
+
+<h3 id="Color_stops">Color stops</h3>
+
+<p>Color stops are points along the gradient line that will have a specific color at that location. The location can be specified as either a percentage of the length of the line, or as an absolute length. You may specify as many color stops as you like in order to achieve the desired effect.</p>
+
+<p>If you specify the location as a percentage, <code>0%</code> represents the starting point, while <code>100%</code> represents the ending point; however, you can use values outside that range if necessary to get the effect you want.</p>
+
+<h4 id="Example_Three_color_stops">Example: Three color stops</h4>
+
+<p>This example specifies three color stops:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="linear_colorstops1.png" class="default internal" src="/@api/deki/files/3955/=linear_colorstops1.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
+background: -prefix-linear-gradient(top, blue, white 80%, orange);
+
+/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
+background: linear-gradient(to bottom, blue, white 80%, orange);
+</pre>
+
+<p>Note that the first and last color stops don't specify a location; because of that, values of 0% and 100% are assigned automatically. The middle color stop specifies a location of 80%, putting it most of the way toward the bottom.</p>
+
+<h4 id="Example_Evenly_spaced_color_stops">Example: Evenly spaced color stops</h4>
+
+<p>Here's an example using a wide variety of colors, all evenly spaced:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="linear_rainbow.png" class="default internal" src="/@api/deki/files/3956/=linear_rainbow.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
+background: -prefix-linear-gradient(left, red, orange, yellow, green, blue);
+
+/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
+background: linear-gradient(to right, red, orange, yellow, green, blue);
+</pre>
+
+<p>Notice that the color stops are automatically spaced evenly when no locations are specified.</p>
+
+<h3 id="Transparency_and_gradients">Transparency and gradients</h3>
+
+<p>Gradients support transparency. You can use this, for example, when stacking multiple backgrounds, to create fading effects on background images. For example:</p>
+
+<p><img alt="linear_multibg_transparent.png" class="default internal" src="/@api/deki/files/3957/=linear_multibg_transparent.png"></p>
+
+<pre class="brush: css">/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
+background: linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
+
+/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
+background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
+</pre>
+
+<p>The backgrounds are stacked with the first specified background on top, and each successive background farther away. By stacking backgrounds this way, you can create very creative effects as seen above.</p>
+
+<h2 id="Radial_gradients">Radial gradients</h2>
+
+<p>Radial gradients are specified using the {{ cssxref("radial-gradient") }} functional notation. The syntax is similar to that for linear gradients, except you can specify the gradient's ending shape (whether it should be a circle or ellipse) as well as its size. By default, the ending shape is an ellipse with the same proportions than the container's box.</p>
+
+<h3 id="Color_stops_2">Color stops</h3>
+
+<p>You specify color stops the same way as for linear gradients. The gradient line extends out from the starting position in all directions.</p>
+
+<h4 id="Example_Evenly_spaced_color_stops_2">Example: Evenly spaced color stops</h4>
+
+<p>By default, as with linear gradients, the color stops are evenly spaced:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_gradient_even.png" class="default internal" src="/@api/deki/files/3958/=radial_gradient_even.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(red, yellow, rgb(30, 144, 255));
+</pre>
+
+<h4 id="Example_Explicitly_spaced_color_stops">Example: Explicitly spaced color stops</h4>
+
+<p>Here we specify specific locations for the color stops:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_gradient_varied.png" class="default internal" src="/@api/deki/files/3959/=radial_gradient_varied.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
+</pre>
+
+<h3 id="Size">Size</h3>
+
+<p>This is one of the areas in which radial gradients differ from linear gradients. You can provide a size value that specifies the point that defines the size of the circle or ellipse. See <a href="/en-US/docs/CSS/radial-gradient#Size_constants" title="en-US/docs/CSS/-moz-radial-gradient#Size constants">this description of the size constants</a> for specifics.</p>
+
+<h4 id="Example_closest-side_for_ellipses">Example: closest-side for ellipses</h4>
+
+<p>This ellipse uses the <code>closest-side</code> size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.</p>
+
+<table class="standard-table" style="width: 520px;">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_ellipse_size1.png" class="default internal" src="/@api/deki/files/3960/=radial_ellipse_size1.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
+</pre>
+
+<h4 id="Example_farthest-corner_for_ellipses">Example: farthest-corner for ellipses</h4>
+
+<p>This example is similar to the previous one, except that its size is specified as <code>farthest-corner</code>, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.</p>
+
+<table class="standard-table" style="width: 520px;">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_ellipse_size2.png" class="default internal" src="/@api/deki/files/3961/=radial_ellipse_size2.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
+</pre>
+
+<h4 id="Example_closest-side_for_circles">Example: closest-side for circles</h4>
+
+<p>This example uses <code>closest-side</code>, which determines the circle's size as the distance between the start point (the center) and the closest side.</p>
+
+<table class="standard-table" style="width: 520px;">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_circle_size1.png" class="default internal" src="/@api/deki/files/3962/=radial_circle_size1.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
+</pre>
+
+<p>Here, the circle's radius is half the height of the box, since the top and bottom edges are equidistant from the start point and are closer than the left and right edges.</p>
+
+<h2 id="Repeating_gradients">Repeating gradients</h2>
+
+<p>The {{ cssxref("linear-gradient") }} and {{ cssxref("radial-gradient") }} properties don't support automatically repeating the color stops. However, the {{ cssxref("repeating-linear-gradient") }} and {{ cssxref("repeating-radial-gradient") }} properties are available to offer this functionality.</p>
+
+<h3 id="Examples_Repeating_linear_gradient">Examples: Repeating linear gradient</h3>
+
+<p>This example uses {{ cssxref("repeating-linear-gradient") }} to create a gradient:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="repeating_linear_gradient.png" class="default internal" src="/@api/deki/files/3964/=repeating_linear_gradient.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
+</pre>
+
+<p>Another example using the {{ cssxref("repeating-linear-gradient") }} property.</p>
+
+<p><a href="/@api/deki/files/6192/=repeat_background_gradient_checked.png" title="repeat_background_gradient_checked.png"><img alt="repeat_background_gradient_checked.png" class="default internal" src="/@api/deki/files/6192/=repeat_background_gradient_checked.png?size=thumb" style="height: 160px; width: 160px;"></a></p>
+
+<pre class="brush: css">background-color: #000;
+background-image: repeating-linear-gradient(90deg, transparent, transparent 50px,
+      rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
+      rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
+      rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
+      rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
+      rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
+      rgba(255, 206, 0, 0.25) 166px),
+repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
+      rgba(143, 77, 63, 0.25) 10px),
+repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
+      rgba(143, 77, 63, 0.25) 10px);
+</pre>
+
+<h3 id="Example_Repeating_radial_gradient">Example: Repeating radial gradient</h3>
+
+<p>This example uses {{ cssxref("repeating-radial-gradient") }} to create a gradient:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="repeating_radial_gradient.png" class="default internal" src="/@api/deki/files/3965/=repeating_radial_gradient.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Gradient-related reference articles: {{cssxref("&lt;image&gt;")}}, {{cssxref("&lt;gradient&gt;")}}, {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}.</li>
+</ul>
diff --git a/files/es/web/css/css_logical_properties/dimensionamiento/index.html b/files/es/web/css/css_logical_properties/sizing/index.html
index a5a9b4063c..a5a9b4063c 100644
--- a/files/es/web/css/css_logical_properties/dimensionamiento/index.html
+++ b/files/es/web/css/css_logical_properties/sizing/index.html
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html b/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.html
index 0278b3254f..0278b3254f 100644
--- a/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html
+++ b/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.html
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/index.html b/files/es/web/css/css_positioning/understanding_z_index/index.html
index 14971890e0..14971890e0 100644
--- a/files/es/web/css/css_positioning/entendiendo_z_index/index.html
+++ b/files/es/web/css/css_positioning/understanding_z_index/index.html
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html
index 81b145e1a3..81b145e1a3 100644
--- a/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html
+++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
index def9c5ea8e..def9c5ea8e 100644
--- a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html
+++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html
index 2955b43b7f..2955b43b7f 100644
--- a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html
+++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html
index c41d8b56ad..c41d8b56ad 100644
--- a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html
+++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
index 97038e7bae..97038e7bae 100644
--- a/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html
+++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
index 1daf172048..1daf172048 100644
--- a/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html
+++ b/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
diff --git a/files/es/web/css/selectores_css/index.html b/files/es/web/css/css_selectors/index.html
index 20baaf25a6..20baaf25a6 100644
--- a/files/es/web/css/selectores_css/index.html
+++ b/files/es/web/css/css_selectors/index.html
diff --git a/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html b/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
index fe51517a2b..fe51517a2b 100644
--- a/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html
+++ b/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
diff --git a/files/es/web/css/texto_css/index.html b/files/es/web/css/css_text/index.html
index f0c3c934b6..f0c3c934b6 100644
--- a/files/es/web/css/texto_css/index.html
+++ b/files/es/web/css/css_text/index.html
diff --git a/files/es/web/css/transiciones_de_css/index.html b/files/es/web/css/css_transitions/using_css_transitions/index.html
index 62142638c4..62142638c4 100644
--- a/files/es/web/css/transiciones_de_css/index.html
+++ b/files/es/web/css/css_transitions/using_css_transitions/index.html
diff --git a/files/es/web/css/-moz-font-language-override/index.html b/files/es/web/css/font-language-override/index.html
index 1749002182..1749002182 100644
--- a/files/es/web/css/-moz-font-language-override/index.html
+++ b/files/es/web/css/font-language-override/index.html
diff --git a/files/es/web/css/grid-gap/index.html b/files/es/web/css/gap/index.html
index 6f27042610..6f27042610 100644
--- a/files/es/web/css/grid-gap/index.html
+++ b/files/es/web/css/gap/index.html
diff --git a/files/es/web/css/selectores_hermanos_generales/index.html b/files/es/web/css/general_sibling_combinator/index.html
index 96c87148b9..96c87148b9 100644
--- a/files/es/web/css/selectores_hermanos_generales/index.html
+++ b/files/es/web/css/general_sibling_combinator/index.html
diff --git a/files/es/web/css/gradiente/index.html b/files/es/web/css/gradient/index.html
index ae187f2521..ae187f2521 100644
--- a/files/es/web/css/gradiente/index.html
+++ b/files/es/web/css/gradient/index.html
diff --git a/files/es/web/css/valor_inicial/index.html b/files/es/web/css/initial_value/index.html
index a6bbcdf32d..a6bbcdf32d 100644
--- a/files/es/web/css/valor_inicial/index.html
+++ b/files/es/web/css/initial_value/index.html
diff --git a/files/es/web/css/introducción/boxes/index.html b/files/es/web/css/introducción/boxes/index.html
deleted file mode 100644
index caccdd80b2..0000000000
--- a/files/es/web/css/introducción/boxes/index.html
+++ /dev/null
@@ -1,335 +0,0 @@
----
-title: Boxes
-slug: Web/CSS/Introducción/Boxes
-translation_of: Learn/CSS/Building_blocks
-translation_of_original: Web/Guide/CSS/Getting_started/Boxes
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Esta es la sección 11 del Tutorial de  <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> ; <span id="result_box" lang="es"><span class="hps alt-edited">se describen</span> <span class="hps">cómo se puede</span> <span class="hps">usar CSS para</span> <span class="hps">controlar el espacio</span> <span class="hps">que un elemento</span> <span class="hps">ocupa</span> <span class="hps">cuando se muestra</span><span>.</span> <span class="hps">En</span> <span class="hps">su</span> <span class="hps">documento de ejemplo</span><span>, se cambia el</span> <span class="hps">espacio</span> <span class="hps alt-edited">y se agregan</span> <span class="hps">reglas</span> <span class="hps">decorativos.</span></span></p>
-
-<h2 class="clearLeft" id="Información_Cajas"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Cajas</span></span></h2>
-
-<p><span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">el navegador muestra</span> <span class="hps">un elemento</span><span>, el elemento</span> <span class="hps alt-edited">ocupa un espacio</span><span>.</span> <span class="hps">Hay</span> <span class="hps">cuatro partes en</span> <span class="hps">el espacio</span> <span class="hps">que ocupa</span><span>.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">En el centro,</span> <span class="hps">existe</span> <span class="hps">el espacio que el</span> <span class="hps">elemento</span> <span class="hps">necesita para mostrar</span> <span class="hps">su contenido.</span> <span class="hps">Alrededor de</span> <span class="hps">eso, no hay</span> <span class="hps">relleno.</span> <span class="hps alt-edited">En torno</span> <span class="hps alt-edited">de est, hay</span> <span class="hps alt-edited">un borde</span><span>.</span> <span class="hps alt-edited">En torno</span> <span class="hps alt-edited">esto, hay</span> <span class="hps">un margen</span> <span class="hps">que separa</span> <span class="hps alt-edited">este elemento</span> <span class="hps">de otros elementos</span><span>.</span></span></p>
-
-<table>
- <tbody>
-  <tr>
-   <td style="width: 22em;">
-    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
-    <p style="text-align: center; margin: 0px;">margin</p>
-
-    <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p>
-
-    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
-    <p style="text-align: center;">padding</p>
-
-    <div style="background-color: #eee;">
-    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p>
-    </div>
-    </div>
-    </div>
-
-    <p><span class="short_text" id="result_box" lang="es"><span class="hps">El</span> <span class="hps">gris pálido</span> <span class="hps">muestra</span> <span class="hps">partes del</span> <span class="hps">diseño.</span></span></p>
-   </td>
-   <td>
-    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
-    <p style="text-align: center; margin: 0px;"> </p>
-
-    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
-
-    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
-    <p style="text-align: center;"> </p>
-
-    <div style="background-color: #fff;">
-    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p>
-    </div>
-    </div>
-    </div>
-
-    <p><span class="short_text" id="result_box" lang="es"><span class="hps">Esto es</span> <span class="hps">lo que se ve</span> <span class="hps">en su navegador</span><span>.</span></span></p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps alt-edited">relleno, el borde</span> <span class="hps">y</span> <span class="hps alt-edited">el margen</span> <span class="hps">pueden tener diferentes tamaños</span> <span class="hps">en la parte superior</span><span class="alt-edited">, derecha, inferior</span> <span class="hps">e izquierda del</span> <span class="hps">elemento</span><span>.</span> <span class="hps alt-edited">Alguno o</span> <span class="hps">todos estos tamaños</span> <span class="hps">pueden</span> <span class="hps">ser cero</span><span>.</span></span></p>
-
-<h3 id="Coloreando">Coloreando</h3>
-
-<p><span id="result_box" lang="es"><span class="hps">El relleno es</span> <span class="hps">siempre</span> <span class="hps">el mismo color que</span> <span class="hps">el elemento del fondo</span><span>.</span> <span class="hps">Así que</span> <span class="hps">cuando se establece el</span> <span class="hps">color de fondo</span><span>, se ve el</span> <span class="hps">color aplicado</span> <span class="hps">al elemento</span> <span class="hps">en sí y su</span> <span class="hps">relleno.</span> <span class="hps">El margen es</span> <span class="hps">siempre</span> <span class="hps">transparente.</span></span></p>
-
-<table>
- <tbody>
-  <tr>
-   <td style="width: 22em;">
-    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
-    <p style="text-align: center; margin: 0px;">margin</p>
-
-    <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p>
-
-    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
-    <p style="text-align: center;">padding</p>
-
-    <div style="background-color: #ded;">
-    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p>
-    </div>
-    </div>
-    </div>
-
-    <p><span class="short_text" id="result_box" lang="es"><span class="hps">El elemento tiene</span> <span class="hps">un fondo verde</span> <span class="hps">.</span></span></p>
-   </td>
-   <td>
-    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
-    <p style="text-align: center; margin: 0px;"> </p>
-
-    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
-
-    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
-    <p style="text-align: center;"> </p>
-
-    <div style="background-color: #efe;">
-    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p>
-    </div>
-    </div>
-    </div>
-
-    <p><span class="short_text" id="result_box" lang="es"><span class="hps">Esto es</span> <span class="hps">lo que se ve</span> <span class="hps">en su navegador</span><span>.</span></span></p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Borders">Borders</h3>
-
-<p><span id="result_box" lang="es"><span class="hps">Puede utilizar</span> <span class="hps alt-edited">los bordes</span> <span class="hps">para decorar</span> <span class="hps">elementos con</span> <span class="hps">líneas o cuadros</span><span>.</span><br>
- <br>
- <span class="hps">Para especificar</span> <span class="hps">la misma</span> <span class="hps">frontera</span> <span class="hps">todo</span> <span class="hps">alrededor de un elemento</span><span>, utilice la </span><span class="hps">propiedad</span></span><span lang="es"><span> </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"border</span><span>")}</span><span>}</span> <span class="hps">.</span> <span class="hps">Especifique</span> <span class="hps">el ancho</span> <span class="hps">(por lo general</span> <span class="hps">en píxeles</span> <span class="hps">para la visualización</span> <span class="hps">en una pantalla</span><span>)</span><span>, el estilo</span><span>, y el color</span><span>.</span><br>
- <br>
- <span class="hps">Los estilos son</span><span>:</span></span></p>
-
-<table style="margin-left: 2em;">
- <tbody>
-  <tr>
-   <td style="width: 6em;">
-    <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div>
-   </td>
-   <td style="width: 6em;">
-    <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div>
-   </td>
-   <td style="width: 6em;">
-    <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div>
-   </td>
-   <td style="width: 6em;">
-    <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div>
-   </td>
-  </tr>
-  <tr>
-   <td style="width: 6em;">
-    <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div>
-   </td>
-   <td style="width: 6em;">
-    <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div>
-   </td>
-   <td style="width: 6em;">
-    <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div>
-   </td>
-   <td style="width: 6em;">
-    <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p><span id="result_box" lang="es"><span class="hps">También puede establecer</span> <span class="hps">el estilo a </span></span><em><strong><code>none</code> </strong>(</em><span lang="es"><em> </em><span class="hps">ninguno) o</span> </span><strong><em><code>hidden</code> </em></strong><span lang="es"><span class="hps alt-edited">(oculto), </span> <span class="hps">para eliminar</span> <span class="hps">explícitamente</span> <span class="hps">la frontera <code>(</code></span></span><code><em><strong>border </strong></em>)</code><span lang="es"><span>,</span> <span class="hps">o</span> <span class="hps">establecer el color</span> como <span class="hps">transparente</span> <span class="hps">para hacer</span> <span class="hps">la frontera</span> <span class="hps">invisible</span> <span class="hps">sin cambiar</span> <span class="hps">el diseño.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">Para especificar</span> <span class="hps alt-edited">los bordes</span> <span class="hps">de uno en uno</span> por separado<span>, utilice las propiedades</span><span>:</span> <span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-top</span><span>")}</span><span class="atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-right</span><span>")}</span><span class="atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-bottom</span><span>")}</span> <span class="hps atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-left</span><span>")}</span><span>}</span><span>.</span> <span class="hps">Usted</span> <span class="hps">puede utilizar estas para</span> <span class="hps">especificar</span> <span class="hps alt-edited">un borde</span> <span class="hps"> solo en un lado</span><span>,</span> <span class="hps">o</span> <span class="hps">diferentes</span> <span class="hps alt-edited">los bordes</span> <span class="hps">en diferentes lados</span><span>.</span></span></p>
-
-<div class="tuto_example">
-<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Ejemplo</span></span></div>
-
-<p><br>
- <span id="result_box" lang="es"><span class="hps">Esta norma</span> <span class="hps">establece el</span> <span class="hps">color de fondo y</span> <span class="hps">el borde superior</span> <span class="hps">de los elementos de</span> <span class="hps">la etiqueta <code><strong><em>h3</em></strong></code></span><span>:</span></span></p>
-
-<pre class="brush:css">h3 {
-  border-top: 4px solid #7c7; /* mid green */
-  background-color: #efe;     /* pale green */
-  color: #050;                /* dark green */
-  }
-</pre>
-
-<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p>
-
-<table>
- <tbody>
-  <tr>
-   <td>
-    <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Stylish heading</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">hace que</span> <span class="hps">las imágenes</span> sean <span class="hps">fáciles de ver</span><span>, dándoles</span> <span class="hps">un borde</span> <span class="hps">gris medio</span> a <span class="hps">todo</span><span>:</span></span></p>
-
-<pre class="brush:css">img {border: 2px solid #ccc;}
-</pre>
-
-<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p>
-
-<table>
- <tbody>
-  <tr>
-   <td>Image:</td>
-   <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h3 id="Márgenes_y_relleno"><span id="result_box" lang="es"><span class="hps">Márgenes y</span> <span class="hps">relleno</span></span></h3>
-
-<p><br>
- <span id="result_box" lang="es"><span class="hps">Use</span>  <span class="hps">márgenes y el relleno</span> <span class="hps">para ajustar</span> <span class="hps">las posiciones de</span> <span class="hps">los elementos</span> <span class="hps atn">'</span><span>y crear</span> <span class="hps">el espacio</span> <span class="hps">que les rodea.</span><br>
- <br>
- <span class="hps">Utilice la propiedad </span></span><span lang="es"><span class="hps"> </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps">"</span></span>margin<span lang="es"><span>")}</span><span>}</span> <span class="hps">o</span> la <span class="hps">propiedad </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps">"</span></span>padding<span lang="es"><span>")}</span><span>}</span> <span class="hps">para establecer</span> <span class="hps">los</span> <span class="hps">márgenes y el </span><span class="hps"> relleno</span> con sus <span class="hps">anchuras</span> <span class="hps">respectivamente.</span><br>
- <br>
- <span class="hps">Si especifica</span> <span class="hps">una</span> <span class="hps">anchura,</span> <span class="hps">que se aplica</span> <span class="hps">en todo el</span> <span class="hps">elemento</span> <span class="hps">(arriba</span><span>, derecha,</span> <span class="hps">abajo y de izquierda</span><span>)</span><span>.</span><br>
- <br>
- <span class="hps">Si especifica</span> <span class="hps">dos anchos</span><span>,</span> <span class="hps">la</span> <span class="hps">primera se aplica</span> <span class="hps">a la</span> <span class="hps">parte superior e inferior</span><span>,</span> <span class="hps">la segunda a la</span> <span class="hps">derecha y la izquierda</span><span>.</span><br>
- <br>
- <span class="hps">Puede especificar</span> <span class="hps">los cuatro</span> <span class="hps">anchos</span> <span class="hps">en el orden</span><span>:</span> <span class="hps">arriba, derecha</span><span>,</span> <span class="hps">abajo, de izquierda</span><span>.</span></span></p>
-
-<div class="tuto_example">
-<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Ejemplo</span></span></div>
-
-<p><br>
- <span id="result_box" lang="es"><span class="hps">Esta norma</span> <span class="hps">delimita</span> <span class="hps">párrafos con</span> <span class="hps">la  </span></span><code><em><strong> class</strong></em></code> <code>remark</code><span lang="es"><span>, dándoles</span> <span class="hps">un borde rojo</span> <span class="hps">a su alrededor.</span><br>
- <br>
- <span class="hps">El </span></span><code><strong><em>padding </em></strong></code>(relleno)<code><strong><em> </em></strong></code><span lang="es"><span class="hps">separa </span></span><span lang="es"><span class="hps">un poco </span></span><span lang="es"><span class="hps">todo</span> <span class="hps"> el borde</span> <span class="hps">del texto</span> <span class="hps">.</span></span><br>
- <br>
- <span id="result_box" lang="es"><span class="hps">A</span> <span class="hps">la izquierda una </span> <span class="hps alt-edited">sangría</span> <span class="hps alt-edited">desde el margen</span> <span class="hps">del</span> <span class="hps">párrafo con respecto al</span> <span class="hps">resto del texto <code><em><strong>(</strong></em></code></span></span><code><em><strong>margin-left</strong></em></code><span lang="es"><span><code><em><strong> )</strong></em></code>:</span></span></p>
-
-<pre class="brush:css">p.remark {
-  border: 2px solid red;
-  padding: 4px;
-  margin-left: 24px;
-  }
-</pre>
-
-<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p>
-
-<table>
- <tbody>
-  <tr>
-   <td>
-    <p><span class="short_text" id="result_box" lang="es"><span class="hps alt-edited">A continuación</span> <span class="hps">es un párrafo</span> <span class="hps">normal.</span></span></p>
-
-    <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Aqui con la clase remark.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Más</span> <span class="hps">detalles</span></span></div>
-
-<p><span id="result_box" lang="es"><span class="hps">Cuando se utiliza</span> <span class="hps">márgenes y el relleno</span> <span class="hps">para ajustar</span> <span class="hps alt-edited">la manera en</span> <span class="hps alt-edited">que los elementos</span> <span class="hps">se disponen</span><span>,</span> <span class="hps">sus</span> <span class="hps">reglas de estilo</span> <span class="hps">interactúan</span> <span class="hps alt-edited">con los estilos</span> <span class="hps">de tu navegador</span> <span class="hps alt-edited">por defecto</span> <span class="hps alt-edited">y pueden ser</span> <span class="hps alt-edited">muy complejas.</span><br>
- <br>
- <span class="hps">Los distintos navegadores</span> <span class="hps">ponen</span> <span class="hps alt-edited">que los elementos</span> <span class="hps">de manera diferente</span><span>.</span> <span class="hps">Los</span> <span class="hps alt-edited">resultados pueden</span> <span class="hps">ser similar</span> <span class="hps alt-edited">,hasta que nuestro</span> <span class="hps alt-edited">hoja de estilos</span> <span class="hps">cambia las cosas</span><span>.</span> <span class="hps">A veces esto</span> <span class="hps">puede hacer que sus</span> <span class="hps">hojas de estilo</span> <span class="hps alt-edited">den</span> <span class="hps">resultados sorprendentes.</span><br>
- <br>
- <span class="hps">Para</span> <span class="hps">obtener</span> <span class="hps">el resultado deseado</span><span>, es posible que</span> <span class="hps">tenga que cambiar</span> <span class="hps alt-edited">el marcado</span> <span class="hps">de su</span> <span class="hps">documento.</span> <span class="hps">La</span> <span class="hps">página siguiente de</span> <span class="hps">este tutorial</span> <span class="hps">tiene más</span> <span class="hps">información al respecto.</span><br>
- <br>
- <span class="hps">Para obtener información</span> <span class="hps">detallada acerca</span> <span class="hps">de relleno</span><span>, márgenes</span> <span class="hps">y bordes</span><span>, consulte</span> <span class="hps">la página de referencia</span> <span class="hps">Modelo de caja</span><span>.</span></span></p>
-</div>
-
-<h2 id="Acción_Agregar_bordes"><span id="result_box" lang="es"><span class="hps">Acción</span><span>:</span> <span class="hps">Agregar bordes</span></span></h2>
-
-<p>Edite su archivo CSS , <strong><em>style2.css</em></strong>. <span id="result_box" lang="es"><span class="hps alt-edited">Agrega</span> <span class="hps">esta regla</span> <span class="hps">para dibujar una línea</span> <span class="hps">a través de la</span> <span class="hps">página</span> <span class="hps">sobre cada</span> <span class="hps alt-edited">encabezado</span><span>:</span></span></p>
-
-<pre class="brush:css">h3 {border-top: 1px solid gray;}
-</pre>
-
-<p><span id="result_box" lang="es"><span class="hps">Si usted tomó</span> <span class="hps alt-edited">el cambio </span><span class="hps alt-edited">en la última página</span><span>,</span> <span class="hps alt-edited">modificara la regla</span> <span class="hps">que ha creado,</span> <span class="hps">de lo contrario</span> <span class="hps alt-edited">agregar la</span> <span class="hps alt-edited">nueva regla</span> <span class="hps alt-edited">para añadir espacio</span> <span class="hps">debajo de cada</span> <span class="hps alt-edited">ítem de la lista</span><span>:</span></span></p>
-
-<pre class="brush:css">li {
-  list-style: lower-roman;
-  margin-bottom: 8px;
-  }
-</pre>
-
-<p><span class="short_text" id="result_box" lang="es"><span class="hps">Actualice el navegador</span> <span class="hps">para ver el resultado</span><span>:</span></span></p>
-
-<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
- <tbody>
-  <tr>
-   <td>
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
-
-    <ul style="">
-     <li style="margin-bottom: 8px;">Arctic</li>
-     <li style="margin-bottom: 8px;">Atlantic</li>
-     <li style="margin-bottom: 8px;">Pacific</li>
-     <li style="margin-bottom: 8px;">Indian</li>
-     <li style="margin-bottom: 8px;">Southern</li>
-    </ul>
-
-    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
-
-    <p><strong>1: </strong>Lorem ipsum</p>
-
-    <p><strong>2: </strong>Dolor sit</p>
-
-    <p><strong>3: </strong>Amet consectetuer</p>
-
-    <p><strong>4: </strong>Magna aliquam</p>
-
-    <p><strong>5: </strong>Autem veleum</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<div class="tuto_example">
-<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">El reto</span></span></div>
-
-<p><br>
- <span id="result_box" lang="es"><span class="hps alt-edited">Agrega</span> <span class="hps">una regla a</span> <span class="hps">la hoja de estilos</span><span>, para que</span> <span class="hps alt-edited">aparesca un amplio</span> <span class="hps alt-edited">borde</span> <span class="hps">alrededor de los</span> <span class="hps alt-edited">la lista de océanos, en</span> <span class="hps">un color</span> <span class="hps">que le recuerda</span> <span class="hps">al mar</span><span>, algo</span> <span class="hps">como esto:</span></span></p>
-
-<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
- <tbody>
-  <tr>
-   <td>
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
-
-    <div style="border: 12px solid #69b; padding-left: 1em;">
-    <ul style="">
-     <li style="margin-bottom: 8px;">Arctic</li>
-     <li style="margin-bottom: 8px;">Atlantic</li>
-     <li style="margin-bottom: 8px;">Pacific</li>
-     <li style="margin-bottom: 8px;">Indian</li>
-     <li style="margin-bottom: 8px;">Southern</li>
-    </ul>
-    </div>
-
-    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
-
-    <p><strong>. . .</strong></p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p> </p>
-
-<p><span id="result_box" lang="es"><span class="hps atn">(</span><span>No es necesario</span> <span class="hps alt-edited">que coincida con</span> <span class="hps">el ancho</span> <span class="hps">y el color</span> <span class="hps">que se ve aquí</span> <span class="hps">exactamente</span><span>.</span><span>)</span></span></p>
-</div>
-
-<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes">Ver una solución a este desafío.</a></p>
-
-<h2 id="What_next">What next?</h2>
-
-<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout") }}<span id="result_box" lang="es"><span class="hps">Al especificar</span> <span class="hps">márgenes y el relleno</span><span>, se</span> <span class="hps">modificó el</span> <span class="hps">diseño del documento</span><span>.</span> <span class="hps">En la página siguiente</span> <span class="hps">se cambia</span> el </span><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout">layout</a><span id="result_box" lang="es"><span class="hps"> de su</span> <span class="hps">documento</span> <span class="hps">de otra manera.</span></span></p>
diff --git a/files/es/web/css/introducción/cascading_and_inheritance/index.html b/files/es/web/css/introducción/cascading_and_inheritance/index.html
deleted file mode 100644
index b47218eb7a..0000000000
--- a/files/es/web/css/introducción/cascading_and_inheritance/index.html
+++ /dev/null
@@ -1,125 +0,0 @@
----
-title: Cascada y herencia
-slug: Web/CSS/Introducción/Cascading_and_inheritance
-translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
-translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ previousPage("/es/docs/Web/CSS/Introduction/How_CSS_works", "Cómo funciona el CSS.")}}<span id="result_box" lang="es"><span class="hps">Esta</span> <span class="hps">es</span> <span class="hps">la cuarta sección </span> <span class="alt-edited hps">del</span> <span class="hps">tutorial</span><span> <span class="hps">CSS</span> <span class="hps">Primeros pasos</span>;</span> <span class="hps">que</span> <span class="hps">describe cómo</span> <span class="hps">interactúan</span> <span class="hps">las hojas de estilo</span> <span class="hps">en cascada,</span> <span class="hps">y</span> <span class="hps">cómo los elementos</span> <span class="hps">heredan</span> <span class="hps">el estilo</span> <span class="hps">de sus padres.</span> <span class="alt-edited hps">Usted agrega</span> <span class="hps">a</span> <span class="hps">la hoja de estilos</span> <span class="alt-edited hps">de ejemplo,</span> <span class="hps">utilizando la herencia</span> <span class="alt-edited hps">para alterar</span> <span class="hps">el estilo de</span> <span class="alt-edited hps">muchas partes del</span> <span class="hps">documento</span> <span class="hps">en un solo paso</span><span>.</span></span></p>
-
-<h2 class="clearLeft" id="Información_Cascada_y_herencia"><span class="short_text" id="result_box" lang="es"><span class="hps">Información</span><span>:</span> <span class="hps">Cascada</span> <span class="hps">y</span> <span class="hps">herencia</span></span></h2>
-
-<p><span id="result_box" lang="es"><span class="hps">El estilo</span> <span class="hps">final para</span> <span class="hps">un elemento</span> <span class="hps">se puede especificar en</span> <span class="hps">muchos lugares</span> <span class="hps">diferentes</span><span>, que pueden interactuar</span> <span class="hps">de una manera compleja</span><span>.</span> <span class="hps">Esta interacción</span> <span class="hps">compleja</span> <span class="hps">hace</span> <span class="alt-edited hps">el CSS</span> <span class="alt-edited hps">poderoso</span><span>,</span> <span class="alt-edited hps">pero puede también</span> <span class="hps">hacer que sea</span> <span class="hps">confuso y difícil</span> <span class="hps">de depurar.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="alt-edited hps">Tres</span> <span class="alt-edited hps">principales fuentes de</span> <span class="hps">información de estilo</span> <span class="alt-edited hps">forman</span> <span class="hps">una <em>cascada</em></span><span>.</span> <span class="alt-edited hps">Estas son:</span></span></p>
-
-<ul>
- <li><span id="result_box" lang="es"><span class="hps">Estilos</span> <span class="hps">por defecto del navegador</span> <span class="hps">para</span> <span class="alt-edited hps">del lenguaje de marcado</span><span>.</span></span></li>
- <li><span id="result_box" lang="es"><span class="hps">Estilos</span> <span class="hps">especificados</span> <span class="hps">por un usuario</span> <span class="hps">que está leyendo</span> <span class="hps">el documento</span><span>.</span></span></li>
- <li><span id="result_box" lang="es"><span class="hps">Los</span> <span class="hps">estilos</span> <span class="hps">relacionados en </span><span class="hps">el documento</span> <span class="hps">por su autor</span><span>.</span> <span class="hps">Estos pueden</span> <span class="hps">ser especificados</span> <span class="hps">en tres lugares</span><span>:</span></span>
-  <ul>
-   <li><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">un archivo externo</span><span>:</span> <span class="hps">este tutorial</span> <span class="alt-edited hps">aborda</span> <span class="hps">principalmente</span> <span class="hps">este</span> <span class="hps">método para definir</span> <span class="hps">los estilos.</span></span></li>
-   <li><span id="result_box" lang="es"><span class="hps">En una definición</span> <span class="hps">al principio</span> <span class="hps">del documento</span><span>: utilice</span> <span class="alt-edited hps">este método únicamente</span> <span class="hps">para los estilos</span> <span class="hps">que se utilizan sólo</span> <span class="hps">en esa página</span> <span class="hps">.</span></span></li>
-   <li><span id="result_box" lang="es"><span class="hps">En un</span> <span class="hps">elemento específico</span> <span class="hps">en el cuerpo</span> <span class="hps">del documento</span><span>:</span> <span class="hps">este</span> <span class="hps">es el método menos</span> <span class="alt-edited hps">fácil de mantener</span><span>,</span> <span class="hps">pero puede ser utilizado</span> <span class="alt-edited hps">para la probar.</span></span></li>
-  </ul>
- </li>
-</ul>
-
-<p><span id="result_box" lang="es"><span class="hps">El estilo del</span> <span class="hps">usuario modifica</span> <span class="hps">el estilo</span> <span class="hps">por defecto del navegador</span><span>.</span> <span class="alt-edited hps">El estilo</span> <span class="hps">del autor del documento</span> <span class="alt-edited hps">a continuación</span> <span class="hps">modifica</span> <span class="hps">el estilo</span> <span class="hps">un poco más.</span> <span class="hps">En este tutorial,</span> <span class="hps">usted es el autor</span> <span class="hps">del documento</span> <span class="alt-edited hps">de ejemplo,</span> <span class="hps">y</span> <span class="hps">solo trabaja</span> <span class="hps">con</span> <span class="hps">hojas de estilo</span> <span class="hps">del autor</span><span>.</span></span></p>
-
-<div class="tuto_example">
-<div class="tuto_type">Ejemplo</div>
-
-<p><span id="result_box" lang="es"><span class="hps">Cuando lea este</span> <span class="hps">documento en un navegador</span><span>,</span> <span class="hps">parte del estilo</span> <span class="alt-edited hps">que ves</span> <span class="alt-edited hps">proviene</span> <span class="alt-edited hps">por defecto</span> <span class="hps">de su</span> <span class="alt-edited hps">navegador de</span> <span class="hps">HTML</span><span>.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">Parte del</span> <span class="hps">estilo</span> <span class="hps">podría venir de</span> <span class="alt-edited hps">los ajustes </span></span><span id="result_box" lang="es"><span class="hps">personalizados </span></span><span id="result_box" lang="es"><span class="alt-edited hps">del navegador</span> <span class="hps">o</span> <span class="alt-edited hps">de un archivo</span> <span class="alt-edited hps">de definición de estilo</span> <span class="hps">personalizado.</span> <span class="hps">En Firefox</span><span>, la configuración</span> <span class="hps">se puede personalizar en</span> <span class="alt-edited hps">cuadro de diálogo Preferencias</span><span>, o puede</span> <span class="hps">especificar</span> <span class="hps">estilos</span> <span class="hps">en un archivo</span> </span><span id="result_box" lang="es"><span class="alt-edited hps">denominado</span> </span><span id="result_box" lang="es"><em><code><span class="hps">user Content.css,</span></code></em> <span class="alt-edited hps">archivado </span><span class="hps">en su perfil de</span> <span class="hps">navegador.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">Parte del</span> <span class="alt-edited hps">estilo</span> <span class="hps">proviene de</span> <span class="hps">las hojas de estilo</span> <span class="hps">vinculadas al</span> <span class="hps">documento</span> <span class="hps">por el servidor</span></span> wiki.</p>
-</div>
-
-<p><span id="result_box" lang="es"><span class="hps">Al abrir su</span> <span class="hps">documento de muestra</span> <span class="hps">en el navegador,</span> <span class="atn hps">los elementos </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="alt-edited hps">son</span> <span class="alt-edited hps">más relevante que</span> <span class="hps">el</span> <span class="hps">resto del texto</span><span>.</span> <span class="alt-edited hps">Esto viene del</span> <span class="hps">estilo por defecto</span> <span class="hps">del navegador</span> <span class="hps">para HTML</span><span>.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="atn hps">El elemento </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="hps">son rojos.</span> <span class="alt-edited hps">Esto viene</span> <span class="alt-edited hps">de la</span> <span class="hps">propia hoja de estilos</span> <span class="alt-edited hps">de ejemplo.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="atn hps">El elemento </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="hps">también</span> <span class="hps">heredan</span> <span class="hps">gran parte del estilo del elemento </span></span>{{ HTMLElement("p") }}<span lang="es"><span class="hps">,</span> <span class="alt-edited hps">porque ellos son</span> <span class="hps">sus</span> <span class="hps">hijos.</span> <span class="hps">De la misma manera</span><span>,</span> <span class="alt-edited hps">los</span> elementos </span>{{ HTMLElement("p") }}<span lang="es"> <span class="alt-edited hps">heredan</span> <span class="hps">gran parte del estilo</span> <span class="hps">del</span> <span class="hps">elemento</span></span>{{ HTMLElement("body") }}<span lang="es"><span>.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">Para los estilos</span> <span class="alt-edited hps">en cascada</span><span class="alt-edited">, las hojas de estilo</span> <span class="hps">del autor</span> <span class="hps">tienen</span> <span class="alt-edited hps">prioridad, </span> <span class="alt-edited hps">ante las hojas de estilo</span> <span class="hps">del lector</span><span>, </span> <span class="hps">por defecto</span> <span class="hps">de tu navegador</span><span>.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">Para los estilos</span> <span class="hps">heredados</span><span>,</span> <span class="hps">el estilo propio de</span> <span class="hps">un nodo</span> <span class="hps">hijo tiene</span> <span class="hps">prioridad sobre</span> <span class="alt-edited hps">estilo</span> <span class="hps">heredado de</span> <span class="hps">su</span> <span class="hps">padre</span><span>.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">Estas no son las</span> <span class="hps">únicas prioridades</span> <span class="hps">que se aplican</span><span>.</span> <span class="alt-edited hps">En una página posterior</span><span class="alt-edited hps"> de este</span> <span class="hps">tutorial se explica</span> <span class="alt-edited hps">mas detalladamente</span><span>.</span></span></p>
-
-<div class="tuto_details">
-<div class="tuto_type"><span id="result_box" lang="es"><span class="alt-edited hps">Más</span> <span class="hps">detalles</span></span></div>
-
-<p><span id="result_box" lang="es"><span class="alt-edited hps">El CSS</span> <span class="hps">también proporciona</span> <span class="hps">una forma para que</span> <span class="hps">el lector</span> <span class="alt-edited hps">pueda anular</span> <span class="hps">el estilo</span> <span class="hps">del autor del documento</span><span>,</span> <span class="hps">mediante el uso de</span> <span class="hps">la palabra clave</span><span>! </span></span><code>!important</code>.</p>
-
-<p><span id="result_box" lang="es"><span class="hps">Esto significa</span> <span class="hps">que, como</span> <span class="hps">autor del documento</span><span>,</span> <span class="hps">no siempre se puede</span> <span class="hps">predecir con exactitud</span> <span class="hps">lo que sus lectores</span> <span class="hps">van a ver.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">quieres conocer</span> <span class="hps">todos los detalles de</span></span> cascada y herencia mira <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Asignando propiedad de valores, cascada, y herencia</a> <span id="result_box" lang="es"><span class="hps">en</span> <span class="alt-edited hps">las</span> <span class="hps">especificaciones</span> d<span class="alt-edited hps">el CSS</span><span>.</span></span></p>
-</div>
-
-<h2 id="Acción_El_uso_de_la_herencia"><span class="short_text" id="result_box" lang="es"><span class="hps">Acción</span><span>: El uso de</span> <span class="hps">la herencia</span></span> </h2>
-
-<ol>
- <li><span id="result_box" lang="es"><span class="hps">Edite su archivo</span> <span class="alt-edited hps"> CSS</span> <span class="alt-edited hps">de ejemplo.</span></span></li>
- <li><span id="result_box" lang="es"><span class="alt-edited hps">Agrega</span> <span class="hps">esta línea</span> <span class="hps">copiando y</span> <span class="hps">pegando</span><span>.</span> <span class="hps">Realmente no</span> <span class="hps">importa si</span> <span class="hps">usted la agrega</span> <span class="hps">por encima o por</span> <span class="hps">debajo de la línea</span> <span class="hps">que está</span><span>.</span> <span class="alt-edited hps">Sin embargo, añadirla</span> <span class="hps">en la parte superior</span> <span class="hps">es más</span> <span class="hps">lógico, porque</span> <span class="hps">en el documento </span><span class="alt-edited hps">el</span> elemento </span>{{ HTMLElement("p") }}<span lang="es"> es el <span class="alt-edited hps">elemento</span> <span class="hps">padre</span> <span class="atn hps">del elemento  </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span>:</span></span>
-  <pre class="brush:css">p {color: blue; text-decoration: underline;}
-</pre>
- </li>
- <li>Ahora actualice el navegador para ver el efecto <span id="result_box" lang="es"><span class="hps">en su</span> <span class="hps">documento de muestra.</span></span> El subrayado afecta todo el texto en el párrafo, incluido las letras iniciales. Los elementos {{ HTMLElement("strong") }} <span id="result_box" lang="es"><span class="hps">han heredado</span> <span class="hps">el estilo</span> <span class="hps">subrayado</span> <span class="hps">de su elemento padre </span></span>{{ HTMLElement("p") }}.<br>
-
-  <p><span id="result_box" lang="es"><span class="hps">Pero</span> <span class="atn hps">los elementos </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="hps">siguen siendo</span> <span class="hps">rojo.</span> <span class="hps">El color rojo</span> <span class="hps">es</span> <span class="hps">su estilo</span><span> </span><span class="hps">propio</span><span>,</span> <span class="hps">por lo que tiene</span> <span class="hps">prioridad sobre</span> <span class="hps">el color azul</span> <span class="hps">de su elemento</span> <span class="hps">padre</span> </span>{{ HTMLElement("p") }}<span lang="es"> <span>.</span></span></p>
- </li>
-</ol>
-
-<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;">
-</table>
-
-<table style="border: 2px outset #3366bb; margin-right: 2em; padding: 1em;">
- <caption>Antes</caption>
- <tbody>
-  <tr>
-   <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<table style="border: 2px outset #3366bb; padding: 1em;">
- <caption>Después</caption>
- <tbody>
-  <tr>
-   <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="tuto_example">
-<div class="tuto_type"><span id="result_box" lang="es"><span class="alt-edited hps">Problema</span></span></div>
-<span id="result_box" lang="es"><span class="hps">Cambie su</span> hoja de <span class="hps">estilo</span> <span class="hps">de manera que</span> <span class="alt-edited hps">aparecen subrayados</span> <span class="hps">sólo las letras</span> <span class="hps">rojas</span><span>:</span></span>
-
-<table style="border: 2px outset #3366bb; padding: 1em;">
- <tbody>
-  <tr>
-   <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Possible solution</div>
-
-<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p>
-
-<pre class="brush: css">p {color: blue; }
-strong {color: red; text-decoration: underline;}
-</pre>
-
-<p> </p>
-<a class="hideAnswer" href="#challenge">Hide solution</a></div>
-<a href="#tutochallenge" title="Display a possible solution for the challenge">Ver una solución al desafío.</a></div>
-
-<h2 id="¿Y_ahora_qué"><span class="short_text" id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2>
-
-<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectores")}}<span id="result_box" lang="es"><span class="hps">Su</span> <span class="hps">hoja de estilo</span> <span class="hps">de ejemplo especifica</span> <span class="hps">estilos</span> <span class="hps">para las etiquetas</span> <span class="atn hps">&lt;</span><span>p</span><span>&gt;</span> <span class="hps">y</span> <span class="hps">&lt;strong</span><span>&gt;</span><span>, cambiando el</span> <span class="hps">estilo de</span> <span class="hps">los elementos correspondientes</span> <span class="hps">en todo el documento</span><span>.</span> <span class="hps">La</span> <span class="hps">siguiente sección</span> <span class="hps">describe cómo especificar</span> <span class="hps">el estilo</span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">de manera más selectiva</a></span>.</p>
diff --git a/files/es/web/css/introducción/color/index.html b/files/es/web/css/introducción/color/index.html
deleted file mode 100644
index 030fa9d692..0000000000
--- a/files/es/web/css/introducción/color/index.html
+++ /dev/null
@@ -1,364 +0,0 @@
----
-title: Color
-slug: Web/CSS/Introducción/Color
-translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors
-translation_of_original: Web/Guide/CSS/Getting_started/Color
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p><a class="button previousPage" href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" rel="prev" style="margin: 0px 20px 20px 0px; padding: 5px 11px; border: 0px; color: rgb(77, 78, 83); text-decoration: none; cursor: pointer; display: inline-block; line-height: 1; font-weight: normal; letter-spacing: normal; text-transform: uppercase; border-radius: 4px; box-shadow: rgb(187, 191, 194) 0px -1px inset; float: left; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; white-space: normal; background-color: rgb(234, 239, 242);" title="Los estilos de texto"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">IR A LA SECCIÓN ANTERIOR: </span></font></font><br>
- <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">LOS ESTILOS DE TEXTO</span></font></font></a></p>
-
-<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Esta es la sección octava de la </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="es-es / docs / Web / guía / CSS / Primeros pasos"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS Introducción</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">tutorial; </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">se explica cómo puede especificar el color en CSS. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En su hoja de estilos de muestra, se introduce colores de fondo.</span></font></font></p>
-
-<h2 class="clearLeft" id="Información_Color" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Información: Color</span></font></font></h2>
-
-<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En este tutorial hasta ahora, se ha utilizado un número limitado de colores con nombre. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS 2 soporta 17 colores con nombre absoluto. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Algunos de los nombres puede que no sea el esperado:</span></font></font></p>
-
-<table style="border: 0px; margin-left: 2em; text-align: right;">
- <tbody>
-  <tr>
-   <td> </td>
-   <td>black</td>
-   <td style="width: 2em; height: 2em; background-color: black;"> </td>
-   <td>gray</td>
-   <td style="width: 2em; height: 2em; background-color: gray;"> </td>
-   <td>silver</td>
-   <td style="width: 2em; height: 2em; background-color: silver;"> </td>
-   <td>white</td>
-   <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td>
-  </tr>
-  <tr>
-   <td>primaries</td>
-   <td>red</td>
-   <td style="width: 2em; height: 2em; background-color: red;"> </td>
-   <td>lime</td>
-   <td style="width: 2em; height: 2em; background-color: lime;"> </td>
-   <td>blue</td>
-   <td style="width: 2em; height: 2em; background-color: blue;"> </td>
-  </tr>
-  <tr>
-   <td>secondaries</td>
-   <td>yellow</td>
-   <td style="width: 2em; height: 2em; background-color: yellow;"> </td>
-   <td>aqua</td>
-   <td style="width: 2em; height: 2em; background-color: aqua;"> </td>
-   <td>fuchsia</td>
-   <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td>
-  </tr>
-  <tr>
-   <td> </td>
-   <td>maroon</td>
-   <td style="width: 2em; height: 2em; background-color: maroon;"> </td>
-   <td>orange</td>
-   <td style="width: 2em; height: 2em; background-color: orange;"> </td>
-   <td>olive</td>
-   <td style="width: 2em; height: 2em; background-color: olive;"> </td>
-   <td>purple</td>
-   <td style="width: 2em; height: 2em; background-color: purple;"> </td>
-   <td>green</td>
-   <td style="width: 2em; height: 2em; background-color: green;"> </td>
-   <td>navy</td>
-   <td style="width: 2em; height: 2em; background-color: navy;"> </td>
-   <td>teal</td>
-   <td style="width: 2em; height: 2em; background-color: teal;"> </td>
-  </tr>
- </tbody>
-</table>
-
-<p> </p>
-
-<div class="tuto_details">
-<div class="tuto_type">
-<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Detalles</span></font></font></div>
-
-<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Su navegador puede soportar muchos más colores con nombre, como:</span></font></font></p>
-</div>
-
-<table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;">
- <tbody>
-  <tr>
-   <td>dodgerblue</td>
-   <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td>
-   <td>peachpuff</td>
-   <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td>
-   <td>tan</td>
-   <td style="width: 2em; height: 2em; background-color: tan;"> </td>
-   <td>firebrick</td>
-   <td style="width: 2em; height: 2em; background-color: firebrick;"> </td>
-   <td>aquamarine</td>
-   <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td>
-  </tr>
- </tbody>
-</table>
-
-<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para detalles de esta lista ampliada, consulte: </span></font></font><a class="external external-icon" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; white-space: pre-line; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(244, 244, 244);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">SVG palabras clave de color</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en el </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">módulo de colores </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS 3 . </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Tenga cuidado con el uso de nombres de colores;puede que algunos de sus lectores de navegación no lo soporte.</span></font></font></p>
-</div>
-
-<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para una paleta más grande, especificar los componentes rojo, verde y azul del color que desee, utilizando el signo numerico (hash) y tres </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">dígitos  </span></font></font><em><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">hexadecimales</span></font></font></em><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> entre los rangos  0 - 9, a - f. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Las letras a - f representan los valores de 10 a 15:</span></font></font></p>
-
-<table style="border: 0px; margin-left: 2em;">
- <tbody>
-  <tr>
-   <td>black</td>
-   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
-   <td><code>#000</code></td>
-  </tr>
-  <tr>
-   <td>pure red</td>
-   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
-   <td><code>#f00</code></td>
-  </tr>
-  <tr>
-   <td>pure green</td>
-   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
-   <td><code>#0f0</code></td>
-  </tr>
-  <tr>
-   <td>pure blue</td>
-   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
-   <td><code>#00f</code></td>
-  </tr>
-  <tr>
-   <td>white</td>
-   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
-   <td><code>#fff</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p><br>
- <span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">Para toda la paleta, especificar dos dígitos hexadecimales para cada componente:</span></p>
-
-<table style="border: 0px; margin-left: 2em;">
- <tbody>
-  <tr>
-   <td>black</td>
-   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
-   <td><code>#000000</code></td>
-  </tr>
-  <tr>
-   <td>pure red</td>
-   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
-   <td><code>#ff0000</code></td>
-  </tr>
-  <tr>
-   <td>pure green</td>
-   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
-   <td><code>#00ff00</code></td>
-  </tr>
-  <tr>
-   <td>pure blue</td>
-   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
-   <td><code>#0000ff</code></td>
-  </tr>
-  <tr>
-   <td>white</td>
-   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
-   <td><code>#ffffff</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">Generalmente, usted puede obtener estos códigos hexadecimales de seis dígitos de su programa de gráficos o alguna otra herramienta.</span></p>
-
-<div class="tuto_example">
-<div class="tuto_type">
-<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ejemplo</span></font></font></div>
-
-<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Con un poco de práctica, puede ajustar los colores de tres dígitos de forma manual para la mayoría de los propósitos:</span></font></font></p>
-</div>
-
-<table style="border: 0px; margin-left: 2em; background-color: #fffff4;">
- <tbody>
-  <tr>
-   <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Comience con el rojo puro:</span></td>
-   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
-   <td><code>#f00</code></td>
-  </tr>
-  <tr>
-   <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(201, 215, 241);">Para que sea más pálido, añadir un poco de verde y azul:</span></td>
-   <td style="width: 2em; height: 2em; background-color: #f77;"> </td>
-   <td><code>#f77</code></td>
-  </tr>
-  <tr>
-   <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para hacerlo más naranja, añadir un poco de verde adicional:</span></td>
-   <td style="width: 2em; height: 2em; background-color: #fa7;"> </td>
-   <td><code>#fa7</code></td>
-  </tr>
-  <tr>
-   <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para oscurecer, reducir todos sus componentes:</span></td>
-   <td style="width: 2em; height: 2em; background-color: #c74;"> </td>
-   <td><code>#c74</code></td>
-  </tr>
-  <tr>
-   <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para reducir su saturación, hacer que sus componentes más iguales:</span></td>
-   <td style="width: 2em; height: 2em; background-color: #c98;"> </td>
-   <td><code>#c98</code></td>
-  </tr>
-  <tr>
-   <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Si usted los pone exactamente iguales, se obtiene gris:</span></td>
-   <td style="width: 2em; height: 2em; background-color: #ccc;"> </td>
-   <td><code>#ccc</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para un tono pastel como el azul pálido:</span></p>
-
-<table style="border: 0px; margin-left: 2em; background-color: #fffff4;">
- <tbody>
-  <tr>
-   <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Comience con blanco puro:</span></td>
-   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
-   <td><code>#fff</code></td>
-  </tr>
-  <tr>
-   <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Reducir los otros componentes un poco:</span></td>
-   <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td>
-   <td><code>#eef</code></td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type">
-<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Más detalles</span></font></font></div>
-
-<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">También puede especificar un color mediante los valores RGB decimales en el rango de 0 - 255, o porcentajes.</span></font></font></p>
-
-<p><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(244, 244, 244);">Por ejemplo, este es de color granate (rojo oscuro)</span>dark red:</p>
-</div>
-
-<pre class="brush:css  language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token function" style="margin: 0px; padding: 0px; border: 0px; color: rgb(221, 74, 104);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">RGB</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> (128, 0, 0)</span></font></font></code></pre>
-
-<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para más detalles sobre cómo especificar los colores, ver: </span></font></font><a class="external external-icon" href="http://www.w3.org/TR/CSS21/syndata.html#color-units" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; white-space: pre-line; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(244, 244, 244);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Colores</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en la Especificación CSS.</span></font></font></p>
-
-<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para obtener información sobre la adecuación de los colores del sistema como Menú y ThreeDFace, véase: </span></font></font><a class="external external-icon" href="http://www.w3.org/TR/CSS21/ui.html#system-colors" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; white-space: pre-line; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(244, 244, 244);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Sistema CSS2 Colores</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en la Especificación CSS.</span></font></font></p>
-</div>
-
-<h3 id="Propiedades_de_Color" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 200; font-family: 'Open Sans', sans-serif; line-height: 24px; font-size: 1.71428571428571rem; letter-spacing: -0.5px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Propiedades de Color</span></font></font></h3>
-
-<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ya ha utilizado </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">la propiedad</span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> color</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">  en el texto.</span></font></font></p>
-
-<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">También puede utilizar <code>la</code></span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> propiedad </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"><code> </code></span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">background-color</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> para cambiar fondos elementos.</span></font></font></p>
-
-<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Los Fondos (</span></font></font><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">Backgrounds </span>) <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">se pueden establecer en </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">transparent</span></code><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"> (transparentes) </span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">para eliminar explícitamente cualquier color, revelando fondo del elemento padre.</span></font></font></p>
-
-<div class="tuto_example">
-<div class="tuto_type">
-<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ejemplo</span></font></font></div>
-
-<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Los </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">ejemplos de</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> cajas de este tutorial utilizan este fondo de color amarillo pálido:</span></font></font></p>
-
-<pre class="brush:css  language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token property" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">background-color </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">:</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> # fffff4 </span></font></font><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">;</span></font></font></span></code></pre>
-
-<div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 0px; background: 0px 0px;"> </div>
-
-<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Los </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Más detalles</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> cajas utilizan este gris pálido:</span></font></font></p>
-
-<pre class="brush:css  language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token property" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">background-color </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">:</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> # F4F4F4 </span></font></font><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">;</span></font></font></span></code></pre>
-</div>
-</div>
-
-<p> </p>
-
-<h2 id="Acción_El_uso_de_códigos_de_color" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Acción: El uso de códigos de color</span></font></font></h2>
-
-<ol style="margin: 0px 0px 24px; padding: 0px 0px 0px 40px; border: 0px; list-style-type: decimal; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);">
- <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Edite su archivo CSS.</span></font></font></li>
- <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Hacer el cambio se muestra aquí en negrita, para dar las letras iniciales un fondo azul claro. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">(La disposición y comentarios en el archivo probablemente difieren del archivo que se muestra aquí. Mantenga la disposición y los comentarios de la forma que prefiera.)</span></font></font>
-  <pre class="brush:css;highlight:[13]  language-css"><code class="language-css"><span class="token comment">/*** CSS Tutorial: Color page ***/</span>
-
-<span class="token comment">/* page font */</span>
-<span class="token selector">body </span><span class="token punctuation">{</span><span class="token property">font</span><span class="token punctuation">:</span> 16px <span class="token string">"Comic Sans MS"</span>, cursive<span class="token punctuation">;</span><span class="token punctuation">}</span>
-
-<span class="token comment">/* paragraphs */</span>
-<span class="token selector">p </span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span><span class="token punctuation">}</span>
-<span class="token selector">#first </span><span class="token punctuation">{</span><span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span><span class="token punctuation">}</span>
-
-<span class="token comment">/* initial letters */</span>
-<span class="token selector">strong </span><span class="token punctuation">{</span>
-  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
-  <span class="token property">background-color</span><span class="token punctuation">:</span> #ddf<span class="token punctuation">;</span>
-  <span class="token property">font</span><span class="token punctuation">:</span> 200% serif<span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-
-<span class="token selector">.carrot </span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span><span class="token punctuation">}</span>
-<span class="token selector">.spinach </span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre>
-
-  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 0px; background: 0px 0px;"> </div>
-
-  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 19px; background: 0px 0px;"> </div>
-
-  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 38px; background: 0px 0px;"> </div>
-
-  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 57px; background: 0px 0px;"> </div>
-
-  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 76px; background: 0px 0px;"> </div>
-
-  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 95px; background: 0px 0px;"> </div>
-
-  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 114px; background: 0px 0px;"> </div>
-
-  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 133px; background: 0px 0px;"> </div>
-
-  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 152px; background: 0px 0px;"> </div>
-
-  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 171px; background: 0px 0px;"> </div>
-
-  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 190px; background: 0px 0px;"> </div>
-
-  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 209px; background: 0px 0px;"> </div>
-
-  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 228px; background: 0px 0px;"> </div>
-
-  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 247px; background: 0px 0px;"> </div>
-
-  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 266px; background: 0px 0px;"> </div>
-
-  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 285px; background: 0px 0px;"> </div>
-
-  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 304px; background: 0px 0px;"> </div>
-
-  <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 323px; background: 0px 0px;"> </div>
-
-  <div class="line-highlight" style=""> </div>
- </li>
- <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Guarde el archivo y actualizar el navegador para ver el resultado.</span></font></font></li>
-</ol>
-
-<table>
- <tbody>
-  <tr>
-   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;">
-    <table style="margin: 0px 0px 24px; padding: 0px; border-width: 1px 0px 0px 1px; border-style: solid; border-color: rgb(224, 224, 220); border-collapse: collapse; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);">
-     <tbody>
-      <tr style="margin: 0px; padding: 0px; border: 0px;">
-       <td style="margin: 0px; padding: 6px; border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgb(224, 224, 220); text-align: left; font-style: italic; font-variant: normal; font-weight: normal; font-size: 16px; line-height: normal; font-family: 'Comic Sans MS', cursive; color: blue;"><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>C</font></font></strong><font><font> ascading </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: green; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> tyle </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: green; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> heets</font></font></td>
-      </tr>
-      <tr style="margin: 0px; padding: 0px; border: 0px;">
-       <td style="margin: 0px; padding: 6px; border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgb(224, 224, 220); text-align: left; font-style: normal; font-variant: normal; font-weight: normal; font-size: 16px; line-height: normal; font-family: 'Comic Sans MS', cursive; color: blue;"><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>C</font></font></strong><font><font> ascading </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> tyle </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> heets</font></font></td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<div class="tuto_example">
-<div class="tuto_type">
-<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Desafío</span></font></font></div>
-
-<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En el archivo CSS, cambiara todos los nombres de los colores a los códigos de color de 3 dígitos sin afectar el resultado.</span></font></font></p>
-
-<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">(Esto no se puede hacer exactamente, pero usted puede conseguir cerca. Para hacerlo exactamente lo que necesita códigos de 6 dígitos, y hay que buscar la especificación CSS o utilizar una herramienta gráfica para que coincida con los colores.)</span></font></font></p>
-<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Color#tutochallenge" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-size: 12px; text-align: right; display: block; font-family: 'Open Sans', sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal;" title="Mostrar una posible solución para el desafío"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver una solución para el desafío.</span></font></font></a></div>
-</div>
-
-<h2 id="¿Y_ahora_qué" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">¿Y ahora qué?</span></font></font></h2>
-
-<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><a class="button nextPage" href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content" rel="next" style="margin: 20px 0px 0px 20px; padding: 5px 11px; border: 0px; color: rgb(77, 78, 83); text-decoration: none; cursor: pointer; display: inline-block; line-height: 1; font-weight: 400; letter-spacing: normal; text-transform: uppercase; border-radius: 4px; box-shadow: rgb(187, 191, 194) 0px -1px inset; float: right; background-color: rgb(234, 239, 242);" title="Contenido"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">IR A LA SIGUIENTE SECCIÓN: </span></font></font><br>
- <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CONTENT</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En su documento de muestra y el contenido de su hoja de estilo muestra estrictamente separados los estilo.</span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">La </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title="/ En-US / docs / Web / guía / CSS / Getting_Started / contenido"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">siguiente sección</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> explica cómo se puede hacer excepciones a esta estricta separación.</span></font></font></p>
diff --git a/files/es/web/css/introducción/how_css_works/index.html b/files/es/web/css/introducción/how_css_works/index.html
deleted file mode 100644
index f4beb05519..0000000000
--- a/files/es/web/css/introducción/how_css_works/index.html
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: Cómo funciona el CSS
-slug: Web/CSS/Introducción/How_CSS_works
-tags:
-  - CSS
-  - 'CSS:'
-  - 'CSS:Empezando'
-  - Diseño
-  - Guía
-  - Inicio
-  - Web
-translation_of: Learn/CSS/First_steps/How_CSS_works
-translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "¿Por qué usar CSS?") }}<span id="result_box" lang="es"><span class="hps">Esta</span> <span class="alt-edited hps">tercera parte del</span> </span><span class="seoSummary">tutorial <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">Empezando CSS</a> </span><span id="result_box" lang="es"><span class="hps">explica cómo funciona</span> <span class="hps">el CSS</span> <span class="hps">en el navegador y</span> la finalidad<span class="hps"> del</span> <span class="atn hps">Modelo de Objeto de Documento (</span><span>DOM</span><span>)</span><span>.</span> <span class="hps">Usted también aprenderá</span> <span class="hps">cómo analizar</span> <span class="hps">el documento de</span> <span class="hps">muestra.</span></span></p>
-
-<h2 class="clearLeft" id="Información_Cómo_funciona_CSS"><span class="short_text" id="result_box" lang="es"><span class="hps">Información</span><span>: Cómo funciona</span> <span class="hps">CSS</span></span></h2>
-
-<p><span id="result_box" lang="es"><span class="hps">Cuando un</span> <span class="hps">navegador muestra</span> <span class="hps">un documento, debe</span><span class="alt-edited hps"> combinar</span> <span class="hps">el contenido del documento</span> <span class="hps">con la </span><span class="hps">información </span></span><span id="result_box" lang="es"><span class="hps"> </span></span><span id="result_box" lang="es"><span class="hps">de </span></span><span id="result_box" lang="es"><span class="hps">su</span></span><span id="result_box" lang="es"><span class="hps"> estilo</span><span>.</span> Se <span class="hps">procesa</span> <span class="hps">el documento en</span> <span class="hps">dos</span> <span class="hps">etapas</span><span>:</span></span></p>
-
-<ol>
- <li><span id="result_box" lang="es"><span class="hps">El navegador</span> <span class="hps">convierte el</span> <span class="hps">lenguaje de marcado (</span></span><code><strong><em>markup</em></strong></code>)<span lang="es"> <span class="hps">y</span> <span class="alt-edited hps">el</span> <span class="hps">CSS</span> <span class="hps">en el <em><span class="seoSummary"><a href="en-US/docs/DOM" title="en-US/docs/DOM">DOM</a></span></em></span><span class="seoSummary"><strong> </strong></span><span class="hps">(Document Object</span> <span class="hps">Model)</span><span>.</span> <span class="hps">El DOM</span> <span class="hps">representa el documento</span> <span class="hps">en la memoria del</span> <span class="hps">ordenador.</span></span> <span id="result_box" lang="es"><span class="hps">Combina</span> <span class="hps">el contenido del documento</span> <span class="hps">con su estilo</span><span>.</span></span></li>
- <li><span id="result_box" lang="es"><span class="hps">El navegador muestra</span> <span class="hps">el contenido de la</span> <span class="hps">DOM</span><span>.</span></span></li>
-</ol>
-
-<p><span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">lenguaje de marcado</span> <span class="hps">utiliza <em>elementos</em></span><em> </em><span class="hps">para definir</span> <span class="hps">la estructura del documento</span><span>.</span> <span class="hps">Usted marca</span> <span class="hps">un elemento</span> <span class="hps">utilizando</span> <span class="hps"><em>etiquetas</em>,</span> <span class="hps">que son cadenas</span> <span class="hps">que comienzan con</span> <span class="hps">'&lt;'</span> <span class="hps">y termina con</span> <span class="hps">'&gt;'</span><span>.</span> <span class="hps">La mayoría de los</span> <span class="hps">elementos</span> <span class="hps">tienen un par de</span> <span class="hps">etiquetas,</span> <span class="hps">una etiqueta de inicio</span> <span class="hps">y</span> <span class="hps">una etiqueta de cierre</span><span>.</span> <span class="hps">Para la</span> <span class="hps">etiqueta de inicio</span><span>, coloque</span> <span class="hps">el nombre del elemento</span> <span class="hps">entre</span> <span class="hps">'&lt;'</span> <span class="atn hps">y '</span><span>&gt;'</span><span>.</span> <span class="hps">Para la</span> <span class="hps">etiqueta final</span><span>, coloque un</span> <span class="hps">'/'</span> <span class="atn hps">después de '</span><span>&lt;' y</span> <span class="hps">antes del</span> <span class="hps">nombre del elemento.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">Dependiendo del</span> <span class="hps">lenguaje de marcado</span><span>,</span> <span class="hps">algunos</span> <span class="hps">elementos tienen</span> <span class="hps">sólo</span> <span class="hps">una etiqueta de inicio</span><span>,</span> <span class="hps">o</span> <span class="hps">una sola etiqueta</span> <span class="hps">donde el</span> <span class="hps">'/'</span> viene <span class="hps">después del</span> <span class="hps">nombre del elemento.</span> <span class="hps">Un elemento</span> <span class="hps">también</span> <span class="hps">puede ser un contenedor </span><span class="hps">e incluir</span> <span class="hps">otros elementos</span> <span class="hps">entre</span> <span class="hps">su</span> <span class="hps">etiqueta de inicio</span> <span class="hps">y la etiqueta de cierre</span><span>.</span> <span class="alt-edited hps">Sólo recuerda</span> <span class="hps">cerrar</span> <span class="hps">siempre</span> <span class="hps">las</span> <span class="hps">etiquetas</span> <span class="hps">dentro del contenedor.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">DOM</span> <span class="hps">tiene una estructura</span> <span class="hps">en forma de árbol</span><span>.</span> <span class="hps">Cada elemento</span><span>,</span> <span class="hps">atributo</span> <span class="hps">y</span> <span class="hps">extensión de texto</span> <span class="hps">en el</span> <span class="hps">lenguaje de marcado</span> <span class="hps">se convierte en un</span> <span class="hps"><em>nodo </em>de la</span> <span class="hps">estructura de árbol.</span> <span class="hps">Los nodos</span> <span class="hps">se definen por su</span> <span class="hps">relación con otros</span> <span class="hps">nodos DOM</span><span>.</span> <span class="hps">Algunos elementos</span> <span class="hps">son</span> <span class="hps">los padres de los</span> <span class="hps">nodos secundarios</span><span>,</span> <span class="hps">y</span> <span class="hps">los nodos secundarios</span> <span class="hps">tienen hermanos</span><span>.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">Comprender el</span> <span class="hps">DOM</span> <span class="hps">le ayuda a diseñar</span><span>, depurar</span> <span class="hps">y mantener su</span> <span class="hps">CSS</span><span>,</span> <span class="hps">porque el</span> <span class="hps">DOM</span> <span class="hps">es donde su</span> <span class="hps">CSS y</span> <span class="hps">el contenido del documento</span> <span class="hps">se reúnen</span><span>.</span></span></p>
-
-<div class="tuto_example">
-<div class="tuto_type">Ejemplo</div>
-<span id="result_box" lang="es"><span class="hps">En</span> <span class="alt-edited hps">el</span> <span class="hps">documento de ejemplo</span><span>,</span> <span class="alt-edited hps">las</span> <span class="hps">etiqueta &lt;p&gt;</span> <span class="hps">y su</span> <span class="hps">etiqueta de cierre</span> <span class="atn hps">&lt;</span><span>/</span> <span class="hps">p&gt;</span> <span class="hps">crean un contenedor</span><span>:</span></span>
-
-<pre class="brush:html">&lt;p&gt;
-  &lt;strong&gt;C&lt;/strong&gt;ascading
-  &lt;strong&gt;S&lt;/strong&gt;tyle
-  &lt;strong&gt;S&lt;/strong&gt;heets
-&lt;/p&gt;
-</pre>
-
-<h2 id="Ejemplo_en_vivo"><span class="short_text" id="result_box" lang="es"><span class="hps">Ejemplo</span> en <span class="hps">vivo</span></span></h2>
-
-<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p>
-
-<p><span id="result_box" lang="es"><span class="hps">En el</span> <span class="hps">DOM</span><span>, el nodo</span> <span class="hps">correspondiente P</span> <span class="hps">es</span> <span class="hps">uno de los padres</span><span>.</span> <span class="hps">Sus</span> <span class="hps">hijos</span> <span class="hps">son los nodos</span> <code><em><strong>STRONG </strong></em></code><span class="alt-edited hps">y</span> <span class="hps">los</span> <span class="hps">nodos de texto</span><span>.</span> <span class="hps">Los nodos</span> <code><em><strong>STRONG </strong></em></code></span><span lang="es"><span class="alt-edited hps">son en sí mismos</span> <span class="hps">padres</span><span>,</span> <span class="hps">con</span> <span class="hps">los nodos de texto</span> <span class="hps">como</span> <span class="hps">sus hijos</span><span>:</span></span></p>
-
-<pre><span style="color: black;">P</span>
-├─<span style="color: black;">STRONG</span>
-│ └─"<span style="color: black;">C</span>"
-├─"<span style="color: black;">ascading</span>"
-├─<span style="color: black;">STRONG</span>
-│ └─"<span style="color: black;">S</span>"
-├─"<span style="color: black;">tyle</span>"
-├─<span style="color: black;">STRONG</span>
-│ └─"<span style="color: black;">S</span>"
-└─"<span style="color: black;">heets</span>"</pre>
-</div>
-
-<h2 id="Acción_Analizando_un_DOM"><span class="short_text" id="result_box" lang="es"><span class="hps">Acción:</span> <span class="hps">Analizando un</span> <span class="hps">DOM</span></span></h2>
-
-<h3 id="El_uso_del_Inspector_DOM"><span class="short_text" id="result_box" lang="es"><span class="hps">El uso del Inspector</span> <span class="hps">DOM</span></span></h3>
-
-<p><span id="result_box" lang="es"><span class="hps">Para analizar un</span> <span class="hps">DOM</span><span>,</span> <span class="hps">se necesita un software</span> <span class="hps">especial.</span> <span class="hps">Usted puede usar</span> el </span><span id="result_box" lang="es"><span class="alt-edited hps">complemento de </span> </span><span id="result_box" lang="es"><span class="hps">Mozilla </span></span><a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) <span id="result_box" lang="es"><span class="hps">para analizar un</span> <span class="hps">DOM</span><span>.</span> <span class="hps">Usted sólo tendrá que</span> <span class="hps">instalar el</span> <span class="atn hps">complemento (</span><span>ver</span> <span class="hps">más detalles abajo)</span><span>.</span></span></p>
-
-<ol>
- <li><span id="result_box" lang="es"><span class="hps">Utilice</span> <span class="hps">el navegador</span> <span class="hps">Mozilla</span> <span class="hps">para abrir</span> <span class="hps">el documento</span> <span class="hps">en versión HTML</span><span>.</span></span></li>
- <li><span id="result_box" lang="es"><span class="hps">Desde la barra de</span> <span class="hps">menú de su </span><span class="hps">navegador</span><span>, selecciona</span> <strong><span class="hps">Herramientas&gt;</span> <span class="hps">Inspector DOM</span></strong><span>,</span> <span class="hps">o <strong>Herramientas</strong></span><strong><span>&gt;</span> <span class="hps">Desarrollo Web&gt;</span> <span class="hps">Inspector DOM</span></strong><span>.</span></span>
-  <div class="tuto_details">
-  <div class="tuto_type"><span id="result_box" lang="es"><span class="alt-edited hps">Más</span> <span class="hps">detalles</span></span></div>
-
-  <p><span id="result_box" lang="es"><span class="hps">Si el navegador</span> <span class="hps">Mozilla</span> <span class="hps">no tiene</span> <span class="hps">Domi</span><span>, puede</span><a href="https://addons.mozilla.org/en-US/firefox/addon/6622/"> instalarlo del sitio de complementos</a> <span class="hps">y reiniciar el</span> <span class="hps">navegador.</span> <span class="hps">Luego regrese</span> <span class="hps">a este</span> <span class="hps">tutorial.</span></span></p>
-
-  <p><span id="result_box" lang="es"><span class="hps">Si no</span> <span class="hps">desea instalar</span> <span class="hps">Domi</span> <span class="hps">(o</span> <span class="hps">estás usando</span> <span class="hps">un navegador que no</span> <span class="hps">Mozilla)</span><span>, puede utilizar</span> <span class="hps">Web</span> <span class="atn hps">X-</span><span>Ray</span> <span class="hps">Goggles,</span> <span class="hps">como se describe en</span> <span class="hps">la siguiente sección.</span> <span class="hps">O bien, puede</span> <span class="hps">omitir esta sección</span> <span class="hps">e ir directamente a</span> <span class="hps">la página siguiente.</span> <span class="hps">Saltarse</span> <span class="hps">esta sección</span> <span class="hps">no interfiere con</span> <span class="hps">el resto del</span> <span class="hps">tutorial.</span></span></p>
-  </div>
- </li>
- <li><span id="result_box" lang="es"><span class="alt-edited hps">En el</span> <span class="hps">Domi</span><span>, expanda</span> <span class="hps">los nodos</span> <span class="hps">de su</span> <span class="hps">documento</span> <span class="hps">haciendo clic en</span> <span class="hps">las flechas</span><span>.</span></span>
-  <p><span id="result_box" lang="es"><strong><span class="hps">Nota</span><span>:</span></strong> <span class="alt-edited hps">El espaciado</span> <span class="alt-edited hps">de su archivo</span> <span class="hps">HTML</span> <span class="alt-edited hps">puede ocasionar</span> <span class="alt-edited hps">que Domi</span> <span class="alt-edited hps">muestre</span> <span class="hps">algunos nodos</span> <span class="hps">de texto vacíos</span><span class="alt-edited">, que se pueden</span> <span class="hps">pasar por alto.</span></span></p>
-
-  <p><span id="result_box" lang="es"><span class="hps">Parte</span> <span class="hps">del resultado</span> <span class="hps">podría tener este aspecto</span><span>, según</span> <span class="alt-edited hps">qué nodos</span> <span class="alt-edited hps">has</span> <span class="alt-edited hps">expandido</span><span>:</span></span></p>
-
-  <pre>│ ▼╴<span style="color: black;">P</span>
-│ │ │ ▼╴<span style="color: black;">STRONG</span>
-│ │ └<span style="color: darkblue;">#text</span>
-│ ├╴<span style="color: darkblue;">#text</span>
-│ ►╴<span style="color: black;">STRONG</span>
-│ │</pre>
-
-  <p><span id="result_box" lang="es"><span class="alt-edited hps">Cuando selecciona</span> <span class="alt-edited hps">cualquiera de los nodos</span><span>, puede usar</span> <span class="hps">panel de la derecha</span> <span class="hps">de</span> <strong><span class="alt-edited hps"> DOMi </span></strong><span class="hps">para averiguar</span> <span class="hps">más cosas sobre él.</span> <span class="hps">Por ejemplo</span><span>, cuando se selecciona</span> <span class="hps">un nodo de texto</span><span>,</span> <strong><span class="alt-edited hps">DOMi </span></strong></span><span lang="es"><span class="hps">muestra</span> <span class="hps">el texto en el</span> <span class="hps">panel de la derecha</span><span>.</span></span></p>
-
-  <p><span id="result_box" lang="es"><span class="hps">Cuando se selecciona</span> <span class="alt-edited hps">un elemento nodo</span></span>, <span id="result_box" lang="es"><strong><span class="alt-edited hps">DOMi </span></strong><span class="hps">analiza y</span> <span class="hps">ofrece</span> <span class="hps">una enorme cantidad de</span> <span class="hps">información en su</span> <span class="hps">panel de la derecha</span><span>.</span></span> <span id="result_box" lang="es"><span class="alt-edited hps">La información de estilo</span> <span class="hps">es sólo</span> <span class="alt-edited hps">una parte de la información</span> <span class="hps">que proporciona.</span></span></p>
- </li>
-</ol>
-
-<div class="tuto_example">
-<div class="tuto_type">Problema</div>
-
-<p><span id="result_box" lang="es"><span class="alt-edited hps">En el</span> <strong><span class="alt-edited hps">DOMi </span></strong></span><span lang="es"><span>, haga clic</span> <span class="hps">en un nodo</span> </span><code><small>STRONG</small></code>.</p>
-
-<p><span id="result_box" lang="es"><span class="hps">Utilice</span> el <span class="hps">panel de la derecha</span> <span class="hps">de</span> <span class="alt-edited hps">Domi</span> <span class="hps">para encontrar </span><span class="alt-edited hps">el </span></span><span id="result_box" lang="es"><span class="hps"> nodo de </span></span><span id="result_box" lang="es"><span class="alt-edited hps">color</span><span class="hps"> rojo</span><span>,</span> <span class="hps">y donde</span> <span class="hps">su apariencia </span><span class="hps">es</span> <span class="hps">más relevante que</span> <span class="hps">el texto normal</span><span>.</span></span></p>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Possible solution</div>
-
-<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p>
-<a class="hideAnswer" href="#challenge">Ocultar solución</a></div>
-<a href="#tutochallenge" title="Ver la posible solución para el problema">Ver la solución para el problema.</a></div>
-
-<h3 id="Utilizando_Web_X-Ray_Goggles"><span class="short_text" id="result_box" lang="es"><span class="hps">Utilizando</span> <span class="hps">Web</span> <span class="hps">X</span><span class="atn">-</span><span>Ray</span> <span class="hps">Goggles</span></span></h3>
-
-<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a><span id="result_box" lang="es"><span class="hps">muestra</span> <span class="hps">menos información que</span> <strong><code><span class="hps">DOM</span> </code></strong><span class="hps">Inspector</span><span>, pero</span> <span class="hps">es</span> <span class="hps">más fácil de</span> <span class="hps">instalar y utilizar.</span></span></p>
-
-<ol>
- <li><span id="result_box" lang="es"><span class="hps">Ir</span> <span class="hps">a la página principal</span> <span class="hps">de</span> <span class="hps">la </span></span> <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>.</li>
- <li><span id="result_box" lang="es"><span class="hps">Arrastre el</span> <span class="hps">enlace</span> <span class="hps">bookmarklet</span> <span class="hps">en esa</span> <span class="hps">página a</span> <span class="hps">tu barra de herramientas</span> <span class="hps">del navegador</span><span>.</span></span></li>
- <li><span id="result_box" lang="es"><span class="hps">Abra el documento</span> <span class="hps">en versión HTML</span><span>.</span></span></li>
- <li><span id="result_box" lang="es"><span class="alt-edited hps">Active</span> <span class="hps">Web</span> <span class="atn hps">X-</span><span>Ray</span> <span class="hps">Goggles</span> <span class="hps">haciendo clic en el</span> <span class="hps">bookmarklet</span> <span class="hps">en</span> <span class="hps">la barra de herramientas</span><span>.</span></span></li>
- <li><span id="result_box" lang="es"><span class="hps">Mueva el</span> <span class="alt-edited hps">puntero del ratón</span> <span class="alt-edited hps">por encima de su</span> <span class="alt-edited hps">documento para comprobar</span> <span class="hps">los</span> <span class="hps">elementos en el documento</span><span>.</span></span></li>
-</ol>
-
-<h2 id="¿Y_ahora_qué"><span class="short_text" id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2>
-
-<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada y herencia") }}<span id="result_box" lang="es"><span class="alt-edited hps">Si tomaste</span> <span class="alt-edited hps">el reto</span><span class="alt-edited">, usted vera</span> <span class="hps">que</span> <span class="hps">la información de estilo</span>  <span class="hps">interactúa</span> en </span><span id="result_box" lang="es"><span class="hps">más de un lugar, </span></span><span id="result_box" lang="es"><span class="hps">para crear el estilo</span> <span class="hps">final de </span><span class="hps">un elemento.</span> <span class="hps">La <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">siguiente página</a></span> <span class="hps">explica</span> <span class="hps">más acerca de estas</span> <span class="hps">interacciones.</span></span></p>
diff --git a/files/es/web/css/introducción/index.html b/files/es/web/css/introducción/index.html
deleted file mode 100644
index 09177572fa..0000000000
--- a/files/es/web/css/introducción/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: Introducción
-slug: Web/CSS/Introducción
-tags:
-  - CSS
-  - 'CSS:Introducción'
-  - para_revisar
-translation_of: Learn/CSS/First_steps
-translation_of_original: Web/Guide/CSS/Getting_started
----
-<h2 id="Presentación"><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Presentación</span></span></h2>
-
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Este tutorial es una introducción a las hojas de estilo en cascada (Cascading Style Sheets o CSS).</span></span></p>
-
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Además, te guía a través de las características básicas de CSS con ejemplos prácticos que puedes probar por ti mismo en tu propio equipo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Está dividido en dos partes.</span></span></p>
-
-<ul>
- <li><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La parte I ilustra las características estándar de CSS que funcionan en los navegadores Mozilla y también en la mayoría de los navegadores modernos.</span></span></li>
-</ul>
-
-<ul>
- <li><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La parte II contiene algunos ejemplos de características especiales que funcionan en Mozilla, pero no necesariamente en otros entornos.</span></span></li>
-</ul>
-
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">El tutorial se basa en la <a class="external" href="http://www.w3.org/TR/CSS21/" title="http://www.w3.org/TR/CSS21/">Especificación CSS 2.1</a> .</span></span></p>
-
-<h3 id="¿Quién_debe_usar_este_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">¿Quién debe usar este tutorial?</span></span></h3>
-
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Este tutorial es sobre todo para los principiantes en CSS, pero también lo puedes usar si tienes alguna experiencia en CSS.</span></span></p>
-
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si eres principiante en CSS, usa la parte I de este tutorial para entender CSS y aprender a usarlo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">A continuación, utiliza la parte II para comprender el ámbito de aplicación de CSS en Mozilla.</span></span></p>
-
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si sabes algo de CSS, puede omitir las partes de la guía de aprendizaje que ya conoces y sólo utilizar las partes que te interesen.</span></span></p>
-
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si tienes experiencia en CSS, pero no en Mozilla, puedes saltar a la parte II.</span></span></p>
-
-<h3 id="¿Qué_se_necesita_antes_de_empezar"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">¿Qué se necesita antes de empezar?</span></span></h3>
-
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para aprovechar al máximo este tutorial, necesitas un editor para archivos de texto y un navegador Mozilla (Firefox o Mozilla Suite).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">También debes saber cómo utilizarlos de forma básica.</span></span></p>
-
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no deseas editar los archivos, entonces puedes leer el tutorial y ver las fotos, pero es una forma menos eficaz de aprender.</span></span></p>
-
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Algunas partes del tutorial, que son opcionales, requieren otro software de Mozilla.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no quieres descargar otros software de Mozilla, entonces puedes saltártelas.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El otro software de Mozilla al que hace referencia este tutorial incluye:</span></span></p>
-
-<ul>
- <li><a href="/en/DOM_Inspector" title="en/Dom inspector"><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Inspector DOM</span></span></a></li>
-</ul>
-
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>Nota:</strong> CSS ofrece distintas maneras de trabajar con el color, por lo que las partes de este tutorial dependen de él.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Sólo puedes utilizar estas partes del tutorial fácilmente si dispones de una pantalla en color y de visión del color normal.</span></span></p>
-
-<h3 id="Cómo_utilizar_este_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Cómo utilizar este tutorial</span></span></h3>
-
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para utilizar este tutorial, lee las páginas con atención y en orden.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si se te pasa una página, tal vez te resulte difícil de entender las páginas siguientes.</span></span></p>
-
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En cada página, utiliza la sección de <em>Información</em> para entender cómo funciona CSS.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Usa la sección <em>Acción</em> para tratar de usar CSS en tu propio equipo.</span></span></p>
-
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para controlar que has comprendido los contenidos, acepta el reto al final de cada página.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las soluciones a los retos están enlazadas debajo de los retos, por lo que no es necesario verlos si no quieres.</span></span></p>
-
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para entender CSS en mayor profundidad, lee la información que se encuentra en las cajas con el título <em>Más detalles.</em></span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Utiliza los enlaces que hay para encontrar información de referencia acerca de CSS.</span></span></p>
-
-<h2 id="Parte_I_del_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Parte I del tutorial </span></span></h2>
-
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una guía paso a paso básica para CSS.</span></span></p>
-
-<ol>
- <li><strong><a href="/es/docs/Web/CSS/Como_iniciar/Que_es_CSS" title="es/docs/Web/CSS/Como iniciar/Que es CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Qué es CSS</span></span></a></strong></li>
- <li><strong><a href="/es/docs/Web/CSS/Como_iniciar/Por_que_usar_CSS" title="es/docs/Web/CSS/Como iniciar/Por que usar CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Por qué usar CSS</span></span></a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting Started/How CSS works"><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cómo funciona CSS</span></span></a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting Started/Cascading and inheritance"><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Cascada y herencia</span></span></a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting Started/Selectors"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Selectores</span></span></a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting Started/Readable CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">CSS legibles </span></span></a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting Started/Text styles"><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Estilos de texto</span></span></a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Color" title="en/CSS/Getting_Started/Color">Color</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting Started/Content"><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-99 goog-gtc-translatable" dir="ltr">Contenido</span></span></a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting Started/Lists"><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Listas</span></span></a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting Started/Boxes"><span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Cajas</span></span></a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting Started/Layout"><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Diseño</span></span></a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting Started/Tables"><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Tablas</span></span></a></strong></li>
- <li><strong><a href="/es/docs/Web/CSS/Introducción/Media" title="es/docs/Web/CSS/Introducción/Media"><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Multimedia</span></span></a></strong></li>
-</ol>
-
-<h2 id="Parte_II_del_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Parte II del tutorial</span></span></h2>
-
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Ejemplos que muestran el ámbito de aplicación de CSS en Mozilla.</span></span></p>
-
-<ol>
- <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting Started/JavaScript"><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">JavaScript</span></span></a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting Started/XBL bindings"><span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Enlaces XBL</span></span></a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting Started/XUL user interfaces"><span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Interfaces de usuario XUL</span></span></a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting Started/SVG graphics"><span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Gráficos SVG</span></span></a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting Started/XML data"><span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Datos XML</span></span></a></strong></li>
-</ol>
-
-<p>{{ languages( { "en": "en/CSS/Getting_Started", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p>
diff --git a/files/es/web/css/introducción/layout/index.html b/files/es/web/css/introducción/layout/index.html
deleted file mode 100644
index f71d3a82e6..0000000000
--- a/files/es/web/css/introducción/layout/index.html
+++ /dev/null
@@ -1,384 +0,0 @@
----
-title: Layout
-slug: Web/CSS/Introducción/Layout
-translation_of: Learn/CSS/CSS_layout
-translation_of_original: Web/Guide/CSS/Getting_started/Layout
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")}}Esta es la 12ª sección del tutorial CSS Getting Started; Describe algunas maneras de ajustar el diseño de su documento. Cambia el diseño de su documento de ejemplo.</p>
-
-<h2 class="clearLeft" id="Informacion_Layout">Informacion: Layout</h2>
-
-<p>Puede utilizar CSS para especificar varios efectos visuales que cambian el diseño de su documento. Algunas de las técnicas para especificar el diseño son avanzadas, y más allá del alcance de este tutorial básico.</p>
-
-<p>Cuando diseña un diseño para que se vea similar en muchos navegadores, su hoja de estilo interactúa con la hoja de estilo y el motor de diseño predeterminados del navegador de formas que pueden ser complejas. Este es también un tema avanzado, más allá del alcance de este tutorial básico.</p>
-
-<p>Esta página describe algunas técnicas sencillas que puedes probar.</p>
-
-<h3 id="Estructura_del_documento">Estructura del documento</h3>
-
-<p>Si desea controlar el diseño de su documento, es posible que deba cambiar su estructura.</p>
-
-<p>El lenguaje de marcado del documento puede tener etiquetas de propósito general para crear la estructura. Por ejemplo, en HTML puede utilizar el elemento {{HTMLElement ('div')}} para crear una estructura.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">
-<p>Ejemplo</p>
-
-<p>En su documento de ejemplo, los párrafos numerados en el segundo encabezado no tienen un contenedor propio.</p>
-
-<p>Su hoja de estilo no puede dibujar un borde alrededor de esos párrafos, porque no hay ningún elemento que especificar en el selector.</p>
-
-<p>Para solucionar este problema estructural, puede agregar una etiqueta {{HTMLElement ('div')}} alrededor de los párrafos. Esta etiqueta es única, por lo que puede identificarse con un atributo id:</p>
-</div>
-
-<pre class="brush:html;highlight:[2,8]">&lt;h3&gt;Numbered paragraphs&lt;/h3&gt;
-&lt;div id="numbered"&gt;
-  &lt;p&gt;Lorem ipsum&lt;/p&gt;
-  &lt;p&gt;Dolor sit&lt;/p&gt;
-  &lt;p&gt;Amet consectetuer&lt;/p&gt;
-  &lt;p&gt;Magna aliquam&lt;/p&gt;
-  &lt;p&gt;Autem veleum&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<p>Ahora su hoja de estilos puede utilizar una regla para especificar bordes alrededor de ambas listas:</p>
-
-<pre class="brush:css">ul, #numbered {
-  border: 1em solid #69b;
-  padding-right:1em;
-}
-</pre>
-
-<p>  El resultado se ve así: </p>
-
-<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;">
- <tbody>
-  <tr>
-   <td>
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
-
-    <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;">
-    <ul style="">
-     <li>Arctic</li>
-     <li>Atlantic</li>
-     <li>Pacific</li>
-     <li>Indian</li>
-     <li>Southern</li>
-    </ul>
-    </div>
-
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
-
-    <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;">
-    <p><strong>1: </strong>Lorem ipsum</p>
-
-    <p><strong>2: </strong>Dolor sit</p>
-
-    <p><strong>3: </strong>Amet consectetuer</p>
-
-    <p><strong>4: </strong>Magna aliquam</p>
-
-    <p><strong>5: </strong>Autem veleum</p>
-    </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h3 id="Unidades_de_tamaño">Unidades de tamaño</h3>
-
-<p>Hasta ahora en este tutorial, se han especificado tamaños en píxeles (px). Estos son apropiados para algunos propósitos en un dispositivo de visualización como una pantalla de computadora. Pero cuando el usuario cambia el tamaño de fuente, su diseño puede parecer incorrecto.</p>
-
-<p>Para muchos propósitos es mejor especificar tamaños como un porcentaje o en ems (em). Un em es nominalmente el tamaño de la fuente actual (el ancho de una letra m). Cuando el usuario cambia el tamaño de fuente, su diseño se ajusta automáticamente.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">
-<p>Ejemplo</p>
-
-<p>El borde a la izquierda de este texto tiene su tamaño especificado en píxeles.</p>
-
-<p>El borde de la derecha tiene su tamaño especificado en ems.</p>
-
-<p>En su navegador, cambie el tamaño de la fuente para ver cómo se ajusta el borde de la derecha pero el borde de la izquierda no:</p>
-</div>
-
-<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
- <tbody>
-  <tr>
-   <td>
-    <div style="">RESIZE ME PLEASE</div>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type">
-<p>Más detalles</p>
-
-<p>Para otros dispositivos, otras unidades de longitud son apropiadas.</p>
-
-<p>Hay más información sobre esto en una página posterior de este tutorial.</p>
-
-<p>Para obtener detalles completos de los valores y unidades que puede utilizar, consulte Valores en la especificación CSS.</p>
-</div>
-</div>
-
-<h3 id="Diseño_del_texto">Diseño del texto</h3>
-
-<p>Dos propiedades especifican cómo está alineado el contenido de un elemento. Puede usarlos para ajustes sencillos de diseño:</p>
-
-<p>{{Cssxref ('text-align')}}</p>
-
-<p><br>
-   Alinea el contenido. Utilice uno de estos valores: izquierda, derecha, centro, justificar<br>
- {{Cssxref ('texto-sangría')}}<br>
-     Indente el contenido en una cantidad que especifique.</p>
-
-<p>Estas propiedades se aplican a cualquier contenido similar al texto del elemento, no sólo al texto real. Recuerde que son heredados por los hijos del elemento, por lo que es posible que tenga que desactivarlos explícitamente en los niños para evitar resultados sorprendentes.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">
-<p>Ejemplo</p>
-
-<p>Para centrar los títulos:</p>
-</div>
-
-<pre class="brush:css">h3 {
-  border-top: 1px solid gray;
-  text-align: center;
-}
-</pre>
-
-<p>Resultado:</p>
-
-<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;">
- <tbody>
-  <tr>
-   <td>
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>En un documento HTML, el contenido que ve debajo de un encabezado no está estructuralmente contenido por el encabezado. Así que cuando alineas un encabezado como este, las etiquetas debajo del encabezado no heredan el estilo.</p>
-</div>
-
-<h3 id="Floats">Floats</h3>
-
-<p>La propiedad {{cssxref ('float')}} fuerza un elemento a la izquierda oa la derecha. Esta es una forma sencilla de controlar su posición y tamaño.</p>
-
-<p>El resto del contenido del documento fluye normalmente alrededor del elemento flotante. Puede controlar esto usando la propiedad {{cssxref ('clear')}} en otros elementos para hacerlos permanecer alejados de los flotadores.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">
-<p>Ejemplo</p>
-
-<p>En el documento de ejemplo, las listas se extienden por la ventana. Puede evitarlo flotando hacia la izquierda.</p>
-
-<p>Para mantener los encabezados en su lugar, también debe especificar que se mantengan alejados de los flotadores a su izquierda:</p>
-</div>
-
-<pre class="brush:css">ul, #numbered {float: left;}
-h3 {clear: left;}
-</pre>
-</div>
-
-<p>El resultado sería:</p>
-
-<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;">
- <tbody>
-  <tr>
-   <td>
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
-
-    <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;">
-    <ul style="">
-     <li>Arctic</li>
-     <li>Atlantic</li>
-     <li>Pacific</li>
-     <li>Indian</li>
-     <li>Southern</li>
-    </ul>
-    </div>
-
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
-
-    <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;">
-    <p><strong>1: </strong>Lorem ipsum</p>
-
-    <p><strong>2: </strong>Dolor sit</p>
-
-    <p><strong>3: </strong>Amet consectetuer</p>
-
-    <p><strong>4: </strong>Magna aliquam</p>
-
-    <p><strong>5: </strong>Autem veleum</p>
-    </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>(Un poco de relleno es necesario a la derecha de las cajas, donde el borde es demasiado cerca del texto.)</p>
-
-<h3 id="Posicionamiento">Posicionamiento</h3>
-
-<p>Puede especificar la posición de un elemento de cuatro formas especificando la propiedad {{cssxref ('position')}} y uno de los siguientes valores.</p>
-
-<p>Estas son propiedades avanzadas. Es posible utilizarlos de manera sencilla, por eso se mencionan en este tutorial básico. Pero puede ser difícil usarlos para diseños complejos.</p>
-
-<p>relativo</p>
-
-<p><br>
-   La posición del elemento se desplaza en relación con su posición normal. Utilícelo para desplazar un elemento por una cantidad especificada. A veces se puede utilizar el margen del elemento para lograr el mismo efecto.<br>
- fijo<br>
-     La posición del elemento es fija. Especifique la posición del elemento en relación con la ventana del documento. Incluso si el resto del documento se desplaza, el elemento permanece fijo.<br>
- absoluto<br>
-     La posición del elemento es fija con relación a un elemento padre. Sólo un padre que está posicionado con relativo, fijo o absoluto hará. Puede hacer que cualquier elemento padre sea adecuado especificando position: relative; Para ello sin especificar ningún cambio.<br>
- estático<br>
-     El valor por defecto. Utilice este valor si necesita desactivar la posición de forma explícita.</p>
-
-<p>Junto con estos valores de la propiedad de posición (a excepción de estática), especifique una o más de las propiedades: superior, derecha, inferior, izquierda, anchura, altura para identificar dónde desea que aparezca el elemento y tal vez también su tamaño.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">
-<p>Ejemplo</p>
-
-<p>Para colocar dos elementos uno encima del otro, cree un contenedor principal en el documento con los dos elementos dentro de él:</p>
-</div>
-
-<pre class="brush:html">&lt;div id="parent-div"&gt;
-  &lt;p id="forward"&gt;/&lt;/p&gt;
-  &lt;p id="back"&gt;\&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<p>En su hoja de estilos, haga que la posición de los padres sea relativa. No hay necesidad de especificar ningún cambio real. Haga que la posición de los niños sea absoluta:</p>
-
-<pre class="brush:css">#parent-div {
-  position: relative;
-  font: bold 200% sans-serif;
-}
-
-#forward, #back {
-  position: absolute;
-  margin:0px; /* no hay margenes alrededor del elemento */
-  top: 0px; /* distancia desde la parte superior */
-  left: 0px; /* distancia desde la izquierda */
-}
-
-#forward {
-  color: blue;
-}
-
-#back {
-  color: red;
-}
-</pre>
-
-<p>El resultado se ve así, con la barra invertida en la parte superior de la barra inclinada:</p>
-
-<div style="position: relative; left: .33em; font: bold 300% sans-serif;">
-<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p>
-
-<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p>
-</div>
-
-<table style="background-color: white; border: 2px outset #3366bb; height: 5em; padding: 1em; width: 30em;">
- <tbody>
-  <tr>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type">
-<p>Más detalles</p>
-
-<p>La historia completa sobre posicionamiento toma dos capítulos complejos en la Especificación CSS: Modelo de formato visual y detalles del modelo de formato Visual.</p>
-
-<p>Si está diseñando hojas de estilo para trabajar en muchos navegadores, también debe tener en cuenta las diferencias en la forma en que los navegadores interpretan el estándar y quizás errores en versiones concretas de navegadores particulares.</p>
-</div>
-</div>
-
-<h2 id="Action_Specifying_layout">Action: Specifying layout</h2>
-
-<ol>
- <li>Cambie el documento de ejemplo, doc2. Html y hoja de estilo, style2. Css, utilizando los ejemplos anteriores en las secciones Estructura de documento y flotantes.</li>
- <li>En el ejemplo Flotantes, agregue relleno para separar el texto del borde derecho por 0. 5 em.</li>
-</ol>
-
-<div class="tuto_example">
-<div class="tuto_type">
-<p>Cambios</p>
-
-<p>Cambie el documento de ejemplo, doc2. Html, agregando esta etiqueta a ella cerca del final, justo antes de &amp;lt;/ body&amp;gt;.</p>
-</div>
-
-<pre class="brush:html">&lt;img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"&gt;
-</pre>
-
-<p>Si no descargó el archivo de imagen anteriormente en este tutorial, descárguelo ahora y colóquelo en el mismo directorio que los demás archivos de ejemplo:</p>
-
-<table style="border: 2px solid #cccccc;">
- <tbody>
-  <tr>
-   <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td>
-  </tr>
- </tbody>
-</table>
-
-<p>Predecir dónde aparecerá la imagen en el documento. A continuación, actualice su navegador para ver si estaba correcto.</p>
-
-<p>Agregue una regla a su hoja de estilos que coloque la imagen en la parte superior derecha de su documento.</p>
-
-<p>Actualiza tu navegador y haz que la ventana sea pequeña. Compruebe que la imagen permanece en la parte superior derecha incluso cuando se desplaza el documento:</p>
-
-<div style="position: relative; width: 29.5em; height: 18em;">
-<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;">
-<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
-
-<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;">
-<ul style="">
- <li>Arctic</li>
- <li>Atlantic</li>
- <li>Pacific</li>
- <li>Indian</li>
- <li>Southern</li>
-</ul>
-</div>
-
-<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
-
-<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;">
-<p><strong>1: </strong>Lorem ipsum</p>
-
-<p><strong>2: </strong>Dolor sit</p>
-
-<p><strong>3: </strong>Amet consectetuer</p>
-
-<p><strong>4: </strong>Magna aliquam</p>
-
-<p><strong>5: </strong>Autem veleum</p>
-</div>
-
-<p style=""> </p>
-
-<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></div>
-</div>
-</div>
-</div>
-
-<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout"> See a solution to this challenge.</a></p>
-
-<h2 id="What_next">What next?</h2>
-
-<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables") }}Usted acaba de cubrir todos los temas en este tutorial básico de CSS. La siguiente página describe selectores más avanzados para reglas CSS y algunas maneras específicas en las que puede diseñar tablas.</p>
diff --git a/files/es/web/css/introducción/los_colon_estilos_de_texto/index.html b/files/es/web/css/introducción/los_colon_estilos_de_texto/index.html
deleted file mode 100644
index 1788c8c0ee..0000000000
--- a/files/es/web/css/introducción/los_colon_estilos_de_texto/index.html
+++ /dev/null
@@ -1,156 +0,0 @@
----
-title: Los estilos de texto
-slug: 'Web/CSS/Introducción/Los:estilos_de_texto'
-translation_of: Learn/CSS/Styling_text/Fundamentals
-translation_of_original: Web/Guide/CSS/Getting_started/Text_styles
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Esta es la sección séptima del</span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> tutorial</span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="es-es / docs / Web / guía / CSS / Primeros pasos"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS Introducción</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> ; </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">da más ejemplos de estilos de texto.</span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Usted modificara su hoja de estilo de ejemplo para utilizar diferentes fuentes.</span></font></font></p>
-
-<h2 class="clearLeft" id="Los_estilos_de_texto_Información"><span id="result_box" lang="es"><span class="hps">Los estilos de texto</span><span>: Información</span></span></h2>
-
-<p><span id="result_box" lang="es"><span class="hps">CSS</span> <span class="hps">tiene varias propiedades</span> <span class="hps">de</span> </span><span id="result_box" lang="es"><span class="hps">estilo</span><span> de </span></span><span id="result_box" lang="es"><span class="hps">texto</span> <span>.</span></span></p>
-
-<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Hay una propiedad abreviada conveniente, </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">la fuente</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> , que se puede utilizar para especificar varios aspectos a la vez, por ejemplo:</span></font></font></p>
-
-<ul style="margin: 0px 0px 24px; padding: 0px 0px 0px 40px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);">
- <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Negrita, cursiva, y small-caps (versalita)</span></font></font></li>
- <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">El tamaño</span></font></font></li>
- <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">La altura de la línea</span></font></font></li>
- <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">El tipo de letra</span></font></font></li>
-</ul>
-
-<div class="tuto_example">
-<div class="tuto_type">
-<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ejemplo</span></font></font></div>
-
-<pre class="brush:css  language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token selector" style="margin: 0px; padding: 0px; border: 0px; color: rgb(102, 153, 0);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">p </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">{ </span></font></font></span><span class="token property" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">fuente </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">:</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> cursiva 75% / 125% </span></font></font><span class="token string" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">"Comic Sans MS"</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> , cursive </span></font></font><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">; </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">}</span></font></font></span></code></pre>
-</div>
-
-<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">establece</span> varias <span class="hps">propiedades de la fuente</span><span class="alt-edited">, poniendo</span> <span class="hps">todos los párrafos</span> <span class="hps">en</span></span> italic.</p>
-
-<p><span id="result_box" lang="es"><span class="hps">El tamaño de fuente</span> <span class="hps">se establece en</span> <span class="hps">tres cuartas partes del</span> <span class="hps">tamaño</span> </span><span id="result_box" lang="es"><span class="hps">en </span><span class="hps">cada</span></span><span id="result_box" lang="es"> </span><span id="result_box" lang="es"><span class="hps">párrafo</span><span> </span></span><span id="result_box" lang="es"><span class="hps alt-edited">del elemento padre</span><span>,</span>  <span class="hps">y</span> <span class="hps alt-edited">el</span> <span class="hps alt-edited">interlíneado</span> <span class="hps">se establece en</span> <span class="hps">125</span><span class="atn">% (</span><span>un poco más</span> <span class="hps">separados</span> <span class="hps">de lo normal)</span><span>.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">tipo de letra</span> <span class="hps">se establece en</span> <span class="hps">Comic</span> <span class="hps">Sans</span> <span class="hps">MS</span><span>,</span> <span class="hps">pero si</span> <span class="hps">este tipo de letra</span> <span class="hps">no está disponible,</span> <span class="hps">el navegador</span> <span class="hps">utilizará</span> <span class="hps alt-edited">por</span> <span class="hps">defecto</span> <span class="hps">tipografía</span> <span class="hps">cursiva</span> <span class="hps">(</span></span>hand-written<span lang="es"><span>)</span><span>.</span></span></p>
-
-<p><span lang="es"><span class="hps">La</span> <span class="hps">regla tiene</span> <span class="hps alt-edited">el efecto colateral</span> <span class="hps alt-edited">de desactivar</span> <span class="hps alt-edited">las</span> <span class="hps alt-edited">versalitas</span> <span class="hps">y</span> <span class="hps alt-edited">negritas</span> <span class="hps atn">(</span><span>estableciendo su valor </span><span class="hps alt-edited">en normal)</span><span>:</span></span></p>
-</div>
-
-<h3 id="Tipos_de_fuentes"><span id="result_box" lang="es"><span class="hps alt-edited">Tipos de fuentes</span></span></h3>
-
-<p><span id="result_box" lang="es"><span class="hps">No se puede predecir</span> <span class="hps">qué</span> tipografías </span><span id="result_box" lang="es"><span class="hps alt-edited">tienen</span><span> </span></span><span id="result_box" lang="es"><span class="hps alt-edited">los lectores de</span> nuestro <span class="hps">documento</span> <span>.</span> <span class="hps">Así que</span> <span class="hps alt-edited">cuando se especifica</span> <span class="hps alt-edited">llos tipos de fuentes </span><span class="hps alt-edited">de las </span><span class="hps alt-edited">letra</span><span>s</span><span>, es</span> <span class="hps">buena</span> <span class="hps alt-edited">idea darle</span> <span class="hps alt-edited">una lista alternativa</span> <span class="hps">en orden de preferencia</span><span>.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps alt-edited">Finalice la</span> <span class="hps">lista</span> <span class="hps">con uno de los</span> <span class="hps alt-edited">las tipografías</span> por defecto<span class="hps alt-edited">:</span> </span><code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>.</p>
-
-<p><span lang="es"><span class="hps">Si el</span> <span class="hps">tipo de letra</span> <span class="hps alt-edited">no es compatible con</span> <span class="hps alt-edited">alguna de los caracteres</span> <span class="hps alt-edited">del documento</span><span>, el navegador</span> <span class="hps alt-edited">puede sustituirlos por</span> <span class="hps alt-edited">una tipografía</span> <span class="hps">diferente.</span> <span class="hps">Por ejemplo, el</span> <span class="hps">documento puede contener</span> <span class="hps">caracteres especiales que</span> </span><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">el tipo de letra no admite.</span><span lang="es"> <span class="hps">Si</span> <span class="hps">el navegador puede</span> <span class="hps">encontrar otro</span> <span class="hps alt-edited">tipografía que</span> <span class="hps">tiene esos</span> <span class="hps">caracteres</span><span>,</span> <span class="hps alt-edited">entonces usará</span> <span class="hps">otro</span> <span class="hps alt-edited">tipo de fuente</span></span></p>
-
-<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar un tipo de letra por sí misma, utilizar el </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-family</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> propiedad.</span></font></font></p>
-
-<h3 id="Los_tamaños_de_la_fuente"><span id="result_box" lang="es"><span title="Font sizes
-
-">Los tamaños de la fuente</span></span></h3>
-
-<p><span id="result_box" lang="es"><span title="Browser users can override the default font sizes or change the text size while they read a page, so it makes good sense for you to use relative sizes wherever you can.
-">Los usuarios de navegadores pueden anular los tamaños de fuente por defecto o cambiar el tamaño del texto mientras leen una página, así que tiene buen sentido utilizar tamaños relativos donde se pueda.</span></span></p>
-
-<p><span id="result_box" lang="es"><span title="You can use some built-in values for font sizes, like small, medium and large.">Puede utilizar algunos valores incorporados para tamaños de fuentes,  </span></span><code>like</code> <code>small</code>, <code>medium</code> and <code>large</code> (<span id="result_box" lang="es"><span title="You can use some built-in values for font sizes, like small, medium and large.">pequeñas, medianas y grandes)</span></span> . <span id="result_box" lang="es"><span title="You can also use values relative to the font size of the parent element, like: smaller, larger, 150% or 1.5em.">También puede utilizar valores relativos al tamaño de fuente del elemento padre, </span></span>l<code>ike</code><code>: smaller, larger, 150% or 1.5em</code>. ( <span id="result_box" lang="es"><span title="You can also use values relative to the font size of the parent element, like: smaller, larger, 150% or 1.5em.">más pequeño, más grande, 150% o 1.5em.)</span></span>. <span id="result_box" lang="es"><span title='An "em" is equivalent to the width of the letter "m" (for the font size of the parent element);'>Un "em" es equivalente a la anchura de la letra "m" (para el tamaño de fuente del elemento padre); </span><span title="thus 1.5em is one-and-a-half times the size of the font of the parent element.
-">así 1.5em es una vez y media el tamaño de la fuente del elemento padre.</span></span></p>
-
-<p><span id="result_box" lang="es"><span title="If necessary you can specify an actual size, like: 14px (14 pixels) for a display device or 14pt (14 points) for a printer.">Si es necesario, puede especificar como tamaño actual, : 14px (14 píxeles) para un dispositivo de visualización o 14pt (14 puntos) para una impresora.</span></span><span lang="es"><span title="If necessary you can specify an actual size, like: 14px (14 pixels) for a display device or 14pt (14 points) for a printer."> Esto no es accesible para los usuarios con discapacidad visual, ya que no les permite cambiar el tamaño. Una estrategia más accesible es establecer un valor incorporado como mediano en un elemento en la parte superior del documento, y luego fijar tamaños relativos a todos los elementos descendientes.</span></span></p>
-
-<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar un tamaño de fuente por su cuenta, utilice el </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-size</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> propiedad.</span></font></font></p>
-
-<h3 id="Altura_de_línea">Altura de línea</h3>
-
-<p><span id="result_box" lang="es"><span class="hps alt-edited">El</span> <span class="hps alt-edited">interlíneado</span> <span class="hps">especifica el</span> <span class="hps">espacio entre líneas</span><span>.</span> <span class="hps">Si el documento tiene</span> <span class="hps">párrafos largos</span> <span class="hps">con</span> <span class="hps">muchas líneas</span><span>,</span> <span class="hps">una separación</span> <span class="hps">más grande de lo</span> <span class="hps">normal,</span> <span class="hps">hace que sea</span> <span class="hps">más fácil de leer</span><span>, especialmente si el</span> <span class="hps">tamaño de la letra</span> <span class="hps">es pequeña</span><span>.</span></span></p>
-
-<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar una altura de línea por su cuenta, utilice <code>la </code></span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">propiedad </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">line-height</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> .</span></font></font></p>
-
-<h3 id="Decoración">Decoración</h3>
-
-<p><span id="result_box" lang="es"><span class="hps alt-edited">La</span> <span class="hps">propiedad independiente </span></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">text-decoration</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> </span></font></font><span lang="es"><span class="hps">puede</span> <span class="hps">especificar otros</span> <span class="hps">estilos,</span> <span class="hps">como el</span> <span class="hps">subrayado o</span> <span class="hps">tachado</span><span>.</span> <span class="hps">Usted</span> <span class="hps alt-edited">puede establecerlo en</span> <span class="hps">ninguno</span> ( </span><code>none</code> ) <span lang="es"> <span class="hps alt-edited">para eliminar</span> <span class="hps alt-edited">expresamente</span> <span class="hps">cualquier</span> <span class="hps">decoración.</span></span></p>
-
-<h3 id="Otras_propiedades">Otras propiedades</h3>
-
-<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar cursiva por su cuenta, use </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-style" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-style</span></font></font></code></a><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> : italic;</span></font></font></code><br>
- <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar audaz por su cuenta, use </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-weight</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> : bold;</span></font></font></code><br>
- <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar los pequeños capitales en su propio, el uso </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-variant</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> : small-caps;</span></font></font></code></p>
-
-<p>Para desactivar o activar cualquiera de estos valores de forma individual, puede especificar su valor como <code>normal</code> <code>o inherit</code>.</p>
-
-<div class="tuto_details">
-<div class="tuto_type">Mas detalles</div>
-
-<p><span id="result_box" lang="es"><span class="hps">Puede especificar</span> <span class="hps">estilos de texto</span> <span class="hps alt-edited">de diversas</span> <span class="hps alt-edited">maneras.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">Por ejemplo</span><span>,</span> <span class="hps">algunas de las</span> <span class="hps">propiedades mencionadas</span> <span class="hps">aquí</span> <span class="hps">tienen</span> <span class="hps">otros valores</span> <span class="hps">que se pueden utilizar</span><span>.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">una hoja de estilo</span> <span class="hps">compleja</span><span>,</span> <span class="hps alt-edited">evite utilizar</span> <span class="hps alt-edited">la propiedad </span></span><code>font</code> <code>shorthand</code><span lang="es"><span class="hps">,</span> <span class="hps">debido a sus</span> <span class="hps">efectos secundarios</span> <span class="hps">(resetean </span><span class="hps">otras propiedades</span> <span class="hps">individuales</span><span>)</span><span>.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps alt-edited">Para obtener mas detalles de</span> <span class="hps">las propiedades</span> <span class="hps">que se relacionan con</span> <span class="hps">las fuentes, </span></span><span lang="es"><span class="hps">ver</span></span><span lang="es"><span class="hps"> las </span><span class="hps">especificación</span>es <span class="hps">CSS</span></span><span lang="es"> </span><span id="result_box" lang="es"><span class="hps">, </span></span><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a><span lang="es"><span class="hps">,</span><span>.</span> <span class="hps alt-edited">Si desea más detalles sobre</span> <span class="hps">la decoración de</span> <span class="hps">texto,</span> <span class="hps">ver</span> </span><a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text </a><span lang="es"><span class="hps">.</span></span></p>
-
-<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Si no quiere depender de los tipos de letra instalados en los sistemas de los usuarios, puede usar </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(244, 244, 244);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">@ font-face</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> para especificar una fuente en línea. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Sin embargo, esto requiere que los usuarios tengan un navegador que soporte esta regla.</span></font></font></p>
-</div>
-
-<h2 id="Acción_Especificaciónes_de_las_fuentes"><span id="result_box" lang="es"><span>Acción:</span> <span class="hps">Especificaciónes de</span> <span class="hps">las fuentes</span></span></h2>
-
-<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para un simple documento, puede establecer la fuente del </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="El HTML &lt;body> representa el contenido de un documento HTML.  Sólo hay un elemento &lt;body> en un documento."><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">elemento  </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">&lt;body&gt;</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> y el resto del documento hereda la configuración.</span></font></font></p>
-
-<ol>
- <li><span id="result_box" lang="es"><span class="hps">Edite su archivo</span> <span class="hps">CSS</span><span>.</span></span></li>
- <li><span id="result_box" lang="es"><span class="hps alt-edited">Agregue</span> <span class="hps">la siguiente regla</span> <span class="hps">para cambiar</span> <span class="hps">el tipo de letra</span> <span class="hps">en todo el documento</span><span>.</span> <span class="hps">La</span> <span class="hps">parte superior del archivo</span> <span class="hps">CSS</span> <span class="hps">es</span> <span class="hps alt-edited">el lugar lógico</span> <span class="hps alt-edited">para esto</span><span>, pero no tiene</span> <span class="hps alt-edited">los mismos efectos</span> <span class="hps">donde</span> <span class="hps alt-edited">usted lo ponga</span><span>:</span></span>
-  <pre class="eval  language-html"><code class="language-html">body {font: 16px "Comic Sans MS", cursive;}</code></pre>
-
-  <div class="line-number" style="top: 0px;"> </div>
- </li>
- <li><span id="result_box" lang="es"><span class="hps alt-edited">Añada</span> <span class="hps">un comentario</span> <span class="hps alt-edited">que explique</span> <span class="hps">la regla, y</span> <span class="hps alt-edited">agregue un espacio en blanco</span> <span class="hps alt-edited">para que coincida con</span> <span class="hps">su diseño</span> <span class="hps">preferido</span><span>.</span></span></li>
- <li><span id="result_box" lang="es"><span class="hps">Guarde el archivo y</span> <span class="hps alt-edited">actualice el explorador</span> <span class="hps">para ver el efecto</span><span>.</span> <span class="hps">Si su sistema tiene</span> <span class="hps">Comic</span> <span class="hps">Sans</span> <span class="hps">MS</span><span>,</span> <span class="hps">u otra</span> <span class="hps">fuente cursiva</span> <span class="hps">que no</span> <span class="hps">soporta </span></span>italic<span lang="es"><span class="hps">,</span> <span class="hps">su navegador</span> eligira <span class="hps">un</span> <span class="hps">tipo de letra</span> <span class="hps">diferente para </span></span><span lang="es"><span class="hps alt-edited">la</span> <span class="hps alt-edited">primera línea</span></span><span lang="es"><span class="hps"> del</span> <span class="hps">texto en </span></span>italic<span lang="es"><span class="hps alt-edited">:</span></span>
-  <table style="border: 2px outset #36b; padding: 1em;">
-   <tbody>
-    <tr>
-     <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-    </tr>
-    <tr>
-     <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
- </li>
- <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Desde la barra de menú de su navegador, elija </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver&gt; Tamaño del texto&gt; Aumentar</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> (o </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver&gt; Zoom&gt; Acercar</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> ). </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">A pesar de que ha especificado 16 píxeles en el estilo, un usuario leer el documento se puede cambiar este tamaño.</span></font></font></li>
-</ol>
-
-<div class="tuto_example">
-<div class="tuto_type">Desafío</div>
-
-<p><span id="result_box" lang="es"><span class="hps">Sin modificar nada más</span><span>,</span> <span class="hps">hacer</span> <span class="hps">las seis</span> <span class="hps">letras iniciales</span> <span class="hps">dos veces el tamaño</span> <span class="hps">de</span> <span class="hps">letra serif</span> <span class="hps">por defecto del navegador</span><span>:</span></span></p>
-
-<table>
- <tbody>
-  <tr>
-   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td>
-  </tr>
-  <tr>
-   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Possible solution</div>
-
-<p>Add the following style declaration to the <code>strong</code> rule:</p>
-
-<pre class="brush: css">  font: 200% serif;
-</pre>
-If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden.
-
-<p> </p>
-<a class="hideAnswer" href="#challenge">Hide solution</a></div>
-<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles#tutochallenge" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-size: 12px; text-align: right; display: block; font-family: 'Open Sans', sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal;" title="Mostrar una posible solución para el desafío"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver una solución para el desafío.</span></font></font></a></div>
-
-<h2 id="¿Y_ahora_qué"><span id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2>
-
-<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">El documento muestra ya utiliza varios colores con nombre. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">La </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="/ En-US / docs / Web / guía / CSS / Getting_Started / Color"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">siguiente sección</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> enumera los nombres de los colores estándar y se explica cómo se puede especificar otros </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">.</span></font></font></strong></p>
-
-<p> </p>
diff --git a/files/es/web/css/introducción/media/index.html b/files/es/web/css/introducción/media/index.html
deleted file mode 100644
index bb7bb0bd23..0000000000
--- a/files/es/web/css/introducción/media/index.html
+++ /dev/null
@@ -1,394 +0,0 @@
----
-title: Media
-slug: Web/CSS/Introducción/Media
-translation_of: Web/Progressive_web_apps/Responsive/Media_types
----
-<p>{{CSSTutorialTOC}} {{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables")}}</p>
-
-<p>Esta es la ultima sección de la primera parte del tutorial de <a href="/es/docs/Web/CSS/Introducción" title="es/docs/Web/CSS/Introducción">Introducción a CSS</a>. Muchas páginas de este tutorial se han enfocado en las propiedades y valores de CSS que especifican como mostrar un documento. Esta sección indaga otra vez en el propósito y la estructura de las hojas de estilo.</p>
-
-<h2 class="clearLeft" id="Información_Media">Información: Media</h2>
-
-<p>El propósito de CSS es especificar cómo los documentos son presentados al usuario. La presentación puede tener más de una forma.</p>
-
-<p>Por ejemplo, probablemente estes leyendo esta página en algún aparato doméstico (un celular, tu pc). Pero también podrías querer proyectarlo para una audiencia mas grande o imprimirlo. Estos medios pueden tener diferentes características. CSS te provee diferentes maneras de presentar un documento en distintos medios.</p>
-
-<p>Para especificar reglas para un medio en particular, usa {{CSSXref("@media")}} seguido por el tipo de medio, seguido por llaves que encierren las reglas.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Ejemplo</div>
-
-<p>Un documento en un web site tiene una barra de navegación que permite a los usuarios moverse en el sitio.</p>
-
-<p>En el lenguaje de marcado, el elemento padre de esta área tiene el <strong>id</strong> <code>nav-area</code>. (En {{HTMLVersionInline(5)}}, esto puede ser marcado con el elemento {{HTMLElement("nav")}} en vez de un {{HTMLElement("div")}} con un atributo <strong>id</strong>.)</p>
-
-<p>Cuando vas a imprimir el documento esa área de navegación no tiene ningún propósito, entonces con las hojas de estilo puedes removerlo completamente:</p>
-
-<pre class="brush:css">@media print {
-  #nav-area {display: none;}
-  }
-</pre>
-</div>
-
-<p>Algunos de los tipos de medios comunes son:</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td><code>screen</code></td>
-   <td>Pantalla de computadora</td>
-  </tr>
-  <tr>
-   <td><code>print</code></td>
-   <td>Medio paginado</td>
-  </tr>
-  <tr>
-   <td style="padding-right: 1em;"><code>projection</code></td>
-   <td>Pantalla proyectada</td>
-  </tr>
-  <tr>
-   <td><code>all</code></td>
-   <td>Todos (por defecto)</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="tuto_details">
-<div class="tuto_type">Mas detalles</div>
-
-<p>Existen otras maneras de especificar un conjunto de reglas para los distintos medios.</p>
-
-<p>El lenguaje de marcado del documento puede permitir que el tipo de medio sea determinado cuando la hoja de estilo esta enlazada al documento. Por ejemplo, en HTML puedes especificar el tipo de medio con un atributo <code>media</code> en la etiqueta LINK.</p>
-
-<p>En CSS puedes usar {{CSSXref("@import")}} al inicio de la hoja de estilo para importar otra hoja de estilo de una URL, opcionalmente especificando el tipo de medio.</p>
-
-<p>Al usar estas técnicas puedes separar las reglas de estilo para los diferentes medios en distintos archivos. Esta es una manera útil de estructurar tus hojas de estilo.</p>
-
-<p>Para más detalles de los tipos de medio, ve <a href="http://www.w3.org/TR/CSS21/media.html">Media</a> en la especificación de CSS.</p>
-
-<p>Existen mas ejemplos de la propiedad {{cssxref("display")}} en una página posterior de este tutorial: <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en-US/docs/Web/Guide/CSS/Getting_Started/XML_data">XML data</a>.</p>
-</div>
-
-<h3 id="Imprimir">Imprimir</h3>
-
-<p>CSS tiene algún soporte especifico para impresión y para medios páginados en general.</p>
-
-<p>Una regla {{cssxref("@page")}} puede determinar los márgenes de la página. Para impresión de doble cara, puedes definir los márgenes separadamente para <code>@page:left</code> y <code>@page:right</code>.</p>
-
-<p>Para medios impresios, normalmente usas unidades apropiadas de lonfigutd como pulgadas (<code>in</code>) y puntos (<code>pt</code> = 1/72 inch), o centimetros (<code>cm</code>) y milimetros (<code>mm</code>). Es igualmente apropiado usar ems (<code>em</code>) para conincidir el tamaño de la fuente, y porcentajes (<code>%</code>).</p>
-
-<p>Tu puedes controlar como los saltos de línea del contenido de un documento, al usar las propiedades {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} y{{cssxref("page-break-inside")}}.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Ejemplo</div>
-
-<p>Esta regla determina los márgenes a una pulgada en todos los lados:</p>
-
-<pre class="brush:css">@page {margin: 1in;}
-</pre>
-
-<p>Esta regla asegura que cada elemento H1 empiece en una nueva página:</p>
-
-<pre class="brush:css">h1 {page-break-before: always;}
-</pre>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type">Más detalles</div>
-
-<p>Para más detalles del soporte de CSS para medios paginados, ver <a href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> en la especificación de CSS.</p>
-
-<p>Como otras características de CSS, imprimir depende de tu navegador y su configuración. Por ejemplo, Mozilla te suple con unos márgenes por defecto, cabeceras y pies de página cuando imprimes. Cuando otros usuarios imprimen tu documento, probablemente no puedas predecir el navegador y la configuración usada, por lo que no podrás controlar los resutlados completamente.</p>
-</div>
-
-<h3 id="Interfaces_de_Usuario">Interfaces de Usuario</h3>
-
-<p>CSS tiene algunas propiedades especificas para aparatos que soportanuna interfaz de usuario, como monitores. Esto hace que la apariencia del documento cambie dinámicamente mientras el usuario trabaja con la interfaz.</p>
-
-<p>No existe un tipo especial de medio para aparatos con interfaz de usuario.</p>
-
-<p>Si existen cinco selectores especiales:</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td><strong>Selector</strong></td>
-   <td><strong>Selects</strong></td>
-  </tr>
-  <tr>
-   <td><code>E{{cssxref(":hover")}}</code></td>
-   <td>Cualquier elemento E que tenga el puntero sobre él</td>
-  </tr>
-  <tr>
-   <td><code>E{{cssxref(":focus")}}</code></td>
-   <td>Cualquier elemento E que tenga el foco del teclado</td>
-  </tr>
-  <tr>
-   <td><code>E{{cssxref(":active")}}</code></td>
-   <td>Cualquier elemento E que este envuelto en la acción actual del usuario</td>
-  </tr>
-  <tr>
-   <td><code>E{{cssxref(":link")}}</code></td>
-   <td>Cualquier elemento E que es un hipervinculo a una URL no visitada por el usuario</td>
-  </tr>
-  <tr>
-   <td><code>E{{cssxref(":visited")}}</code></td>
-   <td>Cualquier elemento E que es un hipervinculo a una URL que el usuario ya visito</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Nota: </strong>La información que puede ser obtenida con el selector :visited esta restringida en {{gecko("2.0")}}. Ver <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector" title="en-US/docs/Web/Guide/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a> para más detalles.</p>
-</div>
-
-<p>La propiedad {{cssxref("cursor")}} especifica la forma del puntero: Algunas de las formas comunes son las siguientes.</p>
-
-<p>Coloca el mouse sobre los items en este lista para ver la forma actual del puntero en tu navegador:</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td><strong>Selector</strong></td>
-   <td><strong>Selects</strong></td>
-  </tr>
-  <tr style="cursor: pointer;">
-   <td><code>pointer</code></td>
-   <td>Indicating a link</td>
-  </tr>
-  <tr style="cursor: wait;">
-   <td><code>wait</code></td>
-   <td>Indicating that the program cannot accept input</td>
-  </tr>
-  <tr style="cursor: progress;">
-   <td><code>progress</code></td>
-   <td>Indicating that the program is working, but can still accept input</td>
-  </tr>
-  <tr style="cursor: default;">
-   <td><code>default</code></td>
-   <td>The default (usually an arrow)</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Una propiedad {{cssxref("outline")}} crea un contorno que a menudo es usado para indicar el foco del teclado. Sus valores son similares a la propiedad {{cssxref("border")}}, excepto que no puedes especificar lados individuales.</p>
-
-<p>Otras características de las interfaces de usuario son implementadas usando atributos. Por ejemplo, un elemento que esta deshabilitado o es de solo lectura tiene el atributo <strong>disabled</strong> o el atributo <strong>readonly</strong>. Selectores puede especificar estos atributos como cualquier otro, usando corchetes: <code>{{mediawiki.external('disabled')}}</code> o <code>{{mediawiki.external('readonly')}}</code>.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Ejemplo</div>
-
-<p>Estas reglas especifican estilos para un boton que cambia dinámicamente cuando el usuario interactúa con el:</p>
-
-<pre class="brush:css">.green-button {
-  background-color:#cec;
-  color:#black;
-  border:2px outset #cec;
-  }
-
-.green-button[disabled] {
-  background-color:#cdc;
-  color:#777;
-  }
-
-.green-button:active {
-  border-style: inset;
-  }
-</pre>
-
-<p>Esta wiki no soporta una interfaz de usuario en la página, entonces estos botones no hacen "click". A continuación se presentan una imágenes estáticas para ilustrar la idea:</p>
-
-<table style="background-color: #fff; border: 2px outset #36b; padding: 1em;">
- <tbody>
-  <tr>
-   <td>
-    <table>
-     <tbody>
-      <tr>
-       <td><span style="background-color: #cdc; border: 2px outset #cec; color: #777; cursor: default; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td>
-       <td><span style="background-color: #cec; border: 2px outset #cec; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td>
-       <td><span style="background-color: #cec; border: 2px inset #cec; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td>
-      </tr>
-      <tr style="line-height: 25%;">
-       <td> </td>
-      </tr>
-      <tr style="font-style: italic;">
-       <td>disabled</td>
-       <td>normal</td>
-       <td>active</td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>Un botón completamente funcional también tiene un contorno oscuro alrededor cuando esta por defecto, y un contorno punteado en él cuando tiene el foco del teclado. También podría un efecto flotante (hover) cuando el puntero este sobre el.</p>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type">Más detalles</div>
-
-<p>Para más información sobre interfaces de usuario en CSS, ver <a href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> en la especificación de CSS.</p>
-
-<p>Existe un ejemplo del lenguaje de marcado usado por Mozilla para interfaces de usuario, XUL, en la Parte II de este tutorial.</p>
-</div>
-
-<h2 id="Acción_Imprimir_un_documento">Acción: Imprimir un documento</h2>
-
-<ol>
- <li>Abrir un nuevo documento HTML, <code>doc4.html</code>. Copiar y pegar el contenido de aqui:
-
-  <pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;title&gt;Print sample&lt;/title&gt;
-    &lt;link rel="stylesheet" href="style4.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;h1&gt;Section A&lt;/h1&gt;
-    &lt;p&gt;This is the first section...&lt;/p&gt;
-    &lt;h1&gt;Section B&lt;/h1&gt;
-    &lt;p&gt;This is the second section...&lt;/p&gt;
-    &lt;div id="print-head"&gt;
-      Heading for paged media
-    &lt;/div&gt;
-    &lt;div id="print-foot"&gt;
-      Page:
-    &lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
- </li>
- <li>Abrir una nueva hoja de estilo, <code>style4.css</code>. Copiar y pegar el contenido de aqui:
-  <pre class="brush:css">/*** Print sample ***/
-
-/* defaults  for screen */
-#print-head,
-#print-foot {
-  display: none;
-  }
-
-/* print only */
-@media print {
-
-h1 {
-  page-break-before: always;
-  padding-top: 2em;
-  }
-
-h1:first-child {
-  page-break-before: avoid;
-  counter-reset: page;
-  }
-
-#print-head {
-  display: block;
-  position: fixed;
-  top: 0pt;
-  left:0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  text-align: center;
-  }
-
-#print-foot {
-  display: block;
-  position: fixed;
-  bottom: 0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  }
-
-#print-foot:after {
-  content: counter(page);
-  counter-increment: page;
-  }
-
-} /* end print only */
-</pre>
- </li>
- <li>Ve este documento en tu navegador; este usa el estilo por defecto de tu navegador.</li>
- <li>Imprime (o previsualiza) el documento; la hoja de estilo coloca cada sección en una página separada, y agrega una cabecera y un pie de página por cada una. Si tu navegador soporta contadores, le agregará un número de página al pie.
-  <table>
-   <tbody>
-    <tr>
-     <td>
-      <table style="border: 2px outset #36b; padding: 1em;">
-       <tbody>
-        <tr>
-         <td>
-          <table style="margin-right: 2em; width: 15em;">
-           <tbody>
-            <tr>
-             <td>
-              <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div>
-
-              <div style="font-size: 150%; font-weight: bold;">Section A</div>
-
-              <div style="font-size: 75%;">This is the first section...</div>
-
-              <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 1</div>
-             </td>
-            </tr>
-           </tbody>
-          </table>
-         </td>
-        </tr>
-       </tbody>
-      </table>
-     </td>
-     <td>
-      <table style="border: 2px outset #36b; padding: 1em;">
-       <tbody>
-        <tr>
-         <td>
-          <table style="margin-right: 2em; width: 15em;">
-           <tbody>
-            <tr>
-             <td>
-              <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div>
-
-              <div style="font-size: 150%; font-weight: bold;">Section B</div>
-
-              <div style="font-size: 75%;">This is the second section...</div>
-
-              <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 2</div>
-             </td>
-            </tr>
-           </tbody>
-          </table>
-         </td>
-        </tr>
-       </tbody>
-      </table>
-     </td>
-    </tr>
-   </tbody>
-  </table>
- </li>
-</ol>
-
-<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em; width: 100%;">
- <caption>Retos</caption>
- <tbody>
-  <tr>
-   <td>Mueve las relgas de estilo especificas para imprimir a un archivo CSS separado.
-    <p>Lee la página de referencia {{CSSXref("@import")}} para buscar detalles de como importar el nuevo archivo CSS especifico para imrpimir dentro de tu hoja de estilo style4.css.</p>
-
-    <p>Haz que las encabezamientos se vuelvan azules cuando el puntero del mouse este sobre ellos.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Media" title="en-US/docs/Web/Guide/CSS/Getting_started/Challenge_solutions#Media">Ver soluciones a estos retos.</a></p>
-
-<h2 id="¿Qué_sigue">¿Qué sigue?</h2>
-
-<p>Si has tenido dificultades entendiendo esta página, o si tienes algún comentario, por favor contribuye en la página de <a href="/Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media">Discussion</a>.</p>
-
-<p>Hasta aquí, todas las reglas de estilo en este tutorial han estado en archivos especificos. Las reglas y sus valores son fijos. La siguiente página describe como cambiar las reglas dinámicamente al usar un lenguaje de programación: <strong><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript">JavaScript</a></strong></p>
diff --git a/files/es/web/css/introducción/selectors/index.html b/files/es/web/css/introducción/selectors/index.html
deleted file mode 100644
index 9ebe3573e8..0000000000
--- a/files/es/web/css/introducción/selectors/index.html
+++ /dev/null
@@ -1,416 +0,0 @@
----
-title: Selectores
-slug: Web/CSS/Introducción/Selectors
-translation_of: Learn/CSS/Building_blocks/Selectors
-translation_of_original: Web/Guide/CSS/Getting_started/Selectors
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading &amp; inheritance")}}<span id="result_box" lang="es"><span class="hps">Esta</span> <span class="hps">es</span> <span class="hps">la sección</span> <span class="hps">quinta</span> <span class="hps">del</span> </span><span id="result_box" lang="es"><span class="hps">tutoria</span></span><span class="seoSummary"><a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> ;</span><span id="result_box" lang="es"><span class="hps">En él se explica</span> <span class="hps">cómo se puede aplicar</span> <span class="hps">estilos</span> <span class="hps">de forma selectiva</span><span>,</span> <span class="hps">y cómo</span> <span class="hps">los diferentes tipos de</span> <span class="hps">selectores</span> <span class="hps">tener diferentes</span> <span class="hps">prioridades.</span> <span class="hps">Agregar algunos</span> <span class="hps">atributos a</span> <span class="hps">las</span> <span class="hps">etiquetas</span> <span class="hps">en su</span> <span class="hps">documento de muestra</span><span>,</span> <span class="hps">y</span> <span class="hps">utiliza estos</span> <span class="hps">atributos en</span> <span class="hps">su hoja de estilos</span> <span class="hps">de muestra.</span></span></p>
-
-<h2 class="clearLeft" id="Información_Selectores"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Selectores</span></span></h2>
-
-<p><br>
- <span id="result_box" lang="es"><span class="hps">CSS</span> <span class="hps">tiene su propia terminología</span> <span class="hps">para describir el</span> <span class="hps">lenguaje CSS</span><span>.</span> <span class="hps">Anteriormente</span> <span class="hps">en este tutorial,</span> <span class="hps">que ha creado</span> <span class="hps">una línea en</span> <span class="hps">su hoja de estilos</span> <span class="hps alt-edited">como esta:</span></span></p>
-
-<pre class="brush: css">strong {
-  color: red;
-}
-</pre>
-
-<p><span id="result_box" lang="es"><span class="hps">En la terminología de</span> <span class="hps">CSS</span><span>,</span> <span class="hps">toda</span> <span class="hps">esta línea</span> <span class="hps">es una </span></span><em><code><strong>rule </strong></code>(</em><span id="result_box" lang="es"><span class="hps">regla).</span> <span class="hps">Esta regla</span> <span class="hps">comienza con</span> </span><strong><em><code>strong</code></em></strong><span lang="es"><span>, que es un</span> <span class="hps">selector.</span> <span class="hps alt-edited">Permite seleccionar</span> <span class="hps">qué elementos</span> <span class="hps">en el DOM</span> <span class="hps">se aplica la regla</span><span>.</span></span></p>
-
-<div class="tuto_details">
-<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">Más</span> <span class="hps">detalles</span></span></div>
-
-<p><span id="result_box" lang="es"><span class="hps">La parte</span> <span class="hps">interior de las</span> <span class="hps">llaves</span> <span class="hps">es la declaración</span><span>.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps"> L</span><span class="hps alt-edited">a palabra clave es </span></span><span id="result_box" lang="es"><code><em><span class="hps">color</span></em></code>, que </span><span id="result_box" lang="es"><span class="hps alt-edited">es</span> <span class="hps">una propiedad,</span> <span class="hps">y el <code><em>rojo </em></code>es</span> <span class="hps">el valor.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">El punto y coma</span> <span class="hps">después de el</span> <span class="hps">par</span> <span class="hps">propiedad</span><span class="atn">-</span><span>valor</span> <span class="hps">separa los posibles </span><span class="hps">otros pares de </span> <span class="hps">propiedad</span><span>-valor en</span> una <span class="hps">misma declaración.</span></span></p>
-
-<p> <span id="result_box" lang="es"><span class="hps">Este tutorial</span> <span class="hps">se refiere a</span> <span class="hps">un selector</span> <span class="hps">como</span> </span><em><strong><code>strong</code> </strong></em><span lang="es"><span class="hps">como un</span> <span class="hps">selector de etiquetas</span><span>.</span> <span class="hps">La</span> <span class="hps">especificación</span> <span class="hps">CSS</span> <span class="hps">se refiere a él como</span> <span class="hps">un selector de</span> <span class="hps">tipo <code><strong>(</strong></code></span></span><code><strong> type selector)</strong></code><span lang="es"><span>.</span></span></p>
-</div>
-
-<p><span id="result_box" lang="es"><span class="hps alt-edited">En esta página</span> <span class="hps">del tutorial</span> <span class="hps alt-edited">se explica</span> <span class="hps">más acerca de los</span> <span class="hps">selectores</span> <span class="hps">que se pueden utilizar</span> <span class="hps">en</span> <span class="hps">las reglas CSS</span><span>.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">Además de añadir </span></span><span id="result_box" lang="es"><span class="hps">nombres a las e</span></span><span id="result_box" lang="es"><span class="hps">tiquetas</span> <span>, puede usar </span><span class="hps alt-edited">valores en los atributos</span> de <span class="hps">los selectores</span><span>.</span> <span class="hps">Esto permite que sus</span> <span class="hps">reglas sean</span> <span class="hps">más específicas.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">Dos</span> <span class="hps">atributos tienen</span> <span class="hps">un estatus especial</span> <span class="hps">para</span> <span class="hps">CSS</span><span>.</span> <span class="hps">Son</span></span> <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> <code>e </code><a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p>
-
-<h3 id="Class_Selectores_de_clase">Class: <span id="result_box" lang="es"><span class="hps">Selectores de clase</span></span></h3>
-
-<p><span id="result_box" lang="es"><span class="hps">Utilice el</span> <span class="hps">atributo</span></span> <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> para <span id="result_box" lang="es"><span class="hps">asignarle  a </span></span><span id="result_box" lang="es"><span class="hps">un elemento</span> un nombre de clase<code><strong><em> (class)</em></strong></code></span>. <span id="result_box" lang="es"><span class="hps">Depende de</span><span class="hps">l</span><span class="hps"> nombre que elijas</span> como <span class="hps"><code><strong><em>class</em></strong></code>.</span></span> <span id="result_box" lang="es"><span class="hps">Múltiples</span> <span class="hps">elementos en un documento</span> <span class="hps">pueden tener el mismo</span> <span class="hps">valor de la clase</span><span>.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">su hoja de estilo</span><span>, escriba</span> <span class="hps atn">un punto (.</span><span>)</span> <span class="hps">antes del </span><span class="hps">nombre de la clase</span>,<span class="hps"> cuando</span> <span class="hps">se utiliza como </span><span class="hps">un selector.</span></span></p>
-
-<h3 id="Selectores_ID"><span id="result_box" lang="es"><span class="hps alt-edited">Selectores ID</span></span></h3>
-
-<p><span id="result_box" lang="es"><span class="hps">Utilice el atributo</span> <span class="hps">id en</span> <span class="hps">un elemento</span> <span class="hps">para asignar un</span> <span class="hps alt-edited">identificación para</span> ese <span class="hps">elemento</span><span>.</span> <span class="hps">Depende de</span> usted el <span class="hps">nombre que elija</span> <span class="hps">para el ID</span><span>.</span> <span class="hps">El nombre de</span> <span class="hps">ID</span> <span class="hps">debe ser único</span> <span class="hps">en el documento.</span></span><br>
-  </p>
-
-<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">su hoja de estilo</span><span>, escriba un</span> <span class="hps alt-edited">símbolo de almohadilla</span> <span class="hps atn">(</span><span class="alt-edited">#)</span> <span class="hps alt-edited">ante el</span> <span class="hps alt-edited">ID cuando</span> <span class="hps alt-edited">se utiliza esto en</span> <span class="hps">un selector.</span></span></p>
-
-<div class="tuto_example">
-<div class="tuto_type">Ejemplo</div>
-
-<p><span id="result_box" lang="es"><span class="hps">Esta etiqueta</span> <span class="hps">HTML</span> <span class="hps">tiene un</span> <span class="hps alt-edited">atributo <code>class</code></span><code> </code><span class="hps">y un atributo</span> <span class="hps"><code>id</code>:</span></span></p>
-
-<pre class="brush: html">&lt;p class="key" id="principal"&gt;
-</pre>
-
-<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps alt-edited">valor de <code><em><strong>id </strong></em></code>es</span><span class="alt-edited">, <strong>principal</strong>,</span> <span class="hps">debe ser único</span> <span class="hps">en el documento;</span> <span class="hps">pero</span> <span class="hps">otras</span> <span class="hps">etiquetas del documento</span> <span class="hps">puede tener el mismo</span> <span class="hps alt-edited">nombre de la <strong><em><code>class</code></em></strong></span><span>,</span> <span class="hps alt-edited">Key.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">una hoja de estilo</span> <span class="hps">CSS</span><span>,</span> <span class="hps">esta regla</span> <span class="hps">hace que todos</span> <span class="hps">los elementos con la <code><em>class</em></code></span><code><em> </em></code><span class="hps"><code><em><strong>key </strong></em></code>sean verdes</span> <span>.</span> <span class="hps atn">(</span><span>Puede ser que no</span> <span class="hps">todos los sean</span> <span class="hps atn">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="hps">()</span><span>}</span> <span class="hps">"p"</span><span>}</span> <span class="hps">elementos.</span><span>)</span></span></p>
-
-<pre class="brush: css">.key {
-  color: green;
-}
-</pre>
-
-<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">hace que</span> <span class="hps">el </span></span><span id="result_box" lang="es"><span class="hps">único </span></span><span id="result_box" lang="es"><span class="hps"> </span></span><span id="result_box" lang="es"><span class="hps">elemento</span> </span><span id="result_box" lang="es"> <span class="hps alt-edited">de id </span></span><span id="result_box" lang="es"><code><strong><em><span class="hps alt-edited">principal</span></em></strong></code> este en <span class="hps">negrita:</span></span></p>
-
-<pre class="brush: css">#principal {
-  font-weight: bolder;
-}
-</pre>
-</div>
-
-<p><span id="result_box" lang="es"><span class="hps">Si más de una</span> <span class="hps">regla se aplica a</span> <span class="hps">un elemento</span> <span class="hps">y especifica</span> <span class="hps">la misma propiedad,</span> <span class="hps alt-edited">entonces</span> <span class="hps alt-edited">el CSS</span> <span class="hps">da prioridad</span> <span class="hps">a la regla que</span> <span class="hps">tiene el</span> <span class="hps">selector más específico</span><span>.</span> <span class="hps">Un selector</span> <code><em><strong><span class="hps">ID</span> </strong></em></code><span class="hps">es más específico que</span> <span class="hps">un</span> <span class="hps alt-edited">selector de <em><strong><code>class</code></strong></em></span><span>,</span> <span class="hps">que a su vez</span> <span class="hps">es más específico que</span> <span class="hps">un</span> <span class="hps alt-edited">selector (<strong>tag</strong>) de etiquetas</span><span>.</span></span></p>
-
-<div class="tuto_details">
-<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">Más</span> <span class="hps">detalles</span></span></div>
-
-<p><span id="result_box" lang="es"><span class="hps">También se pueden combinar</span> <span class="hps">selectores</span><span>, haciendo un</span> <span class="hps">selector más específico</span><span>.</span></span><br>
- <br>
- Por ejemplo, el selector <strong><em><code>.key</code></em></strong> selecciona <span id="result_box" lang="es"><span class="hps">todos los</span> <span class="hps">elementos que tienen</span> <code><em><strong><span class="hps">key</span> </strong></em></code>como <span class="hps alt-edited">nombre de clase (<strong><em><code>class</code></em></strong></span></span>). El selector <code><em><strong>p</strong></em>.key</code> <span id="result_box" lang="es"><span class="hps">selecciona</span> <span class="hps">sólo el elemento</span></span> {{ HTMLElement("p") }} que tiene de nombre <em><strong><code>key</code></strong></em>.</p>
-
-<p><span id="result_box" lang="es"><span class="hps">Usted no esta </span><span class="hps">limitado a los dos</span> <span class="hps">atributos especiales</span><span>, </span></span><em><strong><code>class</code> </strong></em><span lang="es"><span class="hps">e <em><code><strong>id</strong></code></em></span><span>.</span>  Se p<span class="hps">uede especificar</span> <span class="hps">otros atributos</span> <span class="hps">mediante corchetes</span><span>.</span> <span class="hps">Por ejemplo</span><span>, el selector</span> <span class="hps atn">[</span></span><strong><em><code>type='button'</code></em></strong><span lang="es"><span>] selecciona</span> <span class="hps">todos los</span> <span class="hps">elementos que tienen</span> <span class="hps">un atributo de tipo</span> <span class="hps">con el </span> <span class="hps">valor </span></span><strong><em><code>button</code></em></strong><span lang="es"><span>.</span></span></p>
-</div>
-
-<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">la hoja de estilo</span> <span class="hps">tiene reglas</span> <span class="hps">en conflicto</span> <span class="hps">y son</span> <span class="hps">igualmente específicas</span><span>, entonces</span> <span class="hps alt-edited">el CSS</span> <span class="hps">da</span> <span class="hps">prioridad a</span> <span class="hps alt-edited">la regla que</span> <span class="hps alt-edited">está</span> <span class="hps alt-edited">después en</span> <span class="hps">la hoja de estilos</span><span>.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">usted tiene un problema</span> <span class="hps alt-edited">con las reglas</span> <span class="hps">en conflicto,</span> <span class="hps alt-edited">trate de resolverlo</span> <span class="hps">haciendo</span> <span class="hps">una de las</span> <span class="hps">normas más específicas</span><span>, para que</span> <span class="hps alt-edited">tenga </span><span class="hps">prioridad.</span> <span class="hps">Si usted no puede</span> <span class="hps">hacer esto</span><span>, trate de mover</span> <span class="hps">una de las reglas</span> mas <span class="hps alt-edited">cerca del</span> <span class="hps">final de</span> <span class="hps">la hoja de estilos</span> <span class="hps">para que tenga</span> la <span class="hps">prioridad.</span></span></p>
-
-<h3 id="Las_pseudo-clases_de_los_selectores"><span class="short_text" id="result_box" lang="es"><span class="hps atn">Las pseudo-</span><span>clases de</span> los <span class="hps">selectores </span></span></h3>
-
-<p><span id="result_box" lang="es"><span class="hps">Una</span> <span class="hps">pseudo-clase </span></span> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="en-US/docs/Web/Guide/CSS/Pseudo-classes">pseudo-class</a><span lang="es"> <span class="hps alt-edited">es en  CSS</span> <span class="hps">una palabra clave</span> <span class="hps">añadida a</span> <span class="hps">los selectores,</span> <span class="hps">que especifica</span> <span class="hps">un estado especial</span> <span class="hps">del elemento</span> <span class="hps">a seleccionar.</span> <span class="hps">Por ejemplo</span> <span class="hps atn">{</span><span class="atn">{</span><span>Css</span> <span class="hps">Href</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>: hover</span><span>")}</span><span>}</span> <span class="hps">aplicará</span> <span class="hps">un estilo</span> <span class="hps">cuando el</span> <span class="hps">usuario se desplaza sobre</span> <span class="hps">el elemento especificado</span> <span class="hps alt-edited">mediante el selector</span></span>.</p>
-
-<p><span id="result_box" lang="es"><span class="hps">Las </span></span><code>Pseudo-classes</code><span lang="es"><span>,</span> <span class="hps">junto con</span> <span class="hps">los <code>pseudo-elements</code></span><span>,</span> <span class="hps">permiten aplicar</span> <span class="hps">un estilo</span> <span class="hps">a un elemento</span> <span class="hps">no sólo</span> <span class="hps">en relación con</span> <span class="hps">el contenido</span> <span class="hps">de</span> <span class="hps">la estructura del documento</span><span>,</span> <span class="hps">sino también en relación</span> <span class="hps">a los factores externos</span><span>, como</span> <span class="hps">la historia del</span> <span class="hps atn">navegador </span><span>por ejemplo:</span><span class="hps atn"> (</span><span class="atn">{</span><span class="atn">{</span><span>href</span> <span class="hps">css</span> <span class="hps atn">(</span><span class="hps atn">"</span><span class="hps">: visited</span> <span class="hps">")}</span><span>}</span><span>, )</span><span>,</span> <span class="hps">el estado de</span> <span class="hps">su contenido</span> <span class="hps">(como</span> <span class="hps atn">{</span><span class="atn">{</span><span>ref</span> <span class="hps">css</span> <span class="hps atn">(</span><span>"</span><span>: </span></span>:checked"<span lang="es"><span class="hps">)}</span><span>} en</span> <span class="hps">algunos</span> <span class="hps">elementos de formulario</span><span>)</span><span>,</span> <span class="hps">o</span> <span class="hps">la posición del</span> <span class="hps">ratón</span> <span class="hps">(como</span> <span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps">("</span></span>:hover<span lang="es"> <span class="hps">")}</span><span>}</span> <span class="hps">que le permite saber</span> <span class="hps">si</span> <span class="hps">el ratón está sobre</span> <span class="hps">un elemento o</span> <span class="hps">no).</span> <span class="hps">Para ver</span> <span class="hps">una lista completa de</span> <span class="hps">selectores</span><span>,</span> <span class="hps">visite</span> <span class="hps">especificación</span> <span class="hps">CSS3</span> <span class="hps">Selectores</span> <span class="hps">de trabajo </span></span> <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a>.</p>
-
-<div class="tuto_example">
-<div class="tuto_type"><span class="short_text" id="result_box" lang="es"><span class="hps">Sintaxis</span></span></div>
-
-<pre class="brush:css">selector:pseudo-class {
-  property: value;
-}
-</pre>
-</div>
-
-<h4 id="Listado_de_pseudo-classes">Listado de pseudo-classes:</h4>
-
-<ul>
- <li>{{ Cssxref(":link") }}</li>
- <li>{{ Cssxref(":visited") }}</li>
- <li>{{ Cssxref(":active") }}</li>
- <li>{{ Cssxref(":hover") }}</li>
- <li>{{ Cssxref(":focus") }}</li>
- <li>{{ Cssxref(":first-child") }}</li>
- <li>{{ Cssxref(":last-child") }}</li>
- <li>{{ Cssxref(":nth-child") }}</li>
- <li>{{ Cssxref(":nth-last-child") }}</li>
- <li>{{ Cssxref(":nth-of-type") }}</li>
- <li>{{ Cssxref(":first-of-type") }}</li>
- <li>{{ Cssxref(":last-of-type") }}</li>
- <li>{{ Cssxref(":empty") }}</li>
- <li>{{ Cssxref(":target") }}</li>
- <li>{{ Cssxref(":checked") }}</li>
- <li>{{ Cssxref(":enabled") }}</li>
- <li>{{ Cssxref(":disabled") }}</li>
-</ul>
-
-<h2 id="Información_Los_selectores_basados_en_relaciones_(relationships)"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Los selectores</span> <span class="hps">basados en relaciones </span></span>(relationships)</h2>
-
-<p><span id="result_box" lang="es"><span class="hps alt-edited">El CSS</span> <span class="hps">tiene algunas</span> <span class="hps">formas de seleccionar</span> <span class="hps">elementos en función de</span> <span class="hps">las</span> <span class="hps">relaciones entre los elementos</span><span>.</span> <span class="hps">Usted</span> <span class="hps">puede utilizar estas para</span> <span class="hps">hacer</span> <span class="hps">selectores</span> <span class="hps alt-edited">que sean más específicos</span><span>.</span></span></p>
-
-<table id="relselectors">
- <caption><span class="short_text" id="result_box" lang="es"><span class="hps">Selectores</span> <span class="hps">comunes</span> <span class="hps alt-edited">basados en relaciones</span></span></caption>
- <tbody>
-  <tr>
-   <td style="width: 10em;"><strong>Selector</strong></td>
-   <td><strong>Selects</strong></td>
-  </tr>
-  <tr>
-   <td><code>A E</code></td>
-   <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es un descendiente de</span> <span class="hps">un elemento</span> <span class="hps atn">A (</span><span>que</span> <span class="hps">es:</span> <span class="hps alt-edited">un hijo o</span> <span class="hps alt-edited">un hijo</span> <span class="hps alt-edited">de un hijo</span> <span class="hps">etc.</span><span>)</span></span></td>
-  </tr>
-  <tr>
-   <td><code>A &gt; E</code></td>
-   <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es un hijo de</span> <span class="hps">un elemento A</span></span></td>
-  </tr>
-  <tr>
-   <td><code>E:first-child</code></td>
-   <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es el primer</span> <span class="hps">hijo de su padre</span></span></td>
-  </tr>
-  <tr>
-   <td><code>B + E</code></td>
-   <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es</span> <span class="hps">el siguiente hermano</span> <span class="hps">de un elemento</span> <span class="hps">B</span> <span class="hps">(es decir</span><span>:</span> <span class="hps">el</span> <span class="hps">próximo hijo</span> <span class="hps">del mismo</span> <span class="hps">padre)</span></span></td>
-  </tr>
- </tbody>
-</table>
-
-<p><span id="result_box" lang="es"><span class="hps">Usted</span> <span class="hps">puede combinarlas para</span> <span class="hps">expresar relaciones</span> <span class="hps">complejas</span><span>.</span><br>
- <br>
- <span class="hps">También puede utilizar</span> <span class="hps">el símbolo</span> <span class="hps">asterisco </span></span><span lang="es"> <span class="hps">(*</span><span>)</span> <span class="hps alt-edited">para significar</span> <span class="hps atn">"</span><span>cualquier elemento</span><span>"</span><span>.</span></span></p>
-
-<div class="tuto_example">
-<div class="tuto_type">Ejemplo</div>
-
-<p><span id="result_box" lang="es"><span class="hps">Una tabla HTML</span> <span class="hps">tiene</span> <span class="hps">un atributo <strong><em><code>id</code></em></strong></span><span>,</span> <span class="hps">pero sus</span> <span class="hps">filas y</span> <span class="hps alt-edited">las celdas</span> <span class="hps">no tienen</span> <span class="hps">identificadores individuales</span><span>:</span></span></p>
-
-<pre class="brush: html">&lt;table id="data-table-1"&gt;
-...
-&lt;tr&gt;
-&lt;td&gt;Prefix&lt;/td&gt;
-&lt;td&gt;0001&lt;/td&gt;
-&lt;td&gt;default&lt;/td&gt;
-&lt;/tr&gt;
-...
-</pre>
-
-<p><span id="result_box" lang="es"><span class="hps">Estas</span> <span class="hps">reglas hacen</span> <span class="hps">que la primera celda de</span> <span class="hps">cada fila</span> sea en <span class="hps">negrita,</span> <span class="hps">y</span> <span class="hps">la segunda celda</span> de <span class="hps">cada fila</span> en  la familia de fuente <span class="hps"> monoespaciado</span><span>.</span> <span class="hps alt-edited">Esto</span> <span class="hps alt-edited">sólo afecta a</span> <span class="hps">una</span> <span class="hps alt-edited">tabla concreta</span> <span class="hps alt-edited">del documento:</span></span></p>
-
-<pre class="brush:css">    #data-table-1 td:first-child {font-weight: bolder;}
-    #data-table-1 td:first-child + td {font-family: monospace;}
-</pre>
-
-<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p>
-
-<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
- <tbody>
-  <tr>
-   <td>
-    <table style="width: 18em; margin-right: 2em;">
-     <tbody>
-      <tr>
-       <td><strong>Prefix</strong></td>
-       <td><code>0001</code></td>
-       <td>default</td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">Más</span> <span class="hps">detalles</span></span></div>
-
-<p><span id="result_box" lang="es"><span class="hps">La manera mas </span><span class="hps">habitual es hacer</span><span class="hps alt-edited"> que un</span> <span class="hps alt-edited">selector sea más específico</span><span>, entonces</span> aumentara <span class="hps">su prioridad.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">Si utiliza</span> <span class="hps">estas técnicas</span><span>, se evita</span> <span class="hps">la necesidad de especificar</span> <span class="hps">la</span></span> <strong><em><code>class</code> </em></strong><span id="result_box" lang="es"><span class="hps">o</span> <span class="hps">atributos <strong><em><code>ID</code></em></strong></span></span><strong><em><code> </code></em></strong><span id="result_box" lang="es"><span class="hps alt-edited">en muchas</span> <span class="hps">etiquetas</span> <span class="hps alt-edited">del documento.</span> <span class="hps">En su lugar</span><span>, CSS</span> <span class="hps">hace este trabajo.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">En grandes</span> <span class="hps">diseños</span> <span class="hps">donde la velocidad es</span> <span class="hps">importante</span><span>,</span> <span class="hps">usted puede hacer sus</span> <span class="hps">hojas de estilo</span> <span class="hps">más eficiente</span> <span class="hps">evitando</span> <span class="hps">reglas complejas</span> <span class="hps">que dependen de</span> <span class="hps">relaciones entre los elementos</span><span>.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">Para más ejemplos</span> <span class="hps">sobre</span> <span class="hps">las tablas</span><span>,</span> <span class="hps">ver</span></span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a> <span id="result_box" lang="es"><span class="hps">en</span> <span class="hps">la página</span> <span class="hps">CSS Reference</span><span>.</span></span></p>
-</div>
-
-<h2 id="Action_Using_class_and_ID_selectors">Action: Using class and ID selectors</h2>
-
-<ol>
- <li><span id="result_box" lang="es"><span class="hps">Edite su archivo</span> <span class="hps">HTML</span><span>,</span> <span class="hps">y duplicar</span> <span class="hps">el</span> <span class="hps">párrafo</span> <span class="hps">copiando y</span> <span class="hps">pegando</span><span>.</span></span></li>
- <li><span id="result_box" lang="es"><span class="hps">A continuación, agregue los atibutos </span></span> <strong>id</strong> y <strong>class</strong> <span id="result_box" lang="es"><span class="hps">a</span> <span class="hps">la primera copia</span><span>,</span> <span class="hps">y</span> <span class="hps">un atributopara</span> <span class="hps">la segunda copia</span> <span class="hps">como se muestra</span> <span class="hps">a continuación.</span> <span class="hps">Alternativamente</span><span>, copie</span> <span class="hps">y pegue el</span> <span class="hps">archivo entero</span> <span class="hps">de nuevo</span><span>:</span></span>
-  <pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-  &lt;meta charset="UTF-8"&gt;
-  &lt;title&gt;Sample document&lt;/title&gt;
-  &lt;link rel="stylesheet" href="style1.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p id="first"&gt;
-      &lt;strong class="carrot"&gt;C&lt;/strong&gt;ascading
-      &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle
-      &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets
-    &lt;/p&gt;
-    &lt;p id="second"&gt;
-      &lt;strong&gt;C&lt;/strong&gt;ascading
-      &lt;strong&gt;S&lt;/strong&gt;tyle
-      &lt;strong&gt;S&lt;/strong&gt;heets
-    &lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
- </li>
- <li><span id="result_box" lang="es"><span class="hps">Ahora edite</span> <span class="hps">su archivo</span> <span class="hps">CSS</span><span>.</span> <span class="hps alt-edited">Reemplazar todo el contenido</span> <span class="hps">con</span><span>:</span></span>
-  <pre class="brush:css">strong { color: red; }
-.carrot { color: orange; }
-.spinach { color: green; }
-#first { font-style: italic; }
-</pre>
- </li>
- <li><span id="result_box" lang="es"><span class="hps">Guarde los archivos</span> <span class="hps">y</span> <span class="hps">actualizar el navegador</span> <span class="hps">para ver el resultado</span><span>:</span></span>
-  <table style="border: 2px outset #36b; padding: 1em;">
-   <tbody>
-    <tr>
-     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-    </tr>
-    <tr>
-     <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
-
-  <p><span id="result_box" lang="es"><span class="hps alt-edited">Puede intentar</span> <span class="hps">reordenar las</span> <span class="hps">líneas</span> <span class="hps">en el archivo</span> <span class="hps">CSS</span> <span class="hps alt-edited">de mostrar</span> <span class="hps alt-edited">de que el orden</span> <span class="hps alt-edited">no efecta.</span></span></p>
-
-  <p><span id="result_box" lang="es"><span class="hps">Los</span> <span class="hps">selectores de <code>class</code></span></span><strong><em><code>.carrot</code></em></strong> and <em><strong><code>.spinach</code></strong></em> <span id="result_box" lang="es"><span class="hps">tienen prioridad sobre</span> <span class="hps">el selector de etiquetas</span></span> <em><strong><code>strong</code></strong></em>.</p>
-
-  <p>El <strong><code><em>ID </em></code></strong>selector<code> #<em>first</em></code><em> </em><span id="result_box" lang="es"><span class="hps">tiene prioridad sobre</span> <span class="hps">los</span> <span class="hps">selectores de clase</span> <span class="hps">y</span> <span class="hps">etiqueta</span><span>.</span></span></p>
- </li>
-</ol>
-
-<div class="tuto_example">
-<div class="tuto_type"><span class="short_text" id="result_box" lang="es"><span class="hps">Desafíos</span></span></div>
-
-<ol>
- <li><span id="result_box" lang="es"><span class="hps">Sin cambiar</span> <span class="hps">su archivo</span> <span class="hps">HTML</span><span>,</span> <span class="hps alt-edited">agregue una sola</span> <span class="hps">regla para</span> <span class="hps">su archivo</span> <span class="hps">CSS</span> <span class="hps alt-edited">que mantenga</span> <span class="hps">todas las letras</span> <span class="hps">iniciales que</span> <span class="hps">mismo color que</span> <span class="hps">están ahora,</span> <span class="hps">pero</span> <span class="hps alt-edited">hace que</span> <span class="hps">todo el</span> <span class="hps">otro texto</span> <span class="hps">en el segundo párrafo</span> <span class="hps alt-edited">sea azul</span><span>:</span></span>
-
-  <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-   <tbody>
-    <tr>
-     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-    </tr>
-    <tr>
-     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
- </li>
- <li><span id="result_box" lang="es"><span class="hps alt-edited">Ahora cambie</span> <span class="hps">la regla</span> <span class="hps">que acaba de agregar</span> <span class="hps atn">(</span><span>sin cambiar nada más</span><span>)</span><span>,</span> <span class="hps">para hacer</span> <span class="hps alt-edited">que el primer párrafo</span> <span class="hps alt-edited">sea azul</span> <span class="hps">también</span><span>:</span></span>
-  <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-   <tbody>
-    <tr>
-     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-    </tr>
-    <tr>
-     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
- </li>
-</ol>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Possible solution</div>
-
-<ol>
- <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below:
-
-  <pre class="brush: css">#second { color: blue; }
-</pre>
-  A more specific selector, <code>p#second</code> also works.</li>
- <li>Change the selector of the new rule to be a tag selector using <code>p</code>:
-  <pre class="brush: css">p { color: blue; }
-</pre>
- </li>
-</ol>
-<a class="hideAnswer" href="#challenge">Hide solution</a></div>
-<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
-
-<h2 id="Action_Using_pseudo-classes_selectors">Action: Using pseudo-classes selectors</h2>
-
-<ol>
- <li><span class="short_text" id="result_box" lang="es"><span class="hps alt-edited">Cree un</span> <span class="hps alt-edited">HTML como el siguiente</span><span>:</span></span>
-
-  <pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-  &lt;meta charset="UTF-8"&gt;
-  &lt;title&gt;Sample document&lt;/title&gt;
-  &lt;link rel="stylesheet" href="style1.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p&gt;Go to our &lt;a class="homepage" href="http://www.example.com/" title="Home page"&gt;Home page&lt;/a&gt;.&lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
- </li>
- <li><span id="result_box" lang="es"><span class="hps">Ahora edite</span> <span class="hps">su archivo</span> <span class="hps">CSS</span><span>.</span> <span class="hps alt-edited">Reemplace todo el contenido</span> <span class="hps">con</span><span>:</span></span>
-  <pre class="brush: css">a.homepage:link, a.homepage:visited {
-  padding: 1px 10px 1px 10px;
-  color: #fff;
-  background: #555;
-  border-radius: 3px;
-  border: 1px outset rgba(50,50,50,.5);
-  font-family: georgia, serif;
-  font-size: 14px;
-  font-style: italic;
-  text-decoration: none;
-}
-
-a.homepage:hover, a.homepage:focus, a.homepage:active {
-  background-color: #666;
-}
-</pre>
- </li>
- <li><span id="result_box" lang="es"><span class="hps">Guarde los archivos</span> <span class="hps">y</span> <span class="hps alt-edited">actualice el explorador</span> <span class="hps">para ver el resultado</span> <span class="hps atn">(</span><span>poner</span> <span class="hps">el ratón sobre el</span> <span class="hps">siguiente enlace para ver</span> <span class="hps">el efecto</span><span>)</span><span>:</span></span>
-  <table style="border: 2px outset #36b; padding: 1em;">
-   <tbody>
-    <tr>
-     <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td>
-    </tr>
-   </tbody>
-  </table>
- </li>
-</ol>
-
-<h2 id="Acción_Uso_de_selectores_basados_en_las_relaciones_y_pseudo-clases"><span id="result_box" lang="es"><span class="hps">Acción</span><span>: Uso de</span> <span class="hps">selectores</span> <span class="hps">basados</span> <span class="hps">en las relaciones y</span> <span class="hps">pseudo-clases</span></span></h2>
-
-<p><span id="result_box" lang="es"><span class="hps">Con</span> <span class="hps">selectores</span> <span class="hps">basados</span> <span class="hps">en las relaciones y</span> <span class="hps">pseudo-clases</span> <span class="hps">puede crear</span> <span class="hps">algoritmos </span></span><span id="result_box" lang="es"><span class="hps">complejos</span></span><span id="result_box" lang="es"> en <span class="hps alt-edited">cascada</span> <span class="hps">.</span> <span class="hps">Esto es una técnica</span> <span class="hps">común que se utiliza</span><span>, por ejemplo,</span> <span class="hps">con el fin de</span> <span class="hps">crear menús</span> <span class="hps">desplegables</span> <span class="hps">en </span></span><span id="result_box" lang="es"><span class="hps">puro</span> </span><span id="result_box" lang="es"><span class="hps">CSS</span> <span class="hps">(es decir</span> <span class="hps">sólo</span> <span class="hps">CSS,</span> <span class="hps">sin necesidad de utilizar</span></span> <a href="/en-US/docs/Web/JavaScript" title="en-US/docs/Web/JavaScript">JavaScript</a>). <span id="result_box" lang="es"><span class="hps">La esencia</span> <span class="hps">de esta técnica es</span> <span class="hps">la creación de</span> <span class="hps">una regla como</span> <span class="hps">la siguiente</span><span>:</span></span></p>
-
-<pre class="brush: css">div.menu-bar ul ul {
-  display: none;
-}
-
-div.menu-bar li:hover &gt; ul {
-  display: block;
-}</pre>
-
-<p><span id="result_box" lang="es"><span class="hps alt-edited">Aplicararemos a</span> <span class="hps">una estructura de</span> <span class="hps alt-edited">HTML como el siguiente</span><span>:</span></span></p>
-
-<pre class="brush: html">&lt;div class="menu-bar"&gt;
-  &lt;ul&gt;
-    &lt;li&gt;
-      &lt;a href="example.html"&gt;Menu&lt;/a&gt;
-      &lt;ul&gt;
-        &lt;li&gt;
-          &lt;a href="example.html"&gt;Link&lt;/a&gt;
-        &lt;/li&gt;
-        &lt;li&gt;
-          &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
-          &lt;ul&gt;
-            &lt;li&gt;
-              &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
-              &lt;ul&gt;
-                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-              &lt;/ul&gt;
-            &lt;/li&gt;
-            &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-          &lt;/ul&gt;
-        &lt;/li&gt;
-      &lt;/ul&gt;
-    &lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;
-</pre>
-
-<p><span id="result_box" lang="es"><span class="hps">Vea nuestro</span> <span class="hps">ejemplo completo</span></span><a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> <span id="result_box" lang="es"><span class="hps">para una posible</span> referencia<span>.</span></span></p>
-
-<h2 id="¿Y_ahora_qué"><span id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2>
-
-<p><span id="result_box" lang="es"><span class="hps">Su</span> <span class="hps alt-edited">hoja de estilos</span> <span class="hps alt-edited">de muestra</span> <span class="hps">está empezando a parecer</span> <span class="hps alt-edited">densa</span> <span class="hps alt-edited">y complicada.</span> <span class="hps">La</span> <span class="hps">siguiente sección</span> <span class="hps">describe</span> <span class="hps">maneras de hacer</span> <span class="hps">CSS</span> <span class="hps">más fácil de leer</span><span>.</span> </span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">easier to read</a>.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p>
diff --git a/files/es/web/css/-webkit-mask-clip/index.html b/files/es/web/css/mask-clip/index.html
index 5110c18d6c..5110c18d6c 100644
--- a/files/es/web/css/-webkit-mask-clip/index.html
+++ b/files/es/web/css/mask-clip/index.html
diff --git a/files/es/web/css/-webkit-mask-image/index.html b/files/es/web/css/mask-image/index.html
index 60434d3e6a..60434d3e6a 100644
--- a/files/es/web/css/-webkit-mask-image/index.html
+++ b/files/es/web/css/mask-image/index.html
diff --git a/files/es/web/css/-webkit-mask-origin/index.html b/files/es/web/css/mask-origin/index.html
index 8e75d01a39..8e75d01a39 100644
--- a/files/es/web/css/-webkit-mask-origin/index.html
+++ b/files/es/web/css/mask-origin/index.html
diff --git a/files/es/web/css/-webkit-mask-position/index.html b/files/es/web/css/mask-position/index.html
index 60a7231da3..60a7231da3 100644
--- a/files/es/web/css/-webkit-mask-position/index.html
+++ b/files/es/web/css/mask-position/index.html
diff --git a/files/es/web/css/-webkit-mask-repeat/index.html b/files/es/web/css/mask-repeat/index.html
index 316bec182e..316bec182e 100644
--- a/files/es/web/css/-webkit-mask-repeat/index.html
+++ b/files/es/web/css/mask-repeat/index.html
diff --git a/files/es/web/css/-webkit-mask/index.html b/files/es/web/css/mask/index.html
index 50dd997bb0..50dd997bb0 100644
--- a/files/es/web/css/-webkit-mask/index.html
+++ b/files/es/web/css/mask/index.html
diff --git a/files/es/web/css/media_queries/testing_media_queries/index.html b/files/es/web/css/media_queries/testing_media_queries/index.html
new file mode 100644
index 0000000000..dac4330054
--- /dev/null
+++ b/files/es/web/css/media_queries/testing_media_queries/index.html
@@ -0,0 +1,93 @@
+---
+title: Probando media queries
+slug: Web/Guide/CSS/probando_media_queries
+translation_of: Web/CSS/Media_Queries/Testing_media_queries
+---
+<p>{{SeeCompatTable}}</p>
+<p>El DOM proporciona características que hacen posible probar los resultados de un media query estructuradamente. Esto es hecho usando la interfaz {{domxref("MediaQueryList") }} y sus métodos y propiedades. Una vez que hayas creado el objeto {{domxref("MediaQueryList") }}, puedes revisar el resultado del query o, como alternativa, recibir notificaciones automáticamente cuando el resultado cambie.</p>
+<h2 id="Creating_a_media_query_list" name="Creating_a_media_query_list">Creando una media query list</h2>
+<p>Before you can evaluate the results of a query, you need to create the {{domxref("MediaQueryList") }} object representing the media query. To do this, use the {{domxref("window.matchMedia") }} method.</p>
+<p>For example, if you want to set up a query list that determines whether the device is in landscape or portrait orientation, you can do so like this:</p>
+<pre>var mql = window.matchMedia("(orientation: portrait)");
+</pre>
+<h2 id="Checking_the_result_of_a_query" name="Checking_the_result_of_a_query">Revisando el resultado de un query</h2>
+<p>Once your media query list has been created, you can check the result of the query by looking at the value of its <code>matches</code> property, which reflects the result of the query:</p>
+<pre class="brush: js">if (mql.matches) {
+  /* The device is currently in portrait orientation */
+} else {
+  /* The device is currently in landscape orientation */
+}
+</pre>
+<h2 id="Receiving_query_notifications" name="Receiving_query_notifications">Recibiendo notificaciones query</h2>
+<p>If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a listener than to poll the query's result. To do this, you can call the <code>addListener()</code> method on the {{domxref("MediaQueryList") }} object, specifying an observer that implements the {{domxref("MediaQueryListListener") }} interface:</p>
+<pre class="brush: js">var mql = window.matchMedia("(orientation: portrait)");
+mql.addListener(handleOrientationChange);
+handleOrientationChange(mql);
+</pre>
+<p>This code creates the orientation testing media query list, <code>mql</code>, then adds a listener to it. Note that after adding the listener, we actually invoke the listener directly once. This lets our listener perform initial adjustments based on the current device orientation (otherwise, if our code assumes the device is in portrait mode but it's actually in landscape mode at startup, we could have inconsistencies).</p>
+<p>The <code>handleOrientationChange()</code> method we implement then would look at the result of the query and handle whatever we need to do on an orientation change:</p>
+<pre class="brush: js">function handleOrientationChange(mql) {
+  if (mql.matches) {
+    /* The device is currently in portrait orientation */
+  } else {
+    /* The device is currently in landscape orientation */
+  }
+}
+</pre>
+<h2 id="Ending_query_notifications" name="Ending_query_notifications">Terminando con las notificaciones query </h2>
+<p>Cuando ya no vayas a necesitar recibir las notificaciones sobre los cambios de valro de tu media query, simplemente llama al <code>removeListener()</code> en el {{domxref("MediaQueryList") }}:</p>
+<pre>mql.removeListener(handleOrientationChange);
+</pre>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con los navegadores</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>9</td>
+    <td>{{CompatGeckoDesktop("6.0") }}</td>
+    <td>10</td>
+    <td>12.1</td>
+    <td>5.1</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>3.0</td>
+    <td>{{CompatUnknown}}</td>
+    <td>10</td>
+    <td>12.1</td>
+    <td>5</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also" name="See_also">Ver también</h2>
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li>
+ <li>{{domxref("window.matchMedia()") }}</li>
+ <li>{{domxref("MediaQueryList") }}</li>
+ <li>{{domxref("MediaQueryListListener") }}</li>
+</ul>
diff --git a/files/es/web/css/media_queries/using_media_queries/index.html b/files/es/web/css/media_queries/using_media_queries/index.html
new file mode 100644
index 0000000000..997626e12d
--- /dev/null
+++ b/files/es/web/css/media_queries/using_media_queries/index.html
@@ -0,0 +1,828 @@
+---
+title: CSS media queries
+slug: CSS/Media_queries
+tags:
+  - CSS
+  - Media
+  - Media Queries
+  - query
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+<div>{{cssref}}</div>
+
+<p class="seoSummary">Las <strong>media queries</strong> (en español "consultas de medios") son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del {{glossary("viewport")}} del navegador).</p>
+
+<p>Se utilizan para:</p>
+
+<ul>
+ <li>Aplicar estilos condicionales con las <a href="/es/docs/Web/CSS/At-rule">reglas-at</a> {{cssxref("@media")}} e {{cssxref("@import")}} de <a href="/es/docs/Web/CSS">CSS</a>.</li>
+ <li>Indicar medios específicos en los elementos {{HTMLElement("link")}}, {{HTMLElement("source")}} y otros elementos <a href="/es/docs/Web/HTML">HTML</a>.</li>
+ <li><a href="/es/docs/Web/Guide/CSS/probando_media_queries">Testear y monitorizar los estados de los medios</a> usando los métodos de javascript {{domxref("Window.matchMedia()")}} y {{domxref("MediaQueryList.addListener()")}}.</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p> </p>
+
+<p>Las <em>media queries</em> consisten de un tipo de medio opcional y una o más expresiones de <em>características de medios</em>. Varias consultas se pueden combinar utilizando operadores lógicos. No distinguen entre mayúsculas y minúsculas.</p>
+
+<p>El resultado de la consulta es "verdadero" cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se está mostrando el documento y todas las expresiones en el <em>media query</em> son "verdaderas". En este caso, se aplica los estilos correspondientes, siguiendo las reglas usuales de cascada.</p>
+
+<p>Las consultas sobre tipos de medios desconocidos son siempre falsas.</p>
+
+<p> </p>
+
+<pre class="brush: html"><code class="brush: html">&lt;!-- CSS media query on a link element --&gt;
+</code>&lt;link rel="stylesheet" media="(max-width: 800px)" href="example.css" /&gt;
+
+<code class="brush: html">&lt;!-- CSS media query within a style sheet --&gt;
+&lt;style&gt;
+@media (max-width: 600px) {
+  .facet_sidebar {
+    display: none;
+  }
+}
+&lt;/style&gt;</code>
+</pre>
+
+<h3 id="Media_Types">Media Types</h3>
+
+<p>Los <em>Media Types</em> (tipos de medios) describen la categoría general de un dispositivo. Excepto cuando se utilizan los operadores lógicos <code>not</code> o <code>only</code>, el tipo de medio es opcional y será interpretada como <code>all</code>.</p>
+
+<dl>
+ <dt><code id="all">all</code></dt>
+ <dd>Apto para todos los dispositivos.</dd>
+ <dt><code id="print">print</code></dt>
+ <dd>Destinado a material impreso y visualización de documentos en una pantalla en el modo de vista previa de impresión. </dd>
+ <dt><code id="screen">screen</code></dt>
+ <dd>Destinado principalmente a las pantallas.</dd>
+ <dt><code id="speech">speech</code></dt>
+ <dd>Destinado a sintetizadores de voz.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Tipos de medios depreciados:</strong> CSS2.1 y <a href="/es/docs/">Media Queries 3</a> definieron varios tipos de medios adicionales (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code> y <code>aural</code>), pero fueron desaprobados en <a href="https://drafts.csswg.org/mediaqueries/#media-types">Media Queries 4</a> y no deberían ser usados. El tipo <code>aural</code> ha sido reemplazado por <code>speech</code>, que es similar.</p>
+</div>
+
+<h3 id="Operadores_Lógicos">Operadores Lógicos</h3>
+
+<p>Se pueden redactar queries utilizando operadores lógicos, incluyendo <code>not</code>, <code>and</code>, y <code>only</code>.</p>
+
+<p>Además se puede combinar múltiples queries en una lista separada por comas múltiples; si cualquiera de las queries en la lista es verdadera, la hoja de estilo asociada es aplicada. Esto es equivalente a una operación lógica "or".</p>
+
+<h4 id="and">and</h4>
+
+<p>El operador <code>and</code> es usado para colocar juntas múltiples funciones multimedia. Un query básico con el tipo de medio especificado como <code>all</code> puede lucir así:</p>
+
+<pre class="brush: css">@media (min-width: 700px) { ... }</pre>
+
+<p>Si usted quiere aplicar ese query solo si la pantalla esta en formato horizontal, usted puede utilizar el operador <code>and</code> y colocar la siguiente cadena:</p>
+
+<pre class="brush: css">@media (min-width: 700px) and (orientation: landscape) { ... }</pre>
+
+<p>La siguiente query solo retornara verdadero si la ventana tiene un ancho de 700px o mas y la pantalla esta en formato horizontal. Ahora si usted quiere aplicar esta opción solo si tipo de medio es TV, usted puede utilizar la siguiente cadena:</p>
+
+<pre class="brush: css">@media tv and (min-width: 700px) and (orientation: landscape) { ... }</pre>
+
+<p>Esta query solo se aplica si el tipo de medio es TV, la ventana tiene 700px de ancho o mas y la pantalla esta en formato horizontal.</p>
+
+<h4 id="lista_separada_por_comas">lista separada por comas</h4>
+
+<p>Las listas separadas por comas se comportan como el operador <code>or</code> cuando es usado en media queries. Cuando utilice una lista separada por comas y alguno de los queries retorna verdadero, el estilo o la hoja de estilos sera aplicada. Cada query en una lista separada por comas es tratado como una query individual y cualquier operador aplicado a un medio no afectara a los demás. Esto significa que cada query en una lista separada por comas puede tener como objetivo diferentes medios, tipos y estados.</p>
+
+<p>Si usted quiere aplicar una serie de estilos para un equipo con un ancho mínimo de 700px o si el dispositivo esta colocado en horizontal, usted puede escribir lo siguiente:</p>
+
+<pre class="brush: css">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre>
+
+<p>Por lo tanto, si esta en una <code>screen</code> con una ventana de 800px de ancho, la declaración del medio retornara verdadero debido a la primera parte de la lista, si aplicamos esto a un dispositivo <code>@media all and (min-width: 700px)</code> podría retornar verdadero a pesar del hecho de que la pantalla falle la verificación tipo de medio del <code>handheld</code> en la segunda query. Por otra parte si estuviese en un <code>handheld</code> con un ancho de ventana de 500px, la primera parte de la lista fallaría pero la segunda parte retornara verdadero debido a la declaración de medio.</p>
+
+<h4 id="not">not</h4>
+
+<p>El operador <code>not</code> aplica a todo el query y retorna verdadero si es posible y sino retorna falso (como por ejemplo <code>monochrome</code> en un monitor a color o una ventana con un ancho mínimo de <code>min-width: 700px</code> en un monitor de 600px). Un <code>not</code> negara un query si es posible pero no a todos los query posibles si están ubicados en una lista separada por comas. El operador <code>not</code> no puede ser usado para negar un query individual, solo para un query completo. Por ejemplo<span style="line-height: 1.572;">, el </span><code style="font-size: 14px;">not</code><span style="line-height: 1.572;"> en el siguiente query es evaluado al final:</span></p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not all and (monochrome) { ... }
+</pre>
+
+<p>Esto significa que el query es evaluado de la siguiente forma:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not (all and (monochrome)) { ... }
+</pre>
+
+<p>... y no de esta forma:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre>
+
+<p>Otro Ejemplo:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not screen and (color), print and (color)
+</pre>
+
+<p>Es evaluado de la siguiente forma:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre>
+
+<h4 id="only">only</h4>
+
+<p><span style="line-height: 21px;">El operador </span><code style="font-size: 14px;">only</code><span style="line-height: 21px;"> previene que navegadores antiguos que no soportan queries con funciones apliquen los estilos asignados:</span></p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="only screen and (color)" href="Ejemplo.css" /&gt;
+</pre>
+
+<h3 id="Pseudo-BNF">Pseudo-BNF</h3>
+
+<pre class="syntaxbox">media_query_list: &lt;media_query&gt; [, &lt;media_query&gt; ]*
+media_query: [[only | not]? &lt;media_type&gt; [ and &lt;expression&gt; ]*]
+  | &lt;expression&gt; [ and &lt;expression&gt; ]*
+expression: ( &lt;media_feature&gt; [: &lt;value&gt;]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid</pre>
+
+<p>Los queries son insensibles a las mayúsculas o minúsculas. Media queries que contengan tipos de medios desconocidos siempre retornaran falso.</p>
+
+<div class="note"><strong>Nota:</strong> Los paréntesis son requeridos alrededor de las expresiones, no utilizarlos es un error.</div>
+
+<h2 id="Funciones_Multimedia">Funciones Multimedia</h2>
+
+<p>La mayoría de las funciones multimedia pueden ser precedidas por "min-" o "max-" para expresar "greater or equal to" o "less than or equal to". Esto elimina la necesidad de usar los símbolos "&lt;" y "&gt;" los cuales podrían causar conflictos con HTML y XML. Si usted usa una función multimedia sin especificarle un valor, la expresión retornara verdadero si el valor es diferente de cero.</p>
+
+<div class="note"><strong>Nota:</strong> Si una función multimedia no aplica al dispositivo donde el navegador esta corriendo, la expresión que contiene esa función siempre retornara falso. Por Ejemplo, cambiar la relación de aspecto en un dispositivo aural siempre resultara falso.</div>
+
+<h3 id="color">color</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;color&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> si</p>
+
+<p>Indica el numero de bits por componente de color del dispositivo de salida. Si el dispositivo no soporta colores, este valor es 0.</p>
+
+<div class="note"><strong>Nota:</strong> Si el componente de color tiene diferente numero de bits por color, entonces el valor mas pequeño es utilizado. Por Ejemplo, si una pantalla utiliza 5 bits para azul y rojo y 6 bits para el verde, entonces se utilizan 5 bits por componente de color. Si el dispositivo utiliza índices de color se usara el mínimo valor de bits por color en la tabla.</div>
+
+<h4 id="Ejemplos">Ejemplos</h4>
+
+<p>Para aplicar una hoja de estilo a todos los dispositivos que soporten colores:</p>
+
+<pre class="brush: css">@media all and (color) { ... }
+</pre>
+
+<p>Para aplicar una hoja de estilo a dispositivos con al menos 4 bits por componente de color:</p>
+
+<pre class="brush: css">@media all and (min-color: 4) { ... }
+</pre>
+
+<h3 id="color-index">color-index</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max</strong><strong>:</strong> sí</p>
+
+<p>Indica el numero de entradas en la tabla de colores para el dispositivo de salida.</p>
+
+<h4 id="Ejemplos_2">Ejemplos</h4>
+
+<p>Para indicar que una hoja de estilo debe aplicarse a todos los dispositivos utilizando índices de color, usted puede hacer esto:</p>
+
+<pre class="brush: css">@media all and (color-index) { ... }
+</pre>
+
+<p>Para aplicar una hoja de estilo a un dispositivo con un índice de al menos 256 colores:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /&gt;
+</pre>
+
+<h3 id="aspect-ratio">aspect-ratio</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;ratio&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Acepta prefijos min/max</strong><strong>:</strong> sí</p>
+
+<p>Describe el aspecto de una zona a mostrar en el dispositivo de salida. Este valor consiste en enteros positivos separados por una barra ("/"). Esto representa la razón de aspecto de los pixeles horizontales (primer termino) a los pixeles verticales (segundo termino).</p>
+
+<h4 id="Ejemplo">Ejemplo</h4>
+
+<p>Lo siguiente selecciona una hoja de estilo especial para ser aplicada donde la proporción del tamaño de la pantalla del dispositivo de salida es al menos la misma de ancho que de alto.</p>
+
+<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) { ... }</pre>
+
+<p>Este selecciona el estilo cuando la proporción de aspecto sea 1:1 o superior. En otras palabras este estilo solo sera aplicado cuando el área de visualización sea cuadrada u horizontal.</p>
+
+<h3 id="device-aspect-ratio">device-aspect-ratio</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;ratio&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>Describe la proporción de aspecto del dispositivo de salida. Este valor consiste de dos enteros positivos separados por una barra ("/"). Este representa la proporción de aspecto de los pixeles horizontales (primer termino) a los pixeles verticales (segundo termino).</p>
+
+<h4 id="Ejemplo_2">Ejemplo</h4>
+
+<p>El siguiente código selecciona una hoja de estilo especial para ser aplicada en pantallas panorámicas ("widescreen").</p>
+
+<pre class="brush: css">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre>
+
+<p>Este selecciona el estilo cuando la proporción de aspecto sea 16:9 o 16:10.</p>
+
+<h3 id="device-height">device-height</h3>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>Describe la altura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área del documento a renderizar).</p>
+
+<h3 id="device-width">device-width</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>Describe la anchura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área del documento a renderizar).</p>
+
+<h4 id="Ejemplo_3">Ejemplo</h4>
+
+<p>Para aplicar una hoja de estilo a un documento cuando este sea mostrado en una pantalla de menos de 800px de ancho, usted puede usar esto:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="screen and (max-device-width: 799px)" /&gt;
+</pre>
+
+<h3 id="grid">grid</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> all<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Determina cuando el dispositivo de salida es un dispositivo de cuadrícula o de mapa de bits. Si el dispositivo esta basado en una cuadrícula (como una terminal TTY o una pantalla de teléfono de solo texto), el valor sera 1, de lo contrario sera 0.</p>
+
+<h4 id="Ejemplo_4">Ejemplo</h4>
+
+<p>Para aplicar una hoja de estilo a un dispositivo portátil con una pantalla de 15 caracteres o mas estrecha:</p>
+
+<pre class="brush: css">@media handheld and (grid) and (max-width: 15em) { ... }
+</pre>
+
+<div class="note"><strong>Nota:</strong> La unidad "em" tiene un significado especial para los dispositivos de cuadrícula; ya que la anchura exacta de una "em" no puede ser determinada, se asume un "em" como el ancho de una celda en la cuadrícula y el alto de una celda en la cuadrícula.</div>
+
+<h3 id="height">height</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>La función <code>height</code> describe la altura de la superficie a renderizar en el dispositivo de salida (como la altura de una ventana o la bandeja de papel en una impresora).</p>
+
+<div class="note"><strong>Nota:</strong> Cuando el usuario cambia el tamaño de una ventana Firefox también cambia las hojas de estilo para utilizar la mas adecuada basándose en los valores de <code>width</code> y <code>height</code> del query.</div>
+
+<h3 id="monochrome">monochrome</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>Indica el número de bits por pixel en un dispositivo monocromático (escala de grises). Si el dispositivo no es monocromático el valor sera 0.</p>
+
+<h4 id="Ejemplos_3">Ejemplos</h4>
+
+<p>Para aplicar una hoja de estilo a todos los dispositivos monocromáticos:</p>
+
+<pre class="brush: css">@media all and (monochrome) { ... }
+</pre>
+
+<p>Para aplicar una hoja de estilo a un dispositivo monocromático con al menos 8 bits por pixel:</p>
+
+<pre class="brush: css">@media all and (min-monochrome: 8) { ... }
+</pre>
+
+<h3 id="orientation">orientation</h3>
+
+<p><strong>Valor</strong><strong>:</strong> <code>landscape</code> | <code>portrait</code><br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Indica cuando el dispositivo esta en modo landscape (el ancho de la pantalla es mayor al alto) o modo portrait (el alto de la pantalla es mayor al ancho).</p>
+
+<h4 id="Ejemplo_5">Ejemplo</h4>
+
+<p>Para aplicar una hoja de estilo solo en orientación vertical (portrait):</p>
+
+<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre>
+
+<h3 id="resolution">resolution</h3>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;resolution&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>Indica la resolución (densidad de pixeles) del dispositivo de salida. La resolución puede ser especificada en puntos por pulgada (dpi) o en puntos por centímetros (dpcm).</p>
+
+<h4 id="Ejemplo_6">Ejemplo</h4>
+
+<p>Para aplicar una hoja de estilo a dispositivos con al menos 300 dpi de resolución:</p>
+
+<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... }
+</pre>
+
+<p>Para reemplazar la vieja sintaxis <span style="font-family: courier new,andale mono,monospace; line-height: normal;">(min-device-pixel-ratio: 2)</span>:</p>
+
+<pre class="brush: css">@media screen and (min-resolution: 2dppx) { ... }</pre>
+
+<h3 id="scan">scan</h3>
+
+<p><strong>Valor</strong><strong>:</strong> <code>progressive</code> | <code>interlace</code><br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/TV")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Describe el proceso de exploración de televisión de los dispositivos de salida.</p>
+
+<h4 id="Ejemplo_7">Ejemplo</h4>
+
+<p>Para aplicar una hoja de estilo solo a televisores de exploración progresiva:</p>
+
+<pre class="brush: css">@media tv and (scan: progressive) { ... }
+</pre>
+
+<h3 id="width">width</h3>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>La función <code>width</code> describe el ancho de la superficie a renderizar en el dispositivo de salida (como el ancho de una ventana de un documento o el ancho de la bandeja de papel en una impresora).</p>
+
+<div class="note"><strong>Nota:</strong> Cuando el usuario cambia el tamaño de una ventana Firefox también cambia las hojas de estilo para utilizar la mas adecuada basándose en los valores de <code>width</code> y <code>height</code> del query.</div>
+
+<h4 id="Ejemplos_4">Ejemplos</h4>
+
+<p>Si usted quiere especificar una hoja de estilo para dispositivos portátiles o pantallas con un ancho de al menos 20em, usted puede usar esta query:</p>
+
+<pre class="brush: css">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+</pre>
+
+<p>Esta query especifica una hoja de estilo para ser aplicada a un medio impreso con un ancho mayor a 8.5 pulgadas:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" /&gt;
+</pre>
+
+<p>Esta query especifica una hoja de estilo para ser utilizada cuando la ventana tiene un ancho entre 500 y 800 pixeles:</p>
+
+<pre class="brush: css">@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+
+</pre>
+
+<ul>
+</ul>
+
+<h2 id="Específico_de_Mozilla">Específico de Mozilla</h2>
+
+<p>Mozilla ofrece varias funciones especificas de Gecko. Algunas de estas pueden ser propuestas como funcines oficiales.</p>
+
+<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Si el dispositivo acepta que haya imágenes en menús, el valor es 1; de otro modo sera 0. Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(images-in-menus)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Si el usuario ha configurado su dispositivo para usar la apariencia "Grafito" en Mac OS X, esto sera 1. Si el usuario esta usando la apariencia azul por defecto, o si no usa Mac OS X, esto sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Si el usuario esta usando Maemo con el tema original, esto sera 1; Si esta usando el nuevo tema Fremantle, sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(maemo-classic)") }}</p>
+
+<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;number&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>Da el numero de pixeles del dispositivo por pixeles de CSS.</p>
+
+<div class="geckoVersionNote style-wrap">
+<p><strong>No use esta función. </strong></p>
+
+<p>En cambio use la función <code>resolution</code> con la unidad <code>dppx</code>.<br>
+ <br>
+ <code>-moz-device-pixel-ratio</code> puede ser usada para compatibilidad con Firefox 16 o anterior; y <code>-webkit-device-pixel-ratio</code> con navegadores basados en WebKit que no soporten <code>dppx</code>.</p>
+
+<p>Ejemplo:</p>
+
+<pre class="brush: css">@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores basados en WebKit */
+       (min--moz-device-pixel-ratio: 2),    /* Navegadores anteriores a Firefox 16 */
+       (min-resolution: 2dppx),             /* La forma estandar */
+       (min-resolution: 192dpi)             /* compatibilidad con dppx */ </pre>
+
+<p>Vea este <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">articulo CSSWG </a>sobre buenas practicas para compatibilidad en relación a <code>resolution</code> y <code>dppx</code>.</p>
+</div>
+
+<div class="note">Nota: Esta funcion multimedia tambien esta implementada en Webkit como <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. Los prefijos minimos y maximos de esta funcion implementados por Gecko se llaman asi: <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> y <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; y los mismos prefijos implementados por Webkit se llaman asi: <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> y <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div>
+
+<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8</code><br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Indica que sistema operativo esta en uso actualmente. Actualmente solo es implementado en Windows. Sus posibles valores son:</p>
+
+<ul>
+ <li><code>windows-xp</code></li>
+ <li><code>windows-vista</code></li>
+ <li><code>windows-win7</code></li>
+ <li><code>windows-win8</code></li>
+ <li><code>windows-win10</code></li>
+</ul>
+
+<p>Esto se hace para permitir a los skins y a algunos códigos funcionen mejor con el sistema operativo en el que se ejecutan.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si la interfaz de usuario muestra una fecha inversa al final de la barra de desplazamiento, de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si la interfaz de usuario muestra una fecha apuntando hacia la derecha al final de la barra de desplazamiento. de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si la interfaz de usuario muestra una fecha inversa al principio de la barra de desplazamiento, de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si la interfaz de usuario muestra una fecha apuntando hacia la derecha al principio de la barra de desplazamiento, de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si la interfaz de usuario muestra la miniatura de la barra de desplazamiento de forma proporcional (basado en el porcentaje del documento que es visible), de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si el dispositivo soporta eventos táctiles (una pantalla táctil), de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(touch-enabled)") }}.</p>
+
+<h4 id="Ejemplo_8">Ejemplo</h4>
+
+<p>Usted puede usar esto para renderizar sus botones un poco mas grandes, Por Ejemplo, si el usuario se encuentra en una pantalla táctil, esto hará los botones mas fáciles de usar con los dedos.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si el usuario utiliza un windows sin temas visuales (modo clasico); de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(windows-classic)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si el usuario utiliza windows con el compositor de ventanas DWM; de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(windows-compositor)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si el usuario actualmente esta utilizando algunos de los temas por defecto de Windows (Luna, Royale, Zune, or Aero), de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(windows-default-theme)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Indica cual tema de Windows esta en uso actualmente. Solo disponible para Windows. Sus posibles valores son:</p>
+
+<ul>
+ <li><code>aero</code></li>
+ <li><code>luna-blue</code></li>
+ <li><code>luna-olive</code></li>
+ <li><code>luna-silver</code></li>
+ <li><code>royale</code></li>
+ <li><code>generic</code></li>
+ <li><code>zune</code></li>
+</ul>
+
+<p>Esto se hace para permitir a los skins y a algunos códigos funcionen mejor con el tema utilizado por el sistema operativo en el que se ejecutan.</p>
+
+<h2 id="Específico_de_WebKit">Específico de WebKit</h2>
+
+<h3 id="-webkit-transform-3d">-webkit-transform-3d</h3>
+
+<p><strong>Vakir:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong>Medio:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<ul>
+ <li><a href="https://compat.spec.whatwg.org/#css-media-queries-webkit-transform-3d">Especificación</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-3d">Documentación</a></li>
+</ul>
+
+<p>Si está soportado, el valor es 1, si no, el valor es 0.</p>
+
+<p>Ejemplo</p>
+
+<pre class="brush: css"><code>@media (-webkit-transform-3d) {
+  .foo {
+    transform-style: preserve-3d;
+  }
+}
+
+@media (-webkit-transform-3d: 1) {
+  .foo {
+    transform-style: preserve-3d;
+  }
+}</code></pre>
+
+<h3 id="-webkit-transform-2d">-webkit-transform-2d</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong>Medio:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-2d">Documentación</a></li>
+</ul>
+
+<p>Si está soportado, el valor es 1, si no, el valor es 0.</p>
+
+<h3 id="-webkit-transition">-webkit-transition</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong>Medio:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transition">Documentación</a></li>
+</ul>
+
+<p>Si está soportado, el valor es 1, si no, el valor es 0.</p>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("21")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("9.0")}}</td>
+   <td>{{CompatOpera("9")}}</td>
+   <td>{{CompatSafari("4")}}</td>
+  </tr>
+  <tr>
+   <td><code>grid</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} <sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>resolution</code></td>
+   <td>{{CompatChrome("29")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}} <sup>[2]</sup><br>
+    {{CompatGeckoDesktop("8.0")}} <sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scan</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-min-device-pixel-ratio</code>, <code>-webkit-max-device-pixel-ratio</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[7]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-3d</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatGeckoDesktop("49")}}<sup>[6]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-2d</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transition</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("47")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>grid</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>resolution</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scan</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-min-device-pixel-ratio</code>, <code>-webkit-max-device-pixel-ratio</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-3d</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-2d</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transition</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>grid</code> media type no está soportado</p>
+
+<p>[2] Soporta valores {{cssxref("&lt;integer&gt;")}}.</p>
+
+<p>[3] Soporta valores {{cssxref("&lt;number&gt;")}}, según la especificación.</p>
+
+<p>[4] <code>tv</code> media no está soportado</p>
+
+<p>[5] Ver {{WebKitBug(22494)}}.</p>
+
+<p>[6] Implementado por razones de compatibilidad web en Gecko 46.0 {{geckoRelease("46.0")}} tras tras cambiar <code>layout.css.prefixes.webkit</code> por defecto a <code>false</code> (ver {{bug(1239799)}}). Desde Gecko 49.0 {{geckoRelease("49")}} <code>layout.css.prefixes.webkit</code> por defecto es <code>true</code>.</p>
+
+<p>[7] Implementado como alias para <code>min--moz-device-pixel-ratio </code>y <code>max--moz-device-pixel-ratio</code> por razones de compatibilidad web in Gecko 45.5 {{geckoRelease("45.0")}} (ver {{bug(1176968)}}) tras cambiar <code>layout.css.prefixes.webkit</code> y <code>layout.css.prefixes.device-pixel-ratio-webkit</code> por defecto a <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49")}} <code>layout.css.prefixes.webkit</code> por defecto es <code>true</code>.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">Especificación CSS 3 media query</a></li>
+ <li><a class="internal" href="/es/docs/Web/CSS/@media">Tipos de Medios</a></li>
+ <li><a href="/es/docs/Web/Guide/CSS/probando_media_queries">Usando media queries desde código</a></li>
+</ul>
diff --git a/files/es/web/css/referencia_css/mix-blend-mode/index.html b/files/es/web/css/mix-blend-mode/index.html
index fc213a4ceb..fc213a4ceb 100644
--- a/files/es/web/css/referencia_css/mix-blend-mode/index.html
+++ b/files/es/web/css/mix-blend-mode/index.html
diff --git a/files/es/web/css/normal/index.html b/files/es/web/css/normal/index.html
deleted file mode 100644
index 332e284385..0000000000
--- a/files/es/web/css/normal/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: normal
-slug: Web/CSS/normal
-translation_of: Web/CSS/font-variant
-translation_of_original: Web/CSS/normal
----
-<h2 id="Sumario" name="Sumario">Sumario</h2>
-<p>El valor <i>normal</i> en una propiedad CSS, es normalmente el valor medio de entre los posibles valores que puede tomar. Es el valor por defecto, es decir, el que tiene la propiedad si no establecemos uno distinto.</p>
-<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
-<p>En la propiedad <code>font-style:</code> <code>normal</code> establece que el tipo de fuente no es <code>italic</code> ni <code>oblique</code>.</p>
-<p>El la propiedad <code>font-size:</code> <code>normal</code>se establece al tamaño de la fuente al tamaño que esté establecido en el User Agent.</p>
diff --git a/files/es/web/css/porcentaje/index.html b/files/es/web/css/percentage/index.html
index c6629803fe..c6629803fe 100644
--- a/files/es/web/css/porcentaje/index.html
+++ b/files/es/web/css/percentage/index.html
diff --git a/files/es/web/css/preguntas_frecuentes_sobre_css/index.html b/files/es/web/css/preguntas_frecuentes_sobre_css/index.html
deleted file mode 100644
index 36c2fa1317..0000000000
--- a/files/es/web/css/preguntas_frecuentes_sobre_css/index.html
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: Preguntas frecuentes sobre CSS
-slug: Web/CSS/Preguntas_frecuentes_sobre_CSS
-tags:
-  - CSS
-  - Proyecto MDC
-translation_of: Learn/CSS/Howto/CSS_FAQ
----
-<h4 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered"><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Mi CSS es válida, pero no se representa correctamente</span></span></h4>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los navegadores utilizan la declaración <code>DOCTYPE</code> para elegir entre mostrar el documento usando un modo que sea más compatible con los estándares de la Web o mostrarlo con los fallos de los navegadores antiguos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El uso de una declaración <code>DOCTYPE</code> correcta y moderna al inicio del código HTML mejorará el cumplimiento de los estándares del navegador.</span></span></p>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Los navegadores modernos tienen fundamentalmente dos modos de renderizado:</span></span></p>
-<ul> <li><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><em>Quirks mode</em> (Modo no estándar): también se llama el modo de compatibilidad con versiones anteriores y permite que las páginas web heredadas se representen como sus autores habían previsto, siguiendo las normas de representación o renderizado no estándares que usan los navegadores antiguos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los documentos con una declaración <code>DOCTYPE</code> incompleta, incorrecta o faltante o con una declaración <code>DOCTYPE</code> conocida que se usara habitualmente antes de 2001 se representarán en el Modo no estándar.</span></span></li> <li><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><em>Standards Mode</em> (Modo estándar): el navegador intenta seguir estrictamente los estándares del W3C.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Se supone que las nuevas páginas HTML se diseñarán para navegadores compatibles con los estándares, y como resultado, las páginas con una declaración <code>DOCTYPE</code> moderna será renderizada con el Modo estándar.</span></span></li>
-</ul>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los navegadores basados en Gecko tienen un tercer <em><a href="/en/Gecko's_&quot;Almost_Standards&quot;_Mode" title="en/Gecko's &quot;Almost Standards&quot; Mode">Modo casi estándar</a></em> que tiene solo una peculiaridades menores.</span></span></p>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esta es una lista de las declaraciones <code>DOCTYPE</code> más utilizadas que activarán el Modo estándar o el Modo casi estándar:</span></span></p>
-<pre><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.0 Transitional / / EN"</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/html4/loose.dtd"&gt;</span></span>
-
-<span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN"</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/html4/strict.dtd"&gt;</span></span>
-
-<span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</span></span>
-
-<span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN"</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;</span></span>
-</pre>
-<h4 id="Difference_between_id_and_class" name="Difference_between_id_and_class"><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Diferencia entre <code>id</code> y <code>class</code></span></span></h4>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los elementos HTML pueden tener un atributo <code>id</code> y / o un atributo <code>class</code>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El atributo <code>id</code> asigna un nombre a un elemento determinado y debe haber un solo elemento con ese nombre.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El atributo <code>class</code> asigna un elemento a una determinada clase y en general no puede haber más de un elemento con el mismo atributo <code>class</code>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">CSS te permite aplicar estilos a un atributo <code>id</code> y / o <code>class</code> concreto.</span></span></p>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Utiliza un estilo específico de <code>id</code> cuando desees restringir las reglas de estilo a un bloque o elemento concreto.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este estilo lo usará <strong>un solo</strong> elemento con ese <code>id</code> concreto.</span></span></p>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Usa un estilo específico de <code>class</code> cuando desees aplicar las reglas de estilo a una determinada clase de bloques y elementos.</span></span></p>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Consulta <a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting Started/Selectors">Selectores CSS</a></span></span></p>
-<h4 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value"><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Restaurar el valor de la propiedad predeterminado</span></span></h4>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Debido a que CSS no proporciona una palabra clave "predeterminada", la única manera de restaurar el valor predeterminado de una propiedad es volver a declarar explícitamente dicha propiedad.</span></span></p>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por lo tanto, debes tener especial cuidado al escribir reglas de estilo usando selectores (por ejemplo, los selectores por nombre de etiqueta, como <code>p</code> ) que tal vez desees reemplazar con reglas más específicas (como las que usan id o selectores de clase), porque el valor predeterminado original no puede restablecerse automáticamente.</span></span></p>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Debido a la naturaleza <em>en cascada</em> de CSS, es una buena práctica definir reglas de estilo de una manera lo más concreta posible para evitar aplicar estilo a elementos a los que no se tenía previsto aplicar.</span></span></p>
-<h4 id="Derived_styles" name="Derived_styles"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Estilos derivados</span></span></h4>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">CSS no permite que se defina un estilo según los términos de otro.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">(Consulta la <a class="external" href="http://archivist.incutio.com/viewlist/css-discuss/2685" title="http://archivist.incutio.com/viewlist/css-discuss/2685">nota de Eric Meyer acerca de la postura del Grupo de trabajo)</a>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Sin embargo, la asignación de múltiples clases a un solo elemento puede proporcionar el mismo efecto.</span></span></p>
-<h4 id="Assigning_multiple_classes" name="Assigning_multiple_classes"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Asignación de múltiples clases</span></span></h4>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">A los elementos HTML se les pueden asignar varias clases listándolas  en el atributo <code>class</code>, con un espacio en blanco para separarlas.</span></span></p>
-<pre><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;style type="text/css"&gt;</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.news { background: black; color: white; }</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.today { font-weight: bold; }</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/style&gt;</span></span>
-
-<span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;div class="news today"&gt;</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">... contenido de las noticias de hoy ...</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/ div&gt;</span></span>
-</pre>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si la misma propiedad se declara en ambas reglas, el conflicto se resuelve primero a través de la especificidad, a continuación, según el orden de las declaraciones CSS.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El orden de las clases en el atributo <code>class</code> no es relevante.</span></span></p>
-<h4 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work"><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Normas de estilo que no funcionan</span></span></h4>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Las reglas de estilo que son sintácticamente correctas pueden no aplicarse en determinadas situaciones.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Puedes utilizar las <em>Reglas de estilo de CSS</em> del <a href="/en/DOM_Inspector" title="en/DOM Inspector">Inspector DOM</a> para depurar los problemas de este tipo, pero los casos más frecuentes en los que se ignoran las reglas de estilo se enumeran a continuación.</span></span></p>
-<h5 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy"><span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Jerarquía de los elementos HTML</span></span></h5>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La forma en que se aplican los estilos CSS a los elementos HTML depende también de la jerarquía de los elementos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Es importante recordar que una regla que se aplica a un descendiente reemplaza el estilo del padre, a pesar de la especificidad o la prioridad de las reglas CSS.</span></span></p>
-<pre><span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.news { color: black; }</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">. corpName {font-weight: bold; color: red;}</span></span>
-
-<span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;!-- el texto de la noticia es negro, pero el nombre de la empresa va en rojo y negrita --&gt;</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;div class="news"&gt;</span></span>
-   <span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">(Reuters) &lt;span class="corpName"&gt; General Electric &lt;/ span&gt; (GE.NYS) anunció el jueves ...</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-63"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/ div&gt;</span></span>
-</pre>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el caso de jerarquías HTML complejas, si parece que se ignora una regla, comprueba si el elemento está dentro de otro elemento con un estilo diferente.</span></span></p>
-<h5 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule"><span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Regla de estilo explícitamente redefinida</span></span></h5>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En las hojas de estilo CSS el orden <strong>es</strong> importante.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si defines una regla y luego vuelves a definirla, se usará la última definición.</span></span></p>
-<pre><span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker { font-weight: bold; }</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockSymbol { color: red; }</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/*  otras reglas             */</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/*  otras reglas             */</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-72"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/*  otras reglas             */</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-73"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockSymbol { font-weight: normal; }</span></span>
-
-<span class="goog-gtc-unit" id="goog-gtc-unit-74"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;!-- la mayor parte del texto va en negrita, con excepción de "GE", que va en rojo y no en negrita --&gt;</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-75"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;div id="stockTicker"&gt;</span></span>
-   <span class="goog-gtc-unit" id="goog-gtc-unit-76"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-77"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/ div&gt;</span></span>
-</pre>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-78"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Para evitar este tipo de errores, intenta definir las reglas solo una vez para un selector determinado y agrupa todas las reglas que pertenecen a ese selector.</span></span></p>
-<h5 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property"><span class="goog-gtc-unit" id="goog-gtc-unit-79"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Uso de una propiedad abreviada</span></span></h5>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-80"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Está bien usar las propiedades abreviadas para la definición de reglas de estilo, ya que utiliza una sintaxis muy compacta.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-81"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Usar la abreviatura con sólo algunos atributos es posible y correcto, pero hay que recordar que los atributos no declarados se restablecen a los valores predeterminados automáticamente.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-82"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto significa que una norma anterior para un solo atributo podría ser reemplazada implícitamente.</span></span></p>
-<pre><span class="goog-gtc-unit" id="goog-gtc-unit-83"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-84"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockSymbol { font: 14px Arial; color: red; }</span></span>
-
-<span class="goog-gtc-unit" id="goog-gtc-unit-85"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;div id="stockTicker"&gt;</span></span>
-   <span class="goog-gtc-unit" id="goog-gtc-unit-86"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-87"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/ div&gt;</span></span>
-</pre>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-88"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el ejemplo anterior el problema se produjo en las reglas que pertencían a distintos elementos, pero puede ocurrir también para el mismo elemento, porque el orden de las reglas <strong>es</strong> importante.</span></span></p>
-<pre><span class="goog-gtc-unit" id="goog-gtc-unit-89"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker {</span></span>
-   <span class="goog-gtc-unit" id="goog-gtc-unit-90"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">font-weight: bold;</span></span>
-   <span class="goog-gtc-unit" id="goog-gtc-unit-91"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">font: 12px Verdana; / * font-weight es ahora normal * /</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-92"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">}</span></span>
-</pre>
-<h5 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector"><span class="goog-gtc-unit" id="goog-gtc-unit-93"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Uso del selector <code>*</code></span></span></h5>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-94"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El selector <code>*</code> se refiere a cualquier elemento y tiene que utilizarse con especial cuidado.</span></span></p>
-<pre><span class="goog-gtc-unit" id="goog-gtc-unit-95"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">body * { font-weight: normal; }</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-96"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker { font: 12px Verdana; }</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-97"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.corpName { font-weight: bold; }</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-98"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockUp { color: red; }</span></span>
-
-<span class="goog-gtc-unit" id="goog-gtc-unit-99"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;div id="section"&gt;</span></span>
-   <span class="goog-gtc-unit" id="goog-gtc-unit-100"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">NYS: &lt;span class="corpName"&gt;&lt;span class="stockUp"&gt;GE&lt;/span&gt;&lt;/span&gt; +1.0 ...</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-101"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/ div&gt;</span></span>
-</pre>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-102"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En este ejemplo, el selector <code>body *</code> aplica la regla a todos los elementos dentro del cuerpo (<em>body</em>), en cualquier nivel de jerarquía, incluyendo <em>redtext.</em></span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-103"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Así <code>font-weight: bold;</code> aplicada a la clase <em>boldtext</em> se reemplaza por <code>font-weight: normal;</code> aplicada a <em>redtext.</em></span></span></p>
-<h5 id="Specificity_in_CSS" name="Specificity_in_CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-104"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Especificidad en CSS</span></span></h5>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-105"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Cuando se aplican múltiples reglas a un determinado elemento, la norma escogida depende de su especificidad de estilo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-106"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El estilo en línea (en los atributos HTML <code>style</code>) es lo primero, seguido por los selectores id, a continuación, los selectores class y, finalmente, los selectores element-name.</span></span></p>
-<pre><span class="goog-gtc-unit" id="goog-gtc-unit-107"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">div { color: black; }</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-108"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#orange { color: orange; }</span></span>
-<span class="goog-gtc-unit" id="goog-gtc-unit-109"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.green { color: green; }</span></span>
-
-<span class="goog-gtc-unit" id="goog-gtc-unit-110"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;div id="orange" class="green" style="color: red;"&gt;This is red&lt;/div&gt;</span></span>
-</pre>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-111"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Las reglas son más complicadas cuando el selector tiene varias partes.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-112"><span class="goog-gtc-translatable goog-gtc-from-human goog-gtc-ph-missing" dir="ltr" style="">Se puede encontrar más información detallada acerca de cómo se calcula la especificidad del selector en el <a class=" external" href="http://www.w3.org/TR/CSS21/cascade.html#specificity" title="http://www.w3.org/TR/CSS21/cascade.html#specificity">capítulo 6.4.3 de la Especificación CSS 2.1</a></span></span></p>
-<h4 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F"><span class="goog-gtc-unit" id="goog-gtc-unit-113"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">¿Qué hacen las propiedades -moz-*?</span></span></h4>
-<p><span class="goog-gtc-unit" id="goog-gtc-unit-114"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por favor, consulta la página <a class="internal" href="/en/CSS_Reference/Mozilla_Extensions" title="en/CSS Reference/Mozilla Extensions">Extensiones CSS de Mozilla</a>.</span></span></p>
-<p> </p>
-<p>{{ languages( { "en": "en/Common_CSS_Questions", "pl": "pl/Cz\u0119ste_pytania_o_CSS", "zh-tw": "zh_tw/CSS_\u4e00\u822c\u554f\u984c" } ) }}</p>
diff --git a/files/es/web/css/primeros_pasos/index.html b/files/es/web/css/primeros_pasos/index.html
deleted file mode 100644
index c6eb218230..0000000000
--- a/files/es/web/css/primeros_pasos/index.html
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: Primeros pasos
-slug: Web/CSS/Primeros_pasos
----
-<p> </p>
-<h2 id="Introducción">Introducción</h2>
-<p>Este tutorial es una introducción a las hojas de estilo en cascada (CSS).</p>
-<p>Te guiará a través de las funcionalidades básicas de CSS con ejemplos prácticos que puedes poner a prueba en tu propio equipo. Tiene dos partes.</p>
-<ul> <li>La primera parte ilustra las funcionalidades estándar de CSS que funcionan en los navegadores de Mozilla y en casi todos los navegadores modernos.</li>
-</ul>
-<ul> <li>La segunda parte contiene algunos ejemplos de funciones especiales que funcionan en Mozilla pero no necesariamente en otros ambientes.</li>
-</ul>
-<p>El tutorial está basado en la <a class="external" href="http://www.w3.org/TR/CSS21/">especificación 2.1 de CSS 2.1</a>.</p>
-<h3 id="¿Quién_debe_usar_este_tutorial">¿Quién debe usar este tutorial?</h3>
-<p>Este tutotial es prácticamente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia en CSS.</p>
-<p>Si eres un principiante en CSS, usa la primera parte del tutorial para entender CSS y aprender cómo usarlo. Después usa la segunda parte para entender el alcance de CSS en Mozilla.</p>
-<p>Si sabes algo de CSS, puedes saltearte las partes del tutorial que ya conoces y sólo leer las partes que te interesen.</p>
-<p>Si eres experimentado en CSS pero no en Mozilla, puedes pasar a la segunda parte.</p>
-<h3 id="¿Qué_necesitas_antes_de_empezar">¿Qué necesitas antes de empezar?</h3>
-<p>Para obtener lo mejor de este tutorial, necesitas un editor de archivos de texto y un navegador basado en Mozilla (Firefox o SeaMonkey). Deberías tener conocimientos básicos de cómo usarlos.</p>
-<p>Si no quieres editar archivos, puedes leer el tutorial y mirar las imágenes, pero esa es una forma menos efectiva de aprender.</p>
-<p>Unas pequeñas partes del tutorial requieren otros programas de Mozilla. Esas partes son opcionales. Si no quieres descargar otras aplicaciones de Mozilla, puedes saltearte esas partes. El otro software de Mozilla que se referencia en este tutorial incluye:</p>
-<ul> <li><a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a></li>
-</ul>
-<p><strong>Nota: </strong> CSS brinda formas de trabajar con el color, así que partes de este tutorial dependen del color. Puedes usar estas partes fácilmente si tienes un monitor a color y una visión de colores normal.</p>
-<h3 id="Cómo_usar_este_tutorial">Cómo usar este tutorial</h3>
-<p>Para usar este tutorial, lee las páginas detenidamente y en orden. Si pierdes una página, podrá resultarte difícil entender las páginas posteriores.</p>
-<p>En cada página, usa la sección de <em>Información</em> para entender cómo funciona CSS. Usa la sección <em>Acción</em> para probar el uso de CSS en tu propio equipo.</p>
-<p>Para probar que hayas entendido, haz el desafío al final de cada página. Las soluciones a los desafíos están enlazados debajo de ellos, así no necesitas mirarlos si no quieres hacerlo.</p>
-<p>Para entender CSS más profundamente, lee la información que encontrarás en las cajas con el título <em>Más detalles</em>. Usa los enlaces que se encuentran allí para buscar información de referencia acerca de CSS.</p>
-<h2 id="Primera_parte_del_tutorial">Primera parte del tutorial</h2>
-<p>Una guía básica paso a paso de CSS.</p>
-<ol> <li><strong><a href="/en/CSS/Getting_Started/What_is_CSS" title="en/CSS/Getting_Started/What_is_CSS">What is CSS</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Why_use_CSS" title="en/CSS/Getting_Started/Why_use_CSS">Why use CSS</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting_Started/How_CSS_works">How CSS works</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting_Started/Cascading_and_inheritance">Cascading and inheritance</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">Selectors</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting_Started/Readable_CSS">Readable CSS</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting_Started/Text_styles">Text styles</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Color" title="en/CSS/Getting_Started/Color">Color</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">Content</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting_Started/Lists">Lists</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">Boxes</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting_Started/Layout">Layout</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting_Started/Tables">Tables</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Media" title="en/CSS/Getting_Started/Media">Media</a></strong></li>
-</ol>
-<h2 id="Segunda_parte_del_tutorial">Segunda parte del tutorial</h2>
-<p>Ejemplos que muestran el alcance del CSS en Mozilla.</p>
-<ol> <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting_Started/SVG_graphics">SVG graphics</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a></strong></li>
-</ol>
-<p>{{ languages( { "en": "en/CSS/Getting_Started", "de": "de/CSS/Einführung", "es": "es/CSS/Primeros_pasos", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p>
diff --git a/files/es/web/css/pseudoelementos/index.html b/files/es/web/css/pseudo-elements/index.html
index c65b904163..c65b904163 100644
--- a/files/es/web/css/pseudoelementos/index.html
+++ b/files/es/web/css/pseudo-elements/index.html
diff --git a/files/es/web/css/referencia_css/index.html b/files/es/web/css/reference/index.html
index 63c52a6cdb..63c52a6cdb 100644
--- a/files/es/web/css/referencia_css/index.html
+++ b/files/es/web/css/reference/index.html
diff --git a/files/es/web/css/elemento_reemplazo/index.html b/files/es/web/css/replaced_element/index.html
index a8bedc65a2..a8bedc65a2 100644
--- a/files/es/web/css/elemento_reemplazo/index.html
+++ b/files/es/web/css/replaced_element/index.html
diff --git a/files/es/web/css/resolución/index.html b/files/es/web/css/resolution/index.html
index b480413bb1..b480413bb1 100644
--- a/files/es/web/css/resolución/index.html
+++ b/files/es/web/css/resolution/index.html
diff --git a/files/es/web/css/rtl/index.html b/files/es/web/css/rtl/index.html
deleted file mode 100644
index 1fd8c9f45d..0000000000
--- a/files/es/web/css/rtl/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: rtl
-slug: Web/CSS/rtl
----
-<h3 id="Sumario" name="Sumario"> Sumario </h3>
-<p>El valor <i>rtl</i> es el valor que debe usarse para la propiedad CSS:direction si queremos escribir en lenguas táles como el Hebreo o el Árabe. El nombre viene de las iniciales de las palabras en inglés: Right To Left, que indican que el texto y otros elementos se han de representar de derecha a izquierda.
-</p><p><br>
-</p>
-<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3>
-<pre class="eval">div {
-   position: absolute;
-   right: 20px;
-   height: 200px;
-   border: 1px solid #000;
-   direction: rtl;
-}
-</pre>
-<p><br>
-</p>
-<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3>
-<p>{{ Cssxref("direction") }}, {{ Cssxref("ltr") }}
-</p>
diff --git a/files/es/web/css/especificidad/index.html b/files/es/web/css/specificity/index.html
index 6a42fdb53f..6a42fdb53f 100644
--- a/files/es/web/css/especificidad/index.html
+++ b/files/es/web/css/specificity/index.html
diff --git a/files/es/web/css/herramientas/cubic_bezier_generator/index.html b/files/es/web/css/tools/cubic_bezier_generator/index.html
index b99e7afaa3..b99e7afaa3 100644
--- a/files/es/web/css/herramientas/cubic_bezier_generator/index.html
+++ b/files/es/web/css/tools/cubic_bezier_generator/index.html
diff --git a/files/es/web/css/herramientas/index.html b/files/es/web/css/tools/index.html
index 59cd1febfa..59cd1febfa 100644
--- a/files/es/web/css/herramientas/index.html
+++ b/files/es/web/css/tools/index.html
diff --git a/files/es/web/css/filter-function/url/index.html b/files/es/web/css/url()/index.html
index 2ec8f41bf0..2ec8f41bf0 100644
--- a/files/es/web/css/filter-function/url/index.html
+++ b/files/es/web/css/url()/index.html
diff --git a/files/es/web/css/-moz-user-modify/index.html b/files/es/web/css/user-modify/index.html
index 21b9593d93..21b9593d93 100644
--- a/files/es/web/css/-moz-user-modify/index.html
+++ b/files/es/web/css/user-modify/index.html
diff --git a/files/es/web/css/sintaxis_definición_de_valor/index.html b/files/es/web/css/value_definition_syntax/index.html
index 90d5ea8b75..90d5ea8b75 100644
--- a/files/es/web/css/sintaxis_definición_de_valor/index.html
+++ b/files/es/web/css/value_definition_syntax/index.html