View source for Help:CSS

This guide is intended to teach how to read and use CSS for styling pages. It is primarily oriented towards [[mediawikiwiki:MediaWiki|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 {{inline-code|/*}} and ends with {{inline-code|*/}}.

Some examples are:
<syntaxhighlight lang="css" line>
/* This is a comment. */
/*
This is a comment.
This is a comment.
This is a comment.
This is a comment.
*/
</syntaxhighlight>

==Properties==
A ''property'' is something you can change to tell the browser what to do.<ref name="case-sensitive"/>

You can only change specific things that are defined by the browser<ref>Except for properties which start with {{inline-code|<nowiki>--</nowiki>}} (two hyphens), as these are '''defined by the CSS author'''. You can reference them by using {{inline-code|lang=css|var(--name)}}.</ref>, such as {{inline-code|border}}, {{inline-code|width}}, or {{inline-code|color}}. For a list of possible properties, please see the [https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index 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 {{inline-code|lang=css|color: red;}}.

==Selectors==
A ''selector'' is a block (a section delimited by {{inline-code|<nowiki>{</nowiki>}} and {{inline-code|<nowiki>}</nowiki>}}) which tells the browser what to apply the following ''ruleset'' (a set of properties) to.

===Simple selectors===
There are several types of ''simple selectors''<ref>See the [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#simple_selector MDN Web Docs] for more detail.</ref>, including:
;''basic selector''
:;''type selector''
::A selector which selects elements which have the given node name.<ref name="case-sensitive"/> For example, {{inline-code|lang=css|elem}} selects every <syntaxhighlight inline lang="html"><elem></elem></syntaxhighlight> element. A special type selector is {{inline-code|lang=css|*}} (the ''universal selector''), which selects every element.
:;''class selector''
::A selector which selects elements which have the given {{inline-code|class}} attribute.<ref name="case-sensitive"/> It is intended to apply to multiple elements. It begins with a {{inline-code|.}} (period). For example, {{inline-code|lang=css|.mw-heading}} selects every element which has a {{inline-code|class}} that contains {{inline-code|mw-heading}}, such as <syntaxhighlight inline lang="html"><elem class="mw-heading"></elem></syntaxhighlight> or <syntaxhighlight inline lang="html"><elem class="first-class mw-heading other-class hello"></elem></syntaxhighlight>.
:;''ID selector''
::A selector which selects elements which have the given {{inline-code|id}} attribute.<ref name="case-sensitive"/> It is intended to apply to only one unique element. It begins with a {{inline-code|#}} (number sign). For example, {{inline-code|lang=css|#bodyContent}} selects the element with the {{inline-code|id}} attribute set to {{inline-code|bodyContent}}, such as <syntaxhighlight inline lang="html"><elem id="bodyContent"></elem></syntaxhighlight>.

===Compound selectors===
''Compound selectors'' are selectors which are composed of several [[#Simple selectors|simple selectors]]. They do not use any combinators (see [[#Complex selectors|the following section]] for more information). For a compound selector to match an element, it must satify all of the selectors. For example, {{inline-code|lang=css|.note.note-warning}} would match an element with '''both''' {{inline-code|note}} and {{inline-code|note-warning}} in the {{inline-code|class}} attribute, such as <syntaxhighlight inline lang="html"><elem class="note note-warning"></elem></syntaxhighlight>.

===Complex selectors===
''Complex selectors'' are selectors which combine several simple or compound selectors together using ''combinators''.
{{NoteWarning|Complex selectors are not the same as compound selectors. For example, {{inline-code|lang=css|#bodyContent .katex}} is '''not''' the same as {{inline-code|lang=css|#bodyContent.katex}}. Be careful!}}

There are several types of combinators<ref>See the [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#combinators MDN Web Docs] for more detail.</ref>, 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).<ref>It can also be represented with one or more [[wikipedia:whitespace character|whitespace character]]s.</ref> For example, {{inline-code|lang=css|#bodyContent .katex}} would match the <syntaxhighlight inline lang="html"><elem class="katex"></elem></syntaxhighlight> in <syntaxhighlight inline lang="html"><elem id="bodyContent"><elem class="katex"></elem></elem></syntaxhighlight> and <syntaxhighlight inline lang="html"><elem id="bodyContent"><elem class="wrapper"><elem class="example"><elem class="katex"></elem></elem></elem></elem></syntaxhighlight>.
;''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, {{inline-code|lang=css|#bodyContent > .katex}} would match the <syntaxhighlight inline lang="html"><elem class="katex"></elem></syntaxhighlight> in '''only''' <syntaxhighlight inline lang="html"><elem id="bodyContent"><elem class="katex"></elem></elem></syntaxhighlight>.

==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<ref>See the [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Cascade MDN Web Docs] for more detail.</ref> and selectors with greater weight take precedence over selectors with lesser weight<ref>See the [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity MDN Web Docs] for more detail.</ref>.<ref>If you need to override the cascade and/or specificity, use {{inline-code|lang=css|!important}}. '''This should be a last resort''', as it can cause more issues down the road. Always try other options, like making your selector more specific, before using {{inline-code|lang=css|!important}}.</ref>

Some examples are:
<syntaxhighlight lang="css" line>
p {
    /* ignored (applied earlier) */
    color: blue;
}

p {
    /* takes precedence (applied later) */
    color: red;
}
</syntaxhighlight>
<syntaxhighlight lang="css" line>
p {
    /* every p is blue */
    color: blue;
}

p.red {
    /* every p.red is red (more specific) */
    color: red;
}
</syntaxhighlight>
<syntaxhighlight lang="css" line>
p {
    /* takes precedence (!important) */
    color: blue !important;
}

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

==Example snippet==
<syntaxhighlight lang="css" line>
/* 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);
}
</syntaxhighlight>

==Tips==
===Common selectors===
*{{inline-code|lang=css|#firstHeading}}
*{{inline-code|lang=css|#bodyContent}}
*{{inline-code|lang=css|.mw-parser-output}}
*{{inline-code|lang=css|.infobox}}
**{{inline-code|lang=css|.infobox__header}}
**{{inline-code|lang=css|.infobox__title}}
**{{inline-code|lang=css|.infobox > .infobox__content}}
**{{inline-code|lang=css|.infobox__image}}
**{{inline-code|lang=css|.infobox__section}}
**{{inline-code|lang=css|.infobox__sectionTitle}}
**{{inline-code|lang=css|.infobox__sectionContent}}
**{{inline-code|lang=css|.infobox__item}}
**{{inline-code|lang=css|.infobox__label}}
**{{inline-code|lang=css|.infobox__item > .infobox__content}}
*{{inline-code|lang=css|.mw-heading}}
**{{inline-code|lang=css|.mw-heading1}}
**{{inline-code|lang=css|.mw-heading2}}
**{{inline-code|lang=css|.mw-heading3}}
**{{inline-code|lang=css|.mw-heading4}}
**{{inline-code|lang=css|.mw-heading5}}
**{{inline-code|lang=css|.mw-heading6}}
*{{inline-code|lang=css|a}}
*{{inline-code|lang=css|a.new}}

==Footnotes==
<references>
<ref name="case-sensitive">'''Everything in CSS is ''case-sensitive''''', which means that capitalization differences change what you are doing.</ref>
</references>
[[Category:Author: tesinormed]]
{{Centered headers}}