Help:CSS

This guide is intended to teach how to read and use CSS for styling pages. It is primarily oriented towards MediaWiki, but also useful in general. If you already know CSS, this should be easy to follow.

For ease of reading, this only shows what is generally necessary for basic styling.

Comments

A comment is a block of text which helps you to understand what you are doing. It does not do anything; it is intended solely for your understanding.

Every comment starts with /* and ends with */.

Some examples are:

/* This is a comment. */
/*
This is a comment.
This is a comment.
This is a comment.
This is a comment.
*/

Properties

A property is something you can change to tell the browser what to do.

You can only change specific things that are defined by the browser, such as border, width, or color. For a list of possible properties, please see the MDN Web Docs.

Every property line must seperate the name and value with a colon. In addition, the line must end with a semicolon.

An example of a property is color: red;.

Selectors

A selector is a block (a section delimited by { and }) which tells the browser what to apply the following ruleset (a set of properties) to.

Simple selectors

There are several types of simple selectors, including:

basic selector

type selector

A selector which selects elements which have the given node name. For example, elem selects every <elem></elem> element. A special type selector is * (the universal selector), which selects every element.

class selector

A selector which selects elements which have the given class attribute. It is intended to apply to multiple elements. It begins with a . (period). For example, .mw-heading selects every element which has a class that contains mw-heading, such as <elem class="mw-heading"></elem> or <elem class="first-class mw-heading other-class hello"></elem>.

ID selector

A selector which selects elements which have the given id attribute. It is intended to apply to only one unique element. It begins with a # (number sign). For example, #bodyContent selects the element with the id attribute set to bodyContent, such as <elem id="bodyContent"></elem>.

Compound selectors

Compound selectors are selectors which are composed of several simple selectors. They do not use any combinators (see the following section for more information). For a compound selector to match an element, it must satify all of the selectors. For example, .note.note-warning would match an element with both note and note-warning in the class attribute, such as <elem class="note note-warning"></elem>.

Complex selectors

Complex selectors are selectors which combine several simple or compound selectors together using combinators.

Complex selectors are not the same as compound selectors. For example, #bodyContent .katex is not the same as #bodyContent.katex. Be careful!

There are several types of combinators, including:

descendant combinator

A combinator which selects elements that match the second selector with an ancestor (parent, parent's parent, parent's parent's parent, etc.) matching the first selector. Generally, it is represented with a " " (single space). For example, #bodyContent .katex would match the <elem class="katex"></elem> in <elem id="bodyContent"><elem class="katex"></elem></elem> and <elem id="bodyContent"><elem class="wrapper"><elem class="example"><elem class="katex"></elem></elem></elem></elem>.

child combinator

A combinator which selects elements that match the second selector with a direct ancestor (parent only). It is represented with a ">" (greater than symbol). For example, #bodyContent > .katex would match the <elem class="katex"></elem> in only <elem id="bodyContent"><elem class="katex"></elem></elem>.

Cascade and specificity

In CSS, rulesets are applied based on the cascade (order / layer) and specificity (weight). For simplicity, this means that later rulesets take precedence over earlier rulesets and selectors with greater weight take precedence over selectors with lesser weight.

Some examples are:

p {
    /* ignored (applied earlier) */
    color: blue;
}

p {
    /* takes precedence (applied later) */
    color: red;
}

p {
    /* every p is blue */
    color: blue;
}

p.red {
    /* every p.red is red (more specific) */
    color: red;
}

p {
    /* takes precedence (!important) */
    color: blue !important;
}

p {
    /* ignored (no !important) */
    color: red;
}

Example snippet

/* Example comment */
p {
    color: red;
}

p {
    color: green !important;
}

p {
    color: blue;
}

#bodyContent .mw-heading2 {
    border: solid red 1px;
}

ul * {
    font-size: var(--font-size-xx-large);
}

Tips

Common selectors

• #firstHeading
• #bodyContent
• .mw-parser-output
• .infobox
  • .infobox__header
  • .infobox__title
  • .infobox > .infobox__content
  • .infobox__image
  • .infobox__section
  • .infobox__sectionTitle
  • .infobox__sectionContent
  • .infobox__item
  • .infobox__label
  • .infobox__item > .infobox__content
• .mw-heading
  • .mw-heading1
  • .mw-heading2
  • .mw-heading3
  • .mw-heading4
  • .mw-heading5
  • .mw-heading6
• a
• a.new