- 2,096
- Posts
- 15
- Years
- Him/Them
- «UK»
- Seen Apr 6, 2024
[css-div=" width:80%; height:80%; padding:10%; font-size:16px; background-color:#006064; color:#ffffff;"][css-div=" text-align:center; text-transform:capitalize; letter-spacing:-5px; font-size:40px; text-shadow: black 0.1em 0.1em 0.2em; color:#FF9840; font-family:Arial Black;"]css tutorial
[css-div=" text-align:center; text-transform:capitalize; letter-spacing:-3px; font-size:20px; text-shadow: black 0.1em 0.1em 0.2em; color:#FFB473; font-family:Arial Black;"]Getting Started[/css-div][/css-div]
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!
[css-div=" width:18px; height:18px; border-radius:20px; background-color:#34C6CD; float:left; box-shadow: black 0.1em 0.1em 0.2em;"][/css-div][css-div=" text-indent:10px; font-size:18px;"]Code[/css-div]
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;
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.
[css-div=" width:18px; height:18px; border-radius:20px; background-color:#34C6CD; float:left; box-shadow: black 0.1em 0.1em 0.2em;"][/css-div][css-div=" text-indent:10px; font-size:18px;"]Dimension[/css-div]
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:
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.
[css-div=" width:18px; height:18px; border-radius:20px; background-color:#34C6CD; float:left; box-shadow: black 0.1em 0.1em 0.2em;"][/css-div][css-div=" text-indent:10px; font-size:18px;"]Background[/css-div]
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:
And the actual CSS would look like this
[css-div=" width:18px; height:18px; border-radius:20px; background-color:#34C6CD; float:left; box-shadow: black 0.1em 0.1em 0.2em;"][/css-div][css-div=" text-indent:10px; font-size:18px;"]Text [/css-div]
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
And an example CSS would be
[css-div=" display:inline; text-transform:capitalize; letter-spacing:-1px; text-shadow: black 0.1em 0.1em 0.2em; color:#FFB473; font-family:Arial Black;"]Click here for the[/css-div] [css-div=" display:inline; text-transform:capitalize; letter-spacing:-0.5px; text-shadow: black 0.1em 0.1em 0.2em; color:#FF9840; font-family:Arial Black;"]Next Tutorial[/css-div]
[/css-div]
[css-div=" text-align:center; text-transform:capitalize; letter-spacing:-3px; font-size:20px; text-shadow: black 0.1em 0.1em 0.2em; color:#FFB473; font-family:Arial Black;"]Getting Started[/css-div][/css-div]
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!
[css-div=" width:18px; height:18px; border-radius:20px; background-color:#34C6CD; float:left; box-shadow: black 0.1em 0.1em 0.2em;"][/css-div][css-div=" text-indent:10px; font-size:18px;"]Code[/css-div]
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:
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.
[css-div=" width:18px; height:18px; border-radius:20px; background-color:#34C6CD; float:left; box-shadow: black 0.1em 0.1em 0.2em;"][/css-div][css-div=" text-indent:10px; font-size:18px;"]Dimension[/css-div]
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:
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.
[css-div=" width:18px; height:18px; border-radius:20px; background-color:#34C6CD; float:left; box-shadow: black 0.1em 0.1em 0.2em;"][/css-div][css-div=" text-indent:10px; font-size:18px;"]Background[/css-div]
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:
And the actual CSS would look like this
Spoiler:
Spoiler:
[css-div=" width:18px; height:18px; border-radius:20px; background-color:#34C6CD; float:left; box-shadow: black 0.1em 0.1em 0.2em;"][/css-div][css-div=" text-indent:10px; font-size:18px;"]Text [/css-div]
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:
And an example CSS would be
Spoiler:
[css-div=" display:inline; text-transform:capitalize; letter-spacing:-1px; text-shadow: black 0.1em 0.1em 0.2em; color:#FFB473; font-family:Arial Black;"]Click here for the[/css-div] [css-div=" display:inline; text-transform:capitalize; letter-spacing:-0.5px; text-shadow: black 0.1em 0.1em 0.2em; color:#FF9840; font-family:Arial Black;"]Next Tutorial[/css-div]
[/css-div]
