CSS: What I wish I knew as a beginner

If someone told me a while back that I’d be interested in learning something called CSS, I would’ve laughed and called them crazy. But, as with many things, World Anvil changed that too. Seeing so many amazing worlds brought to life not just through stunning writing and art, but also through their design, awakened a stubborn little voice in my head. One that insisted: “You can do this too!”

And you know what?

A Moment of Truth: CSS is Scary

There, I said it. It’s intimidating. When you first encounter it, it feels alien, and honestly, that’s completely fair. It’s like learning a foreign language. At first, nothing makes sense. You see all these weird symbols, the rules are unclear, and it feels like you’re just guessing.

But that’s okay. The real reason it’s confusing is simple: you don’t know how to think in that language. Yet.

Now, I might sound confident, but trust me, this is mostly an illusion. This community has real experts in design, HTML, CSS, and everything in between. So, if you’re reading this, please take everything I say with a grain of salt. These are simply the things I’ve figured out that work; even if I don’t always know why they work.

And if you ever run into something that should be working but isn’t? There’s a magical place for that: the World Anvil Discord Server.

The #css-help channel is an endless library of wisdom, filled with CSS wizards like Stormbril, Annie Stein, Rin Garnett, Han, Buzzard Brain, and so many others who are kind, helpful, and endlessly patient. Be specific, share the link to your issue, be polite (I cannot stress that enough!), and answers will flow.

CSS Classes & the power of the Inspector

When I first started out with CSS, words like these: selector, class, target, element etc, made me feel like I was hacking into some spaceship UI. But trust me, it's much simpler once you get the hang of it. Let's crack the code!

Step One: Ground Rules

Anyone with a Master tier or higher can start customizing their world with CSS. There are two main ways to do this:

• World CSS Editor: This can be found by clicking the little white palette icon on the right side of your world. Any changes you make here will apply to your entire world.
• Per Article CSS: You will find this under the “Design” tab of any individual article. Any changes made here will only affect that one article.

Before you dive in, it’s important to understand the structure World Anvil uses. You can’t style everything, but you can style a lot, as long as you know and follow the rules. On World Anvil, the content you’re allowed to style is wrapped in specific CSS classes. The most important ones are:

1. .user-css: Think of this as your main sandbox. It applies to the core content of your world and you will use it 90% of the time.
2. .user-css-extended: This reaches beyond the main body of your articles. It's not used so commonly, but it is useful for things like your comment box.
3. .user-css-presentation: Limited use only. You can use this to change your world’s global background, but most other changes here are restricted to preserve World Anvil’s branding.

   Think of these classes as access points: everything you want to style has to be targeted through one of them. And to figure out what class something belongs to, or how to target a specific element you need to meet your new best friend: the Inspector.

   But before that... what are the elements?

   Think of elements as the basic building blocks of a webpage. They’re like the LEGO bricks that make up everything you see: paragraphs, images, headers, blockquotes, buttons, links etc. In CSS, we can style these building blocks to look however we want.

   Now, these elements live inside or alongside classes, which are like labels we give to certain groups of things to style them in a specific way. You’ll need to combine the two when writing CSS for your world.

   An example

   Let’s say you want to style the appearance of a quote box so that the color of the text is red. The element that describes that is blockquote. To target it correctly, you need to define the class it lives in. In this case, it’s the main body of your world, so we’ll use .user-css. So, the code you will be using will look like this:

   .user-css blockquote { color: red; }

   You found a portal-quote

   "When all hope was lost, they turned to their guardians, the great deities of the oceans, and begged for their mercy one last time."

   Activate the Portal   Then return to the Anvilgate to cross it!
    

   Now, you have two options:

   • If you write this in your css-editor (the white palette), you are practically saying: “Hey CSS, I want you to find every blockquote inside my world and make the text red!”
   • On the other hand, if you write it under the design tab of an individual article, you would basically saying: "Hey CSS, I want you to find every blockquote inside this specific article and make the text red!"

   Easy right?

   But wait! "How do I know that quote boxes are called blockquote in the first place?", I hear you asking.

   Here is where your new best friend - the Inspector - finally comes into play

   Step Two: What is the Inspector?

   Let me tell you a little secret: I didn’t really understand how to use CSS until I discovered the browser inspector tool. Up until that point, it felt like I was just throwing random code at the page, hoping something would stick. Once I started using the Inspector, everything changed.

   How to open the Inspector

   The Inspector is a tool built into your browser (Chrome, Firefox, Edge; they all have it, I think). It lets you peek under the hood of any webpage and see how everything is built. The best part is that when you move your mouse over parts of the page, the Inspector highlights exactly what you’re pointing at.

   

   If you click on that part, the Inspector shows you the CSS classes and styles that control it. This means you don’t need to guess or know HTML, just hover, click, and see what CSS you can target. You can see all these in the image at the side. Here I have inspected the header above and you can see the CSS I used for it.

   To open the Inspector, right-click on any part of a page and select “Inspect” or press Ctrl+Shift+C. Try it now: hover over the aloud box below and click it to see what CSS is controlling it. You can even test style changes right in the Inspector without saving anything, so don’t worry, nothing will break.

   Inspect this box! Can you find the CSS associated with it? The spoiler below hides the right answer.
   Show spoiler

   .aloud { border: 1px #a0b9a0 solid; font-style: italic; margin-bottom: 10px; padding: 10px; background: #d7e8d1; color: #196719; font-size: 1.1em; line-height: 1.3em; }

   This is the default CSS that controls the appearance of an aloud box. As you can see, this element does not have the .user-css class before it. Yet, if you decide to change its appearance you must always adress it by adding .user-css in front of the .aloud (and almost any element you try to manipulate). I'm not 100% sure why that is, but it's the World Anvil rules and I trust it.

   Some extra help to get you started

   I know all of this can feel overwhelming, especially if you have no experience with CSS, just like I did. CSS is a magical trap that, once you fall into it, opens up a world of endless possibilities. It’s a process of constant learning and a playground for amazing brainstorming sessions with the incredibly creative minds in this community.

   So, to help you get started, here are some of the most common elements you can target to elevate the look of your articles. Experiment, have fun, and don’t be afraid to try new things!

    
   ***You might have noticed that some of the elements in the table above aren’t written with a dot before them: like blockquote. I have no idea why this is, but if you try to put a dot in front of it, it just doesn’t work. If anyone knows the answer, I’d love to hear it!

   Step Three: What’s Next?

   Alright, you’ve made it this far; you can identify elements, use the Inspector, and even target them with CSS. So… what now?

   Now we make them look cool.

   This is where the real fun begins. By applying some basic style properties, you can start transforming how things appear in your world. From changing colors to resizing text or adding cool borders, this is the part where your creativity gets to shine.

   When I first started, this part was painful. I remember opening the CSS editor, typing something like text color = red, and nothing happened. I had no idea I was supposed to write color: red; instead. I must have tried ten different wrong ways before I found the correct one... by accident since I was still too shy to ask in the discord server. Don't be like me. Ask! It's the fastest way to learn!

   This stuff looks simple, but it has its own weird grammar, and the smallest typo breaks everything. So don’t feel bad if it doesn’t work the first (or fifth) time. It’s normal. You’re learning a new language.

   To make things a little easier, here are some of the most common and beginner-friendly CSS properties you can try right away. These properties are written inside your CSS rules, after the selector (the class+targeted element), and they define how an element should look; things like its color, size, spacing, borders, and more.

    

   Final Thoughts

   If you’ve made it this far, thank you! I hope you’re feeling a little less scared of CSS. When I first started, it felt like I was trying to whisper instructions to a very picky genie who only listened if I said the exact right words. It was frustrating and confusing. But once things clicked - even just a little - it opened a door. Not just to make things prettier, but to make them yours. The tiniest change felt like magic.

   So don’t worry if you forget a semicolon, or your headers look weird. Just keep experimenting. Play. Ask questions. Check other people’s styles, get inspired. Tweak things on your own until they break (then fix them again).

   That’s how you learn.

   You don’t need to master everything. You just need to start. And now, you have.

    
   P.S. There’s a very real chance that I’ve used incorrect terminology here. Maybe I called something an element when it’s actually a class, or mixed things up the other way around. If you spot something like that, please let me know! I’m still learning too, and I truly appreciate the help.