Help:Cascading Style Sheets: Difference between revisions

Browse history interactively

← Older edit

Content deleted Content added

VisualWikitext

Inline

Latest revision as of 10:54, 12 December 2023

This page has been moved to Manual:Interface/Stylesheets on mediawiki.org.

Any modifications or additions to this page should be made on mediawiki.org instead.

@@ Line 1: / Line 1: @@
+{{MovedToMediaWiki|Manual:Interface/Stylesheets}}
-{{H:h|editor toc}}
-[[w:Cascading Style Sheets|Cascading Style Sheets]] is a style sheet language used to describe the appearance of the page. It allows for flexible formatting of a page and should be used instead of [[help:Table|tables]] whenever possible, because they can be [[Help:User style|manipulated by the reader]] or overridden by an author if your css is embedded in another page via a [[Help:Template|template]].
-==Levels of CSS settings==
-Style may be specified inline for a each [[w:HTML element|HTML element]]s or pieces of content, see e.g. [[Help:Table#Color.3B_scope_of_parameters|color; scope of parameters]]. Alternatively, style is specified for [[w:CSS selector|CSS selector]]s located in special files called 'stylesheets' and expressed in terms of elements, classes, id's and other attributes. This is done on various levels:
-Author stylesheets, in this order:
-* MediaWiki in general (including a skin specific style sheet)
-* site-wide for all skins: [[MediaWiki:Common.css]]
-* site-wide per skin: [[MediaWiki:Monobook.css]], etc.
-* user-specific for all skins: User:''username''/common.css
-* user-specific per skin: User:''username''/''skinname''.css <span style="font-size:85%; font-style:italic;">(note that in the CSS terminology user-specific style sheets are '''not''' user stylesheets)</span>
-User stylesheet:
-*web-wide, user-specific: local file, referred to in the browser settings, or directly set in the browser
-A HTML element may be just taken from the wikitext (see [[Help:HTML in wikitext|HTML in wikitext]]), e.g. <span>, or the result of parsing wikitext – for instance, the <nowiki>'''</nowiki> code is changed into <nowiki><b></nowiki>.  A HTML element can also be taken from the code for the used skin.
-A 'class' may be produced by the software, e.g. ns-''namespace number'' for the HTML-element "body", and extiw for an interwiki link in the page body, or taken from the wikitext.
-Similarly an 'id' may be produced by the software, e.g. bodyContent, or taken from the wikitext.
-In the case of conflicting style settings for a piece of content, the resulting setting depends primarily on the indication "!important". Secondarily, if both are important, the user wins, if neither is, the author wins. Tertiarily it depends on specificity. Only lastly it depends on order between and within stylesheets: the last wins. Thus a User:''username''/monobook.css does not win from MediaWiki:Monobook.css (both author, not user) if the specificity of the latter is greater. See also [http://www.w3.org/TR/REC-CSS2/cascade.html cascading order].
-== Supported Elements ==
-Mediawiki supports most CSS. There were some bugs in css support in earlier versions.
-{{Further|the [http://www.w3.org/TR/CSS21/ CSS specification]}}.
-== CSS in wikitext ==
-You can use CSS styling in HTML elements in your code (see [[Help:HTML in wikitext]] for a list of elements supported by MediaWiki) like you would in normal HTML markup.
-For example, a "div" element with a green border and its contents floated to the right would be created with
-<source lang="html">
-<div style="float:right; border:thin solid green;">
-Here comes a short paragraph that is<br />
-contained in a "div" element that is<br />
-floated to the right.</div>
-</source>
-<div style="float:right; border:thin solid green;">
-Here comes a short paragraph that is<br />
-contained in a "div" element that is<br />
-floated to the right.</div>
-which would produce the box as shown.
-<div style="clear: both;"></div>
-Some wikitext elements allow you to insert CSS styling directly into them. An example is the table syntax:
-<pre>
-{| style="your style here"
-|-
-|your table stuff
-|-
-|}
-</pre>
-{{Further|[[Help:Table]]s}}
-== MediaWiki existing styles ==
-:''See also [[#Major style blocks|Major style blocks]] below''
-You may wish to use styles that are already predefined by MediaWiki, or the site that you are visiting. This can be done by assigning predefined classes to [[:en:html tag|html tag]]s in the wikitext. You can also create a style that is unique to your page.
-[[mw:Vector|Vector]] is the default style on all [[Wikimedia Projects]].
-== Tips and tricks ==
-===Non-display===
-One extreme "style" for a text is "display:none;", i.e., not displaying it, e.g.
-:<source lang="html" inline>p<span style="display:none;">q</span>r</source> gives p<span style="display:none;">q</span>r
-To allow a text to optionally have this style, specify a class or id for it; a user who wants to hide it can then correspondingly specify in his/her personal CSS:
-:<source lang="css" inline>.classname {display: none;}</source> or <source lang="css" inline>#id {display: none;}</source>
-Non-displayed links do not work, as opposed to links in a very small font, compare:
-:<source lang="html" inline>p<span style="display:none;">[[q]]</span>r</source> gives p<span style="display:none;">[[q]]</span>r
-:<source lang="html" inline>p<small><small><small><small><small>[[q]]</small></small></small></small></small>r</source> gives p<small><small><small><small><small>[[q]]</small></small></small></small></small>r
-It cannot be used to remove text in expressions for template names, parameter names, parameter values, page names in links, etc.
-While "display: none;" produces nothing, "visibility: hidden;" produces blank spaces replacing the content; its opposite is "visibility: visible;".
-Example:
-:<source lang="html" inline>p<span style="visibility: hidden;">q</span>r</source> gives p<span style="visibility: hidden;">q</span>r
-Try inspecting the page with the {{em | Developer tools}} probably provided with  your browser to find the hidden element.
-If would like to view the hidden text you could use an add-on for your browser. For example the {{em|Web Developer}} add-on is available for [https://addons.mozilla.org/en-US/firefox/addon/60 Firefox] and [https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=en-GB Chrome]. You could add it to your browser and then choose <code>Misc. -> Display Hidden Elements </code> in that toolbar, to make all hidden elements appear.
-=== Non-print ===
-One can exclude content from being printed (if the browser supports CSS) by declaring the content to be of the "noprint" class:
-<syntaxhighlight lang="html">
-<div class="someclass noprint">This will not appear in the print version.</div>
-</syntaxhighlight>
-== Major style blocks ==
-{{blockquote|This information applies to the monobook skins and may not be valid for the vector skin}}
-*''column-content'' – overall space within the margins of which the content exists.
-*''content'' – the white background, thin bordered box which contains the main page content.
-*''firstHeading'' – the class of the heading tag at the top of every page
-*''bodyContent'' –  the main page content within the content box
-*''contentSub'' –  the name of the wiki immediately underneath the main heading, but above the body text
-The portlet class is the style used by all the div blocks around the main content.  Identified blocks using that class:
-*''p-cactions'' – id for the list of tabs above the main content
-*''p-personal'' – id for the list of links that include the login or logout page at the top of the page.
-*''p-logo'' – id for the block that contains the logo (in the top left)
-*''p-navigation'' – id for the block that contains the navigation links on the left of the page
-*''p-search'' – the block that contains the search buttons
-*''p-tb'' – the block that contains the toolbox links
-*''p-lang'' – the block that contains interlanguage links
-The footer at the bottom of the page includes blocks with the following ids
-*''footer'' – overall footer container block
-*''f-poweredbyico'' – the powered by mediawiki image that normally resides to the right of the page
-*''f-list'' – id for the list that contains all the bits of text at the bottom of the page
-==Style depending on a parameter or variable==
-===Variable class or id===
-A class or id can depend on the result produced by a template or on a template parameter, e.g. class="abc<nowiki>{{{1|def}}}</nowiki>". For one or more of the possible class names the style of that class can be defined. If the class is undefined it is ignored, so the standard style is used.
-In the simplest case we have e.g. class="abc<nowiki>{{{1}}}</nowiki>" and define class abcdef. If the parameter value is "def" it applies.
-If a page for general use only makes sense when styles are defined for certain classes, then these have to be specified in the page MediaWiki:Common.css, which applies for all users and all skins, as far as not overridden.
-===Variable style parameter value===
-Wikitext like
- <nowiki><span style="display:{{{3|none}}}">Wed</span></nowiki>
-displays "Wed" if parameter 3 is defined, but its value is not "none", and displays nothing if parameter 3 is undefined or "none". If the value of parameter 3 is a display style other than "none", that style is applied.
-==See also==
-*[[Help:User style]]. A person can modify the style, for accessibility, or additional feature testing.
-*[[mw:Manual:Gallery of user styles]]
-*[[mw:Skin projects]]
-*[[Customization:Explaining skins]]
-*{{h:mwg}}: {{h:mwg|AllowUserCss}}
-*[[w:Cascading Style Sheets]]
-*[[w:Wikipedia:Customisation]]
-*[[w:Wikipedia:Catalogue of CSS classes]]
-{{h:f|enname=Cascading style sheets}}
-[[Category:User styles]]