path: root/files/es/web/css/comenzando_(tutorial_css)/index.html

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