With CSS, you can define exactly what your world looks like, from text color to fully interactive and animated elements. Most of the time, you'll use CSS for general elements of your world, but you can also be very specific and style only articles that firt certain conditions: some features of World Anvil add additional classes to the articles, which you can use as CSS selectors.
If this sounds too complicated, check the guide to CSS first! CSS is a technical advanced feature.
Article classes
All classes in this section are automatically applied to the entire article under specific conditions (described below). Unless otherwise specified, the classes are applied to the same element that has the user-css class. So, for example, if you wanted to style all Species articles, the CSS selector would be .user-css.template-species.
Learning CSS is beyond the scope of our tutorials, as it's a general web standard. Check the guide to CSS for some resources, as well as the limits of what you can do with in on World Anvil.
The easiest way to see which classes are applied to an article is opening developer tools and look for the element that has the user-css class. This is the full list of classes that are automatically applied on an article level:
- Subscriber groups: When a logged-in user who is part of a subscriber group opens an article, the article will load with an additional class for that subscriber group. This lets you change the CSS based on whether the reader is a member of a particular subscriber group or not. This class follows the structure subgroup-ID, where ID is the subscriber group's unique identifier, which you can get by copying the subscriber group container code.
- Article tags: Each tag you add to an article also becomes a class, following the structure tag-ID, where ID is the tag itself. For example, if you tag an article with "factions", the class will be tag-factions. Check the guide to tags for more information about this feature.
- Article template: Every article has a class that represents its article template. For example, template-species or template-militaryConflict.
- Article status: Articles with the Draft or WIP statuses get the classes article-draft and article-wip respectively.
- Category: The category an article belongs to is added to the article's classes as category-ID, where ID is the category's unique ID.
- Article ID: Each article has a unique ID, which you can see in mention system links and article block BBCode tags. This ID is applied as class in the form of article-ID.
- Custom CSS classes: You can apply custom CSS classes to individual articles under Styling settings.
Article blocks
Additionally, when you embed an article block (learn how), the article block includes all custom classes you've defined in the article, as well as the article template class. For example, if you wanted to style all article blocks for Language articles, you could use .article-panel.template-language.
