<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<META name="GENERATOR" content="hevea 1.10">
<META name="Author" content="Luc Maranget">
<LINK rel="stylesheet" type="text/css" href="manual.css">
<TITLE>Support for style sheets</TITLE>
</HEAD>
<BODY >
<A HREF="manual018.html"><IMG SRC="previous_motif.gif" ALT="Previous"></A>
<A HREF="manual002.html"><IMG SRC="contents_motif.gif" ALT="Up"></A>
<A HREF="manual020.html"><IMG SRC="next_motif.gif" ALT="Next"></A>
<HR>
<H2 CLASS="section"><A NAME="htoc37">9</A>  Support<A NAME="style:sheets"></A><A NAME="@default112"></A> for style sheets</H2><UL>
<LI><A HREF="manual019.html#toc28">Overview</A>
</LI><LI><A HREF="manual019.html#toc29">Changing
the style of all instances of an environment</A>
</LI><LI><A HREF="manual019.html#toc30">Changing the style of some instances of an environment</A>
</LI><LI><A HREF="manual019.html#toc31">Which class affects what</A>
</LI><LI><A HREF="manual019.html#toc32">A few examples</A>
</LI><LI><A HREF="manual019.html#toc33">Miscellaneous</A>
</LI></UL>
<H3 CLASS="subsection"><A NAME="toc28"></A><A NAME="htoc38">9.1</A>  Overview</H3><P>
Starting with version 1.08, H<FONT SIZE=2><sup>E</sup></FONT>V<FONT SIZE=2><sup>E</sup></FONT>A offers support for style sheets
(of the CSS variant see [<A HREF="manual047.html#css">CSS-2</A>]).</P><P>Style sheets provide enhanced expressiveness. For instance, it is now possible
to get “real” (whatever real means here) small caps in HTML, and in a
relatively standard manner. There are other, discrete, maybe
unnoticeable, similar enhancements.</P><P>However, style sheets mostly offer an additional mechanism to
customize their documents to H<FONT SIZE=2><sup>E</sup></FONT>V<FONT SIZE=2><sup>E</sup></FONT>A users. To do so, users should
probably get familiar with how H<FONT SIZE=2><sup>E</sup></FONT>V<FONT SIZE=2><sup>E</sup></FONT>A uses style sheets in the first
place.</P><P>H<FONT SIZE=2><sup>E</sup></FONT>V<FONT SIZE=2><sup>E</sup></FONT>A interest for style sheets is at the moment confined to
block-level elements (<CODE>DIV</CODE>, <CODE>TABLE</CODE>, <CODE>H<</CODE><I>n</I><CODE>></CODE>,
etc.).
The general principle is as follows: when a command or an
environment gets translated into a block-level element,
the opening tag of the block level element has a
<TT>CLASS="<I>name</I>"</TT> attribute, where <I>name</I> is the
command or environment name.</P><P>As an example the L<sup>A</sup>T<sub>E</sub>X command <CODE>\subsection</CODE>
is implemented with the element <CODE>H3</CODE>, resulting in
HTML output of the form:
</P><PRE CLASS="verbatim"> <H3 CLASS="subsection">
...
</H3>
</PRE><P>By default, most styles are undefined, and default rendering of
block-level elements applies. However, some packages (such as, for
instance <TT>fancysection</TT>, see Section <A HREF="manual038.html#fancysection">B.16.4</A>) may
define them.
<A NAME="@default113"></A><A NAME="@default114"></A>If you wish to change the style of section headers, loading the
<TT>fancysection</TT> package may prove appropriate (see <A HREF="manual038.html#fancysection">B.16.4</A>).
However, one can also proceed more directly, by appending new
definitions to the <EM>document style
sheet</EM>, with the command <CODE>\newstyle</CODE>.
For instance, here is a <CODE>\newstyle</CODE> to add style for subsections.
</P><PRE>
\newstyle{.subsection}{padding:1ex;color:navy;border:solid navy;}
</PRE><P>
This declaration adds some style element to the
<TT>subsection</TT> class (notice the dot!):
blocks that declare to belong to the class
will show dark-blue text, some padding
(space inside the box) is added and a border will be drawn around the block.
These specification will normally affect all subsections in the document.
Given the previous style definition, the sectioning command
</P><PRE CLASS="verbatim">\subsection*{A styled subsection heading}
</PRE><P>should yield:
</P><H3 CLASS="subsectionex">
A styled subsection heading
</H3><P>The following points are worth noticing:
</P><UL CLASS="itemize"><LI CLASS="li-itemize">
To yield some effect, <CODE>\newstyle</CODE> commands <EM>must</EM> appear
in the document preamble, <EM>i.e.</EM> before <CODE>\begin{document}</CODE>.
</LI><LI CLASS="li-itemize">Arguments to <CODE>\newstyle</CODE> commands are processed.
</LI><LI CLASS="li-itemize">The <TT>hevea</TT> package defines all style sheet related
commands as no-ops. Thus, these commands do not affect
document processing by L<sup>A</sup>T<sub>E</sub>X.
</LI></UL><H3 CLASS="subsection"><A NAME="toc29"></A><A NAME="htoc39">9.2</A>  Changing <A NAME="css:change:all"></A>
the style of all instances of an environment</H3><P>In this very document, all <TT>verbatim</TT> environments appear over
a light green background, with small left and right margins.
This has been performed by simply issuing the following command in
the document preamble.
</P><PRE CLASS="verbatim">\newstyle{.verbatim}{margin:1ex 1ex;padding:1ex;background:\#ccffcc;}
</PRE><P>Observe that, in the explicit numerical color argument above, the
hash character “<TT>#</TT>” has to be escaped.</P><H3 CLASS="subsection"><A NAME="toc30"></A><A NAME="htoc40">9.3</A>  Changing <A NAME="css:change"></A>the style of some instances of an environment</H3><P>
<A NAME="@default115"></A><A NAME="@default116"></A>One can also change the style class attached to a given instance of
an environment and thus control styling of environments more precisely.</P><P>As a matter of fact, the name of the class attribute of
environment <I>env</I> is referred to through an indirection, by
using the command <CODE>\getenvclass{</CODE><I>env</I><CODE>}</CODE>.
The class attribute can be changed with the command
<CODE>\setenvclass{</CODE><I>env</I><CODE>}{</CODE><I>class</I><CODE>}</CODE>.
The <CODE>\setenvclass</CODE> command internally defines a command
<CODE>\</CODE><I>env</I><CODE>@class</CODE>, whose content is read
by the <CODE>\getenvclass</CODE> command. As a consequence, the class
attribute of environments follows normal scoping rules.
<A NAME="getstylecolor:example"></A>
For instance, here is how to change the style of <EM>one</EM> <TT>verbatim</TT>
environment.
</P><PRE CLASS="myverbatim">{\setenvclass{verbatim}{myverbatim}
\begin{verbatim}
This will be styled through class 'myverbatim', introduced by:
\newstyle{.myverbatim}
{margin:1ex 3x;padding:1ex;
color:maroon;
background:\@getstylecolor[named]{Apricot}}
\end{verbatim}}</PRE><P>
Observe how the class of environment <TT>verbatim</TT> is changed from
its default value to the
new value <TT>myverbatim</TT>. The change remains active until the
end of the current group (here, the “<TT>}</TT>” at the end). Then, the class
of environment <TT>verbatim</TT> is restored to its default value
— which happen to be <TT>verbatim</TT>.</P><P><A NAME="@default117"></A>
This example also shows two new ways to specify colors in style
definition, with a
conventional HTML color name (here <FONT COLOR=maroon>maroon</FONT>) or as
a high-level color (see Section <A HREF="manual036.html#color:package">B.14.2</A>), given as an argument to
the <CODE>\@getstylecolor</CODE> internal command
(here <SPAN STYLE="background-color:#FFAD7A"><TT>Apricot</TT></SPAN> from the <TT>named</TT> color model).</P><P>A good way of specifying style class changes probably is by defining
new environments.
</P><PRE CLASS="verbatim">\newenvironment{flashyverbatim}
{\setenvclass{verbatim}{myverbatim}\verbatim}
{\endverbatim}
</PRE><P>Then, we can use <CODE>\begin{flashyverbatim}</CODE>…
<CODE>\end{flashyverbatim}</CODE> to get verbatim environments style with
the intended <TT>myverbatim</TT> style class.
</P><PRE CLASS="myverbatim">This text is typeset inside the environment
\emph{flashyverbatim}, and hence with the \emph{myverbatim}
style.
</PRE><H3 CLASS="subsection"><A NAME="toc31"></A><A NAME="htoc41">9.4</A>  Which class affects<A NAME="whatclass"></A> what</H3><P>Generally, the styling of environment <I>env</I> is performed through
the commands
<CODE>\getenvclass{</CODE><I>env</I><CODE>}</CODE>
and <CODE>\setenvclass{</CODE><I>env</I><CODE>}{</CODE>…<CODE>}</CODE>,
with <CODE>\getenvclass{</CODE><I>env</I><CODE>}</CODE> producing the
default value of <I>env</I>.</P><P>Concretely, this means that most of the environments are styled through
an homonymous style class. Here is a non-exhaustive list of such
environments
</P><BLOCKQUOTE CLASS="quote">
figure, table, itemize, enumerate, list, description,
trivlist, center, flushleft, flushright, quote,
quotation, verbatim, abstract, mathpar (cf
Section <A HREF="manual-packages.html#mathpartir:package">B.17.15</A>), lstlisting
(cf. Section <A HREF="manual-packages.html#listings:package">B.17.13</A>), etc.
</BLOCKQUOTE><P>All sectioning commands (<CODE>\part</CODE>, <CODE>\section</CODE> etc.)
output <CODE>H<</CODE><I>n</I><CODE>></CODE> block-level elements, which are styled
through style classes named <TT>part</TT>, <TT>section</TT>, etc.</P><P>List making-environment introduce extra style classes for items.
More specifically, for list-making environments
<TT>itemize</TT> and <TT>enumerate</TT>,
<CODE>LI</CODE> elements are styled as follows:
</P><DIV CLASS="center">
<TABLE CELLSPACING=6 CELLPADDING=0><TR><TD VALIGN=top ALIGN=left><PRE CLASS="verbatim"><UL CLASS="itemize">
<LI CLASS="li-itemize"> ...
</UL>
</PRE></TD><TD VALIGN=top ALIGN=left><PRE CLASS="verbatim"><OL CLASS="enumerate">
<LI CLASS="li-enumerate"> ...
</OL>
</PRE></TD></TR>
</TABLE>
</DIV><P>
That is, <CODE>LI</CODE> elements are styled as environments, the key name
being <TT>li-</TT><I>env</I>.</P><P>The <TT>description</TT>, <TT>trivlist</TT> and <TT>list</TT> environments
(which all get translated into <TT>DL</TT> elements) are styled in
a similar way, internal <TT>DT</TT> and <TT>DD</TT> elements being
styles through names <TT>dt-</TT><I>env</I> and
<TT>dd-</TT><I>env</I> respectively.</P><H3 CLASS="subsection"><A NAME="toc32"></A><A NAME="htoc42">9.5</A>  A few examples</H3><H4 CLASS="subsubsection">9.5.1  The title of the document</H4><P><A NAME="@default118"></A>
The command <CODE>\maketitle</CODE> formats the document
title within a <CODE>TABLE</CODE> element, with
class <TT>title</TT>, for display. The name of the title is displayed
inside block <CODE>H1</CODE>, with class <TT>titlemain</TT>, while all other
information (author, date) are displayed inside block <CODE>H3</CODE>, with class
<TT>titlerest</TT>.
</P><PRE CLASS="verbatim"><TABLE CLASS="title">
<TR>
<TD>
<H1 ALIGN=center CLASS="titlemain">..title here..</H1>
<H3 ALIGN=center CLASS="titlerest">..author here..</H3>
<H3 ALIGN=center CLASS="titlerest">..date here..</H3>
</TD>
</TR>
</TABLE>
</PRE><P>Users can impact on title formatting by adding style in the
appropriate style classes.
For instance the following style class definitions:
</P><PRE CLASS="verbatim">\newstyle{.title}
{text-align:center;margin:1ex auto;padding:2ex;color:navy;border:solid navy;}
\newstyle{.titlerest}{font-variant:small-caps;}
</PRE><P>will normally produce a title in dark blue, centered in a box, with
author and date in small-caps.
</P><TABLE CLASS="xtitle"><TR><TD>
<H1 CLASS="xtitlemain">Title</H1>
<H3 CLASS="xtitlerest">Date</H3>
<H3 CLASS="xtitlerest">Author</H3>
</TD></TR>
</TABLE><H4 CLASS="subsubsection">9.5.2  Enclosing things in a styled <TT>DIV</TT></H4><P>
<A NAME="@default119"></A><A NAME="@default120"></A><A NAME="@default121"></A>At the moment, due to the complexity of the task, environments
<TT>tabular</TT> and <TT>array</TT> cannot be styled as others
environments can be,
by defining an appropriate class in the preamble.
However, even for such constructs,
limited styling can be performed, by using
the <TT>divstyle</TT> environment.
The opening command <CODE>\begin{divstyle}{</CODE><I>class</I><CODE>}</CODE>
takes the name of a class as
an argument, and translates to <CODE><DIV CLASS="</CODE><I>class</I><CODE>"></CODE>.
Of course the closing command <CODE>\end{divstyle}</CODE> translates to
<CODE></DIV></CODE>.
The limitation is that the enclosed part may generate more HTML
blocks, and that not all style attribute defined in class class
<I>class</I> will apply to those inner blocks.</P><P>As an example consider the style class definition below.
</P><PRE CLASS="verbatim">\newstyle{.ruled}{border:solid black;padding:1ex;background:\#eeddbb;color:marron}
</PRE><P>The intended behavior is to add a black border around the inner block
(with some padding), and to have <FONT COLOR=maroon>maroon</FONT> text over
a light brown background.</P><P>If we, for instance, enclose an <TT>itemize</TT> environment, the
resulting effect is more or less what we have expected:
</P><PRE CLASS="verbatim">\begin{divstyle}{ruled}
\begin{itemize}
\item A ruled itemize
\item With two items.
\end{itemize}
\end{divstyle}
</PRE><DIV CLASS="ruled">
<UL CLASS="itemize"><LI CLASS="li-itemize">
A ruled itemize
</LI><LI CLASS="li-itemize">With two items.
</LI></UL>
</DIV><P>However, enclosing a centered
<TT>tabular</TT> environment in a <TT>divstyle{ruled}</TT> one
is less satisfactory.
</P><PRE CLASS="verbatim">\begin{divstyle}{ruled}
\begin{center}\begin{tabular}{|c|c|}
\hline \bf English & \bf French\\ \hline
Good Morning & Bonjour\\ Thank You & Merci\\ Good Bye & Au Revoir\\ \hline
\end{tabular}\end{center}
\end{divstyle}
</PRE><DIV CLASS="ruled">
<DIV CLASS="center"><TABLE BORDER=1 CELLSPACING=0 CELLPADDING=1><TR><TD ALIGN=center NOWRAP><B>English</B></TD><TD ALIGN=center NOWRAP><B>French</B></TD></TR>
<TR><TD ALIGN=center NOWRAP>Good Morning</TD><TD ALIGN=center NOWRAP>Bonjour</TD></TR>
<TR><TD ALIGN=center NOWRAP>Thank You</TD><TD ALIGN=center NOWRAP>Merci</TD></TR>
<TR><TD ALIGN=center NOWRAP>Good Bye</TD><TD ALIGN=center NOWRAP>Au Revoir</TD></TR>
</TABLE></DIV>
</DIV><P>
We have two problems here: first the text is black, and second,
the brown background extend on all the width of the displayed page.</P><P>The second problem is solved by introducing an extra table.
We first open an extra centered table and then only open the
<TT>divstyle</TT> environment.
</P><PRE CLASS="verbatim">\begin{center}\begin{tabular}{c}
\begin{divstyle}{ruled}
\begin{tabular}{|c|c|}
\hline \bf English & \bf French\\ \hline
Good Morning & Bonjour\\ Thank You & Merci\\ Good Bye & Au Revoir\\
\hline
\end{tabular}
\end{divstyle}
\end{tabular}\end{center}
</PRE><P>This works because of the rules that
govern the width of HTML <CODE>TABLE</CODE> elements, which yield
minimal width. This trick is used in
numerous places by H<FONT SIZE=2><sup>E</sup></FONT>V<FONT SIZE=2><sup>E</sup></FONT>A, for instance in document titles, and looks
quite safe.
</P><DIV CLASS="center"><TABLE CELLSPACING=6 CELLPADDING=0><TR><TD ALIGN=center NOWRAP><DIV CLASS="ruled">
<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=1><TR><TD ALIGN=center NOWRAP><B>English</B></TD><TD ALIGN=center NOWRAP><B>French</B></TD></TR>
<TR><TD ALIGN=center NOWRAP>Good Morning</TD><TD ALIGN=center NOWRAP>Bonjour</TD></TR>
<TR><TD ALIGN=center NOWRAP>Thank You</TD><TD ALIGN=center NOWRAP>Merci</TD></TR>
<TR><TD ALIGN=center NOWRAP>Good Bye</TD><TD ALIGN=center NOWRAP>Au Revoir</TD></TR>
</TABLE>
</DIV></TD></TR>
</TABLE></DIV><P>
As regards text color, one can rely on explicit color change.
For instance, one can add a <CODE>\maroon</CODE> declaration, after the
opening command <CODE>\begin{divstyle}{ruled}</CODE>.
Then we get:
</P><DIV CLASS="center"><TABLE CELLSPACING=6 CELLPADDING=0><TR><TD ALIGN=center NOWRAP><DIV CLASS="ruled"><TABLE BORDER=1 CELLSPACING=0 CELLPADDING=1><TR><TD ALIGN=center NOWRAP><FONT COLOR=maroon><B>English</B></FONT></TD><TD ALIGN=center NOWRAP><FONT COLOR=maroon><B>French</B></FONT></TD></TR>
<TR><TD ALIGN=center NOWRAP><FONT COLOR=maroon>Good Morning</FONT></TD><TD ALIGN=center NOWRAP><FONT COLOR=maroon>Bonjour</FONT></TD></TR>
<TR><TD ALIGN=center NOWRAP><FONT COLOR=maroon>Thank You</FONT></TD><TD ALIGN=center NOWRAP><FONT COLOR=maroon>Merci</FONT></TD></TR>
<TR><TD ALIGN=center NOWRAP><FONT COLOR=maroon>Good Bye</FONT></TD><TD ALIGN=center NOWRAP><FONT COLOR=maroon>Au Revoir</FONT></TD></TR>
</TABLE>
</DIV></TD></TR>
</TABLE></DIV><P>
But then, we do not use style sheets anymore.</P><H4 CLASS="subsubsection">9.5.3  Enclosing things in a styled cell</H4><P><A NAME="@default122"></A><A NAME="@default123"></A><A NAME="@default124"></A>Given the differences in styling <CODE>DIV</CODE> and table elements, H<FONT SIZE=2><sup>E</sup></FONT>V<FONT SIZE=2><sup>E</sup></FONT>A
provides a mean to issue a one-cell <CODE>TABLE</CODE> element with one cell,
with style applied to the outer <CODE>TABLE</CODE> element and the inner
<CODE>TD</CODE> element.
For instance, the previous example can be styled as follows, thereby
avoiding the outer <TT>tabular</TT> environment.
</P><PRE CLASS="verbatim">\begin{center}
\begin{cellstyle}{ruled}{}
\begin{tabular}{|c|c|}
\hline \bf English & \bf French\\ \hline
Good Morning & Bonjour\\ Thank You & Merci\\ Good Bye & Au Revoir\\
\hline
\end{tabular}
\end{cellstyle}
\end{center}
</PRE><DIV CLASS="center">
<TABLE CLASS="ruled"><TR><TD>
<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=1><TR><TD ALIGN=center NOWRAP><B>English</B></TD><TD ALIGN=center NOWRAP><B>French</B></TD></TR>
<TR><TD ALIGN=center NOWRAP>Good Morning</TD><TD ALIGN=center NOWRAP>Bonjour</TD></TR>
<TR><TD ALIGN=center NOWRAP>Thank You</TD><TD ALIGN=center NOWRAP>Merci</TD></TR>
<TR><TD ALIGN=center NOWRAP>Good Bye</TD><TD ALIGN=center NOWRAP>Au Revoir</TD></TR>
</TABLE>
</TD></TR>
</TABLE>
</DIV><H4 CLASS="subsubsection">9.5.4  Styling the <TT>itemize</TT> environment</H4><P>
<A NAME="@default125"></A>
Our idea is highlight lists with a left border whose color fades
while lists are nested.
Such a design may be appropriate for tables of content, as
the <A HREF="manual001.html#ftoc">one of this document</A>.
</P><UL CLASS="toc1"><LI CLASS="li-itemize">
Part A
<UL CLASS="toc2"><LI CLASS="li-itemize">
Chapter I
<UL CLASS="toc3"><LI CLASS="li-itemize">
Section I.1
</LI><LI CLASS="li-itemize">Section I.2
</LI></UL>
</LI><LI CLASS="li-itemize">Chapter II
<UL CLASS="toc3"><LI CLASS="li-itemize">
Section II.1
</LI><LI CLASS="li-itemize">Section II.2
</LI></UL>
</LI><LI CLASS="li-itemize">Chapter III
</LI></UL>
</LI><LI CLASS="li-itemize">Part B
<UL CLASS="toc2"><LI CLASS="li-itemize">
Chapter IV
<UL CLASS="toc3"><LI CLASS="li-itemize">
Section IV.1
<UL CLASS="toc4"><LI CLASS="li-itemize">
Section IV.1.a
</LI><LI CLASS="li-itemize">Section IV.1.b
</LI></UL>
</LI><LI CLASS="li-itemize">Section IV.2
</LI></UL>
</LI><LI CLASS="li-itemize">Chapter V
</LI></UL>
</LI></UL><P>
The text above is typeset from the following L<sup>A</sup>T<sub>E</sub>X source.
</P><PRE CLASS="verbatim">\begin{toc}
\item Part~A
\begin{toc}
\item Chapter~I
\begin{toc}
\item Section~I.1
\item Section~I.2
\end{toc}
...
\end{toc}
\end{toc}
</PRE><P>For simplicity, we assume a limit of four over the nesting depth of
<TT>toc</TT> environment.
We first define four style classes <TT>toc1</TT>, <TT>toc2</TT>,
<TT>toc3</TT> and <TT>toc4</TT> in the document preamble.
Since those classes are similar, a command <CODE>\newtocstyle</CODE> is
designed.
</P><PRE CLASS="verbatim">\newcommand{\newtocstyle}[2]
{\newstyle{.toc#1}{list-style:none;border-left:1ex solid #2;padding:0ex 1ex;}}
\newtocstyle{1}{\@getstylecolor{Sepia}}
\newtocstyle{2}{\@getstylecolor{Brown}}
\newtocstyle{3}{\@getstylecolor{Tan}}
\newtocstyle{4}{\@getstylecolor{Melon}}
</PRE><P>The <TT>toc</TT> environment uses a counter to record nesting depth.
Notice how the style class of the <TT>itemize</TT> environment is
redefined before <CODE>\begin{itemize}</CODE>.
</P><PRE CLASS="verbatim">\newcounter{toc}
\newenvironment{toc}
{\stepcounter{toc}\setenvclass{itemize}{toc\thetoc}\begin{itemize}}
{\addtocounter{toc}{-1}\end{itemize}}
</PRE><P>The outputted HTML is:
</P><PRE CLASS="verbatim"><UL CLASS="toc1"><LI CLASS="li-itemize">
Part&nbsp;A
<UL CLASS="toc2"><LI CLASS="li-itemize">
Chapter&nbsp;I
<UL CLASS="toc3"><LI CLASS="li-itemize">
Section&nbsp;I.1
<LI CLASS="li-itemize">Section&nbsp;I.2
...
</UL>
</UL>
</PRE><H3 CLASS="subsection"><A NAME="toc33"></A><A NAME="htoc43">9.6</A>  Miscellaneous</H3><H4 CLASS="subsubsection">9.6.1  H<FONT SIZE=2><sup>A</sup></FONT>C<FONT SIZE=2><sup>H</sup></FONT>A and style sheets</H4><P>
H<FONT SIZE=2><sup>A</sup></FONT>C<FONT SIZE=2><sup>H</sup></FONT>A now produces an additional file: a style sheet, which is
shared by all the HTML files produced by H<FONT SIZE=2><sup>A</sup></FONT>C<FONT SIZE=2><sup>H</sup></FONT>A.
Please refer to section <A HREF="cutname.html#hacha:style">7.1</A> for details.</P><H4 CLASS="subsubsection">9.6.2  Producing an external style sheet</H4><P>
<A NAME="@default126"></A><A NAME="@default127"></A>By default, style declarations defined with
<CODE>\newstyle</CODE> go into the header of the HTML document
<EM>doc</EM><TT>.html</TT>.
However, one can send those declaration into an external style file,
whose name is <EM>doc</EM><TT>.css</TT>.
Then, H<FONT SIZE=2><sup>E</sup></FONT>V<FONT SIZE=2><sup>E</sup></FONT>A automatically relates <EM>doc</EM><TT>.html</TT> to
its style sheet <EM>doc</EM><TT>.css</TT>.
To achieve this behavior, it suffices to set the value of the boolean
register <TT>externalcss</TT> to <I>true</I>, by issuing the command
<CODE>\externalcsstrue</CODE> in the premable of the source document.
Notice that H<FONT SIZE=2><sup>E</sup></FONT>V<FONT SIZE=2><sup>E</sup></FONT>A output still can be processed by H<FONT SIZE=2><sup>A</sup></FONT>C<FONT SIZE=2><sup>H</sup></FONT>A, with
correct behavior.</P><H4 CLASS="subsubsection">9.6.3  Linking to external style sheets</H4><P>
<A NAME="@default128"></A><A NAME="@default129"></A>The H<FONT SIZE=2><sup>E</sup></FONT>V<FONT SIZE=2><sup>E</sup></FONT>A command <CODE>\loadcssfile{</CODE><I>url</I><CODE>}</CODE> allows the
user to link to an external style sheet (like the LINK option for
HTML). The command takes an <I>url</I> of the external
sheet as argument and emits the HTML text to
<EM>link</EM> to the given external style sheet. As an example, the command
</P><PRE CLASS="verbatim">\loadcssfile{../abc.css}
</PRE><P>produces the following HTML text in the <CODE>HEAD</CODE> of the document.
</P><PRE CLASS="verbatim"> <LINK REL=STYLESHEET TYPE="text/css" HREF="../abc.css">
</PRE><P>To yield some effect, <CODE>\loadcssfile</CODE> must appear in the document
preamble. Several <CODE>\loadcssfile</CODE> commands can be issued. Then
the given external style sheets appear in the output, following source
order.</P><P>Notice that the argument to <CODE>\loadcssfile</CODE> is processed. Thus, if it
contains special characters such as “#” or “$”, those must be specified
as <CODE>\#</CODE> and <CODE>\$</CODE> respectively.
A viable alternative would be to quote
the argument using the <CODE>\url</CODE> command from the <TT>url</TT>
package (see Section <A HREF="manual-packages.html#urlpackage">B.17.11</A>).</P><H4 CLASS="subsubsection">9.6.4  Limitations</H4><P>
At the moment, style class definitions cumulate, and appear
in the <CODE>STYLE</CODE> element in the order they are given in the
document source. There is no way to cancel the default class
definitions performed by H<FONT SIZE=2><sup>E</sup></FONT>V<FONT SIZE=2><sup>E</sup></FONT>A before it starts to process the
user’s document.
Additionally, external style sheets specified with <CODE>\loadcssfile</CODE>
appear before style classes defined with <CODE>\newstyle</CODE>.
As a consequence (if I am right), styles
declared by <CODE>\newstyle</CODE> take precedence over those contained in
external style sheets. Thus, using external style-sheets, especially
if they alter the styling of elements, may produce awkward results.</P><P>Those limitations do not apply of course to style classes whose
names are new, since there cannot be default definitions for them.
Then, linking with external style sheets can prove useful to
promote uniform styling of several documents produced by H<FONT SIZE=2><sup>E</sup></FONT>V<FONT SIZE=2><sup>E</sup></FONT>A.</P><HR>
<A HREF="manual018.html"><IMG SRC="previous_motif.gif" ALT="Previous"></A>
<A HREF="manual002.html"><IMG SRC="contents_motif.gif" ALT="Up"></A>
<A HREF="manual020.html"><IMG SRC="next_motif.gif" ALT="Next"></A>
</BODY>
</HTML>
