Return to Authoring_Daxe_CSS.tex CVS log

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

Annotation of loncom/html/adm/help/tex/Authoring_Daxe_CSS.tex, revision 1.2

1.1       raeburn     1: \label{Authoring_Daxe_CSS}
                      2: 
                      3: \textbf{Using CSS styles in Daxe} 
                      4: 
                      5: A CSS stylesheet can be used to define styles for the document.
                      6: A particular style can be reused for any number of elements, 
1.2     ! raeburn     7: which is convenient when it will be widely used.
1.1       raeburn     8: 
                      9: \emph{CSS} is a syntax for defining stylesheets, which are stored in
                     10: \texttt{.css} files. In LON-CAPA, a CSS file can be used by defining the
                     11: \texttt{cssfile} parameter for a document. This can be done by authors 
                     12: with a top-level parameter in the document, or by course coordinators 
                     13: with the course parameter. A course coordinator can override a document 
                     14: style with a parameter, and adapt it to the course. The same stylesheet 
                     15: can be used for any number of documents.
                     16: 
                     17: Some examples of styles that can be defined with CSS are text styles such as 
                     18: font, size, italic/bold, color, and layout such as positions, borders and margins.
                     19: 
                     20: Here are some examples of usage:
                     21: 
                     22: \begin{description}
                     23: 
                     24:   \item[\textmd{\normalsize\textit{Make the text bigger, or with a different color}}]
                     25: 
                     26: For instance, if you want to make titles blue, you can use this code at the beginning 
                     27: of the document:
                     28: \begin{verbatim}
                     29: <style>
                     30: h1 {
                     31:   color: blue;
                     32: }
                     33: </style>
                     34: \end{verbatim}
                     35: If you have a category of words (for instance: stars) that should be displayed with 
                     36: a larger font, you can use:
                     37: \begin{verbatim}
                     38: <style>
                     39: .star {
                     40:   font-size: 150%;
                     41: }
                     42: </style>
                     43: \end{verbatim}
                     44: You can then select a word, insert a \texttt{span} element on it, and use the ``star''
                     45: \texttt{class} attribute.
                     46: 
                     47: When you have several CSS declarations, it is better to use an external CSS file and 
                     48: link to it with a parameter (inserted at the beginning of the \texttt{problem} element).  
                     49: This way you can easily reuse that stylesheet with various documents, and it can be
                     50: overridden by course coordinators who wish to use a different presentation.
                     51: 
                     52: \begin{verbatim}
                     53: <parameter name="cssfile" type="string" default="my_stylesheet.css"/>
                     54: \end{verbatim}
                     55: 
                     56:   \item[\textmd{\normalsize\textit{Change the borders in a table}}]
                     57: 
                     58: This has to be done with CSS, because the \texttt{border} attribute is deprecated.
                     59: Typically, you will choose how to display tables in your CSS stylesheet, 
                     60: for instance to get a simple border for all cells in all tables:
                     61: 
                     62: \begin{verbatim}
                     63: table {
                     64:   border-collapse: collapse;
                     65: }
                     66: table, th, td {
                     67:   border: 1px solid black;
                     68: }\end{verbatim}
                     69: 
                     70:   \item[\textmd{\normalsize\textit{Add some space between two paragraphs}}]
                     71: 
                     72: Simply adding an empty paragraph between two paragraphs with text will not 
                     73: increase the spacing between them, because most browsers ignore empty 
                     74: paragraphs entirely. But to add some space after or before a block 
                     75: (paragraph, division or other), one can use CSS.
                     76: 
                     77: For instance, to add a line of space after a single paragraph, 
                     78: right-click inside the paragraph, choose ``paragraph attributes'', 
                     79: and add this to the \texttt{style} attribute:
                     80: 
                     81: \begin{verbatim}
                     82: padding-bottom: 1em;
                     83: \end{verbatim}
                     84: 
                     85: Note that paragraphs already have a default margin, and the padding will add to it.  
                     86: Margins can overlap, but paddings do not.
                     87: 
                     88: Using this technique, more precise spacing can be achieved than by simply using line breaks.  
                     89: For instance, it is possible to set the space between all list items to half a line with the 
                     90: following code in a stylesheet:
                     91: 
                     92: \begin{verbatim}
                     93: li {
                     94:   margin-bottom: 0.5em;
                     95: }\end{verbatim}
                     96: 
                     97: \end{description}
                     98: 
                     99: Note that LON-CAPA does not currently use CSS for printing (it uses LaTeX), and CSS instructions 
                    100: will generally be ignored when printing documents.
                    101: 
                    102: For more information about CSS:
                    103: \begin{itemize}
                    104:         \item \href{https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started}{Tutorial}
                    105:         \item \href{https://www.w3.org/TR/CSS1/}{CSS1 specification}
                    106:         \item \href{https://www.w3.org/Style/CSS/}{Other specifications}
                    107: \end{itemize}
                    108: