Annotation of loncom/html/adm/help/tex/Authoring_Daxe_CSS.tex, revision 1.1
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,
! 7: which is convenient when it is used widely.
! 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>