Help:Useful styles: Difference between revisions

Content deleted Content added

Inline

Revision as of 20:46, 10 April 2006

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

CSS classes

wikitable This class is the one added by the {{prettytable}} template. It represents wikipedia's favored style for data tables.
toccolours This class gives the template borders and colors similarto that of the Tableof Content of a page. Do not use id="toc" instead of this, as it risk breaking some scripts. toccolours is used on most footer templates (for examples, {{Region}})
messagebox standard-talk This class combination is used to style templates affected by WP:TS

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 codeclear property makes it impossible for the movement to be blocked by another box or picture: the tempalte 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;).
margin:1em auto; This style is the proper way to center a footer or similar template. A 1em margin is added at the top and the bottomof the template.
width:90%; 90% is a recommended width to allow some whitespace on each side of templates that would otherwise stretch across the text area, such as the aforementioned {{Region}} or {{Cabinet of Canada}}, to give two examples.

@@ Line 17: / Line 17: @@
 ===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 floated boxes.
+*'''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;''').
 *'''margin:1em auto;''' This style is the proper way to center a footer or similar template. A 1em margin is added at the top and the bottomof the template.
 *'''width:90%;''' <code>90%</code> is a recommended width to allow some whitespace on each side of templates that would otherwise stretch across the text area, such as the aforementioned {{tl|Region}} or {{tl|Cabinet of Canada}}, to give two examples.