CSS Tutorial

This is a tutorial on Cascading Style Sheets(CSS). With CSS you can edit your Special:Mypage/global.css and it will affect every wikia site you go on. So for example you can change the font you want to use with the following properties:


 * font
 * font-family
 * font-size
 * font-style
 * font-variant
 * font-weight

I'll talk about each of them and how to use them.

font-family - Use this to change which fonts you are using, Example:

* {font-family:Arial,"Times New Roman",sans-serif;}

The * means it will affect the whole page, if for example you only wanted to affect paragraphs, you would do: p{}, or for headers: h1,h2,h3,h4,h5,h6{}. Inside the {}, is where all the properties go, font-family is our only property in this case. The : sets the values for that property, while the ; is the end of that property. The values for the font-family property in this case are: Arial, Times New Roman, and sans-serif. Note that any fonts with spaces between the name must be between double quotes "", they are optional if there are no spaces.

font-size - Use this to change the size of the font, Example:

* {font-size:16px;}

This is pretty self explanatory, it sets the font size of everything to 16px, the size can be specified in any of the following units:
 * px - Pixel
 * pt - Point 1pt = 1/72inch
 * pc - Pica 1pc = 12pt
 * em - Em 1em = Current font size
 * ex - 1ex = The height of the lowercase "x" in the current font
 * mm - Milimeter
 * cm - Centimeter
 * in - Inch
 * % - Percentage

font-style - Use this to change the style of a font, Example:

* {font-style:italic;}

This makes the font italicized, valid values are:
 * normal
 * italic
 * oblique
 * inherit - Gets the style from the parent element

font-variant - Use this to change the variant of the font, Example:

* {font-variant:small-caps;}

This will make the font in Small Caps, valid values are:
 * normal
 * small-caps
 * inherit

font-weight - Use this for changing the weight of the font, Example:

* {font-weight:bold;}

This will make bold text, valid values are:
 * normal
 * bold
 * bolder
 * lighter
 * number - 400=Normal 700=Bold
 * inherit