Help:CSS

This article is under construction. Therefore, please excuse its informal appearance while it is being worked on. We hope to have it completed by Sunday.

1. Be familiar with hex colors before reading this.
2. Some of the codes shown on this page can be used as Template:Link styles.

---

CSS (officially known as Cascading Style Sheets) sets how a page looks. On a special sub-page on your user page, you can override the Monobook skin to create your own personal look for the wiki.

Background

CSS has three parts: A selector is the variable (officially the HTML element you're editing). A property is the attribute of the element you want to change. Each property has a value, which is set by default and the true item you are changing.
Consider the following line:

body {
  color: #00FF00;
  }

The selector/element that was edited was body – all the general text on a page. The property/attribute was color – text color. The value was #00FF00 – making all text a green color.

Note the syntax for CSS. The selector is defined first, then an opening brace ({) "opens" the element for editing. Then the property appears, with a colon (:) after it, then the value (hex colors must have the # sign). Each time a value is set, a semicolon (;) is required at the end (except for the last line). Multiple lines of properties and redefined variables can occur within the element, as long as they are closed by a closing brace (}).

Keep in mind that while the wiki has selectors that are common to all sites, some of them are also unique to wikis only

The following is a list elements, attributes, and values that are common to be changed, thus likely vital to your CSS page.

Examples

Wayoshi (talk) has been kind enough to allow us to use his CSS page for some examples first, using all three parts of CSS.

Let's take a look at the "body" and "a" selectors first:

body { font-family:Arial; font-size:10px;}
a { color: #080; text-decoration: none; }
a:visited { color: #050; }
a:active { color: #111; }
#p-personal a.new { color: #b00; }
#p-personal a.new:visited { color:#800; }
#bodyContent a.external { color: #0a0; }
#bodyContent a.extiw:active { color: #020; }

• The body selector covers the basic text on any page (such as what you'd see as content on a wiki page).
• The a selector is the basic link that hasn't been clicked on recently.
• a:active is when you are in the midst of clicking the link.
• a:visited is the link that has been clicked recently. Often, it is simply the same color, but darker than a.
• #p-personal a.new is the wiki-unique link-that-hasn't-been-created (red) link.
• #p-personal a.new:visited is when you try to create a page, but don't right away, so it has a different color elsewhere until it's created, when it becomes a.
• #bodyContent a.external is the external link.
• #bodyContent a.extiw:active is when an external link is being clicked on.
• Result: Normal text is changed from 12px Verdana to 10px Arial. The normal and external links are now green. When clicking on a link, the color is a dark shade of green or gray. The uncreated page links are a darker shade of red.
• In the previous example, different parts were on different lines. In fact, all of it can be on one line if you so choose.