DraconicArcania Hideout

CSS Styling

Okay, so, lesson two! Moving on to CSS Styling! Let's begin with some simplistic knowledge. CSS Styling is what makes something format itself. For example, this page only looks nice because of CSS styling. Without CSS styling, this page would be plain white. And that'd be boring, wouldn't it? I believe so! So, let's get on with the lesson!

Formatting the Basics

So, what is the basic format for a CSS style sheet? Well, you always begin a document with some essential text. Then you end the document with closing tags, as usual. So, your basic sheet will look somewhat like this:
<style type="text/css">
{blah blah blah blah, CSS technical crap}
[Begin your text here.]
Okay, so we've got that down. But what goes in the {}? Well, this is where it gets fun! Let's start with basic background junk. So, what? Well, to format a simple color background, you'll want to have a code which looks somewhat like this. I'm only showing you the stuff between the brackets, but don't forget the rest of the code!
{background-color:#This can be shown with either an HTML color wheel markup, RGB markup or text such as red, blue, et cetera);}
You can also specify elements to place into the background. For example, say you want the heading on a red background. Your code would look somewhat like the following.
H1 {background-color:#;)
Try testing it out here! For a more in-depth look at backgrounds, try here!

Formatting your Cursors

Cursor editing is pretty simple. Using the same format, you simply insert the following code as described below.
<span style="cursor:see below">Insert the text or code to change</span><br />
So, what's with the cursor: thing? Well, that controls what cursor you will use! For example, you might want to have the cursor not change at all! This could be shown as cursor:auto, or just not documented at all! See your mouse/trackpad control panel's pointer options for a complete list of the types of cursors you can use. However, the cursors which can be used are all included here.