CSS styling is an advanced World Anvil feature that gives you very tight control over what your world looks like—from details like text color to the overall theme of the world, and even animated elements. So if you want to see what CSS is capable of on World Anvil, here are a bunch of awesome examples from our community!
CSS is a coding language used all throughout the web, so it’s an advanced feature! But you can still style your world without CSS: Check out our guide to styling your world without CSS.
1. Genre-appropriate themes
One of the most important things about visual style is carrying the world’s genre and tone. A dark theme with gothic letters? That’s dark fantasy, or maybe noir. Translucent panels that look like holograms? Science fiction! The colors themselves also hold a lot of information; for example, pastel colors are often used for cozy fantasy. Our pre-made themes cover the popular genres, but this is a good place to start if you’re thinking of designing your own theme.
For example, the Yonderverse, by Mochimanoban, has a very clear genre in its theme. The title font, the light blue theming, and the transparency and glow effects all work together to give this world a clear futuristic look:
To make a theme that’s appropriate to your world, start by thinking about what feelings you want your readers to have. Then, look at other worlds (or even websites outside of World Anvil) to understand what design patterns are typical in your genre.
2. Alternate themes
Within a world you can also have variations to the main theme for specific pages! For example, in the Yonderverse, Mochimanoban used tropical-inspired colors for the planet of Hothiri and a gradient in the Glassy Trench to make the reader experience the idea of diving into the depths of the ocean. Check out the Yonderverse to see these examples!
Use the article-specific CSS to apply unique styles to a specific article. Check the guide to learn how!
Another great example of alternative themes is Solaris, by nnie, where she created a light variant of her theme. In her case, she has set it so the world respects the browser’s theme preference, with an option to let the user select their preferred theme as well. Notice the theme switcher at the top left, and check out Solaris to see it live!
The theme selector is done with subscriber groups! When a subscriber views a page, a unique class is added to the page, meaning that you can style the entire page based on which subscriber group the reader belongs to. Check this Learn page for more information.
Respecting the browser or operating system preference is done purely with CSS, so it’s beyond the scope of this blog post or our documentation. But check out this page from Mozilla’s CSS documentation to get started!
3. Components that add to the article
Beyond the overall CSS theme, you can also create special components that elevate the themes or story you’re telling in your article. There are so many examples of this on World Anvil, but let’s take a look at a handful of them!
Interactive broken mirror (kitoypoy)
In kitoypoy’s World of Wizard’s Peak, there’s an artifact known as the Cracked Mirror, which shows alternate versions of themselves. So to drive the point home, kitoypoy recreated the mirror with CSS! When you mouse over each of the shards, an alternate version of the character is revealed:
Check out Concordant Academy of Command to watch the magic happen! (You’ll need to scroll down to see the mirror)
Disorienting animation (Demongrey)
In their article about a condition that causes extreme disorientation, Demongrey added a CSS animation effect to give the reader a similar feeling. The words at the top of the article fade in and out of existence, becoming readable for just a moment before they become blurred again:
Check out “Lost” to see the animation in action.
Interactive leaflet (Leijona)
Leijona, in their world of Nebelfels, decided to write an information sheet for students… and wrote it as if you, the reader, was the student! So they used CSS to create a button that, when clicked, flips the information sheet so you can see what’s written on the other side of the paper!
Check out Student’s guide to Tanningen to see it live!
Portrait variants (eccbooks)
Eccbooks, author of The Blood of Seven Queens, also used a flip animation, but in a completely different way! His article about the Headless Horseman shows a portrait of the character, and when you mouse over the portrait, it flips around to reveal what he looked like before his head was cut off:
Check out Headless Horseman and mouse over the character portrait to see the effect!
All of these examples, and everything else we’ll see in this blog post, makes heavy use of custom containers, which let you create unique CSS effects in specific areas of the article. Check to guide to custom containers for details!
4. CSS styling to create additional navigation tools
World Anvil has a ton of tools to organize your content, but you can get even more with creative uses of CSS! Here are three awesome examples from the community:
Navigation boxes, aka navboxes (Nulcheck)
If you’ve spent any amount of time on Wikipedia, you’ve probably seen these at the bottom of many articles: a box packed with links to related articles. These are great to give your readers a clear sense of scope about a topic. For example, you could have a navbox with all animals in your world sorted by class (i.e. mammals, reptiles, etc) or by habitat. Or, like this example by Nulcheck, a navbox with all locations in their world of Legends of the Dragonguard:
Check out Ardenfell, by Nulcheck, (scroll to the bottom) to see the navbox.
To build a navbox, you’ll need a heavily stylized table. And, since tables on World Anvil can’t have merged cells, you’ll have to insert tables inside tables to replicate the effect of having some cells be larger than others. The result will be a very dense block of BBCode, so it’s recommended to place all of this in a variable so you can insert the navbox anywhere with a single BBCode tag. Check the guide to tables and the guide to variables for details!
Organize your content with tabs (Those2Nerds)
Tabs are a great way to organize pieces of content of the same type because they break down the information into smaller paragraphs that you don’t even need to scroll down on to read! In this character article by Those2Nerds, they use tabs to describe the connections between the character and various parts of the world (other people, locations, and even their RPG campaign!):
Check Angela, by Those2Nerds, (scroll to the bottom) to see the tabs!
Historical events with mini-timelines (nnie)
World Anvil has a dedicated timeline feature that works great to represent your world’s history, or even the history of a character or location. But very often, individual articles will only mention two or three events, and that’s where this mini-timeline can come in handy! In this article, nnie decided to present three major events related to it like a timeline:
Check the Scorching of Mercury, by nnie, to see it live!
5. CSS and the Rule of Cool
There are so many other things you can do with CSS—we’ve barely scratched the surface. And sometimes, the only reason you need to use CSS is that it looks cooler that way. So, to close this blog post, let’s take a look at a couple more examples!
Hidden random tables (Catoblepon)
The world of Vaelis, by Catoblepon, is an interactive narrative story, and in one of the chapters they use a random table to randomly determine the result of an event. Generally, random tables display every single option and highlight the result—but in this article, to keep the mystery, they hid all options except the result! The article looks much cleaner this way:
Check out Tuskfair Ranch and click the Roll button!
To do this, you’ll need to use interactive tables for the random table mechanics, wrapped in a custom container that hides everything but the selected option.
Parallax effects (Nulcheck)
Nulcheck, author of Legends of the Dragonguard, has customized their homepage so much it barely looks like a World Anvil world! Its most eye-catching feature is the parallax effect: the foreground and background scroll at different speeds:
The effect only works on the real page, so make sure to check out Legends of the Dragonguard to see it!
How are you using CSS in your world? Leave a comment and share yours! Check the guide to CSS to learn more about using CSS on World Anvil to style your world.
![CSS: Fixing [small]’s line height (Text Mods Month)](https://i0.wp.com/blog.worldanvil.com/wp-content/uploads/2019/12/wizard-text-mods-month-2.jpg?resize=440%2C264&ssl=1)
Great list! So cool to be included!