Editing Wikitext/Class and Style Notes
This page may need to be
Introduction ; the main terms...This short piece is intended to illustrate the effect of classes and styles on tables and text. It gives an example to show how local styles and style sheet classes work together. It should be made clear that it does not purport to describe the making of style sheets, but confines itself to in-line styles and those functions that a writer can modify on the page. First, lets identify the terms: ClassesThese are sets of style definitions ; they are located in the head section of a web-page or in style sheets that are delivered to the browser separately. Each class can specify many formats, and can handle quite complex tasks. For example, it can hold all of the default paragraph styles, for tables, or background colors, so clearly might be more suitable for one purpose than another. Another kind of class, called an id, has higher specificity. That is to say, on a one-time basis it can supersede any formats that have been specified by a simple class. In any case, styles of all kinds, including classes and id's, are applied to the page by the web browser soon after it opens a page. While classes are usually assigned to elements in the style-sheets, suitable classes can be added to an author's work in an unique way by declaring their names within elements on the page. (For example, declaring the class name sortable in a table element allows each column to be sorted). While some classes have narrow definitions for particular tasks, some have more general use, the so-called generic classes. Two or more classes might apply say, to a paragraph; a generic class to give the font size, padding and margins, common to every paragraph on the page, and an id to supersede that class for paragraph formats used only at that location.StylesThese are just style rules. They are also called style declarations. Sets of these are usually listed in text files called style-sheets, though they can be typed directly onto the page as well. The priorities for styles can be a bit complex and contests and omissions are resolved by the user's web browser in software that is generically referred to as the The CSS Cascade. Style expressions written directly onto the page by a Wiki writer apply only to the element for which they are written, and these are referred to as in-line styles. Most structures (elements) of a page can be formatted with in-line styles; these page elements are individual entities like tables, cells, rows, paragraphs, divisions, and any number of other HTML or Wikitext entities. HTML tags have default styles assigned to them in a special browser (user-agent) style sheet, and additional styles are added to those and the wikitext elements in the Wikibooks style-sheets. Wikibooks style-sheets cannot themselves be changed by users, though each user can have a local style-sheet that (for Internet Explorer at least) allows the local modification of pages for their own use. |
"This page provides a loose collection of intro notes related to classes and styles... " |
Two Typical Classes ; to look at their formats...
Before describing how to make use of classes, it would be as well to become familiar with the source material, the style sheet definitions for the classes themselves.
When a Wiki page, or any other web page is opened by a user, an HTML code block is sent down to the browser. This is comprised of text interspersed with a tag markup code. The tags are there to tell the browser what kind of page entries they are, so that the styles assigned in advance for these elements in the stylesheet can be applied.
The HTML block that is sent can contain some styles within its heading, and these might be sufficient for simple pages. When a browser cannot find any styles to use then it uses the default styles of the browser. However, for complex pages like Wiki, there is a reference in the downloaded HTML markup code to a style sheet file, a file with a .css suffix that is usually located on the same server; this file is also downloaded, and can then be found in the browser cache. It is this style sheet, or more usually several such style sheets, that are used for the main formatting effort.
Say that in the browser's attempt to format the downloaded HTML data, it comes across a paragraph tag. By reference to the recently downloaded style-sheet, it first finds the font and spacings that apply to the paragraph tags. It then displays all text that is preceded by a paragraph tag in accordance with the styles that it has found. It does the same for all HTML tags, and takes note of any named classes too. In this way the browser can display the work as the originator intended.
One of the other things that the browser does is to look through the text of the downloaded HTML data to see whether or not there are any in-line styles that apply to the text. These might have been put there by a Wiki writer who wants styles applied that differ from those in the style-sheet. If there are both style-sheet rules and in-line styles for the same items, and these are in conflict, (e.g. red versus blue), then the browser gives priority to the in-line style. This is also the case where a style within a declared class name differs from a local in-line style: the in-line style takes priority. It is this priority rule that allows a Wiki user to add additional formats to their work, and there are very few restrictions on the their content.
To see what these styles look like, follow the descriptions of the two classes that follow. Inspection of my Opera browser's file cache shows a file called main.css, a Wiki style sheet. Double clicking it opens the style sheet in the browser. A further brief search within the very long style-sheet reveals an entry related to the Tocolours class. That listing is shown below in Figure 1. Similarly, the details of the Wikitable class are to be found in the Common.css style sheet. This is listed, with the extraneous information removed, in Figure 2.
Figure 1:The Toccolours class; from Main.css..
}
.toccolours {
border: 1px solid #aaa;
background-color: #f9f9f9;
padding: 5px;
font-size: 95%;
}
|
Figure 2: The Wikitable class; from Common.css.
table.wikitable
{
margin: 1em 1em 1em 0;
background: #f9f9f9;
border: 1px #aaaaaa solid;
border-collapse: collapse;
}
table.wikitable th, table.wikitable td,
{
border: 1px #aaaaaa solid;
padding: 0.2em;
}
table.wikitable th,
{
background: #ccccff;
text-align: center;
}
table.wikitable caption,
{
margin-left: inherit;
margin-right: inherit;
}
|
The Toccolours and Wikitable classes are described below.
The Toccolours Class ; formats a table cell like the Table of Contents...
This class is designed to format the table of contents box that appears on most pages of Wikibooks. It applies the styles for a thin, solid, grey border, a pale grey background, five pixels of 'all-round' padding, and a relative font-size that is 95% of the parent font size. Notice that the four styles in the class listing are fairly general ones, and do not have any exotic properties.
The term parent means the element that contains the element; for example, the page is usually the parent of a table, and the parent of a paragraph might equally be a page, a table, or virtually any other element that can contain text.
Notice that the class name has a period prefix. This denotes the class as a so-called generic class; it can be used in other elements too. The styles are specified using the CSS format. Within the curly brackets of the class listing, there are four style rules. A rule comprises a property, e.g. font-size, and its corresponding value,95%. These two terms are separated by a full colon, and in addition to spacing, each rule is separated from the next by a semi-colon. The format for style specification is quite strict.
An example using this class is shown below. The code makes a simple table cell with the Toccolours formats.
{| class="toccolours"
! Heading
|-
| This is the text
|}
This is the result of running this simple code:
| Heading |
|---|
| This is the text |
Notice that all four of the border, background, padding, and font-size properties have been applied simultaneously by the class declaration.
The Wikitable Class ; saves work but not for everything...
Refer to the Figure 2 for a listing of the Wikitable class. The class is identified by name first in the top line. The word table tells us that the class name that follows it will only be used in conjunction with tables. If the class were intended to be used with any tag, it would have been defined as a generic class; that is, with the selector replaced by a period. (See Toccolours for an example of a generic class). The name of the class, Wikitable, is separated from the table selector by a period.
The styles are written within curly brackets. Within these curly brackets there are four sets of style rules identified. The first block applies margin, background color, borders, and border style to the table as a whole.
The second block has a conditional style; it applies only to heading cells, (th), and to data cells, (td), of the table. For example, consider the term:
This means, apply the following formats to the heading cells of a table in which the Wikitable class was specified. Similarly, the same rules are made to apply to table data cells. Note that a comma separates the two elements. The set of rules adds cell borders and padding.
The third style set applies only to heading cells. The headings of columns are centered and are given a purple background color.
The fourth set applies only to the caption of the Wikitable; it sets the left and right margins to be the same as that of the parent table, so that it will always be aligned above it.
By adding the Wikitable class expression to a table's top line, all of these style rules are applied at once. By placing a style expression there also, the class's rules can be modified further. By additionally specifying styles at cell level, the table's rules will be again modified. By writing a span rule around the cell's text, the text rules are again superseded. Finally, by using Wikitext apostrophe code for text within the span, for example, two of them for italics, any and all similar rules will be superseded in that regard.
The notion of styles closest to the text having priority is termed supersession, and the import of useful styles from parent levels is termed inheritance.
The following code makes a simple table with the Wikitable formats. In WikiBooks, the Wikitable class is identical to the wikitable class. As stated before, additional styles could be added to the table elements to further modify it.
{| class="wikitable"
|+ Caption
|-
! Heading 1
! Heading 2
|-
| Row1 Col1
| Row1 Col2
|-
| Row2 Col1
| Row2 Col2
|}
This is the result of running this simple code:
| Heading 1 | Heading 2 |
|---|---|
| Row1 Col1 | Row1 Col2 |
| Row2 Col1 | Row2 Col2 |
Notice that the Wikitable class declaration has added many properties to the table; in fact ten formats have been added all at once. Common complaints about the Wikitable class are that it has purple column headings, and meager padding. To make the heading background the same as the cells, just add the following line to each of the heading cell elements; because the class heading style is targeted at the heading cell itself, the styles cannot be modified collectively in the row element.
To increase the cell padding it is again necessary to apply a CSS style to each individual cell; an HTML attribute such as cellpadding, that is a table attribute, cannot be used to override the CSS padding style applied via the class. Add the following code to each cell line for say, 10 pixels all round.
Finally, the table code with these two additions looks like this:
{| class="wikitable"
|+ Caption
|-
! style ="padding:10px;background: #f9f9f9;;"|Heading 1
! style ="padding:10px;background: #f9f9f9;;"|Heading 2
|-
| style ="padding:10px;"|Row1 Col1
| style ="padding:10px;"|Row1 Col2
|-
| style ="padding:10px;"|Row2 Col1
| style ="padding:10px;"|Row2 Col2
|}
This is the result of modifying the basic Wikitable class formats with styles:
| Heading 1 | Heading 2 |
|---|---|
| Row1 Col1 | Row1 Col2 |
| Row2 Col1 | Row2 Col2 |
The need for laborious modifications to this class suggest that it might be quicker to make one from scratch, though the example has been made to emphasise the method to use rather than to suggest it as a useful table. Classes can generally be modified with style statements in this way.
Those who intend to make a table, can find detailed methods at Tables, and for those who just want a table ready-made, go to Tables Ready to Use.
Classes and Styles in Tags ; well-behaved tags, that is...
Various HTML tags can be used in Wiki. The most common examples are <span></span> and <div></div>, that are much used for styling text blocks. The general methods described here can be applied to many of the tags that can be used in Wiki.
To modify a text block with classes and CSS styles, the rules remain fairly similar to that of a table top line. For example, the following code blocks can add styles to a block of text.
Figure 5: Typical 'in-line' block formats [edit]
<div style="height:2cm;font-size:20pt;background:sandybrown;color:maroon;">Text here</div>
or
<span style="height:2cm;font-size:20pt;background:sandybrown;color:maroon;">Text here</span>
The two formats are slightly different; the <div></div> tag version formats a complete rectangle on the page, with the text within it. It is an HTML block element. Margins, padding, and borders could also be added to make a better text box. The code example above produces this simple rendering:
 |
In fact, if instead of the few words in this div example, an entire page of text were enclosed, many of the colorings and spacings of the page could be modified. These formats would work for any styles not superseded by classes of the page contents, e.g., the paragraph class. Line-height is specified for paragraphs, so could not be inherited from the div level; it would be necessary to modify every paragraph. On the other hand, properties of the div block such as background color, padding, margins, and the perimeter border, could be set for the entire box, as could various other paragraph properties, capable of being inherited. |
| Technical Note: |
The <span></span> tag version cannot format a block element; it is an inline element. It is limited to the formatting of text. It thus ignores the height rule, and the background does not extend beyond the last printable text character. It looks like this:
This is the text
If a class is to be added then it can be included as follows:
These tag sets can be nested; that is, one set of tags within another set. Avoid the nesting of span tags; make sure that one set is closed before another is opened.
Nesting spans will create confusion. Say that an overall style is applied to several paragraphs using span tags. Within these tags another span set is used to format one of the paragraphs differently. When this is viewed, at the point where the inside span closes, the styles will have reverted to the body text styles described by the style sheet, and not the intended outside style definition.
This is perhaps because the first closing tag was wrongly interpreted as the end tag. The problem is avoided by using care in use of these tag pairs, and perhaps by making the outside set a div pair.
Finally, some properties such as line-height can only be used in block elements, so they will work with <div></div> tags but not with an inline element like <span></span>. To expand on the above technical note, there is a specific point of interest for those who intend to increase the line spacing, (line-height), for an entire page. The text of a page consists of paragraphs, and these elements have their line-height specified in the Wiki stylesheets. As a result, it is not possible to add a single line-height style to bounding div tags, since the paragraph class will override it within each paragraph. To increase line spacing for the entire page each paragraph must be placed within paragraph tags, (<p></p>), and the line-height style, e.g., style="line-height:2.5em;", added to every such leading tag.
A discussion of the priorities for styles and classes is given in Tables, though the principles described have some generality.
| Styling the Pre-formatted Text Tags | ... |
Enclosing text within the existing <pre></pre> tags results in a plain block of text on a pale grey background, in Courier font, and with a dotted border. Like other tags, these can be modified with inline styles and can result in virtually any format that the writer prefers. The following is an example of the original format.
This is made in preformatting tags. There is a dotted border. The font is Courier, a monospaced font. The background is pale grey and the text is black.
Consider the following code that modifies the tags:
|
<pre style="line-height:1.5em;text-align:left;border:none;background:papayawhip;color:maroon;font-family:Arial;overflow:auto;font-size:9pt;"> |
The result of modifying this tag in this way is just:
This text is in preformatting tags, and note that there is no dotted border now. There is a 10pt Arial font. The background and text are now colored, and there is a line-height of 1.5em.
Virtually any text styles can be used in this way to construct improved formats for these tags. The making of a template poses difficulties, though a recent WikiBooks attempt called Template:Prettypre purports to have done so.
To modify the preformatting tags so that some wrapping can occur then use must be made of the Pre-wrap value for the White-space property. Unfortunately, there are, in 2008, still browser compatibility issues. Opera 8 handles it well. Firefox handles it, starting from Firefox 3. It is unclear whether or not Internet Explorer 7 handles it, but IE6 does not. In case browser consensus is ever achieved in the matter, notes to show its use are enclosed in the following drop-box.
|
For another method that allows the wrapping of long code lines without the pre-wrap property, refer to the section on the poem tags in Preformatted Text.
The following drop-box contains a Wiki code module with all of the useful text properties. Copy it into the Sandbox to test various style properties on the included text. See also the page on Making Templates A101, where styles are used to good effect.
|
See Also ; ...
-
- CSS Reference : A useful external CSS reference list
- Sandbox : The WikiBooks sandbox
- Templates : WikiBooks template making A101
Other Pages
|
nowiki>
