unslug es: move

1 files changed, 512 insertions, 0 deletions

diff --git a/files/es/learn/css/first_steps/how_css_is_structured/index.html b/files/es/learn/css/first_steps/how_css_is_structured/index.html
new file mode 100644
index 0000000000..a3e9bb94b8
--- /dev/null
+++ b/files/es/learn/css/first_steps/how_css_is_structured/index.html
@@ -0,0 +1,512 @@
+---
+title: Cómo se estructura el CSS
+slug: Learn/CSS/First_steps/Como_se_estructura_CSS
+translation_of: Learn/CSS/First_steps/How_CSS_is_structured
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary">Ahora que ya sabes qué es el CSS y conoces sus conceptos básicos, es hora de profundizar un poco más en la estructura del lenguaje en sí. Ya hemos visto muchos de los conceptos que aparecen en este artículo; puedes volver para recapitular si más adelante encuentras conceptos confusos.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajo con archivos</a>, conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y una idea de <a href="/es/docs/Learn/CSS/First_steps/Como_funciona_CSS">cómo funciona el CSS</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender en detalle las estructuras de sintaxis fundamentales de CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Aplicar_CSS_al_HTML">Aplicar CSS al HTML</h2>
+
+<p>Lo primero que veremos son los tres métodos para aplicar CSS a un documento.</p>
+
+<h3 id="Hoja_de_estilo_externa">Hoja de estilo externa</h3>
+
+<p>En <a href="/es/docs/Learn/CSS/First_steps/Comenzando_CSS">Empezar con el CSS</a>, vinculamos una hoja de estilo externa a nuestra página. Este es el método más común y útil para adjuntar CSS a un documento, porque puedes vincular el CSS a varias páginas y dar estilo a todas ellas con la misma hoja de estilo. En la mayoría de los casos, las diferentes páginas de un sitio web se verán más o menos iguales, de modo que puedes usar el mismo conjunto de reglas para el aspecto y la interacción básicos.</p>
+
+<p>Una hoja de estilo externa significa que el CSS está escrito en un archivo independiente con una extensión <code>.css</code> y que lo vinculas desde un elemento <code>&lt;link&gt;</code> de HTML:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Mi experimento CSS&lt;/title&gt;
+    &lt;link rel="stylesheet" href="styles.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;¡Hola, mundo!&lt;/h1&gt;
+    &lt;p&gt;Este es mi primer ejemplo de CSS&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>El archivo CSS podría parecerse a esto:</p>
+
+<pre class="brush: css notranslate">h1 {
+  color: blue;
+  background-color: yellow;
+  border: 1px solid black;
+}
+
+p {
+  color: red;
+}</pre>
+
+<p>El atributo <code>href</code> del elemento {{htmlelement("link")}} tiene que hacer referencia a un archivo de tu sistema de archivos.</p>
+
+<p>En el ejemplo anterior, el archivo CSS está en la misma carpeta que el documento HTML, pero puedes colocarlo en otro lugar y especificar la ruta adecuada. Por ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;!-- Dentro de un subdirectorio llamado styles dentro del directorio de trabajo --&gt;
+&lt;link rel="stylesheet" href="styles/style.css"&gt;
+
+&lt;!-- Dentro de un subdirectorio llamado general, que está en un subdirectorio llamado styles, dentro del directorio de trabajo --&gt;
+&lt;link rel="stylesheet" href="styles/general/style.css"&gt;
+
+&lt;!-- Sube un nivel de directorio, y luego dentro de un subdirectorio llamado styles --&gt;
+&lt;link rel="stylesheet" href="../styles/style.css"&gt;</pre>
+
+<h3 id="Hoja_de_estilo_interna">Hoja de estilo interna</h3>
+
+<p>Una hoja de estilo interna es cuando no hay ningún archivo CSS externo, sino que colocas tu CSS dentro de un elemento {{htmlelement("style")}} contenido dentro del elemento {{htmlelement("head")}} del HTML.</p>
+
+<p>En este caso, el HTML se vería así:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Mi experimento CSS&lt;/title&gt;
+    &lt;style&gt;
+      h1 {
+        color: blue;
+        background-color: yellow;
+        border: 1px solid black;
+      }
+
+      p {
+        color: red;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;¡Hola, mundo!&lt;/h1&gt;
+    &lt;p&gt;Este es mi primer ejemplo de CSS&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Esto puede ser útil en algunas circunstancias (tal vez estés trabajando con un sistema de administración de contenido donde no sea posible modificar los archivos CSS directamente), pero no es tan eficiente como las hojas de estilo externas: en una página web, deberías repetir el CSS en cada página y actualizarlo en varios lugares en caso de que hubiera que hacer cambios.</p>
+
+<h3 id="Estilos_en_línea">Estilos en línea</h3>
+
+<p>Los estilos en línea son declaraciones CSS que afectan a un solo elemento, contenido dentro de un atributo de <code>style</code>:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Mi experimento CSS&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1 style="color: blue;background-color: yellow;border: 1px solid black;"&gt;¡Hola mundo!&lt;/h1&gt;
+    &lt;p style="color:red;"&gt;Este es mi primer ejemplo de CSS&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>¡No hagas esto a menos que realmente tengas que hacerlo!</strong> Es realmente malo a la hora de realizar el mantenimiento (puede que tengas que actualizar la misma información varias veces en un mismo documento), y además mezcla tu información CSS para la presentación con tu información HTML para la estructura, lo que dificulta la lectura y la comprensión del código. Mantener los diferentes tipos de código separados facilita trabajar con ellos.</p>
+
+<p>Hay ciertos lugares donde los estilos en línea son más comunes, o incluso aconsejables. Es posible que tengas que recurrir a ellos si realmente tu entorno de trabajo es restrictivo (tal vez el CMS solo te permita editar el cuerpo del HTML). También verás que se usan mucho en el correo electrónico en formato HTML para lograr la máxima compatibilidad con el mayor número de clientes.</p>
+
+<h2 id="Juguemos_con_el_CSS_de_este_artículo">Juguemos con el CSS de este artículo</h2>
+
+<p>En este artículo hay mucho CSS con el que jugar. Para hacerlo, recomendamos crear un nuevo directorio/carpeta en el ordenador, dentro de la cual deberás crear una copia de los siguientes dos archivos:</p>
+
+<p><strong>index.html:</strong></p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Mis experimentos CSS&lt;/title&gt;
+    &lt;link rel="stylesheet" href="styles.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+    &lt;p&gt;Crea tu HTML de prueba aquí&lt;/p&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>styles.css:</strong></p>
+
+<pre class="brush: css notranslate">/* Crea tu CSS de prueba aquí */
+
+p {
+  color: red;
+}</pre>
+
+<p>Entonces, cuando te encuentres con un CSS con el que desees experimentar, reemplaza el contenido <code>&lt;body&gt;</code> del HTML con algo de HTML sin estilos y añade CSS a tu archivo de CSS para darle estilo.</p>
+
+<p>Si no estás en un sistema donde puedas crear archivos fácilmente, puedes utilizar el editor interactivo que encontrarás a continuación para experimentar.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} </p>
+
+<p>¡Sigue leyendo y disfruta!</p>
+
+<h2 id="Selectores">Selectores</h2>
+
+<p>No se puede hablar de CSS sin mencionar los selectores, de los cuales ya hemos descubierto varios tipos diferentes en la lección <a href="/es/docs/Learn/CSS/First_steps/Comenzando_CSS">Empezar con el CSS</a>. Un selector es, como determinamos, un elemento de nuestro documento HTML para aplicarle estilo. Si los estilos no se aplican correctamente, es probable que el selector no coincida con lo que crees que debería coincidir.</p>
+
+<p>Cada regla CSS comienza con un selector o una lista de selectores que indican al navegador a qué elemento o elementos deben aplicarse dichas reglas. Todos los siguientes son ejemplos de selectores válidos o listas de selectores.</p>
+
+<pre class="brush: css notranslate">h1
+a:link
+.manythings
+#onething
+*
+.box p
+.box p:first-child
+h1, h2, .intro</pre>
+
+<p><strong>Prueba a crear algunas reglas CSS que usen los selectores anteriores y algo de HTML sin estilos. Si no conoces alguna de las sintaxis anteriores, ¡prueba a buscarla en MDN!</strong></p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Aprenderás mucho más sobre los selectores en nuestros tutoriales sobre <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS">selectores CSS</a> de la próxima lección.</p>
+</div>
+
+<h3 id="Especificidad">Especificidad</h3>
+
+<p>A menudo habrá situaciones en las que dos selectores podrían determinar un mismo elemento HTML. Considera la siguiente hoja de estilo, en que definimos una regla con un selector <code>p</code> que establecerá los párrafos en color azul, y también una clase que establecerá los elementos seleccionados en color rojo.</p>
+
+<pre class="brush: css notranslate">.special {
+  color: red;
+}
+
+p {
+  color: blue;
+}</pre>
+
+<p>Digamos que en nuestro documento HTML hay un párrafo con una clase <code>special</code>. Ambas reglas podrían aplicarse. ¿Cuál ganará? ¿De qué color crees que será nuestro párrafo?</p>
+
+<pre class="brush: html notranslate">&lt;p class="special"&gt;¿De qué color soy?&lt;/p&gt;</pre>
+
+<p>El lenguaje CSS tiene reglas para controlar cuál ganará en caso de colisión; reciben el nombre de <strong>cascada</strong> y <strong>especificidad</strong>. En el siguiente bloque de códigos hemos definido dos reglas para el selector <code>p</code>, pero el párrafo termina siendo de color azul. Esto se debe a que la declaración que lo establece en azul aparece más abajo en la hoja de estilo, y los estilos posteriores anulan a los anteriores. Así funciona la regla de la cascada.</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+}
+
+p {
+  color: blue;
+}</pre>
+
+<p>Sin embargo, en el caso de nuestro primer bloque, que contiene un selector de clase y otro de elementos, la clase ganará. Esto hará que el párrafo sea rojo, incluso aunque aparezca antes en la hoja de estilo. Una clase se describe de forma más específica o con más especificidad que el selector de elementos, razón por la que gana.</p>
+
+<p><strong>Prueba el ejemplo anterior: añade el HTML a tu experimento, luego pon las dos reglas <code>p { ... }</code> a tu hoja de estilo. A continuación, cambia el primer selector <code>p</code> por <code>.special</code> para ver cómo cambia el estilo.</strong></p>
+
+<p>Las reglas de especificidad y de cascada pueden parecer un poco complicadas al principio. Son más fáciles de entender a medida que se van adquiriendo conocimientos de CSS. En nuestro artículo sobre <a href="/es/docs/Learn/CSS/Building_blocks/Cascada_y_herencia">Cascada y herencia</a>, que abordaremos en la próxima lección, se explicará en detalle, incluyendo cómo calcular la especificidad. Por ahora, solo has de saber que existe y que a veces el CSS no se aplica como esperas porque algo más en la hoja de estilo tiene una mayor especificidad. El hecho de identificar que más de una regla podría aplicarse a un elemento es el primer paso para solucionar estos problemas.</p>
+
+<h2 id="Propiedades_y_valores">Propiedades y valores</h2>
+
+<p>En su nivel más básico, el CSS consta de dos componentes básicos:</p>
+
+<ul>
+ <li><strong>Propiedades</strong>: Identificadores legibles por los humanos que indican qué características de estilo (por ejemplo, <code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/en-US/docs/Web/CSS/width">width</a></code>, <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>) deseas cambiar.</li>
+ <li><strong>Valores</strong>: A cada propiedad especificada se le asigna un valor que indica cómo quieres que cambien esas características de estilo (por ejemplo, lo que quieres que cambie de la fuente, el ancho o el color de fondo).</li>
+</ul>
+
+<p>La siguiente imagen resalta una sola propiedad y valor. El nombre de la propiedad es <code>color</code> y el valor <code>blue</code>.</p>
+
+<p><img alt="Una declaración resaltada en el CSS" src="https://mdn.mozillademos.org/files/16498/declaration.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>Una propiedad emparejada con un valor se denomina <em>declaración CSS</em>. Las declaraciones CSS se colocan dentro de los <em>bloques de declaración CSS</em>. La siguiente imagen muestra nuestro CSS con el bloque de declaración resaltado.</p>
+
+<p><img alt="Un bloque de declaración resaltado" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>Finalmente, los bloques de declaración CSS se combinan con <em>selectores</em> para producir <em>conjuntos de reglas CSS</em> (o <em>reglas CSS</em>). Nuestra imagen contiene dos reglas, una para el selector <code>h1</code> y otra para el selector <code>p</code>. La regla para <code>h1</code> está resaltada.</p>
+
+<p><img alt="La regla para h1 resaltada" src="https://mdn.mozillademos.org/files/16500/rules.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>Establecer las propiedades de CSS según valores específicos es la función principal del lenguaje CSS. El motor CSS calcula qué declaraciones se aplican a cada elemento de una página para darle la compaginación y los estilos adecuados.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Importante:</strong> Las propiedades y valores de CSS son sensibles a mayúsculas y minúsculas. La propiedad y el valor de cada par están separados por dos puntos (<code>:</code>).</p>
+</div>
+
+<p><strong>Prueba a buscar diferentes valores de las siguientes propiedades y escribe reglas CSS que se puedan aplicar a diferentes elementos HTML: </strong></p>
+
+<ul>
+ <li><strong>{{cssxref("font-size")}}</strong></li>
+ <li><strong>{{cssxref("width")}}</strong></li>
+ <li><strong>{{cssxref("background-color")}}</strong></li>
+ <li><strong>{{cssxref("color")}}</strong></li>
+ <li><strong>{{cssxref("border")}}</strong></li>
+</ul>
+
+<div class="warning">
+<p><strong>Importante</strong>: Si una propiedad es desconocida o si un valor no es válido para una propiedad determinada, la declaración se considera <em>inválida</em> y el motor CSS del navegador la ignora por completo.</p>
+</div>
+
+<div class="warning">
+<p><strong>Importante</strong>: En CSS (y otros estándares web) se ha acordado establecer como estándar la ortografía en inglés de los EE. UU. para solucionar las incertidumbres idiomáticas. Por ejemplo, <em>siempre</em> hay que escribir <code>color</code>. Si se escribe <code>colour</code>, no funcionará.</p>
+</div>
+
+<h3 id="Las_funciones">Las funciones</h3>
+
+<p>Si bien la mayoría de valores son palabras clave relativamente simples o valores numéricos, es posible que algunos valores tomen la forma de una función. Un ejemplo sería la función <code>calc()</code>. Esta función te permite hacer operaciones matemáticas sencillas desde tu CSS, por ejemplo:</p>
+
+<div id="calc_example">
+<pre class="brush: html notranslate">&lt;div class="external"&gt; &lt;div class="box"&gt;La caja interior es del 90% - 30px.&lt;/div&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">.outer {
+  border: 5px solid black;
+}
+
+.box {
+  padding: 10px;
+  width: calc(90% - 30px);
+  background-color: rebeccapurple;
+  color: white;
+}</pre>
+</div>
+
+<p>Esto se traduce así:</p>
+
+<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p>
+
+<p>Una función consta del nombre de la función y, a continuación, unos paréntesis entre los que se colocan los valores permitidos para esa función. En el caso del ejemplo <code>calc()</code> anterior, pedimos que el ancho de esta caja sea del 90% del ancho del bloque que la contiene, menos 30 píxeles. Esto no es algo que podamos calcular con anticipación y simplemente introducir el valor en el CSS, ya que no sabemos cuál será el 90%. Como con todos los valores, la página correspondiente del proyecto MDN tendrá ejemplos de uso para que puedas ver cómo funciona.</p>
+
+<p>Otro ejemplo serían los diversos valores para {{cssxref ("transform")}}, como <code>rotate()</code>.</p>
+
+<div id="transform_example">
+<pre class="brush: html notranslate">&lt;div class="box"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">.box {
+  margin: 30px;
+  width: 100px;
+  height: 100px;
+  background-color: rebeccapurple;
+  transform: rotate(0.8turn)
+}</pre>
+</div>
+
+<p>El resultado del código anterior se ve así:</p>
+
+<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p>
+
+<p><strong>Prueba a buscar diferentes valores de las siguientes propiedades y escribe reglas CSS que se apliquen a diferentes elementos HTML: </strong></p>
+
+<ul>
+ <li><strong>{{cssxref("transform")}}</strong></li>
+ <li><strong>{{cssxref ("background-image")}}, en particular a valores de gradiente</strong></li>
+ <li><strong>{{cssxref("color")}}, en particular a valores rgb/rgba/hsl/hsla</strong></li>
+</ul>
+
+<h2 id="rules">@rules</h2>
+
+<p>Las <code><a href="/es/docs/Web/CSS/At-rule">@rules</a></code> (leído "at-rules" en inglés) dan al CSS algunas instrucciones sobre cómo comportarse. Algunas <code>@rules</code> son simples, con el nombre de la regla y un valor. Por ejemplo, para importar una hoja de estilo adicional a tu hoja de estilo CSS principal, puedes usar <code>@import</code>:</p>
+
+<pre class="brush: css notranslate">@import 'styles2.css';</pre>
+
+<p>Una de las <code>@rules</code> más comunes con las que te encontrarás es <code>@media</code>, que permite usar <a href="/es/docs/Web/CSS/Media_Queries">consultas a medios</a> para aplicar CSS solo cuando se dan ciertas condiciones (por ejemplo, cuando la resolución de la pantalla supera un valor determinado o la anchura supera un valor concreto).</p>
+
+<p>En el CSS que se muestra a continuación, tenemos una hoja de estilo que le da al elemento <code>&lt;body&gt;</code> un color de fondo rosado. Sin embargo, luego usamos <code>@media</code> para crear una sección de nuestra hoja de estilo que solo se aplicará en los navegadores con una ventana gráfica de más de 30em de ancho. Si el navegador es más ancho que 30em, el color de fondo será azul.</p>
+
+<pre class="brush: css notranslate">body {
+  background-color: pink;
+}
+
+@media (min-width: 30em) {
+  body {
+    background-color: blue;
+  }
+}</pre>
+
+<p>Encontrarás otras <code>@rules</code> a lo largo de estas lecciones.</p>
+
+<p><strong>Prueba a añadir una consulta a medios en tu CSS que cambie los estilos según el ancho de la ventana gráfica. Cambia el ancho de la ventana de tu navegador para ver el resultado.</strong></p>
+
+<h2 id="Abreviaturas">Abreviaturas</h2>
+
+<p>Algunas propiedades como {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}} y {{ cssxref("margin")}} se llaman <strong>propiedades abreviadas</strong>. Esto se debe a que permiten establecer varios valores de propiedad en una sola línea, lo que ahorra tiempo y ordena el código.</p>
+
+<p>Por ejemplo, esta línea:</p>
+
+<pre class="brush: css notranslate">/* En propiedades abreviadas con 4 valores, como margin y padding (relleno), los valores se aplican
+   según el orden: arriba, derecha, abajo e izquierda (en sentido horario desde la parte superior). También hay otros
+   tipos de abreviaturas, como las propiedades abreviadas con 2 valores que establecen el relleno/margen,
+   arriba/abajo, y luego izquierda/derecha */
+padding: 10px 15px 15px 5px;</pre>
+
+<p>Hace lo mismo que todas estas juntas:</p>
+
+<pre class="brush: css notranslate">padding-top: 10px;
+padding-right: 15px;
+padding-bottom: 15px;
+padding-left: 5px;</pre>
+
+<p>Mientras que esta línea:</p>
+
+<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre>
+
+<p>Hace lo mismo que todas estas juntas:</p>
+
+<pre class="brush: css notranslate">background-color: red;
+background-image: url(bg-graphic.png);
+background-position: 10px 10px;
+background-repeat: repeat-x;
+background-scroll: fixed;</pre>
+
+<p>Ahora mismo no pretendemos enseñarlos exhaustivamente: encontrarás muchos ejemplos más adelante en el curso. Te aconsejamos que busques los nombres de las propiedades abreviadas en nuestra <a href="/es/docs/Web/CSS/Referencia_CSS">referencia CSS</a> para obtener más información.</p>
+
+<p><strong>Prueba a añadir las declaraciones anteriores a tu CSS para ver cómo afecta al estilo de tu HTML. Experimenta con diferentes valores.</strong></p>
+
+<div class="blockIndicator warning">
+<p><strong>Advertencia</strong>: Si bien las propiedades abreviadas a menudo permiten ahorrarte valores, luego restablecerán a sus valores iniciales cualquier valor que no incluyas. Esto asegura que se use un conjunto de valores razonable. Sin embargo, puede resultar confuso si esperas que la propiedad abreviada solo cambie los valores que has introducido.</p>
+</div>
+
+<h2 id="Comentarios">Comentarios</h2>
+
+<p>Al igual que con el HTML, te recomendamos que hagas comentarios en tu CSS para que te ayuden a comprender cómo funciona su código cuando vuelvas a utilizarlo al cabo de varios meses, así como para ayudar a otros que vayan a trabajar con él a entenderlo.</p>
+
+<p>Los comentarios en el CSS comienzan con <code>/*</code> y terminan con <code>*/</code>. En el bloque de código que encontrarás a continuación, hemos usado comentarios para marcar el inicio de las diferentes secciones de código. Esto es útil para ayudarnos a movernos por la base de código a medida que aumenta: puedes buscar los comentarios en tu editor de código.</p>
+
+<pre class="brush: css notranslate">/* con elementos básicos de aplicación de estilo */
+/* -------------------------------------------------------------------------------------------- */
+body {
+  font: 1em/150% Helvética, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  /* Prestemos especial atención al tamaño de fuente global. En una pantalla o una ventana grande,
+     aumentamos el tamaño de la fuente para conseguir una mejor legibilidad */
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {font-size: 1.5em;}
+
+/* Familiarización con algunos elementos anidados específicos en el DOM */
+/* -------------------------------------------------------------------------------------------- */
+div p, #id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}</pre>
+
+<p>Los comentarios también son útiles para <em>comentar</em> temporalmente ciertas partes del código con fines de prueba, por ejemplo, si tratas de encontrar qué parte de tu código causa un error. En el siguiente ejemplo, hemos comentado las reglas para el selector <code>.special</code>.</p>
+
+<pre class="brush: css notranslate">/*.special {
+  color: red;
+}*/
+
+p {
+  color: blue;
+}</pre>
+
+<p><strong>Añade algunos comentarios al CSS para acostumbrarte a usarlos.</strong></p>
+
+<h2 id="Espacio_en_blanco">Espacio en blanco</h2>
+
+<p>Por espacio en blanco nos referimos los espacios en sí, tabuladores y retornos de carro o intros. De la misma manera que el HTML, el navegador ignora el espacio en blanco dentro del CSS. El valor del espacio en blanco es que puede mejorar la legibilidad.</p>
+
+<p>En el siguiente ejemplo, cada declaración (y el principio/fin de regla) está en una línea propia; esta es posiblemente una buena forma de escribir el CSS, ya que facilita el mantenimiento y la comprensión:</p>
+
+<pre class="brush: css notranslate">body {
+  font: 1em/150% Helvética, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+div p,
+#id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+</pre>
+
+<p id="Very_compact">Podrías escribir exactamente el mismo CSS eliminando la mayoría de los espacios en blanco; este bloque de código es funcionalmente idéntico al primer ejemplo, pero seguro que estarás de acuerdo en que resulta algo más difícil de leer:</p>
+
+<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+@media (min-width: 70em) { body {font-size: 130%;} }
+
+h1 {font-size: 1.5em;}
+
+div p, #id:first-line {background-color: red; border-radius: 3px;}
+div p {margin: 0; padding: 1em;}
+div p + p {padding-top: 0;}
+</pre>
+
+<p>La manera que elijas para disponer el código suele ser una preferencia personal, aunque cuando comiences a trabajar en equipo es posible que encuentres que el equipo ya tiene su propia guía de estilo que especifica una convención acordada a seguir.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Importante:</strong> Aunque los valores de las declaraciones CSS se separan por espacios, <strong>los nombres de propiedad nunca tienen espacios</strong>.</p>
+</div>
+
+<p>Por ejemplo, las siguientes declaraciones de CSS son válidas:</p>
+
+<pre class="brush: css notranslate">margin: 0 auto;
+padding-left: 10px;</pre>
+
+<p>Pero las siguientes no lo son:</p>
+
+<pre class="brush: css notranslate">margin: 0auto;
+padding- left: 10px;</pre>
+
+<p>¿Ves los errores de espaciado? <code>0auto</code> no se reconoce como un valor válido para la propiedad de <code>margin</code> (<code>0</code> y <code>auto</code> son dos valores separados) y el navegador no reconoce <code>padding-</code> como una propiedad válida. El valor correcto de propiedad (<code>padding-left</code>) se ha separado por un espacio perdido.</p>
+
+<p>Debes asegurarte siempre de separar los valores distintos entre sí por al menos un espacio, pero mantén los nombres de las propiedades y los valores de las propiedades juntos.</p>
+
+<p><strong>Prueba a jugar con los espacios en blanco de tu CSS y observa qué es lo que se rompe y lo que no.</strong></p>
+
+<h2 id="¿Qué_sigue">¿Qué sigue?</h2>
+
+<p>Resulta útil entender un poco cómo el navegador toma tu HTML y tu CSS y los convierte en una página web, razón por la cual en el próximo artículo (<a href="/es/docs/Learn/CSS/First_steps/Como_funciona_CSS">Cómo funciona el CSS</a>) veremos ese proceso.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="En_este_modulo">En este modulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">¿Qué es el CSS?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Empezar con el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Cómo se estructura el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Cómo funciona CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Pon en práctica tus conocimientos nuevos</a></li>
+</ol>