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:
FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>