---
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>