Jump to content

Help:Useful styles: Difference between revisions

From Wikipedia, the free encyclopedia
Content deleted Content added
remove 'encouragement' to use these outside of the using templates
Line 2: Line 2:
{{Wikipedia how to}}
{{Wikipedia how to}}
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:
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:

__NOTOC__
== Classes ==
== Classes ==
{{main|Wikipedia:Catalogue of CSS classes}}
{{main|Wikipedia:Catalogue of CSS classes}}
*'''wikitable''' This class represents Wikipedia's favored style for data tables.
*'''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 <code>id="toc"</code> instead of this,''' as it risks breaking some scripts and causing other problems (every <code>id=</code> value on a page must be unique). <code>toccolours</code> is not used much anymore, but used to be used for footer templates etc.
*'''toccolours''' This class gives the template borders and colors similar to that of the Table of Contents of a page. '''Do not use <code>id="toc"</code> instead of this,''' as it risks breaking some scripts and causing other problems (every <code>id=</code> value on a page must be unique). <code>toccolours</code> 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. {{tl|Regions of the world}}). See also [[Template:Navbox]].
*'''navbox''' This class is used by [[Template:Navbox]].
*'''infobox''' This class is used for infoboxes (e.g. {{tl|Infobox Settlement}}).
*'''infobox''' This class is used by [[Template:Infobox]]
*'''*mbox-*''': Message boxes to be used on…
*'''*mbox-*''': This class is used by [[Template:Mbox]] and family.
**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 ==
== Specific styles ==

Revision as of 05:13, 22 August 2022

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

  • 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 by Template:Navbox.
  • infobox This class is used by Template:Infobox
  • *mbox-*: This class is used by Template:Mbox and family.

Specific styles

  • 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

  • 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

  • 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