Wiktionary:Cascading Style Sheets

Cascading Style Sheets (CSS) are a part of webpages, are used to define and adjust the appearance of a page independently of its contents. They are text files written in a special language that is designed to make it easy to change the appearance of certain parts of a web page. They are very flexible and are also used on Wiktionary for many things. This page explains how style sheets are used within Wiktionary. It does not explain how to write style sheets; please see the various online tutorials and references for that.

MediaWiki's style sheets

The main style sheet used by the wiki software is located at MediaWiki:Common.css. This style sheet is used on every Wiktionary page for every user (except on the mobile site, en.m.wiktionary.org, which uses MediaWiki:Mobile.css instead). For this reason, it is used primarily to support site-wide functionality that has to function independent of a user's settings or preferences. This includes the support for Wiktionary's templates and support for various writing systems. The MediaWiki:Print.css style sheet defines styling that is appropriate for printing pages out on paper, and is used automatically by your browser when a user prints out a page. The MediaWiki software that Wiktionary runs on also comes with various skins. These allow users to choose and customise the appearance of Wiktionary to suit their own personal tastes. Every skin also has its own style sheet, named the same as the skin. Wiktionary's default skin is named "Vector" and its style sheet is located at MediaWiki:Vector.css. The other skins also have their own style sheets.

The style sheets named above are global style sheets; they affect all users, or at least those using a certain skin. For that reason, they cannot be edited by normal users, only administrators can make changes to them. However, every user is also able to create their own custom style sheets. You can add style definitions to your personal style sheets, which will alter the appearance of Wiktionary but only visible to you—others will not see the changes you make. User style sheets are named the same as the global ones, but with "Special:MyPage/" in front instead of "MediaWiki:". So, your own custom Common.css style sheet is at Special:MyPage/common.css, while your custom Vector.css is at Special:MyPage/vector.css, and similarly for all others. User style sheets act as add-ons or overrides to the corresponding main style sheet; they apply changes to the global style sheet rather than completely replacing them. So you only need to define styles that you want to change.

Applying styles to dictionary entries, templates and other pages

The various style sheets above apply custom styling to various parts of Wiktionary. It is also possible, and often necessary, to explicitly apply certain styles to things like headwords or tables so that they appear correct to the user. There are two ways in which this can be done.

The first is by applying a CSS class. This applies a certain predefined style to the element; what is applied depends on the name of the class. The styling of the classes themselves is defined in one of the style sheets above. To apply a class to something on the page, it has to be a HTML element. Add class="(name of the class)" to the opening tag of the element, like: <strong class="headword">. You cannot do this with "regular" wikitext, so you can apply a class to <b>text</b> but not to its more usual equivalent '''text'''. You can, however, apply attributes like class= to tables that are written in wikicode (rather than HTML), as well table rows and individual table cells. See mw:Help:Tables for more information.

The second way to apply styling is by using inline CSS. This applies individual styling attributes directly to a particular element on the page. This allows you to customise the appearance of parts of a page (or a template) on an individual basis. Inline CSS is applied the same way as a CSS class, but using the style= attribute on a HTML element or table wikicode. For example, <span style="color: red">this text will be red</span>.

Standard practices and other useful styles

Scripts

Support for scripts (writing systems, not programs) is provided using CSS classes. Each script code has a corresponding CSS class with the same name. So, to tag text as Cyrillic, add the following:

<span class="Cyrl">(text)</span>

This should not be used directly in entries, however. There is a variety of templates available (such as {{l}}, {{term}}, {{lang}}, {{head}} and so on) which automatically apply this styling. It can be used within templates or modules.

Headwords

Headwords (the bolded text that shows the word in each entry) are formatted using the following style:

<strong class="headword (optional classes for script)" lang="(language code)">(the headword itself)</strong>

Headword-line templates or modules should use this code when formatting and displaying headwords. It can be managed automatically through tag_text in Module:script utilities.

Debugging

There is a variety of classes and other selectors. You can use them in your custom Common.css style sheet, and apply whatever styling you prefer.

*:not(:lang(en))

This applies styling to all elements whose language is tagged as not English. This can help with finding text that does not have the correct language attribute applied to it.

.missing-language

This class is applied by certain templates and modules when a language code has not been supplied.

Other classes

headword

Tags text as a headword and applies appropriate styling. Used by {{head}}. See above for more.

inflection-table

Used on a table to mark it as an inflection table. This currently makes all red links in the table black.

mention

Tags text as a mention within running text. Used by {{term}}.

NavFrame, NavHead, NavContent

Used to support collapsible elements. The classes are placed on <div> elements. NavFrame is placed on the div element surrounding the whole, while NavHead and NavContent are placed on the divs for the header and the content, respectively. The header is the part that remains visible when collapsed, while the content appears only when expanded.

ns-0, ns-1, etc.

Applied to all pages within a certain namespace. Namespaces are numbered rather than named, though. See here for a full and up-to-date list of all namespaces and their numbers.

use-with-mention

Used to style "form-of" definitions. When a mentioned term (using the mention class) is placed within an element with this class, it receives special styling.

Links

• w:Help:Cascading Style Sheets – Wikipedia’s help page
• The raw style sheet combines and minimizes the main Common.css and skin style sheets.
• WT:PREF – check-box preferences makes use of CSS to customize the appearance of Wiktionary when you are logged in