Editing Help:User style (section)

=== Cascading Style Sheets ===
For each user-definable style, a [[Wikipedia:Skin|skin]] is first selected, along with a corresponding Cascading Style Sheet (CSS). For each skin, the user can make various choices regarding fonts, colors, positions of links in the margin, etc. CSS is specified with reference to selectors [http://www.w3.org/TR/REC-CSS2/selector.html]: [[HTML elements]], classes, and ID's specified in the HTML code.
Accordingly, what the possibilities are for each skin can be seen by looking at the HTML source code of a page, in particular looking at these classes and ID's: the more there are, the more versatility there is.

There is CSS in the MediaWiki software itself, and Wikipedia overrides this using the following pages:
*Cologne Blue – [[MediaWiki:Cologneblue.css]]
*Modern – [[MediaWiki:Modern.css]]
*Monobook – [[MediaWiki:Monobook.css]]
*Vector Legacy (2010) – [[MediaWiki:Vector.css]]
*Vector 2022 (Default) – [[MediaWiki:Vector-2022.css]]

Site-wide CSS is in [[MediaWiki:Common.css]]

You can override these for yourself using user styles.  To make changes that apply regardless of your current skin, change your [[Special:MyPage/common.css|common.css]].  To make changes that affect your current skin, change your [[Special:MyPage/skin.css|skin.css]]. To make changes that affect all Wikimedia projects, you can log in to [[:Meta:|Meta]] and change your [[:Meta:Special:MyPage/global.css|global.css]].

Enter some CSS into that page. Preview of CSS works in a special way: it allows viewing of the margins of the page (not the contents) on the basis of the style info in the page, provided that the skin used is the skin for which the page applies. This has limitations. E.g., one can preview how links in the margin will look, but these may not be of all the types one would want to check. After saving, while still on the page or while on any other page, do a forced reload (shift-reload/ctrl-f5) to get the new files.



For the user CSS to be automatically loaded, make sure the <code>[[mw:Manual:$wgAllowUserCss|$wgAllowUserCss]]</code> variable is set to true on config. Otherwise, it is possible to load it by JavaScript.

To import CSS from a user subpage by JavaScript, use the <code>mw.loader.load</code> command in your [[Special:MyPage/common.js|common.js]]:

<syntaxhighlight lang="javascript">
 mw.loader.load( '/w/index.php?title=User:Example/stylesheet.css&action=raw&ctype=text/css', 'text/css' );
</syntaxhighlight>