Fandom

Infobox Wikia

CSS

224pages on
this wiki
Add New Page
Comments0 Share

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 a Fandom page.

CSS - a Fandom Town Hall (2017-03-25)01:59:05

CSS - a Fandom Town Hall (2017-03-25)

CSS Town Hall event recording.

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 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 changing the width for all infoboxes to 250px and changing the default font size to 16px would like like this:

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

Portability specific

See also

External links

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.