Advertiser Content
Rate this Entry

CSS - Getting Started

Posted June 23rd, 2011 at 9:17 AM by Liliana Vess
Updated June 23rd, 2011 at 1:47 PM by Liliana Vess
Tags css, tutorial

css tutorial
Getting Started

I'm pretty sure everyone here has seen at least one thread or signature or even post that has been made with at least some CSS coding. And lately I've been getting a few requests to show some members a couple of tricks. After a quick look through the CSS thread i came to the conclusion that, as informative as it was, it does seem quite confusing. So here is my attempt at a CSS tutorial!


The first thing you'll need to know about CSS coding on PokéCommunity are the codes used to make them. The basic code looks like this;

[css-div=" <CSS> "] <TEXT AND JUNK> [/css-div]

There are also a lot of variations of this code which can be found here, but for this tutorial we will be using the css-div version of the code.
Note the " marks, these are one of the most common causes of errors when using CSS on PC. A lot of people when typing up a lot of codes will forget to put in the last " mark and will cancel out all their work. Just to make it easier you should do both marks in before your start.


The very first thing you'll need for your css to work is a height code and a width code. These work in mainly two different ways, the first way is to use px to say how many pixels it'll use. This way is most commonly used in signatures due to the fact you can set it at 500 width and 300 height which is the exact limit for signatures. The other way is to use % to say how much you of the area you want to fill out. This method is best used for threads and posts because it changes depending on the persons screen size.
These codes look like this when inserted into the tags:
[css-div=" width:500px; height:300px;"] <TEXT AND JUNK> [/css-div]
[css-div=" width:100%; height:100%;"] <TEXT AND JUNK> [/css-div]
[css-div=" width:100%; height:300px;"] <TEXT AND JUNK> [/css-div]

One quite common error when doing the dimension codes is to separate the number from the symbol. You must try and remember to always do it as one chunk, don't separate it. Another error that happens sometimes is typing in the wrong symbol at the end and ending up with a 300% width and wondering why their coding is stretching the page so much.


So after you've got your measurements for your css you'll need to start putting in a background into it so people can see you've got CSS. To do this you can add in a background colour or a background image. First i'll explain the colour, to do the background colour well you'll need to find out a way to get hex codes. I personally use either this if i'm getting a colour scheme or this if i'm getting a one off colour. To actually use the colour you'll need to know the code, which is background-color:red; you can use regular colours such as red or black or white but to get a nice effect it's best you use hex codes. As for the background images the code is quite similar, only this time you'll need an image URL instead of a hex code. I advise you to re-upload any images from the web onto an image hosting site such as Imgur or TinyPic as it puts strain on sites and some sites even block you from hot linking images which do not look good in a CSS background. So the code for background images is background-image:URL('URLHERE'); again like the CSS tag don't forget about the ' otherwise it won't work.
So when the codes are inserted into the tags it'll look something like this:
[css-div=" width:500px; height:300px; background-colour:#A64D00;"] <TEXT AND JUNK> [/css-div]

[css-div=" width:500px; height:300px; background-image:URL('')"] <TEXT AND JUNK> [/css-div]

And the actual CSS would look like this




Now that we've sorted out the background we can work on whats on top of it. The text. There is a lot of stuff that you can do with text when CSS is involved but seeing as were just getting you started now i'll stick to the basics. The first thing you'll need to know is how to colour your text. You can do this by using the simple code color:black; which follows the same rule as the background colour when it comes to codes and such. Next up is the the font size, this one using a few different methods. The first of which is by using different labels, these go from xx-small through to xx-large with medium sat in the middle. The code for this one looks like this, font-size:xx-small; you'll need to remember to use font and not text in this code. There's also the px method, this works a lot like most applications with most common being 12 or 18.
The code would look like this once its inserted
[css-div=" width:500px; height:300px; background-color:#A64D00; color:#1D7074; font-size:18px;"] <FANCY TEXT AND JUNK> [/css-div]

And an example CSS would be

Click here for the
Next Tutorial

Posted inUncategorized
Views 8418 Comments 5
« Prev     Main     Next »
Total Comments 5


  1. Old Comment
    Morkula's Avatar
    The irony here is that your CSS broke your blog container...and the blog listing. :|
    Posted June 23rd, 2011 at 11:54 AM by Morkula Morkula is offline
  2. Old Comment
    Originally Posted by Morkula View Comment
    The irony here is that your CSS broke your blog container...and the blog listing. :|
    Actually it's not the CSS its the [textcollapse] tag i was using. They don't agree with the blogs "/
    Posted June 23rd, 2011 at 12:46 PM by Liliana Vess Liliana Vess is offline
    Updated June 30th, 2011 at 4:47 PM by Liliana Vess
  3. Old Comment
    Meganium's Avatar
    This could help me refresh my memory on CSS. Thanks for the awesome tutorial, Ninetales. :)
    Posted June 23rd, 2011 at 2:53 PM by Meganium Meganium is offline
  4. Old Comment
    Buttered Coat's Avatar
    tl;dr. I'll read it another time XD
    Posted July 18th, 2011 at 6:41 PM by Buttered Coat Buttered Coat is offline
  5. Old Comment
    txteclipse's Avatar
    Thanks for this. I've been trying to find a way to format fanfiction because it always gets stretched across the entire page, which is absolutely atrocious to read on a wide monitor. I'll look into a CSS solution and maybe pretty up my work in the meantime!
    Posted June 25th, 2015 at 7:55 AM by txteclipse txteclipse is offline