Custom CSS

Writing custom CSS is fairly straightforward, but there a couple of gotchas. If you don't know CSS, I absolutely recommend you read up on it a bit like here or via Codeacademy. This guide won't teach you how to write CSS per se, but it does include some gotchas and tips.

Structure

The first recommendation is to use Right-Click > Inspect in order to see the structure of the HTML. It may not always be in sync with this document, as a word of warning, or some of the settings you're using may change the structure itself. Also note that if you are using a theme other than Default Dark, you may run into specificity issues, which can be a PITA.

Most commonly used css properties:

.selector {
  width: 200px;
  height: 200px;
  background: red; // or hex code or rgb code, etc
  color: white;
}

There's no limit to what you can do -- you could even animate your Result!

Recipes

Add drop shadows to Pokémon sprites

.pokemon-image {
   filter: drop-shadow(0 0 4px black)
}

Target a specific Pokemon, or set of Pokemon

.pokemon-container[data-nickname="Zappos"] {
   transform: rotate(180deg); 
}

Here, we target all Electric typed containers, select the image, and apply a skew to them.

.pokemon-container[data-types*="Electric"] .pokemon-image {
    transform: skew(-20deg);
}

Note: this would also work with data-species="Raichu", etc. Read about the attribute selector format.