CSS Tutorial (basic)
OK before we start, a little background information on the subject! CSS stands for Cascading Style Sheet, I use it to style websites and neopets stuff written in HTML. It can be used to change fonts, colours, layouts etc. For example, this page uses an external style sheet - if taken away the layout would just be the contents in a table, with no colour or backgrounds etc.OK enough of that, lets get started...
Your CSS code must begin within these tags found in the <head> </head> of a document:
<style type="text/css></style>
However on neopets, they have already got <style type="text/css></style> tags previously on the page, so you only need to put <style> </style>
Adding Backgrounds
One of the first things I do when starting to write my CSS is add a background:body
{
background-image: url(imageURL);
background-color: #hexcolourcode;
background-attachment: property;
background-repeat: property;
background-position: property;
}
Ok, but what does this all mean?
- The background-image: url is pretty straight forward. If you want to use an image as a background; you will need to create it, upload it to somewhere like photobucket then copy the URL of the image (bit beginning with http:// and ending in something like .jpg, .gif, .bmp, .png etc..)
- The background-color: is also pretty straight forward, if you do not want to use a background image and want just a solid colour, enter the hexidecimal colour code of your choice. A list of some hex colour codes can be found here.
- background-attachment:property can be one of two things; scroll, which is the default setting, or fixed. Scroll means the background that scrolls with the page, an example being this one! Fixed means the background does not scroll with the page, an example can be found here.
- background-repeat: is kind of obvious what it does :P The properties can be repeat(which is the default),repeat-x(which repeats the background horizontally), repeat-y(which repeats the background vertically) and no-repeat(which doesnt repeat the background - it just has the background image once)
- background-position: positions where the background will be on the page (handy if it is not being repeated!) Properties can be: [top, center, bottom][left, center right] (eg top left - which is the default position.)
If you want your background to start from a specific co-ordinate then for example you can put background-position: 50px 100px; - the first number being the x co-ord and the second number being the y co-ord.
Fonts
The second thing i usually do in my CSS is sort out my font, then my headers.To change the font for the entire page, put the following:
body
{
font-family: font;
font-size: number pt;
font-weight: property;
color: #hexcolourcode;
letter-spacing: number px;
text-decoration: property;
text-align: property;
}
There are loads of other things to do with fonts, but these are really the only important ones I use. However if you want to know more, then you can google ;)
- font-family: is where you decide what font you want to use, but remember not to choose a very obscure font that noone will have, it will look nice for you but for everyone else will be default. This font is Tahoma and Neopets usually uses Verdana.
- font-size: this is where you choose the size of the font you want! If you cant remember what the sizes look like, test it out in word or something :P (this size is 10pt)
- font-weight: property is used to change how bold your font is. The properties are: normal(default), bold, bolder, lighter
- color: enter the hexidecimal colour code of your choice. A list of some hex colour codes can be found here.
- letter-spacing: changes how far apart your letters are in pixels, the higher the number, the further apart. This text is 3px apart. You can also put in minus numbers to get your letters closer together.
- text-decoration: can be none(default), underline, Overline or Line-through
- text-align: align's your text for the whole page, properties can be left(default), center and right
Headers
Ever wondered how people did those fancy headers? Well now you can find out :D Headers are a default thing and can be written in the main <body></body> as <h1>header title</h1>. They scale down in size, an example of this can be found here.We can edit the style of headers like this:
h1
{
background: #hexcolourcode;
color: #hexcolourcode;
padding: number px;
font-size: number pt;
text-align: property;
border: properties;
}
You can put any property from the fonts section above into a header, I have only included a few but you can play around for your desired effect.
- h1 shows that all the stuff written between { } are for h1 only. You can change this to h2 or h3 etc. to make secondary headers
- background: is the background colour of your header, you can leave it blank by putting none or you can choose any hexidecimal colour code of your choice. A list of some hex colour codes can be found here. You can also add a background-image:url( ) to here if you want a fancy background for your header
- color: is the text colour of your header. A list of some hex colour codes can be found here.
- padding: is how much space there is around the text there is to the border for example:
This text is padding:5px;
This text is padding:15px;
With padding: 5 px; it pads around all sides equally, if you want a lot of padding on one side, you can simply put padding-left: 5 px;
If you want to pad all four sides with different values, instead of using the padding-left example you can put padding: 3px 0px 5px 1px; the order being top, right, bottom, left. - font-size: this is where you choose the size of the font you want! If you cant remember what the sizes look like, test it out in word or something :P (this size is 10pt)
- text-align: align's your text on the header, properties can be left(default), center and right
- border: Check out my border page here