The PokéCommunity Forums  

Go Back   The PokéCommunity Forums > Blogs > Just My Type
Sign Up Rules/FAQ Live Battle Blogs Mark Forums Read

Notices


Descender→
Rate this Entry

CSS - Getting Started

Posted June 23rd, 2011 at 09:17 AM by Hybrid Trainer
Updated June 23rd, 2011 at 01:47 PM by Hybrid Trainer
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!

Code

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;

Spoiler:
[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.

Dimension

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:
Spoiler:
[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.

Background

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:
Spoiler:
[css-div=" width:500px; height:300px; background-colour:#A64D00;"] <TEXT AND JUNK> [/css-div]

[css-div=" width:500px; height:300px; background-image:URL('http://www.zigzagwallpapers.com/wp-content/uploads/2011/03/Gerbera-Flower-Wallpaper-3.jpg')"] <TEXT AND JUNK> [/css-div]

And the actual CSS would look like this
Spoiler:
<TEXT AND JUNK>


Spoiler:

<TEXT AND JUNK>



Text

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
Spoiler:
[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
Spoiler:
<FANCY TEXT AND JUNK>


Click here for the
Next Tutorial

Posted inUncategorized
Views 1454 Comments 4
« Prev     Main     Next »
Total Comments 4

Comments

  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
    Hybrid Trainer's Avatar
    Quote:
    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 Hybrid Trainer Hybrid Trainer is offline
    Updated June 30th, 2011 at 04:47 PM by Hybrid Trainer
  3. Old Comment
    Cadance's Avatar
    This could help me refresh my memory on CSS. Thanks for the awesome tutorial, Ninetales. :)
    Posted June 23rd, 2011 at 02:53 PM by Cadance Cadance is offline
  4. Old Comment
    Buttered Coat's Avatar
    tl;dr. I'll read it another time XD
    Posted July 18th, 2011 at 06:41 PM by Buttered Coat Buttered Coat is offline
 

All times are UTC -8. The time now is 07:03 AM.


Style by Nymphadora, artwork by Sa-Dui.
Like our Facebook Page Follow us on Twitter © 2002 - 2014 The PokéCommunity™, pokecommunity.com.
Pokémon characters and images belong to The Pokémon Company International and Nintendo. This website is in no way affiliated with or endorsed by Nintendo, Creatures, GAMEFREAK, The Pokémon Company or The Pokémon Company International. We just love Pokémon.
All forum styles, their images (unless noted otherwise) and site designs are © 2002 - 2014 The PokéCommunity / PokéCommunity.com.
PokéCommunity™ is a trademark of The PokéCommunity. All rights reserved. Sponsor advertisements do not imply our endorsement of that product or service. User generated content remains the property of its creator.