Help:CSS: Difference between revisions

#''Many of the codes shown on this page can be used as {{link|Help|table}} styles.''

----

==Background==

Consider the following line:

</pre>

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 (<tt>{</tt>) "opens" the element for editing. Then the property appears, with a colon (<tt>:</tt>) after it, then the value (hex colors must have the # sign). Each time a value is set, a semicolon (<tt>;</tt>) is required at the end (except for the last line). Multiple lines of properties and redefined variables can occur within the curly braces (<tt>{ }</tt>), and all affect the same selected element.

</pre>

It is also possible to apply values to the properties of multiple selectors at once, separating them with a comma (<tt>,</tt>):

selector2 {

}

</pre>

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

a { color: #080; text-decoration: none; }

a:visited { color: #050; }

a:active { color: #111; }

#p-personal a.new { color: #b00; }

#bodyContent a.external { color: #0a0; }

#bodyContent a.extiw:active { color: #020; }

*'''#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.

==Selectors==

Since element selectors refer to HTML tags, they are common on all websites; classes and IDs, however, are different on every site, and those used in wikis will only work in wikis. Keep in mind that some selectors will only take certain values (experiment!). The following is a table of some important simple selectors for wiki skins:

!Selector!!Element(s) selected

|-

|pre||the content in pre tags

|-

|-

|ul||unordered (bullet) list

===Advanced selectors===

Firstly, there are ''pseudo-classes''. These are not really there, and are "created" by the CSS. A normal element must be used for the pseudo-element to be based on, and these are separated by a colon (<tt>:</tt>). For example:

!Selector!!Effect

|-

Next, + and > can be used to select elements more precisely. For example:

gives a light blue background to every list item directly inside an unordered list - as opposed to being in an element that itself is inside the ''<nowiki><ul></nowiki>'' tag.

*4 values: assigned in the order top, right, bottom, left.

*A pre-defined color name (check out [[wikipedia:Web_colors#X11_color_names|this list]]);

*a hex color in the form ''#000000'' or ''#000'', where each digit is a hexadecimal digit representing red, green or blue; or

*''rgb(red, green, blue)'', where red, green and blue are numbers up to 255 or 100%.

!Property!!Description!!Possible values

|-

|font-size||self-explanatory||takes a measurement

|-

|-

|-

|font-weight||sets bold||''normal'', ''bold'' (other values are possible, but barely distinguishable - ''bolder'', ''lighter'' a number up to about 1000)

|background-color|| ||takes a color value

|-

|-

|background-repeat||repeating pattern of a background image||''repeat'', ''repeat-x'', ''repeat-y'', ''no-repeat''; with x being repeating horizontally only and y being repeating vertically only.

|list-style-type||sets the numbering type of list items in an ''ol'' element||''decimal'' (default), ''lower-roman'' (i, ii, v), ''upper-roman'' (I, II, V), ''lower-alpha'' (a, b, c), ''upper-alpha'' (A, B, C), ''none'' to remove the number

|-

|-

|content||used with :before and :after pseudo-elements||''open-quote

Here's another excerpt from Wayoshi's CSS:

<pre>

</pre>

Result: Text background is a very light green. The usermessage table is redesigned to be green and have a dashed border. The logo has changed (notice after the url some specifications - these are important to have for the logo). The pre border is green. The bullet image has changed (to a green circle). The title of each page is shown in a different font and color. The rest of the headers are a dark green. The categories table has a green background, border, and some space between the text and the border. The sitenotice has the same background as the content. The select box has a green border. The input box has a light green bg. Textarea has a different font.

With the above selectors, properties, and values above, you should be able to stylize your wiki to your needs very well.

You have your own skin page at <tt>User:''Username''/monobook.css</tt>, with stress on the lower case '''m'''. When editing it, you should see some new text:

<blockquote>

'''Tip:''' Use the 'Show preview' button to test your new CSS/JS before saving.

</blockquote>

To see the changes after saving, ''hard'' refresh (press the F5 key, sometimes Ctrl + F5). Congratulations, you now have your own unique skin.