CSS Basics Cheat Sheet

The World Anvil Codex does a great job of explaining what CSS is, so I'll try to keep this as short as possible. To summarize, CSS stands for Cascading Style Sheet. You've probably heard CSS and HTML used together - HTML defines the structure and content of a web page, while a Cascading Style Sheet is a web document that lets you change how HTML looks.

On World Anvil, we use BBCode instead of direct HTML.

This article is more of a reference than a detailed explanation, but there are many helpful tooltips that give more information, so keep an eye out for those. Keep in mind that only the most basic topics are listed here, but it should give you a good starting point from which you can build in the future.

Overview

CSS is used to style BBCode (and HTML) elements on a web page by giving each element its own style declaration. A style declaration looks like this:

selector {

  property: value;
}

Properties/values are always between curly brackets

Start tag, content, and end tag make an HTML element.

Class attributes point to a class name in CSS. Multiple BBCode/HTML elements can share the same class.

Id attributes point to a specific style declaration in CSS. There can't be more than one element with the same id.

Selector: The tag, class or ID that is being targeted and styled

Tags are displayed without brackets BBCode

[h1] [/h1], or <h1> </h1>
Class names begin with a dot BBCode

[container:mycontainer], or <div class="mycontainer">
ID names begin with a BBCode

[url:#anchor-id], or <a href="url#anchor-id">

Property: Predefined terms within CSS that all web browsers understand.

Always followed by a colon BBCode

color: black;

Value: The specific style you choose to assign to the property.

Always followed by a semi-colon

Adding a class to a BBCode Element

When you want to target a specific BBCode element, you can add a class to it like so:

Syntax

Example

[tag:classname]Content inside the tag[/tag]

[container:mycontainer]Cool things are here.[/container]

On World Anvil, a [section] is an inline-block element, and a [container] is a block element by default.

An inline element does not begin on a new line and only takes up the space necessary.

Inline element Text outside of the element.

A block element always begins on a new line and fills the entire available width.

Block element

Text outside of the element.

This article on W3Schools explains block and inline elements in greater detail. It's well worth the read because it will effect your styling!

For Grandmasters +

Containers and Sections are for guild members Grandmaster and above. If you're not subscribed at that level, you can upgrade your membership on your account page.

(Grandmaster icon property of World Anvil.)

For those who are somewhat familiar with HTML/CSS, it’s helpful to think of a [section] as a <span>, and a [container] as a <div>.

Targeting Nested Elements

If you want to target several things within one parent element, the easiest way would be to give the parent element a class name and then target the individual elements within that.

For example:

[container:mycontainer]

  [img:1234567]

  [p]Here’s a sentence following an image.[/p]
[/container][/noparse]

We can target the [img] and [p] tags within like this:

.mycontainer img {

  width: 50%;
}

 
.mycontainer p {

  font-weight: bold;
}

On the World Anvil platform, .user-css is the main class that holds most of the classes that can be changed. This means that .user-css must be at the beginning of any CSS modifications we make. The only exception is for custom containers.

The World Anvil Codex has all of the specifications and is a must-read to understand what you can and can't change. Breaking the rules is a violation of the terms of service and may lead to a block on your account!

Properties Cheat Sheet

Here is a list of common properties and values you will likely come across or use on your page.
(Replace green text with your values!)

Font Properties
font-family: your font here; Example .mycontainer p { font-family: Arial, sans-serif; }
font-size: values can be px, pt, em, rem, %; Example p { font-size: 12px; }
font-weight: normal, bold, or number; Example p { font-weight: 400; }
font-style: normal, unset, italic, or oblique; Example p { font-style: italic; }
font-variant: normal or small-caps; Example p { font-variant: small-caps; }
text-decoration: none,underline,overline,line-through; Example a { text-decoration: none; }
text-transform: none,uppercase,lowercase,capitalize; Example p { text-transform: uppercase; }
line-height: 1 = font size, 2 = double spacing; Example p { line-height: 1.3; }
text-align: left, right, center or justify; Example p { text-align: justify; }

Color Properties
color: hex code, name, or RGB value; Example p { color: #1bded1; } p { color: pink; } p { color: rgba(27, 222, 209) ; }
opacity: any value 0-1; Example img { opacity: 0.5; }
background-color: any color value; Example .mycontainer { background-color: #1bded1; } .mycontainer { background-color: rgba(27, 222, 209, 0.5) ; }
background-image: url(image path/URL goes here Example .mycontainer { background-image: url(https://www.site.com/imagename.png) ; }
background-repeat: repeat, repeat-x, repeat-y, no-repeat; Example .mycontainer { background-repeat: no-repeat; }
background-position: center, top, right, bottom, left; Example .mycontainer { background-position: top; } .mycontainer { background-position: bottom right; }

Border Properties
border-width: value can be px, pt, em, rem, %; Example .mycontainer { border-width: 3px; }
border-style: none, solid, dotted, dashed, double, in/outset; Example .mycontainer { border-style: dotted; }
border-color: any color modes, i.e., hex, name, rgb; Example .mycontainer { border-color: #1bded1; }
border-radius: value can be px, pt, em, rem, %; Example .mycontainer { border-radius: 3px; } .mycontainer { border-radius: 0 0 5px 5px; }

Display Properties
width: value can be px, pt, em, rem, %; Example .mycontainer { width: 100%; }
height: value can be px, pt, em, rem, %; Example .mycontainer { height: 300px; }
min-width: value can be px, pt, em, rem, %; Example .mycontainer { min-width: 400px; }
min-height: value can be px, pt, em, rem, %; Example .mycontainer { min-height: 400px; }
max-width: value can be px, pt, em, rem, %; Example .mycontainer { max-width: 1000px; }
max-height: value can be px, pt, em, rem, %; Example .mycontainer { max-height: 1000px; }
display: none, block, or inline-block; Example img { display: none; }

Margin + Padding Properties
Margin adds space outside of the element. Padding adds space inside the element. See box model below for visual.
margin: value can be px, pt, em, rem, %; Example .mycontainer { margin-top: 20px; } .mycontainer { margin-left: 20px; } .mycontainer { margin: 20px; } .mycontainer { margin: 10px 20px 20px 0; } .mycontainer { margin: 20px 5px; }
padding: value can be px, pt, em, rem, %; Example .mycontainer { padding-bottom: 20px; } .mycontainer { padding-right: 20px; } .mycontainer { padding: 20px; } .mycontainer { padding: 10px 20px 20px 0; } .mycontainer { padding: 20px 5px; }

Margin + Padding Properties

Margin adds space outside of the element. Padding adds space inside the element. See box model below for visual.

margin: value can be px, pt, em, rem, %; Example

.mycontainer {

  margin-top: 20px;
}

 
.mycontainer {

  margin-left: 20px;
}

 
.mycontainer {

  margin: 20px;
}

 
.mycontainer {

  margin: 10px 20px 20px 0;
}

 
.mycontainer {

  margin: 20px 5px;
}

padding: value can be px, pt, em, rem, %; Example

.mycontainer {

  padding-bottom: 20px;
}

 
.mycontainer {

  padding-right: 20px;
}

 
.mycontainer {
  padding: 20px;
}

 
.mycontainer {

  padding: 10px 20px 20px 0;
}

 
.mycontainer {

  padding: 20px 5px;
}

The CSS box model is basically a box that goes around every BBCode (or HTML) element. It has margins, edges, padding, and the content. The box model lets us put a border around each element and set how much space there should be between them. W3Schools does a thorough job in explaining it, so for a more detailed break down, head that way. It's an invaluable reference to have!

To avoid repetition, the World Anvil Discord has many pinned messages in the css-help channel that explain how the inspector works and it's value for CSS, but it's worth mentioning that the box model for any given element on the page is viewable through this, so have fun experimenting! It'll only make you more comfortable with whole process of writing CSS.

Margin

Border

Padding

Content

Wrapping Up

That's it for now, but I hope this was useful and helps you in your work. As I go through my own journey, I will share what I learn with you guys, and I look forward to seeing all the neat things we can create!

CSS Reference

If you'd like to learn more about CSS, check out FreeCodeCamp and w3schools' CSS Reference.

The WA Codex is a good place to start learning about how to play in WA.

WA's discord #guild-css-help channel is also great. I hang out there just to learn from what people ask about.