CSS

**Cascading Style Sheets** (commonly shortened to **CSS**) is a stylesheet language that describes the presentation of an HTML (XHTML or XML) document. The language is distinct from HTML or XML however, as they control web content. On Fandom wikis, CSS usually operates on HTML or XHTML tags for use in visual customization of the elements in an article.

## Structure

### Selectors

The CSS markup is placed into the wiki's CSS pages. The CSS syntax uses **selectors** to style content within the page centrally. The CSS selectors are used in two ways to determine which part of a page the markup should apply to.

The first method is assigning a **class** to tags in the page that is specific to multiple elements, or assigning an **identifier** to a single element: `class="pi-theme-delta"` or `id="pi-theme-delta"`.

Class example

* The div tag is given a class: `<div class="wikia-stub"></div>`.
* The CSS selector that applies to the tag content is preceded by a dot: `.wikia-stub`.

Identifier example

* The div tag is given an identifier: `<div id="synopsis-stub"></div>`.
* The selector for the CSS is preceded by a a number sign: `#synopsis-stub`.

The second method uses the built-in tag names of **objects** like headers to change the markup assigned to that object, like this: `h3 {color: red;}` for a h3 header. Like the one above this section!

The element tag can have only one id and can have multiple classes. The code of a webpage can be made much more readable by using the correct element tag - and ensuring that selectors are added in a concise and descriptive manner as needed! This also makes it easier to fix errors and change things.

For portable infoboxes, there is a list (found on w:Help:Infoboxes/Tags) that lists all the classes used by portable infoboxes.

### Syntax

The **syntax** for CSS **rulesets** uses **properties** to control and change specific aspects of the element's appearance. The infobox width would be changed using a `width` **property** like this:

```
.portable-infobox {
 width: 300px;
}

```

* The `width` property has a colon (`:`) placed in front of it.
* The infobox width property is given a **value** of `300px`.
* The **declaration** of 300px width is now applied to the infobox, voila!

CSS stores declarations in a **declaration block**. The declarations are separated by semicolons (`;`) and the declaration block is wrapped in braces (`{ ... }`).

```
.portable-infobox { width: 300px; }

```

The declaration block is then preceded by your selectors.

The CSS syntax uses and combines the selectors described above as necessary to visually customize the parts of a page. To apply CSS to a tag within another tag, the selector is grouped with a space in between each one.

The CSS syntax can combine **selectors** by ordering them going inwards - so from the container element (the **parent**) to elements directly within (its **children**) and any element within those (the **descendants**).

The customization may need to be applied to multiple parts of a page, so the classes or object names of the element tags are used as selectors then.

Examples

* `.portable-infobox .pi-data-label` to apply to the labels inside a portable infobox.
* `#EditPageHeader a` for the links in the source editor header.

The **rulesets** that are applied for each set of elements are stored separately, so CSS to set the width for all infoboxes to 250px and change the default font size to 16px would be written like this:

```
.portable-infobox {
 width: 250px;
}
.portable-infobox .pi-font {
 font-size: 16px;
}

```

## Portability specific

* w:Help:Community CSS and JS#CSS
* w:Help:Infoboxes/CSS

## External links

* *Cascading Style Sheets* at Wikipedia
* CSS specification by W3C
* CSS documentation at MDN
* CSS live tutorial at W3Schools
* CSS interactive course at Codeacademy