Help:Useful styles: Difference between revisions
Content deleted Content added
David Kernow (talk | contribs) m typo correction, spacing |
actually just point that section at classes |
||
| (27 intermediate revisions by 20 users not shown) | |||
| Line 1: | Line 1: | ||
{{update|reason=<em>Thought in [[Special:Diff/136610358|June 2007]] to be outdated, and all these years later this page has received virtually no updated content</em>|discuss=Not a lot of new content}} |
|||
| ⚫ | |||
{{Wikipedia how to}} |
|||
__NOTOC__ |
|||
| ⚫ | |||
== CSS classes == |
|||
*'''wikitable''' This class is the one added by the {{tl|prettytable}} template. It represents wikipedia's favored style for data tables. |
|||
== Classes == |
|||
*'''toccolours''' This class gives the template borders and colors similarto that of the Tableof Content of a page. ''Do not use <code>id="toc</code>" instead of this,'' as it risk breaking some scripts. <code>toccolours</code> is used on most footer templates (for examples, {{tl|Region}}) |
|||
{{main|Wikipedia:Catalogue of CSS classes}} |
|||
*''' messagebox standard-talk''' This class combination is used to style templates affected by [[WP:TS]] |
|||
== Specific styles == |
== Specific styles == |
||
| Line 10: | Line 10: | ||
===Moving stuff=== |
===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 <code>align="right"</code> The |
*'''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 <code>align="right"</code> The <code>clear</code> 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=== |
===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 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: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. |
|||
==See also== |
|||
*[[Wikipedia:Catalogue of CSS classes]] |
|||
*[[Wikipedia:WikiProject Microformats/classes|Classes used in microformats]] |
|||
{{Wikipedia technical help|collapsed}} |
|||
<!--Categories--> |
|||
| ⚫ | |||
| ⚫ | |||
<!--Other languages--> |
|||
Latest revision as of 23:32, 22 January 2023
 | This help page needs to be updated. The reason given is: Thought in June 2007 to be outdated, and all these years later this page has received virtually no updated content. Please help update this help page to reflect recent events or newly available information. Relevant discussion may be found on the talk page. |
 | This help page is a how-to guide. It explains concepts or processes used by the Wikipedia community. It is not one of Wikipedia's policies or guidelines, and may reflect varying levels of consensus. |
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]Specific styles
[edit]- border-collapse:collapse This style will eliminate 3-d style borders created by the
borderattribute and collapse them in 1px wide borders. This property will overridecellspacing! To define similar whitespace, use theborder-spacingproperty (although it is not possible to have bothborder-spacingandborder-collapsefor 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"Theclearcode 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;).