Help:Useful styles

This page documents various CSS elements that are useful to know when working in the article and template namespaces. For information about how to use them, see:

Classes[edit]

  • wikitable This class represents Wikipedia's favored style for data tables.
  • toccolours This class gives the template borders and colors similar to that of the Table of Contents of a page. Do not use id="toc" instead of this, as it risks breaking some scripts and causing other problems (every id= value on a page must be unique). toccolours is not used much anymore, but used to be used for footer templates etc.
  • navbox This class is used on most footer templates (e.g. {{Regions of the world}}). See also Template:Navbox.
  • infobox This class is used for infoboxes (e.g. {{Infobox Settlement}}).
  • *mbox-*: Message boxes to be used on…
    • ambox-*: articles;
    • tmbox-*: talk pages;
    • cmbox-*: categories;
    • imbox-*: images and
    • ombox-*: pages in other namespaces (notably Wikipedia:).
    • mbox-* (image, text, imageright, small): To be used along with the above, in any namespace

Specific styles[edit]

  • border-collapse:collapse This style will eliminate 3-d style borders created by the border attribute and collapse them in 1px wide borders. This property will override cellspacing! To define similar whitespace, use the border-spacing property (although it is not possible to have both border-spacing and border-collapse for the same table).

Moving stuff[edit]

  • float:right and clear:right These styles are used to move a table to the right-hand side of the screen. Float right is equivalent to align="right" The clear code property makes it impossible for the movement to be blocked by another box or picture: the template will automatically move under it.

Margins and sizes[edit]

  • margin:0 0 0.5em 1em; This style prevents text from running straight to the template by saving blank space. It should be used on boxes which are floated right (using float: right;).
    • margin:0 1em 0.5em 0; This performs the same function as the style directly above, but should be used for boxes which are floated left (using float: left;).

See also[edit]