<p><span class="Apple-style-span" style="font-size: 13px; font-weight: normal;">Como se puede apreciar en la sección <a href="/indice/puesta-en-marcha-de-sitio-web" title="Ir a Puesta en Marcha">Puesta en Marcha</a>, cuando se logra separar el contenido de la presentación, el resultado suele ser muy poderoso ya que permite al administrador del Sitio Web hacer cambios al diseño (colores, ubicaciones, tamaños) del contenido de sus páginas con muy poco esfuerzo: basta con modificar la Hoja de Estilos para que éstos tengan efecto.</span></p>
<p>Para utilizar de mejor forma las Hojas de Estilo en Cascada, se ofrecen tres archivos:</p>
<p><a name="archivo" id="archivo"></a></p>
<h4>Archivo de Contenido</h4>
<p>Se trata del archivo&nbsp;<a href="/guia-v2/capitulos/02/anexos/3cols.htm">3cols.htm</a>&nbsp;que consiste en una página con tres columnas: una tiene un logotipo y las otras dos, texto simulado; en su código se puede ver que sólo tiene etiquetas de html estándar, por lo que esta página hace un uso válido de los estándares (ver Figura 3).</p>
<div id="fig003" class="imgSet"><img src="/guia-v2/capitulos/02/images/fig.003.jpg" alt="Imagen que muestra la página de ejemplo de la que trata esta sección." title="Imagen que muestra la página de ejemplo de la que trata esta sección." width="500">
<p class="caption"><a href="/guia-v2/capitulos/02/images/fig.003.htm" title="Descripción de imagen.">[D]</a>&nbsp;Figura 3. La imagen muestra una pantalla con el ejemplo del que trata esta sección.</p>
</div>
<p><a name="estilo" id="estilo"></a></p>
<h4>Hojas de estilo</h4>
<p>Se ofrecen dos para este archivo, las cuales se llaman desde la sección &lt;head&gt; de su código; una de ellas es para mostrar el contenido en pantalla, mientras que la segunda es para impresión. Los archivos se denominan&nbsp;<a href="/guia-v2/capitulos/02/anexos/3cols.css">3cols.css</a>&nbsp;y&nbsp;<a href="/guia-v2/capitulos/02/anexos/3cols-print.css">3cols-print.css</a>. Un elemento interesante, es que al usar la hoja de estilo de impresión, se modifica completamente el contenido y la página se diagrama de manera diferente (ver Figura 4).</p>
<div id="fig003" class="imgSet"><img src="/guia-v2/capitulos/02/images/fig.004.jpg" alt="Imagen que muestra el contenido de la página web de ejemplo, cuando se aprecia en la visualización para impresión." title="magen que muestra el contenido de la página web de ejemplo, cuando se aprecia en la visualización para impresión." width="500">
<p class="caption"><a href="/guia-v2/capitulos/02/images/fig.003.htm" title="Descripción de imagen.">[D]</a>&nbsp;Figura 4. La imagen muestra la visualización para impresión de la página web de ejemplo.</p>
</div>
<p>La intención de entregar estos archivos es que el usuario de esta Guía pueda trabajar con ellos y hacerles las modificaciones que estime adecuadas, para ir aprendiendo sobre la marcha el efecto que consigue a través de los cambios que realice.</p>
<p><a name="recursos" id="recursos"></a></p>
<h4>Recursos Adicionales</h4>
<p>Para aprender y practicar más sobre este tema, de por sí complejo, se sugieren los siguientes recursos:</p>
<ul>
<li><strong>Tutorial de CSS en W3C</strong>&nbsp;-&nbsp;<a href="http://www.w3.org/Style/Examples/011/firstcss.es.html" title="Tutorial CSS en W3C">http://www.w3.org/Style/Examples/011/firstcss.es.html</a></li>
<li><strong>Tejedores del Web</strong>&nbsp;-&nbsp;<a href="http://www.tejedoresdelweb.com/307/article-1061.html" title="">http://www.tejedoresdelweb.com/307/article-1061.html</a></li>
<li><strong>Directorio de enlaces de CSS en W3C</strong>&nbsp;-&nbsp;<a href="http://www.w3.org/Style/CSS/learning" title="Directorio de enlaces de CSS en W3C">http://www.w3.org/Style/CSS/learning</a></li>
</ul>