JezK
Edit File: HTML-CSS.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <!-- Created by GNU Texinfo 6.8, https://www.gnu.org/software/texinfo/ --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- This manual is for GNU Texinfo (version 6.8, 8 June 2021), a documentation system that can produce both online information and a printed manual from a single source using semantic markup. Copyright (C) 1988, 1990-1993, 1995-1999, 2001-2021 Free Software Foundation, Inc. Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version published by the Free Software Foundation; with no Invariant Sections, with no Front-Cover Texts, and with no Back-Cover Texts. A copy of the license is included in the section entitled "GNU Free Documentation License". --> <title>HTML CSS (GNU Texinfo 6.8)</title> <meta name="description" content="HTML CSS (GNU Texinfo 6.8)"> <meta name="keywords" content="HTML CSS (GNU Texinfo 6.8)"> <meta name="resource-type" content="document"> <meta name="distribution" content="global"> <meta name="Generator" content="texi2any"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link href="index.html" rel="start" title="Top"> <link href="Command-and-Variable-Index.html" rel="index" title="Command and Variable Index"> <link href="index.html#SEC_Contents" rel="contents" title="Table of Contents"> <link href="Generating-HTML.html" rel="up" title="Generating HTML"> <link href="HTML-Xref.html" rel="next" title="HTML Xref"> <link href="HTML-Splitting.html" rel="prev" title="HTML Splitting"> <style type="text/css"> <!-- a.copiable-anchor {visibility: hidden; text-decoration: none; line-height: 0em} a.summary-letter {text-decoration: none} blockquote.indentedblock {margin-right: 0em} div.display {margin-left: 3.2em} div.example {margin-left: 3.2em} kbd {font-style: oblique} pre.display {font-family: inherit} pre.format {font-family: inherit} pre.menu-comment {font-family: serif} pre.menu-preformatted {font-family: serif} span.nolinebreak {white-space: nowrap} span.roman {font-family: initial; font-weight: normal} span.sansserif {font-family: sans-serif; font-weight: normal} span:hover a.copiable-anchor {visibility: visible} ul.no-bullet {list-style: none} --> </style> </head> <body lang="en"> <div class="section" id="HTML-CSS"> <div class="header"> <p> Next: <a href="HTML-Xref.html" accesskey="n" rel="next">HTML Cross-references</a>, Previous: <a href="HTML-Splitting.html" accesskey="p" rel="prev">HTML Splitting</a>, Up: <a href="Generating-HTML.html" accesskey="u" rel="up">Generating HTML</a> [<a href="index.html#SEC_Contents" title="Table of contents" rel="contents">Contents</a>][<a href="Command-and-Variable-Index.html" title="Index" rel="index">Index</a>]</p> </div> <hr> <span id="HTML-CSS-1"></span><h3 class="section">21.3 HTML CSS</h3> <span id="index-HTML_002c-and-CSS"></span> <span id="index-CSS_002c-and-HTML-output"></span> <span id="index-Cascading-Style-Sheets_002c-and-HTML-output"></span> <p>Cascading Style Sheets (CSS for short) is an Internet standard for influencing the display of HTML documents: see <a href="http://www.w3.org/Style/CSS/">http://www.w3.org/Style/CSS/</a>. </p> <p>By default, <code>makeinfo</code> includes a few simple CSS commands to better implement the appearance of some Texinfo environments. Here is one of them, as an example: </p> <div class="example"> <pre class="example">pre.display { font-family:inherit } </pre></div> <p>A full explanation of CSS is (far) beyond this manual; please see the reference above. In brief, however, the above tells the web browser to use the same font as the main document for <code>@display</code>. By default, the HTML ‘<samp><pre></samp>’ command uses a monospaced font. </p> <p>You can influence the CSS in the HTML output with two <code>makeinfo</code> options: <samp>--css-include=<var>file</var></samp> and <samp>--css-ref=<var>url</var></samp>. </p> <span id="index-texinfo_002dbright_002dcolors_002ecss"></span> <span id="index-Visualizing-Texinfo-CSS"></span> <p>The option <samp>--css-ref=<var>url</var></samp> adds to each output HTML file a ‘<samp><link></samp>’ tag referencing a CSS at the given <var>url</var>. This allows using external style sheets. You may find the file <samp>texi2html/examples/texinfo-bright-colors.css</samp> useful for visualizing the CSS elements in Texinfo output. </p> <p>The option <samp>--css-include=<var>file</var></samp> includes the contents <var>file</var> in the HTML output, as you might expect. However, the details are somewhat tricky, as described in the following, to provide maximum flexibility. </p> <span id="index-_0040import-specifications_002c-in-CSS-files"></span> <p>The CSS file may begin with so-called ‘<samp>@import</samp>’ directives, which link to external CSS specifications for browsers to use when interpreting the document. Again, a full description is beyond our scope here, but we’ll describe how they work syntactically, so we can explain how <code>makeinfo</code> handles them. </p> <span id="index-Comments_002c-in-CSS-files"></span> <p>There can be more than one ‘<samp>@import</samp>’, but they have to come first in the file, with only whitespace and comments interspersed, no normal definitions. (Technical exception: a ‘<samp>@charset</samp>’ directive may precede the ‘<samp>@import</samp>’’s. This does not alter <code>makeinfo</code>’s behavior, it just copies the ‘<samp>@charset</samp>’ if present.) Comments in CSS files are delimited by ‘<samp>/* ... */</samp>’, as in C. An ‘<samp>@import</samp>’ directive must be in one of these two forms: </p> <div class="example"> <pre class="example">@import url(http://example.org/foo.css); @import "http://example.net/bar.css"; </pre></div> <p>As far as <code>makeinfo</code> is concerned, the crucial characters are the ‘<samp>@</samp>’ at the beginning and the semicolon terminating the directive. When reading the CSS file, it simply copies any such ‘<samp>@</samp>’-directive into the output, as follows: </p> <ul> <li> If <var>file</var> contains only normal CSS declarations, it is included after <code>makeinfo</code>’s default CSS, thus overriding it. </li><li> If <var>file</var> begins with ‘<samp>@import</samp>’ specifications (see below), then the ‘<samp>import</samp>’’s are included first (they have to come first, according to the standard), and then <code>makeinfo</code>’s default CSS is included. If you need to override <code>makeinfo</code>’s defaults from an ‘<samp>@import</samp>’, you can do so with the ‘<samp>! important</samp>’ CSS construct, as in: <div class="example"> <pre class="example">pre.example { font-size: inherit ! important } </pre></div> </li><li> If <var>file</var> contains both ‘<samp>@import</samp>’ and inline CSS specifications, the ‘<samp>@import</samp>’’s are included first, then <code>makeinfo</code>’s defaults, and lastly the inline CSS from <var>file</var>. </li><li> Any @-directive other than ‘<samp>@import</samp>’ and ‘<samp>@charset</samp>’ is treated as a CSS declaration, meaning <code>makeinfo</code> includes its default CSS and then the rest of the file. </li></ul> <p>If the CSS file is malformed or erroneous, <code>makeinfo</code>’s output is unspecified. <code>makeinfo</code> does not try to interpret the meaning of the CSS file in any way; it just looks for the special ‘<samp>@</samp>’ and ‘<samp>;</samp>’ characters and blindly copies the text into the output. Comments in the CSS file may or may not be included in the output. </p> <p>In addition to the possibilities offered by CSS, <code>makeinfo</code> has many user-definable customization variables with which you can influence the HTML output. See <a href="Customization-Variables.html">Customization Variables</a>. </p> </div> <hr> <div class="header"> <p> Next: <a href="HTML-Xref.html">HTML Cross-references</a>, Previous: <a href="HTML-Splitting.html">HTML Splitting</a>, Up: <a href="Generating-HTML.html">Generating HTML</a> [<a href="index.html#SEC_Contents" title="Table of contents" rel="contents">Contents</a>][<a href="Command-and-Variable-Index.html" title="Index" rel="index">Index</a>]</p> </div> </body> </html>