Help:CSS

CSS is an abbreviation for Cascading Style Sheets, it is a stylesheet language used to define styles for (X)HTML pages (like the ones on this Wiki). The term Cascading Stylesheet suggests that it is external, however, it can also be embed inside HTML elements using the style attribute. CSS is not HTML, HTML, but most HTML attributes have equivalent ones in CSS. You can find some detailed CSS guides on the net, this will only give an example as to what it's capable of, and some things to note.

Stylesheets
This section will detail how to style using external sheets (or one's in &lt;style&gt; tags, which are disabled for the Wiki) In the page source, you can see something similar to this somewhere in the &lt;head&gt; tags:
 *  @import "/index.php?title=MediaWiki:Common.css&usemsgcache=yes&action=raw&ctype=text/css&smaxage=86400"; 

This is our main stylesheet, you can see it at MediaWiki:Common.css.

CSS syntax is straight-forward, a period (.) denotes a class, a hash symbol (#) denotes IDs, classes are typically preferred over classes because IDs must be unique on pages (technically they don't have to, but it's the specification set by the W3C)

Following is some examples of it in use:


 * Let's style a class "classname" element in blue;

.classname { color:blue; }
 * If only certain elements should have the styles applied, we can set it;

td.classname { color:blue; }
 * Or maybe you'd like to make every &lt;span&gt; child element apply the styles;

td.classname span { color:blue; }
 * Maybe the styles should only apply when hovering over the element?

td.classname:hover { color:blue; }

Style Attribute

 * Styles can also be placed inside the style attribute, and often is preferred if the style isn't likely to be used on lots of pages;


 * Likewise, they can often be omitted by using the HTML equiv, but CSS is usually preferred where possible as they can be overridden by user styles;



Comparison against HTML properties
Most HTML properties do have CSS equivalents, but some differ slightly: ...
 * 1) align in HTML would align the entire element, and parents of them, in CSS it is text-align which only aligns, you guessed it - text.

External references
Of course, if an entire tutorial to CSS were written up, it would be a long read (even more to write it!), so instead, here are some external links for those who are eager of learning more (but the above is suffice for the most part):
 * W3schools.com - a comprehensive guide
 * W3.org - CSS2 documentation, conveniently indexed.