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.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: