Introduction

This section is going to be quite large, it will hold a lot of data, and so I am going to present it in a particular fashion. It will be similar to this:

1. a: link
   { text-decoration:underline color: #000000; }
   
2. • link
   • visited
   • active
   • hover
3. • underline
   • overline
   • underline overline
   • line-through
   • none
4. • What ever the colour code is you wish to use, to find a list of available colour codes CLICK HERE

As you can see there are 4 sections above, in section one is the code with various colours, in sections 2,3 & 4 there are lists with variables, you can replace each colour with an item from the list, for example, link, can be replaced with visited, hover. For an example of each of the lists just look at the variable, it will be in effect in the writing (in some cases you will have to hover over the writing, or it will be not applicable), hope you enjoy!

What Is A CSS?

Well, CSS stands for Cascading Style Sheet, it is a way of defining how parts of your webpage look and act. There are two ways of putting StyleSheets into your webpage, one is to put the coding directly into the HEAD tags of your webpage, or you can link to an external CSS file, below are the codes:

• <style type="text/css"></style>, this is used when you put the CSS directly into your HTML coding (in the HEAD tags).
• <link href="stylesheet.css" rel=stylesheet type=text/css>, this is used when you want your webpage to link to an external file which holds your CSS (this is a filename followed by .css)

Now, its time for some editing:

Start Simple, Link Editing

See above.

Background Editing

1. background-image: url(http://www.yourlink.com/backgroundimage.gif);
2. • Whatever the link is for your background image

1. background-color: 0000000;
2. • What ever the colour code is you wish to use, to find a list of available colour codes CLICK HERE

Changing The Cursor Style

1. cursor: default
2. (Hover over the values below to preview the cursors)
   • default
   • auto
   • wait
   • crosshair
   • hand
   • text
   • move
   • s-resize
   • e-resize
   • w-resize
   • ne-resize
   • nw-resize
   • se-resize
   • sw-resize

1. If you have a cursor you wish to have to use then you firstly need to host the file on the internet, then you need to find out the link to it (the file will normally end with a .ani or .cur)
   cursor: url('http://www.yourlink.com/cursorfile.ani')
2. • Whatever the link is of your cursor file is

Headers

1. As you may of seen in some of my other tutorials I say how you can set text as headers e.g.

   Header 4

   you can, of course, customise how these tags change your text.
   h1 {font family: arial color: 000000}

2. • h1

   • h2

   • h3

   • h4

   • h5

   • h6

   • p
3. • Whatever the font you want to use is
4. • What ever the colour code is you wish to use, to find a list of available colour codes CLICK HERE

The BODY tags

1. As you may know the body tags holds what can be seen on your webpage, below is a large list of ways of editing this tag:
   body
   {background: 000000
   background-image: url(http://www.yourlink.com/imagefile.gif) - Both covered before
   background-attachment: scroll
   font-family: arial
   color: 000000
   letter-spacing: 3pt
   font-weight: lighter
   font-size: xx-small}
2. • scroll
   • fixed
3. • Whatever the font you want to use
4. • What ever the colour code is you wish to use, to find a list of available colour codes CLICK HERE
5. • Any number value you want e.g. 3pt, 5pt, etc
6. • lighter
   • normal
   • bold
   • bolder
   • Any number value you want e.g. 100, 500, 800, etc
7. • xx-small
   • x-small
   • small
   • medium
   • large
   • x-large
   • xx-large
   • Any number value you want e.g. 12pt, 20pt, etc

Scrollbars

1. This also appears in the body { } section shown above, it allows you to customise the scrollbar colours
   scrollbar-face-color : 000000;
   scrollbar-highlight-color : 000000;
   scrollbar-3dlight-color : 000000;
   scrollbar-shadow-color : 000000;
   scrollbar-darkshadow-color : 000000;
   scrollbar-track-color : 000000;
   scrollbar-arrow-color : 000000;
   
2. • What ever the colour code is you wish to use, to find a list of available colour codes CLICK HERE

Margins

1. Around your webpage there are margins, some define the area around your page, some are inside your page, just play around to see which does what. This also goes in the body { } shown above.
   margin-top: 0;
   margin-bottom: 0;
   margin-left: 0;
   margin-right: 0;
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 0;
   padding-right: 0;
2. • Change this to whatever number you want

This is all I can think of at the moment, I will update this whenever I find out something new or remember it. Please remember somethings cannot be edited in MSN Spaces. If you want to try out any of the above in MSN Spaces just add <span style="text-decoration: underline overline"> and </span> around the text you want to edit. Changing text-decoration: underline overline to whatever coding you want. An example is shown below:

<span style="text-decoration: underline overline"> Underlined and Overlined text </span>
Underlined and Overlined text

Have a play with the the possible effects shown in the above tutorial to see what will work for you and what wont. If you have any questions feel free to contact me through the Comment button below.