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;
}

CSS

Contents

Structure[]

Selectors[]

Syntax[]

Portability specific[]

See also[]

External links[]

Fan Feed