Return to Authoring_Daxe_CSS.tex CVS log

Up to [LON-CAPA] / loncom / html / adm / help / tex

- Contents of tutorial/getting_started.xhtml divided into 11 .tex files
- Two links added to "Help" dropdown in Daxe Editor:
   one to Daxe FAQ,
   one to LON-CAPA Math Syntax (describes lm tag).
- Existing "Getting Started" link points to composite of 9 .hlp files
  to facilitate multilingual support.

\label{Authoring_Daxe_CSS}

\textbf{Using CSS styles in Daxe} 

A CSS stylesheet can be used to define styles for the document.
A particular style can be reused for any number of elements, 
which is convenient when it is used widely.

\emph{CSS} is a syntax for defining stylesheets, which are stored in
\texttt{.css} files. In LON-CAPA, a CSS file can be used by defining the
\texttt{cssfile} parameter for a document. This can be done by authors 
with a top-level parameter in the document, or by course coordinators 
with the course parameter. A course coordinator can override a document 
style with a parameter, and adapt it to the course. The same stylesheet 
can be used for any number of documents.

Some examples of styles that can be defined with CSS are text styles such as 
font, size, italic/bold, color, and layout such as positions, borders and margins.

Here are some examples of usage:

\begin{description}

  \item[\textmd{\normalsize\textit{Make the text bigger, or with a different color}}]

For instance, if you want to make titles blue, you can use this code at the beginning 
of the document:
\begin{verbatim}
<style>
h1 {
  color: blue;
}
</style>
\end{verbatim}
If you have a category of words (for instance: stars) that should be displayed with 
a larger font, you can use:
\begin{verbatim}
<style>
.star {
  font-size: 150%;
}
</style>
\end{verbatim}
You can then select a word, insert a \texttt{span} element on it, and use the ``star''
\texttt{class} attribute.

When you have several CSS declarations, it is better to use an external CSS file and 
link to it with a parameter (inserted at the beginning of the \texttt{problem} element).  
This way you can easily reuse that stylesheet with various documents, and it can be
overridden by course coordinators who wish to use a different presentation.

\begin{verbatim}
<parameter name="cssfile" type="string" default="my_stylesheet.css"/>
\end{verbatim}

  \item[\textmd{\normalsize\textit{Change the borders in a table}}]

This has to be done with CSS, because the \texttt{border} attribute is deprecated.
Typically, you will choose how to display tables in your CSS stylesheet, 
for instance to get a simple border for all cells in all tables:

\begin{verbatim}
table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}\end{verbatim}

  \item[\textmd{\normalsize\textit{Add some space between two paragraphs}}]

Simply adding an empty paragraph between two paragraphs with text will not 
increase the spacing between them, because most browsers ignore empty 
paragraphs entirely. But to add some space after or before a block 
(paragraph, division or other), one can use CSS.

For instance, to add a line of space after a single paragraph, 
right-click inside the paragraph, choose ``paragraph attributes'', 
and add this to the \texttt{style} attribute:

\begin{verbatim}
padding-bottom: 1em;
\end{verbatim}

Note that paragraphs already have a default margin, and the padding will add to it.  
Margins can overlap, but paddings do not.

Using this technique, more precise spacing can be achieved than by simply using line breaks.  
For instance, it is possible to set the space between all list items to half a line with the 
following code in a stylesheet:

\begin{verbatim}
li {
  margin-bottom: 0.5em;
}\end{verbatim}

\end{description}

Note that LON-CAPA does not currently use CSS for printing (it uses LaTeX), and CSS instructions 
will generally be ignored when printing documents.

For more information about CSS:
\begin{itemize}
        \item \href{https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started}{Tutorial}
        \item \href{https://www.w3.org/TR/CSS1/}{CSS1 specification}
        \item \href{https://www.w3.org/Style/CSS/}{Other specifications}
\end{itemize}