QUE SON LAS HOJAS DE ESTILO
Páginas: 9 (2228 palabras)
Publicado: 13 de abril de 2015
¿QUE SON LAS HOJAS DE ESTILO?
Las hojas de estilo (style sheets) son conjuntos de instrucciones, a veces en forma de archivo anexo, que se asocian a los archivos de texto y se ocupan de los aspectos de formato y de presentación de los contenidos: tipo, fuente y tamaño de letras, alineación y posicionamiento del texto, colores y fondos, etc. Las hojas de estilo permiten liberar la composicióndel texto de los aspectos visuales y favorecen que se estructure y anote mediante códigos que permiten un tratamiento más eficaz de los contenidos. El uso adecuado de las hojas de estilo es uno de los aspectos clave de la edición digital. Las hojas de estilo son una herramienta de gran utilidad de los programas de tratamiento de textos, como OpenOffice.org o Microsoft Word. Asimismo, constituyenuna parte esencial de los lenguajes de marcas para edición digital: Látex, XML y XHTML. Dos lenguajes de hojas de estilo son CSS y XSL.
Las hojas de estilo representan un avance importante para los diseñadores de páginas web, al darles un mayor rango de posibilidades para mejorar la apariencia de sus páginas. En los entornos científicos en que la Web fue concebida, la gente estaba más preocupadapor el contenido de sus páginas que por su presentación. A medida que la Web era descubierta por un espectro mayor de personas de distintas procedencias, las limitaciones del HTML se convirtieron en fuente de continua frustración, y los autores se vieron forzados a superar las limitaciones estilísticas del HTML. Aunque las intenciones han sido buenas -- mejorar la presentación de las páginas web--, las técnicas para conseguirlo han tenido efectos secundarios negativos. Entre estas técnicas, que dan buenos resultados para algunas personas, algunas veces, pero no siempre ni para todas las personas, se incluyen:
La utilización de extensiones propietarias del HTML
Conversión del texto en imágenes
Utilización de imágenes para controlar el espacio en blanco
La utilización de tablas para laorganización de las páginas
Escribir programas en lugar de usar HTML
Estas técnicas incrementan considerablemente la complejidad de las páginas web, ofrecen una flexibilidad limitada, sufren de problemas de interoperabilidad, y crean dificultades para las personas con discapacidades.
Las hojas de estilo resuelven estos problemas al mismo tiempo que reemplazan al limitado rango de mecanismos depresentación del HTML. Con las hojas de estilo es más fácil especificar la cantidad de espacio entre líneas, el sangrado de las líneas, los colores a utilizar para el texto y el fondo, el tamaño y estilo de las fuentes, y otros muchos detalles.
Por ejemplo, la siguiente hoja de estilo CSS (almacenada en el fichero "especial.css") hace que el color del texto de un párrafo sea verde ("green") y lo rodeade un borde rojo ("red") continuo ("solid"):
P.especial {
color : green;
border: solid red;
}
Los autores pueden vincular esta hoja de estilo a su documento fuente HTML con el elemento LINK:
"http://www.w3.org/TR/html4/strict.dtd">
Un documento con una hoja de estilo externa<TITLE><br />
<LINK href="especial.css"rel="stylesheet" type="text/css"><br />
</HEAD><br />
<BODY><br />
<P class="especial">Este párrafo debería tener texto especial verde.<br />
</BODY><br />
</HTML><br />
HTML 4 soporta las siguientes características de hojas de estilo:<br />
Colocación flexible de la información de estilo<br />
Al colocar las hojas de estilo en ficheros separados es más fácil reutilizarlas. Algunas veces es útil incluir instrucciones de representacióndentro del documento al que se aplican, ya sea agrupadas al comienzo del documento, o en atributos de los elementos a lo largo del cuerpo del documento. Para facilitar la gestión de estilos a nivel de sitio, esta especificación describe cómo utilizar los encabezados HTTP para especificar qué hojas de estilo se aplican a un documento.<br />
Independencia de lenguajes de hojas de estilo específicos<br />
Esta... <div class="paper-body__gradient paper-body__gradient--bottom paper-body__gradient--bottom-abs"></div>
<div class="center paper-body__cta--mod paper-body__cta-no-bg">
<a class="button button--large button--orange" onclick="upgradeRedirect()" rel="nofollow">
Leer documento completo </a>
<p class="ash-gray text-s">
Regístrate para leer el documento completo. </p>
</div>
</div>
</div>
</div>
</article>
</main>
<script>(function(d){var domain='buenastareas.com';if(d.referrer.match('^https?\:\/\/(|www\.)'+domain.replace('.com',"")+'\.com(.*)')){d.getElementById('stm-hero').className+=' stm-hero';d.getElementById('emptyTopicsList').innerHTML=(document.getElementById("topicsList"))?d.getElementById('topicsList').innerHTML:'';d.getElementById('text-header').innerHTML='';var sec=d.createElement('div');sec.className='section no-padding margin-2';var p=d.createElement('p');p.className='text-s uppercase ash-gray';p.innerText='Vista previa del texto';sec.appendChild(p);d.getElementById('text-header').appendChild(sec);}else{d.getElementById('stm-hero').className='';d.getElementsByTagName('article')[0].className='row no-border';}})(window.document);</script><div class="advertBox center margin-2 leaderboard_btf">
</div>
<a href="/content/access" rel="nofollow"></a>
<section class="row ">
<div class="columns position-relative
large-12">
<div class="">
<h2 class="heading-m padding-top-1 margin-2">
Estos documentos también te pueden resultar útiles </h2>
</div>
<section class="">
<ul class="unstyled">
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Hojas-De-Estilo/7232499.html"
title="Hojas De Estilo">
<h6 class="heading-s">
Hojas De Estilo </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...gráfico de interfaces.
2.4.1 DISEÑO GRAFICO DE INTERFACES
El alumno utilizará las <b><i>hojas</i></b> de <b><i>estilo</i></b> como herramienta para el diseño de páginas WEB.
Evaluación del tema:
Tareas (investigación) Participación y asistencia Prácticas
20% 10% 40%
Realizar el ejemplo de forma individual. En equipos utilizar herramientas (Kompozer, Dreamweaver) para la creación de <b><i>hojas</i></b> de <b><i>estilo</i></b>
Diseño general de un... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Hojas-De-Estilo/7232499.html"
title="Hojas De Estilo"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">1294 Palabras</span>
<span class="essay-details__item">6 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Hojas-De-Estilo/5521774.html"
title="Hojas De Estilo">
<h6 class="heading-s">
Hojas De Estilo </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...<b><i>Hojas</i></b> de <b><i>Estilo</i></b>
Programación Web
5 de Septiembre de 2012
Prof. Dagoberto Rodríguez Rendón
Adriana Leyva García
<b><i>Hojas</i></b> de <b><i>Estilo</i></b>
Las <b><i>hojas</i></b> de <b><i>estilo</i></b> intentan separar el contenido de una página de la forma de presentarlo en pantalla. Esto lo hacen personificando los cambios que las etiquetas de formato HTML realizan en nuestro texto.
El primer navegador en soportar <b><i>hojas</i></b> de... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Hojas-De-Estilo/5521774.html"
title="Hojas De Estilo"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">1512 Palabras</span>
<span class="essay-details__item">7 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Hoja-De-Estilo-En-Cascada-Ccs/67375498.html"
title="hoja de estilo en cascada ccs">
<h6 class="heading-s">
hoja de estilo en cascada ccs </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...Css
<b><i>Hojas</i></b> de <b><i>Estilo</i></b> en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de <b><i>estilos</i></b> ofrece a los desarrolladores el control total sobre <b><i>estilo</i></b> y formato de sus documentos.
CSS se utiliza para dar... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Hoja-De-Estilo-En-Cascada-Ccs/67375498.html"
title="hoja de estilo en cascada ccs"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">560 Palabras</span>
<span class="essay-details__item">3 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Hojas-De-Estilo-Css3/62306176.html"
title="Hojas de estilo CSS3">
<h6 class="heading-s">
Hojas de estilo CSS3 </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...CSS: <b><i>Hojas</i></b> de <b><i>estilo</i></b>
Junio 2014
Propiedades de fuente
Propiedad
Valor
Descripción
font-family
Fuente específica
(Arial, Times,
Verdana)
Familia (serif, sansserif, fantasy,
monospace, cursive)
font-style
normal, italic, oblique Define el <b><i>estilo</i></b> de la escritura
Define uno o más nombres de fuentes o familias de
fuentes. Si se definen múltiples fuentes, se utilizará la
primera que se encuentre en el sistema del usuario.... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Hojas-De-Estilo-Css3/62306176.html"
title="Hojas de estilo CSS3"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">1007 Palabras</span>
<span class="essay-details__item">5 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Hoja-De-Estilo-En-Cascada-o/76387171.html"
title="Hoja De Estilo En Cascada O CSS">
<h6 class="heading-s">
Hoja De Estilo En Cascada O CSS </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...
El presente tiene como objetivo facilitar la comprensión del código CSS para saber cómo utilizarlo en el lenguaje HTML
CSS son las siglas de Cascading Style Sheets - <b><i>Hojas</i></b> de <b><i>Estilo</i></b> en Cascada
¿Qué es?
Un lenguaje que describe la presentación de los documentos estructurados en <b><i>hojas</i></b> de <b><i>estilo</i></b> para diferentes métodos de interpretación, es decir, describe cómo se va a mostrar un documento en pantalla, por impresora,... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Hoja-De-Estilo-En-Cascada-o/76387171.html"
title="Hoja De Estilo En Cascada O CSS"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">665 Palabras</span>
<span class="essay-details__item">3 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Css-Hojas-De-Estilo/4083604.html"
title="Css (Hojas De Estilo)">
<h6 class="heading-s">
Css (Hojas De Estilo) </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...*{margin:0;padding:0;outline:0}
body
{
background:-moz-radial-gradient(50%,#088A68,#2c2c2c);
font:11px/1.5em Verdana,Tahoma,arial,sans-serif;
color:#455;
text-align:center;
margin:0
}
a,a:visited
{
text-decoration:none;
color:#FF660B
}
a:hover
{
text-decoration:underline
}
td{padding:4px 10px}
th{text-align:left}
.tdp{border:0;margin:0;padding:10px 12px;font-weight:normal}
#wrap
{
width:760px;
background:#FFF repeat-y center top;
margin:0 auto;... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Css-Hojas-De-Estilo/4083604.html"
title="Css (Hojas De Estilo)"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">620 Palabras</span>
<span class="essay-details__item">3 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Hojas-De-Estilo-En-Cascada/16002.html"
title="Hojas de estilo en cascada">
<h6 class="heading-s">
Hojas de estilo en cascada </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...Programación Web
<b><i>Hojas</i></b> de <b><i>estilo</i></b> en cascada.
Profesor: Rodriguez Samado Ruben Dario Presenta: Vazquez Espinoza Luis Manuel
<b><i>Hojas</i></b> de <b><i>estilo</i></b> en cascada.
<b><i>Hojas</i></b> de <b><i>Estilo</i></b> en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Hojas-De-Estilo-En-Cascada/16002.html"
title="Hojas de estilo en cascada"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">1685 Palabras</span>
<span class="essay-details__item">7 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Maquetacion-y-Hojas-De-Estilo/25847339.html"
title="Maquetacion y Hojas de estilo">
<h6 class="heading-s">
Maquetacion y Hojas de estilo </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...MAQUETACIÓN Y <b><i>HOJAS</i></b> DE <b><i>ESTILO</i></b> EN HTML
Pero, ¿que es eso de la maquetación?
En pocas palabras, maquetar una pagina web es pasar el diseño a código HTML, poniendo cada cosa en su lugar (una cabecera, un menu, etc.).
Hasta hace unos años la única manera de maquetar una página web era mediante tablas HTML (), pero esto tiene muchas desventajas y limitaciones, por eso la técnica de maquetación fue evolucionando con los años hasta llegar al punto donde no se usan... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Maquetacion-y-Hojas-De-Estilo/25847339.html"
title="Maquetacion y Hojas de estilo"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">1195 Palabras</span>
<span class="essay-details__item">5 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</section>
</div>
</section>
<section class="row ">
<div class="columns position-relative large-12">
<section class="section no-border">
<div class="container">
<div class="row">
<div class="columns ">
<div class="section-heading ">
<h2 class="align-left margin-2 heading-m">
OTRAS TAREAS POPULARES </h2>
</div>
</div>
</div>
<div class="row" id="popular-tags-visible">
<div class="small-12 columns tag-block columns-small-1 columns-medium-2 columns-large-2">
<ul>
<li class="margin-1">
<a href="/ensayos/Nulidad-Sentencia-Pca/71209069.html" title="NULIDAD SENTENCIA PCA" class="mid-gray brand-primary--hover">NULIDAD SENTENCIA PCA</a>
</li>
<li class="margin-1">
<a href="/ensayos/2-Sema-Cuadro-Enfoque-Socio-Epsitelologico/71209102.html" title="2 SEMA CUADRO ENFOQUE SOCIO EPSITELOLOGICO FORTALEZAS Y DEBILIDADES" class="mid-gray brand-primary--hover">2 SEMA CUADRO ENFOQUE SOCIO EPSITELOLOGICO FORTALEZAS Y DEBILIDADES</a>
</li>
<li class="margin-1">
<a href="/ensayos/Mitas/71209108.html" title="Mitas" class="mid-gray brand-primary--hover">Mitas</a>
</li>
<li class="margin-1">
<a href="/ensayos/231679075-Control-De-Velocidad-De-Un/71209123.html" title="231679075 Control De Velocidad De Un V20 Con S7 1200 TIA Portal Mediante El Protocolo MODBUS" class="mid-gray brand-primary--hover">231679075 Control De Velocidad De Un V20 Con S7 1200 TIA Portal Mediante El Protocolo MODBUS</a>
</li>
<li class="margin-1">
<a href="/ensayos/Es-Impresionante-Lo-Importante-Que-Ha/71209135.html" title="Es Impresionante Lo Importante Que Ha Llegado A Ser Internet" class="mid-gray brand-primary--hover">Es Impresionante Lo Importante Que Ha Llegado A Ser Internet</a>
</li>
<li class="margin-1">
<a href="/ensayos/Colegio-De-Estudios-Cientificos-y-Tecnologicos/71209138.html" title="COLEGIO DE ESTUDIOS CIENTIFICOS Y TECNOLOGICOS DEL ESTADO DE CHIAPAS" class="mid-gray brand-primary--hover">COLEGIO DE ESTUDIOS CIENTIFICOS Y TECNOLOGICOS DEL ESTADO DE CHIAPAS</a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</section>
<div class="advertBox center margin-1"></div>
<section class="section no-border brand-primary--bg">
<div class="row">
<div class="columns center">
<h3 id="banner_title" class="heading-l white">Únete a millones de otros estudiantes y comienza tu investigación</h3>
<h4 class="text-m white">Conviértase en miembro formal de Buenas Tareas</h4>
<a class="button--bg-color__white button-fullwidth" onclick="upgradeRedirect()" rel="nofollow">
INSCRÍBETE - ES GRATIS
</a> </div>
</div>
</section>
<footer class="section section--footer">
<div class="row">
<div class="medium-3 columns"><div class="copyright-block">
<p class="copyright-block__logo">
<i class="icon icon-sm-logo copyright-block__logo__icon"></i>
<span class="copyright-block__logo__span">Buenas Tareas</span>
</p>
<p class="copyright-block__social">
<a rel="nofollow" href="http://www.facebook.com/BuenasTareas">
<span class="copyright-block__social__circle">
<i class="copyright-block__social__circle__icon icon icon-ui-24-social-fb icon-ui-social-fb"></i>
</span>
</a>
<a rel="nofollow" href="https://twitter.com/buenastareas">
<span class="copyright-block__social__circle">
<i class="copyright-block__social__circle__icon icon icon-ui-social-tw"></i>
</span>
</a>
</p>
<small class="copyright-block__copyright text-s">
©2024 BuenasTareas.com </small>
</div>
</div>
<div class="medium-3 columns"><div class="vertical-nav-list">
<h6 class="vertical-nav-list__heading heading-xxs">Productos</h6>
<ul class="vertical-nav-list__container">
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/ojear/">Documentos de investigación</a>
</li>
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/resumen-de-libros/">Notas de libros</a>
</li>
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/generador-de-citas/">Generador de citas</a>
</li>
</ul>
</div>
</div>
<div class="medium-3 columns">
<div class="vertical-nav-list">
<h6 class="vertical-nav-list__heading heading-xxs">Empresa</h6>
<ul class="vertical-nav-list__container">
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/about.php">Empresa</a>
</li>
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/advertise-with-us.php">Haz publicidad</a>
</li>
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/legal.php">Legal (actualizado 9/9/14)</a>
</li>
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/sitemap.html">Mapa del sitio</a>
</li>
</ul>
</div>
</div>
<div class="medium-3 columns"><div class="vertical-nav-list">
<h6 class="vertical-nav-list__heading heading-xxs">Ayuda</h6>
<ul class="vertical-nav-list__container">
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/help.php">Ayuda</a>
</li>
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/about-us/contact">Contáctanos</a>
</li>
</ul>
</div>
</div>
</div>
</footer> </div>
<!-- global JS -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/labjs/2.0.3/LAB.min.js"></script>
<script type="text/javascript">
$LAB
.script("//cdnjs.cloudflare.com/ajax/libs/aja/0.4.1/aja.min.js")
.script("//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js")
.script("//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.runtime.min.js")
.script("//cdnjs.cloudflare.com/ajax/libs/jquery.payment/1.3.2/jquery.payment.min.js")
.script("//assets.buenastareas.com/234d3b97ed2b88737e66b0e02a8e5aa593c7f7c0/_assets/bts/92c1d4e847bc6d93ba58214aa322ee6c.js")
;
</script>
<script type="text/javascript">
window.SM2_DEFER = true;
function downloadJSAtOnload() {
$LAB
.script("//assets.buenastareas.com/234d3b97ed2b88737e66b0e02a8e5aa593c7f7c0/_assets/bts/76aff662ad8b32c9348bfa0fa9cb8f91.js")
.wait(function() {
});
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
</body>
</html>
Las hojas de estilo (style sheets) son conjuntos de instrucciones, a veces en forma de archivo anexo, que se asocian a los archivos de texto y se ocupan de los aspectos de formato y de presentación de los contenidos: tipo, fuente y tamaño de letras, alineación y posicionamiento del texto, colores y fondos, etc. Las hojas de estilo permiten liberar la composicióndel texto de los aspectos visuales y favorecen que se estructure y anote mediante códigos que permiten un tratamiento más eficaz de los contenidos. El uso adecuado de las hojas de estilo es uno de los aspectos clave de la edición digital. Las hojas de estilo son una herramienta de gran utilidad de los programas de tratamiento de textos, como OpenOffice.org o Microsoft Word. Asimismo, constituyenuna parte esencial de los lenguajes de marcas para edición digital: Látex, XML y XHTML. Dos lenguajes de hojas de estilo son CSS y XSL.
Las hojas de estilo representan un avance importante para los diseñadores de páginas web, al darles un mayor rango de posibilidades para mejorar la apariencia de sus páginas. En los entornos científicos en que la Web fue concebida, la gente estaba más preocupadapor el contenido de sus páginas que por su presentación. A medida que la Web era descubierta por un espectro mayor de personas de distintas procedencias, las limitaciones del HTML se convirtieron en fuente de continua frustración, y los autores se vieron forzados a superar las limitaciones estilísticas del HTML. Aunque las intenciones han sido buenas -- mejorar la presentación de las páginas web--, las técnicas para conseguirlo han tenido efectos secundarios negativos. Entre estas técnicas, que dan buenos resultados para algunas personas, algunas veces, pero no siempre ni para todas las personas, se incluyen:
La utilización de extensiones propietarias del HTML
Conversión del texto en imágenes
Utilización de imágenes para controlar el espacio en blanco
La utilización de tablas para laorganización de las páginas
Escribir programas en lugar de usar HTML
Estas técnicas incrementan considerablemente la complejidad de las páginas web, ofrecen una flexibilidad limitada, sufren de problemas de interoperabilidad, y crean dificultades para las personas con discapacidades.
Las hojas de estilo resuelven estos problemas al mismo tiempo que reemplazan al limitado rango de mecanismos depresentación del HTML. Con las hojas de estilo es más fácil especificar la cantidad de espacio entre líneas, el sangrado de las líneas, los colores a utilizar para el texto y el fondo, el tamaño y estilo de las fuentes, y otros muchos detalles.
Por ejemplo, la siguiente hoja de estilo CSS (almacenada en el fichero "especial.css") hace que el color del texto de un párrafo sea verde ("green") y lo rodeade un borde rojo ("red") continuo ("solid"):
P.especial {
color : green;
border: solid red;
}
Los autores pueden vincular esta hoja de estilo a su documento fuente HTML con el elemento LINK:
"http://www.w3.org/TR/html4/strict.dtd">