Quick CSS Reference

This is a quick reference on how to use CSS. We've no time for long explanations, so I will include a few other resources for that sort of stuff.

For details on CSS properties, see the w3schools CSS Reference or the DevGuru CSS Index.
You can also read An Introduction to CSS on the W3C's site (they are in charge of standards on the web).

Enough of that, We're trying to get some work done here!

Where to put CSS

You can put your CSS directly on the page use a <style> tag, like so:
<style type="text/css">
[your CSS goes here]
</style>

or without the <style> tags in a file with a .css extension (all.css, for example).

To call a .css file on your page:

<link rel="stylesheet" type="text/css" href="/all.css" />

This is assuming that you are using a CSS file called "all.css" that is in the root of your site. Again, this is a fast reference - not an exhaustive one.


Style a tag

To make every <h2> red:

h2 {color:red;}


Style a class

To make everything with a class of "hey" bold:

.hey {font-weight:bold;}

Examples:

<p class="hey">do re me</p>
The whole paragraph will be bold

<p>do <span class="hey">re</span> me</p>
Only "re" will be bold.


Style an id

To make the element with an id of "dave" have a yellow background:

#dave {background-color:yellow;}

Examples:

<div id="dave">Some highlighted text</div>

<h2 id="dave">A highlighted header (still text)</h2>


Style a tag with a class

To make only a td with a class of "number" aligned right (align the contents of the cell to the right):

td.number {text-align:right;}


Conclusion

That's it! I may add more or make corrections, but the goal here is for a very fast reference. More detailed information can easily be found elsewhere.