Help » Learn CSS

Why CSS?

CSS is what we use to create custom group and character styles. If you have questions about custom styles that have nothing to do with CSS, check out the custom styles FAQ.

Most of the time, the RP Repository is on a mission to make things simpler and easier. But when it comes to designing your own custom styles, you should have the power to make it look like anything you want. That's why custom styles are written in CSS, the very same tool professional web designers use: So you can have the same level of control as us when it comes to designing custom looks for your character profiles.

To learn CSS, you need to know something about HTML.

I’m about to give you the world’s fastest HTML primer.

On any website you look at, HTML provides the structure, and CSS provides the style.

Here’s practically everything you need to know about HTML to get started:

1. HTML tags determine what sort of thing an item on the page is, like a paragraph or a title or an image.
2. Different paragraphs or titles can have names, so you can tell one from another.
3. Most kinds of HTML objects, such as titles, can go inside of other things. Taken all together, the structure of what contains what is known as the “box model”.

Here’s a diagram of the box model on character profiles.

As a quick example, you can see that the character’s portrait is an image, contained inside a division tag. (A division tag is just something used to group related items together. Think of them as boxes, into which content is divided.) This division is named the portrait container, which is inside another division named charHeader. charHeader also contains the character name, the player, and the navigation links.

Simple! It’s a box with stuff in it. Everything in it is carefully labelled, so you can find it.

There are two types of labels an HTML element can have. A class, or an ID. You don’t need to know anything about classes and IDs to start using CSS. All you have to remember is that they’re both just a way of labelling an HTML object. A class is represented by a period, and an ID is represented by a pound sign.

Let’s review:

1. HTML identifies what stuff is on a webpage, like paragraphs, titles, and images.
2. That stuff can go inside other stuff.
3. All of it can be labelled with a class or an ID.

Okay, now you’re ready to start writing CSS.

Your first CSS

First, declare which object on the page you want to change. I want to change the color of all my widget titles. So, I will check the box model diagram and find widget titles. I see that their label type is a class, because they’re prefaced by a period.

So I write:

This instructs all HTML objects with the class widgetTitle to change themselves to look like the instructions I put inside the curly braces.

So let’s put some instructions in there.

Notice that I put a semi-colon after each instruction. It means "I'm done with this instruction. I'm about to give you a new one.” It's very important not to forget your semi-colons!

Now all my widget titles will look like this:

Common CSS styles

Now that you know how to select HTML elements and apply styles to them, let's take a look at some of the most common and useful CSS instructions that you might want to give.

1. Color

   Example:
   p {
   color: red;
   }

   Color refers to the text color. You may enter color names (e.g. red, blue and yellow) or HEX codes.

2. Background

   Examples:
   p {
   background: blue;
   }

   p {
   background: url(http://www.example.com/img.gif) repeat;
   }

   This is the style that you would use to change an element's background color. Or, for more advanced users, you can specify an image to use as a background. As above, both color names and HEX codes are acceptable.

3. Float

   Examples:
   #charheader {
   float: left;
   }

   #charheader {
   float: right;
   }

   #charheader {
   float: none;
   }

   A floated element will move as far left or as far right as it can. Usually, that means all the way to the edge of the containing element.

   Elements after the floated element will flow around it -- but only if they can fit.

   Elements before the floated element will stay the same, and may block the attempts of the floated element to get to the edge.

   For example, if you float an image to the left, any text that comes after it will flow around it.

   Floats are a very powerful CSS style. They can be a little tricky to master, but few ways are better to learn its nuances than testing it out for yourself.

4. Margin

   Examples:
   p {
   margin: 15px;
   }

   p {
   margin-right: 20px;
   }

   p {
   margin: 10px 20px 20px 10px;
   }
   In the above example, the margin sizes refer to top, right, bottom, left.

   Margins creates clear space around the outside of an element (outside of its border, whether the border is visible or not.)

   You can define a margin for a single direction, margins that goes around all sides of the element, or a different margin for every direction.

5. Padding

   Examples:
   p {
   padding: 15px;
   }

   p {
   padding-right: 20px;
   }

   p {
   padding: 10px 20px 20px 10px;
   }
   In the above example, the padding sizes refer to top, right, bottom, left.

   Padding creates clear space around the inside of an element (inside of its border, whether the border is visible or not.)

   You can define padding for a single direction, padding that goes around all sides of the element, or a different padding for every direction.

6. Font-family

   Fonts on the internet are extremely tricky. Typically, a computer can only display the fonts that are installed on it. The catch for web designers is that they can never rely on their site visitors to all have the same fonts installed on their computers. In fact, the fonts that are installed by default is different by operating system, by OS version, and by year.

   That's why CSS provides something known as a "font stack."

   It looks like this:

   Example:
   p {
   font-family: cambria, "times new roman", arial, helvetica, sans-serif;
   }

   When a browser displays your page, it will try to use the first font that you've specified. But what happens when that font isn't installed? It digs down into the stack and tries the next one. And the next one. Until it finds something that it has installed.

   The last item in your font stack should always be a generic category of font. The two most commonly used categories are "serif" and "sans-serif". If the browser goes all the way through your wish-list of fonts and still can't find anything that matches, it will pick a font out of the category that you've provided on its own.

7. Font-size

   Examples:
   p {
   font-size: 17px;
   }

   p {
   font-size: 1.2em;
   }

   Font size can be specific in pixels, in percentage, or in ems.

   An 'em' is basically a measurement based on the default size. So, 1em is the current default. 2em is double the current default. 3em is triple, and so on and so forth. With an em, you'll never really know what size of font your visitors are seeing. If they have the default font size in their browser turned up really high, it could be huge. If they have it turned down, it could be itty bitty. Therefore, it's a real disadvantage to designs that require exact sizes. The advantage to ems is their flexibility -- if someone has their default font size turned way up, it may be because they have poor eyesight, and won't actually be able to read a smaller font size.

8. Width

   Example:
   p {
   width: 250px;
   }

   Width determines how wide an element is. It can be declared in pixels, or in a percentage of the containing element.

9. Height

   Example:
   p {
   height: 250px;
   }

   Height determines how tall an element is. It can be declared in pixels, or in a percentage of the containing element, although height by percentage is not always reliable.

You can get a whole lot of work done with just these nine simple CSS styles.

Tips for making robust, flexible styles that will still look right no matter what browser you are using.

1. If you aren't using them, be sure to set #leftheaderside and #rightheaderside to display: none.

2. Remember that your style will be viewed on all sizes of monitor. Don't make your style too small, or else it will become unreadable for people with large or high resolution monitors. But don't make the style too big, either, or you will cause the page to start scrolling horizontally for people with small monitors.

   If you can, try looking at your style not just on your home computer, but also on friends' computers as well. You may be surprised how different the same page can look on different screens!

Other resources for learning CSS

Of course, the best way to improve is to practice -- but when you want to expand your horizons beyond this basic primer, you'll want some more robust references.

Here's some suggestions of where to start:

• w3school's CSS Reference

  w3 school has a number of online CSS tutorials that can be very helpful. They are also a fantastic reference, for looking up new CSS style instructions, or learning more nuanced ways of using old ones.

• CSStutorial.net

  In-depth explanations and lots of helpful videos.

• Google

  Have a question? Google probably has the answer.

If you have a specific question, you may be able to get an answer on our Art & Creativity forum.