Discussion: create topic login to participate.

The purpose of this lesson is to give some background about styling content in web pages. To learn how to style LaTeX2Web objects, read the lesson about the latexDiv object. There you will see that LaTeX2Web provides specialized LaTeX commands that avoid learning CSS.

However, the concepts introduced in this lesson will help you understand how styling works in web pages in general, and in LaTeX2Web pages in particuler.

The styling of a web page is done by using CSS code, where CSS stands for “Cascading Style Sheets”. Below is the CSS code that styles the figures in LaTeX2Web documents. This code belongs to a file that belongs to the LaTeX2Web system and is independent of the document that is displayed.

figure {
 border: solid black 2px;
 padding: 6px;
}

Here figure denotes the target of the styling rule. In this example the CSS style applies to all HTML elements of type “figure”.

Between the curly braces is a series of statements that define the styling itself.

Each statement has two parts, separated by a colon. Each statement ends with a semicolon.

The first part of the statement is the name of the property that will be set. The second part is the value itself.

The first statement says that figures should be surrounded by a black border with a width of 2 pixels, and that the border should be a simple solid line. The purpose of the second statement is to separate the border and the content of the figure itself with a space of 6 pixels. This is called padding.

You can see below how this CSS code is applied to an actual LaTeX figure.

What if you want to style an element that is not an HTML primitive? Classes are the answer.

You can attach a class to any HTML element. Let us see for instance how the content of a footnote is styled.

When LaTeX2Web creates the text of a footnote, it attaches it the footnoteText class. Here is the CSS code for the footnoteText class.

.footnoteText {
 background-color: #F5F5F5;
 border: solid 1px black;
 color: black;
}

The point before footnoteText indicates that this is the name of a class.

This code sets a shade of gray as the background color of the footnote text. To separate the footnote text from the rest of the text, we surround it with a border. Finally, we make sure that the text color is black. Check the result of this styling on this footnote click me to close the footnote.

Both LaTeX documents and web pages have a notion of hierarchy, and the LaTeX2Web document hierarchy is a bridge between the two.

It turns out that this hierarchy also has an impact on the way styling is applied. This is the cascading part of “Cascading Style Sheets”.

As a rule of thumb, the CSS statements which are lower in the page hierarchy override the statements which are higher. At the lowest level, the styling can be applied directly to a specific element of the web page.

Let us take the example of the \textcolor commands, which changes the color of the text. Normally, the color of text is black. When we apply the \textcolor command to a portion of text, the portion is separated from the rest of the text, and a styling statement is applied to this portion. As an example, the LaTeX code

This text is \textcolor{red}{red}.

is rendered as

This text is red.

The underlying HTML code is

This text is <span style="color: #ff0000">red</span>.

A span HTML element is created to which a text color styling command is applied.

Let us focus now on the hierarchy in styling. Normally, the LaTeX code

Here is a reference to the \ref{intro}[introduction]

creates a reference to the introduction of this lesson which has a blue color this is because references have the “ref” class, which is itself styled in blue.

Here is a reference to the introduction

We can however, apply a red color to the reference text as follows.

Here is a reference to the \ref{intro}[\textcolor{red}{introduction}].

This results in

Here is a reference to the introduction.

The reference works as usual, but, since the red color is applied to a content (the reference text) that is inner to another element (the reference as a whole) which is colored usually in blue, the red color is eventually applied.