• Our software update is now concluded. You will need to reset your password to log in. In order to do this, you will have to click "Log in" in the top right corner and then "Forgot your password?".
  • Forum moderator applications are now open! Click here for details.
  • Welcome to PokéCommunity! Register now and join one of the best fan communities on the 'net to talk Pokémon and more! We are not affiliated with The Pokémon Company or Nintendo.

PC and CSS Tutorials | #1: The Basics

Trev

[span="font-size: 8px; color: white;"][font="Monts
1,505
Posts
11
Years
  • Age 27
  • Seen Nov 15, 2023
PC and CSS Tutorials
Written by Trev

Greetings, fellow PC members! My name is Trever, and today I'm starting my blog that will focus on teaching the members of PC about CSS. Admittedly, a lot of members already know how to do this, and a lot really don't care for CSS, but if I can help even one person make a post with some quality CSS, I've achieved my goal.

You might be wondering: "Trev, why is there no CSS on in this CSS tutorial? Shouldn't your CSS tutorial have, you know, CSS?" Right you are, reader! Because I will be showing various examples of CSS, I need as much space as possible to work with. Putting CSS in spoilers or inside other CSS will make the CSS I create inaccurate in terms of width and positioning, which I don't want. I want everything I show here to be able to be easily replicated. So, no fancy CSS here, even though it pains me dearly. At least I have the Table of Contents.

If you're wondering about what qualifications I possess to make a tutorial like this, please reference this, this, this, this, this, this, this, this, and this. Any more questions? Good, let's get started.

[css-div="background-color: white; color: black; border: 4px solid cyan; border-radius: 15px; padding: 15px; width: 300px; text-align: justify;"]

Table of Contents


1.) Getting Started
2.) PC's CSS Tags and BBCode
3.) Considerations
4.) Visualizing your CSS
5.) Creating your CSS
6.) Polishing your CSS[/css-div]​

1.) Getting Started

Before you do anything involving CSS, it helps to get familiar with how it's normally used outside of PC. CSS is known as Cascading Style Sheets. Essentially, its purpose is to add design to HTML elements. You don't need to know how to use HTML here, but being familiar with CSS and how it works in the real world will be extremely beneficial to you. A good place to start learning about CSS is General Assembly. If you need a reference guide, W3Schools is the best one out of them all. There are also some more obscure websites if you're looking for neat tricks, but those won't be listed here. W3 is honestly the only reference you need for CSS. They have an entry for nearly every single element.

If you've taken a moment to familiarize yourself with CSS, congratulations! You're now a step above other newbies who are reading this tutorial. If you didn't, don't fret! PC uses a very simplified version of CSS that anyone can figure out with a little practice. PC's CSS system is actually quite powerful, perhaps the most powerful I've seen on any forum I've been a part of.

On another note, if you feel like all of this CSS stuff is overwhelming, know that it's not a requirement for a great-looking thread. You can achieve a lot with PC's BBCode, or you can make your thread look good without anything more than just underline, bold, and italics. My rule of thumb is that if your thread conveys the information clearly and precisely in a readable format, you're good to go. Anything else is just polish.

2.) PC's CSS Tags and BBCode

One of the first things we'll do with CSS is not even related to CSS at all. We're going to start with PC's BBCode list. You'll be relying quite heavily on BBCode when you first start CSS. There's also many BBCode options PC provides that can't be replicated in CSS (though, believe me, there are a lot of things that can). Understandably, most people are going to rely on BBCode as a crutch for changing things like font, text size, text weight, etc. It takes some practice to wean yourself off these, but they're good failsafes that always work if you're struggling to figure something out, and also provide simpler methods for otherwise complicated methods.

Moving on to important things, I'm going to list out all the CSS tags PC has with some short explanations of how they operate. This list is not going to be particularly sophisticated as I tend only use two of the classes at most, so if you know what a class specifically is used for, let me know and I'll credit you in the guide!

PC's CSS Options

Useful CSS Tags

  • [css-div]: This is the CSS code I used most frequently and the one I will be using throughout this guide. It is relatively the same as [cd].
  • [cd]: This is the exact same as [css-div], so if you don't like typing that out, this is a shorter option. The only difference I've noticed is that it doesn't appear unless text in-between the tags.
  • [cimg]: This tag allows us to apply CSS to images. I find it incredibly useful as it allows me to simply post a link in-between the tag and apply my styles to it. It also prevents your images from being selected or saved, useful for preventing art theft.

Basically Useless CSS Options

  • [class]: This tag uses CSS from PC themes. Unfortunately, there's no reference for the class names and the usage is very limited, so this tag is ultimately useless.
  • [css-span]: I've never used this tag nor have I ever seen it used, so I can't give too much information about it. According to the BBCode list, it says that it allows usage of CSS within a [span] tag.
  • [cssc]: Allows the usage of a predefined class. Just like [class], there's no reference list and the usage is limited.
  • [div]: Functionally the same as [css-div], so I don't know what usage it has that isn't already covered. Apparently can be used to style [tab].
  • [span]: The only usage I've seen it have so far is within supporter user titles.
  • [tab]: Despite not being actual CSS, [tab]'s description in the BBCode list says that it can be styled using [div].

And that's the whole list! For simplicity purposes, I will only use the three tags listed under Useful CSS Tag for the tutorial.

3.) Considerations

We're almost ready to start making our CSS! Before we do that, however, we have to take in a few considerations prior to making the CSS. This is a checklist I always run through at the beginning and at the end of my CSS creation process so that I know exactly what I need to do and can reference when I need to modify something.

1.) Consider different themes. It's very easy to make CSS that reads well in the theme you use the most. However, another theme that changes the color of the background or text can make your CSS completely useless. It's always a smart idea to put failsafes in your CSS code so that it displays the same across every single theme.
2.) Consider page width. What really sucks about CSS is that, sometimes, it stretches the page width-wise. It's not fun for anyone - sideways scrolling is part of a decade long gone, and it shouldn't be necessary. The tiniest width I've ever seen on a theme is 600px on mobile, so that's a good width to use if you're unsure of how your CSS will stretch the page (and don't worry, there's plenty of ways to prevent this from happening). 600px is also the width length of signatures, so it's a good bench mark all-around.
3.) Be wary of fixed positioning. PC is very strict about CSS positioning as it can affect the user experience negatively by placing CSS over elements outside of the post the code is in.. When we go into the positioning section later on, I'll show you ways to prevent rule violations.
4.) Be wary of readability issues. Some color combinations are a horrible eye-strain, and elements like opacity and font can make text difficult to read.
5.) Spacing is your enemy. I'm dead serious. You will absolutely struggle with spacing everything out properly. Adjusting for spacing is the longest part of a CSS process and you will hate it with every fiber of your being. Be prepared to spend an hour trying to get a element exactly where you want it and get it to look just perfect.

4.) Visualizing your CSS

It's finally time to start! The best way to start any CSS process is to visualize what your outcome should be. This can be as general or as specific as you want. "I want a white background box with borders utilizing a different color on each side" and "I want colorful borders" are exactly the same when it comes to the results. It helps to see what you're trying to create in your head and what the finished product will look like. If you're the type who needs to literally see it, you can draw out a mock-up on graph paper that you can aspire towards while coding.

Either way, once you have a general idea of what direction you want to go in, it's time to start coding!

5.) Creating the CSS

For demonstration purposes, let's say we want to do a simple black box with green text and a green border. This will involve three properties: background-color, color, and border. Let's start by setting up our shell.

Code:
[noparse][css-div=""]Lorem ipsum dolor sit amet, cibo veri doctus cu ius, nisl tincidunt duo ea. His rebum modus in. Fastidii deserunt temporibus id quo, usu civibus concludaturque cu. Tamquam gloriatur eam ut. Ridens dissentiunt nam eu.[/css-div][/noparse]

Every time I start a new box, I always write out this shell. This way, I keep everything organized. I also posted a snippet of lorem ipsum so I can see what the CSS looks like with large chunks of text in it. From here, we can start by adding background-color.

[css-div="background-color: black;"]Lorem ipsum dolor sit amet, cibo veri doctus cu ius, nisl tincidunt duo ea. His rebum modus in. Fastidii deserunt temporibus id quo, usu civibus concludaturque cu. Tamquam gloriatur eam ut. Ridens dissentiunt nam eu.[/css-div]
Code:
[noparse][css-div="background-color: black;"]Lorem ipsum dolor sit amet, cibo veri doctus cu ius, nisl tincidunt duo ea. His rebum modus in. Fastidii deserunt temporibus id quo, usu civibus concludaturque cu. Tamquam gloriatur eam ut. Ridens dissentiunt nam eu.[/css-div][/noparse]

Depending on your theme, you might be seeing a blank black box, a black box with hard-to-read text, or a black box with... readable text. Obviously, this isn't ideal as not every theme user will be able to read this. That's where color comes in. This sets custom text color for the CSS element so that it's readable on every theme.

[css-div="background-color: black; color: green;"]Lorem ipsum dolor sit amet, cibo veri doctus cu ius, nisl tincidunt duo ea. His rebum modus in. Fastidii deserunt temporibus id quo, usu civibus concludaturque cu. Tamquam gloriatur eam ut. Ridens dissentiunt nam eu.[/css-div]
Code:
[noparse][css-div="background-color: black; color: green;"]Lorem ipsum dolor sit amet, cibo veri doctus cu ius, nisl tincidunt duo ea. His rebum modus in. Fastidii deserunt temporibus id quo, usu civibus concludaturque cu. Tamquam gloriatur eam ut. Ridens dissentiunt nam eu.[/css-div][/noparse]

There we go, now the text can be read by anyone! All that's left is to add in our border. The border property takes three arguments: width, style, and color. For now, we'll keep it simple with 2px, solid, and green.

[css-div="background-color: black; color: green; border: 2px solid green;"]Lorem ipsum dolor sit amet, cibo veri doctus cu ius, nisl tincidunt duo ea. His rebum modus in. Fastidii deserunt temporibus id quo, usu civibus concludaturque cu. Tamquam gloriatur eam ut. Ridens dissentiunt nam eu.[/css-div]
Code:
[noparse][css-div="background-color: black; color: green; border: 2px solid green;"]Lorem ipsum dolor sit amet, cibo veri doctus cu ius, nisl tincidunt duo ea. His rebum modus in. Fastidii deserunt temporibus id quo, usu civibus concludaturque cu. Tamquam gloriatur eam ut. Ridens dissentiunt nam eu.[/css-div][/noparse]

The only important thing to know here are the various arguments you can use for style. You can find all the border styles available here.

So! Technically, we've achieved what we set out to create. However, if you're looking at the CSS, you've probably noticed that it's a little unsightly to look at. It looks cramped and a little unprofessional. But we can fix this with a few simple tricks.

6.) Polishing the CSS

When it comes to cleaning up your CSS, your taste is what matters. Everyone has different preferences and what looks clean to one person might look messy to another. In general, err in your own favor and try not to please others. If you make a CSS that you like, others are bound to like it too as long as they can read it.

The first thing I'm going to do is add padding to de-cramp our CSS. This adds space on the inside of the CSS to push the inner elements/text away from the border. Padding is defined using pixels, but there's no real guide to the amount of padding you need. Simple test different values until you come across one that looks right. I usually stick to increments of 5 (5px, 10px, 15px, etc.)

There are multiple ways to set up the padding. You can use one to four arguments, one for each side of the CSS:

[css-div="background-color: black; color: green; border: 2px solid green; padding: 10px;"]Lorem ipsum dolor sit amet, cibo veri doctus cu ius, nisl tincidunt duo ea. His rebum modus in. Fastidii deserunt temporibus id quo, usu civibus concludaturque cu. Tamquam gloriatur eam ut. Ridens dissentiunt nam eu.[/css-div]
Code:
[noparse][css-div="background-color: black; color: green; border: 2px solid green; padding: 10px;"]Lorem ipsum dolor sit amet, cibo veri doctus cu ius, nisl tincidunt duo ea. His rebum modus in. Fastidii deserunt temporibus id quo, usu civibus concludaturque cu. Tamquam gloriatur eam ut. Ridens dissentiunt nam eu.[/css-div][/noparse]

This CSS looks better already. The extra space increases the readability and gives the text a bit of breathing room. But, unfortunately, the text looks a little minimal with only two lines. Now I'm going to add width to decrease the size of the box and artificially increase the size of the text.

[css-div="background-color: black; color: green; border: 2px solid green; padding: 10px; width: 600px;"]Lorem ipsum dolor sit amet, cibo veri doctus cu ius, nisl tincidunt duo ea. His rebum modus in. Fastidii deserunt temporibus id quo, usu civibus concludaturque cu. Tamquam gloriatur eam ut. Ridens dissentiunt nam eu.[/css-div]
Code:
[noparse][css-div="background-color: black; color: green; border: 2px solid green; padding: 10px; width: 600px;"]Lorem ipsum dolor sit amet, cibo veri doctus cu ius, nisl tincidunt duo ea. His rebum modus in. Fastidii deserunt temporibus id quo, usu civibus concludaturque cu. Tamquam gloriatur eam ut. Ridens dissentiunt nam eu.[/css-div][/noparse]

As you can see, forcing a set width can make your text look larger. Depending on your computer resolution and theme, PC's wide post box can stretch your text out and make it look small. Setting a reduced width through CSS makes it look bigger and more fulfilling even if the amount of characters is the same. Plus, it increases readability by keeping the eyes situated on a specific area where the text is, similar to a physical book.

Now, the next part I'm going to address is border-radius. We use this to give our boxes rounded borders. This property typically relies on personal taste. It's rare for me to make a CSS that doesn't use it as I have a severe dislike of pointy borders (if you looked at the examples of my CSS that provided above, you'll see one I made recently with pointed borders - I can make exceptions!). You can use exact pixels or a percentage. I typically stick to 15px - 40px.

[css-div="background-color: black; color: green; border: 2px solid green; padding: 10px; width: 600px; border-radius: 15px;"]Lorem ipsum dolor sit amet, cibo veri doctus cu ius, nisl tincidunt duo ea. His rebum modus in. Fastidii deserunt temporibus id quo, usu civibus concludaturque cu. Tamquam gloriatur eam ut. Ridens dissentiunt nam eu.[/css-div]
Code:
[noparse][css-div="background-color: black; color: green; border: 2px solid green; padding: 10px; width: 600px; border-radius: 15px;"]Lorem ipsum dolor sit amet, cibo veri doctus cu ius, nisl tincidunt duo ea. His rebum modus in. Fastidii deserunt temporibus id quo, usu civibus concludaturque cu. Tamquam gloriatur eam ut. Ridens dissentiunt nam eu.[/css-div][/noparse]

Usually when I make CSS, I like to center it in the middle of the post to create some balance. Centering through CSS itself is... actually quite hard, so I utilize PC's
tags, which works just as well.

[css-div="background-color: black; color: green; border: 2px solid green; padding: 10px; width: 600px; border-radius: 15px;"]Lorem ipsum dolor sit amet, cibo veri doctus cu ius, nisl tincidunt duo ea. His rebum modus in. Fastidii deserunt temporibus id quo, usu civibus concludaturque cu. Tamquam gloriatur eam ut. Ridens dissentiunt nam eu.[/css-div]​
Code:
[noparse][CENTER][css-div="background-color: black; color: green; border: 2px solid green; padding: 10px; width: 600px; border-radius: 15px;"]Lorem ipsum dolor sit amet, cibo veri doctus cu ius, nisl tincidunt duo ea. His rebum modus in. Fastidii deserunt temporibus id quo, usu civibus concludaturque cu. Tamquam gloriatur eam ut. Ridens dissentiunt nam eu.[/css-div][/CENTER][/noparse]

Now, what changed after adding that tag? You guessed it: the text centered as well. While this is personal preference, I generally think that text looks and reads better if it's left-aligned or justified. Thankfully, we can set independent text alignment using the text-align property, which has four options: left, center, right, and justify.

[css-div="background-color: black; color: green; border: 2px solid green; padding: 10px; width: 600px; border-radius: 15px; text-align: justify;"]Lorem ipsum dolor sit amet, cibo veri doctus cu ius, nisl tincidunt duo ea. His rebum modus in. Fastidii deserunt temporibus id quo, usu civibus concludaturque cu. Tamquam gloriatur eam ut. Ridens dissentiunt nam eu.[/css-div]​
Code:
[noparse][CENTER][css-div="background-color: black; color: green; border: 2px solid green; padding: 10px; width: 600px; border-radius: 15px; text-align: justify;"]Lorem ipsum dolor sit amet, cibo veri doctus cu ius, nisl tincidunt duo ea. His rebum modus in. Fastidii deserunt temporibus id quo, usu civibus concludaturque cu. Tamquam gloriatur eam ut. Ridens dissentiunt nam eu.[/css-div][/CENTER][/noparse]

And there we have it, a purely functional piece of CSS. Now that we've finished the CSS, let's run it through the Considerations checklist above to see if it meets all requirements.

1.) Were we considerate of different themes? Yes, we made sure that the text color was set to a single color across all themes. Every theme should be able to read the text within the CSS.
2.) Were we considerate of the minimum page widths? Yes, we set the width to 600px, so it won't stretch the page at all.
3.) Were we wary of fixed positioning? Yes, there is no fixed positioning in the CSS.
4.) Did we account for readability issues? Yes, we used a color that did not strain the eye and we chose a background color on which the text is readable.
5.) Were we considerate of spacing? Yes, there is enough blank space to make the text readable.

Congratulations! You've learned the absolute basics of CSS. In the next tutorial, I'll show you how to start making threads and the many options you have when it comes to how your thread will look. Until next time! Byeeeeeeee!​
 
1,405
Posts
9
Years
  • Seen today
Presumably the difference between css-div and css-span is the same between div and span in HTML, namely that css-div defaults to "display: block" and css-span defaults to "display: inline", which has some impact on how things like width/height, margins, and padding work (or don't work), among other things.
 

Trev

[span="font-size: 8px; color: white;"][font="Monts
1,505
Posts
11
Years
  • Age 27
  • Seen Nov 15, 2023
mgriffin, you're probably right! But since we can edit display in css-div, css-span is still probably useless.
 
Back
Top