Editing Wikitext/Class and Style Notes

This short piece is intended to communicate a few of the more basic points about styles for authors starting out with Wikibooks. The system's style-sheets are not accessible for edit by authors but a considerable amount of CSS styling is still possible by the addition of HTML and Wikitext tags to the page.

Basics

• Styles: These are sometimes called CSS style rules. They are delivered to the browser along with the Wikibooks' web-pages. They are sent in text files called style-sheets, though fortunately they can be typed directly onto the Wikibooks edit area as well.
• User style-sheets form an exception. Those who are familiar with this use of their browsers could modify the local display of a wiki web-page, but not the stored version that can be viewed by others.
• HTML tags and Wikitext tags can be added to the edit area of the work. Authors can use either Wikitext or HTML tags in their work; in fact many of the HTML tags that are in general use could be used. Wikibooks uses the Wikitext mark-up most of the time, but it is translated to HTML before it is sent to the browser for use.
• Wikibooks authors are limited to in-line styles. Authors do not have access to the style-sheets for the Wikibooks system. They must write their styles into Wikitext tags or HTML tags that they add to the edit area of their pages. If however, they know of classes of styles that already exist they can declare them in tags for use too.
• Templates can contain styles too. Templates are named blocks of prepared text, with or without styles, that can be inserted into an authors work with a special format. Complex tasks involving in-line styles, especially those that are to be used frequently can benefit from their use. Templates made by others are available to all.
• In-line styles have a fairly high priority. In fact, for those familiar with the subject, each in-line style declaration has a specificity that is one-thousand times that of a simple tag-selector, one-hundred times that of declarations within a class block, and ten times that of declarations within an id block. That is to say, they override other author styles unless those other styles have an !important marking.
• HTML attributes are styles too. Before the use of CSS styles HTML attributes were the main way to style web-pages. Many of these attributes are no longer available in HTML5, but a few still are. Because their future is uncertain, Wikibooks prefers the use of CSS styles.
• Use a CSS styles reference. To find the styles to apply in your work, the best way by far is to refer to a reference list. A comprehensive list and tutorial for CSS styles can be found both within wikibooks itself and at the World Wide Web Consortium CSS Reference.

In-line CSS Styles

All in-line styles, whether written in HTML tags or Wikitext makes use of the Style attribute. There should be only one style declaration in an element if confusion is not to result.

The following code is typical of an in-line style declaration for text to which paragraph tags have been added. It is used here to set the font name and its spacing.

<p style="font-family:"Times New Roman"; line-height:1.75em; letter-spacing:0.1em;">The text</p>

The main points to note about the style declaration are these:

• The style-block is always equated to the attribute style .
• The entire style-block is set in parenthesis.
• There is a colon between each property and its value.
• Individual declarations are separated by semi-colons.
• Values that contain spaces must themselves be set in quotation marks.
• A space can exist after a semi-colon.
• The last semi-colon is optional.
• Any number of properties can be listed.

Some structures written in wikitext, such as tables, use a slightly different format but the style-part is the same. Those with an interest in such formats should refer to the page Tables, and for a reference list and tutorial on CSS styles, refer to the site World Wide Web Consortium CSS Reference.

Common Styling Tasks

This section describes the basics of the more common styling tasks encountered by the new Wikibooks writer. Writers are encouraged to add to this section with their useful findings. Thus. in a healthy writing environment it should increase with time.

Styling Paragraph Text

The most common task by far in Wikibooks styling involves changing the appearance of text. There are two main methods available to the writer, the addition of paragraph tags that are then styled, or the similar use of span tags. Both methods use a style expression of the type previously described and the layout of each is shown below.

<p style="font-size:16pt; color:blue;">This is one whole paragraph....</p>
<span style="letter-spacing:0.15em; font-family:Garamond;">This is text within a paragraph....</span>

The span technique is usually reserved for short strings of text whereas styled paragraphs have more general use. Paragraphs are examples of block elements, so they can have widths, margins, and other dimensions set for them. The span tag is an example of an in-line element, without block styles.

If there are several paragraphs to style, rather that styling each, it is best to add a set of div tags around the work and to style that. Then, provided that it is possible to do so, the styles will be inherited from the division tag. The inheritance of styles is beyond the scope of this section but is covered elsewhere in The CSS Cascade - Inheritance of Styles.

Styling the 'Pre' Tags

The Pre tags can be added to text when we need to preserve its exact layout. That is to say, where the browser must be discouraged from doing formatting of its own. Examples include the writing of verse, lyrics, code listings, and various other purposes. This kind of text is referred to as pre-formatted text to distinguish it from un-formatted text, the usual thing, where the browser wraps text at the end of lines. These tags also have the effect of deactivating functional code like tables, and all other tags. The basic code is just:

<pre>
The time has come
the walrus said to
speak of many things...
</pre>

The pre tags can be CSS-styled to produce different fonts, borders, and backgrounds, in addition to the full set of width, padding, margins and alignment that is common for all block elements. See the example below, where a few styles have been added. The white-space property makes sure that long lines are wrapped, instead of forcing the page width to widen.

<pre style="border:1px solid lightgrey; font-family:Arial; white-space:pre-wrap; background:beige;">
Text goes here...
</pre>

More methods for pre-formatted text can be found at Preformatted Text.

Shifting the TOC

One of the most useful things that styles can do is to shift the Table of Contents (TOC) to some precise point on the page. This becomes essential when lists appear at the top of a page. In order to avoid the inevitable distortion of bullet-points the TOC can be simply moved to the right hand side of the page, as opposed to its habitual position on the left.

The usual method to do this is to place the Table of Contents in a table cell, and to then move the table to any place on the page that suits. A table is chosen rather than a division because a table can change in size easily, to accommodate a changing TOC width. Templates have been made that exploit this idea, including Template:Tocright. Using HTML tags, the general form is just:

<table>
<td>
__TOC__
</td>
</table>

Notice that the TOC inclusion is in capitals and has four underscores, two on each side.

For positioning on the right of a page the table could be styled as follows:

<table style="float:right; margin:10px;">
<td>
__TOC__
</td>
</table>

The float property places the table on the right of its container, the page, and allows text to wrap around it. The text will start to wrap, starting with the line of text that follows the code block. The margin property sets the spacing between the table container and the wrapped text.

Further information can found on the TOC at Headings.

Dividing the Page

Pages can be divided into partitions. This is useful when applying styles to large sections, and for making smaller box-like shapes.

The size of the enclosed section is not important. For example, the author's section of the page itself could be divided into two parts as follows. Here, one part has been given a different background color from the remainder.

<div style="background:beige; border:1px solid lightgrey; padding:10px;">
First page part...
</div>
<div style="background:linen; border:1px solid lightgrey; padding:10px;">
Second page part...
</div>

The existing text and structures will be indented within these new colored containers by 10 pixels, about one tenth of an inch or so depending upon the resolution of screens.

Useful CSS Classes

Sadly, there are few if any useful classes that can add interest to an author's work. There is a real need for a set of table classes; the condescension of the Wikitable class is really not sufficient. It is a matter for web-masters to improve the availability of classes, since others have no access to the modification of style-sheets. However, would it appear from the long standing of the basic table style that they think that they are just fine as they are?

See Also

• CSS Reference  : A useful external CSS reference list
• Sandbox  : The WikiBooks sandbox
• Templates  : WikiBooks template making A101
• Style Presentation Modes in Opera 12.16  : A description of the Opera browsers style modes.
• The CSS Cascade  : A basic explanation of the CSS cascade.