Help:Cascading Style Sheets: Difference between revisions

Revision as of 12:36, 19 May 2022

Latest revision as of 02:46, 29 August 2025

(41 intermediate revisions by 26 users not shown)

Line 1:

{{Information page|H:CSS|WP:CSS}}

[[Cascading Style Sheets]] allows for flexible formatting of a page. They should be used instead of [[Help:Table|tables]] for non-tabular content 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 ==

Line 51 ⟶ 52:

* User-specific web-wide browser settings: local file referred to in the browser settings, or directly set in the browser

Note that in CSS terminology, the user-specific style sheets are ''not'' [[Help:User style|user style sheets]].

===Usage===

An HTML element may be just taken from the wikitext (see [[Help:HTML in wikitext|HTML in wikitext]]), e.g., span, or the result of translating wikitext, e.g., the <code><nowiki>'''...'''</nowiki></code> code is changed into <nowiki><{{tag|b></nowiki>}}, or part of the code for the 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.

Line 72 ⟶ 73:

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 <nowiki><{{tag|div></nowiki>}} element with a green border and its contents floated to the right would be created with

<syntaxhighlight lang="html">

<div style="float:right; border:thin solid green;">

Line 88 ⟶ 89:

Some wikitext elements allow you to insert CSS styling directly into them. An example is the table syntax:

{{-}}

<syntaxhighlight lang="wikitext">

<pre>

{| style="your style here"

|-

|your table stuff

|}

</syntaxhighlight>

</pre>

{{Further2|[[Help:Tables]]}}

Line 112 ⟶ 113:

One extreme "style" for a text is not displaying it, with

<syntaxhighlight lang="css">

.''classname'' {display: none}

#.''idclassname'' {display: none}

.#''classnameid'' {display: none}

</syntaxhighlight>

etc.

Line 121 ⟶ 124:

It cannot be used to remove text in expressions for template names, parameter names, parameter values, page names in links, etc.

To view hidden text, download the Web Developer Toolbar for Firefox [https://addons.mozilla.org/en-US/firefox/addon/60 here], then choose Misc. ->&rarr; show hidden elements in that toolbar. It will 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">

<pre>

<div class="someclass noprint">This will not appear in the print version.</div>

</syntaxhighlight>

</pre>

== Major style blocks ==

Line 155 ⟶ 158:

=== Variable class or id ===

A class or id can depend on the result produced by a template or on a template parameter, e.g. <syntaxhighlight lang="wikitext" inline>class="abc<nowiki>{{{1|def}}}"</nowikisyntaxhighlight>". 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. <syntaxhighlight lang="wikitext" inline>class="abc<nowiki>{{{1}}}"</nowikisyntaxhighlight>" 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.

Line 164 ⟶ 167:

Wikitext that reads

<nowikisyntaxhighlight lang="html"><span style="display:{{{3|none}}}">Wed</span></nowikisyntaxhighlight>

will display "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.

==Wiki headings==

Wiki headings use the following default CSS:

<section begin="HTML_section" />

{| class="wikitable"

|-

! Wikimarkup !! [[HTML]] !! Style

|-

| {{nowrap|1=<code>= Heading =</code>}} || {{tag|h1|o}} ||

<syntaxhighlight lang="css">

color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.8em; font-family: 'Linux Libertine',Georgia,Times,serif; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; padding: 0; border-bottom: 1px solid #AAAAAA;

</syntaxhighlight>

|-

| {{nowrap|1=<code>== Heading ==</code>}} || {{tag|h2|o}} ||

<syntaxhighlight lang="css">

color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.5em; font-family: 'Linux Libertine',Georgia,Times,serif; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; padding: 0; border-bottom: 1px solid #AAAAAA;

</syntaxhighlight>

|-

| {{nowrap|1=<code>=== Heading ===</code>}} || {{tag|h3|o}} ||

<syntaxhighlight lang="css">

color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.2em; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;

</syntaxhighlight>

|-

| {{nowrap|1=<code>==== Heading ====</code>}} || {{tag|h4|o}} ||

<syntaxhighlight lang="css">

color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;

</syntaxhighlight>

|-

| {{nowrap|1=<code>===== Heading =====</code>}} || {{tag|h5|o}} ||

<syntaxhighlight lang="css">

color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;

</syntaxhighlight>

|-

| {{nowrap|1=<code>====== Heading ======</code>}} || {{tag|h6|o}} ||

<syntaxhighlight lang="css">

color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;

</syntaxhighlight>

|-

|}<section end="HTML_section" />

== See also ==

*[[Span and div]]