What is CSS?
Restructuring the Codex
We are currently moving articles around and changing the general structure of the Codex. Please come back later if you get lost!Getting Started
This guide is intended to give a general overview of what CSS is and offer links to deep dive into various related topics. This guide is mostly intended for people who do not know much or anything at all about CSS but wish to learn the basics. This should help in making quick changes to the layout of your page the way you want it.If you just want to make a specific change like switch out a font or change a color you do not need to read all of this. Just find the CSS article guide which covers the component you want to change and go from there.
Naturally if you are familiar with CSS you can skip ahead to the next guide CSS on World Anvil.
What Is CSS?
CSS stands for Cascading Style Sheets. It is used to tell the browser how to layout and style a webpage. It’s a simple language that defines style rules that change how elements on a webpage look. A CSS sheet can have several rules defined in it. A rule consists of two parts: the selector and the declaration block.The selector tells the browser which element on the webpage should be affected by this rule. The declaration block tells the browser how to change the selected elements. Every element in a webpage has a number of properties that can be affected by these declarations. These properties include things like font-style, font-size, border and more.
As CSS was and is mainly designed to affect HTML webpages it might be necessary to read up on HTML as well.
To fully learn about CSS, Mozilla has excellent guides on the topic: Learn to style HTML using CSS.
Basics
The sections below will cover the basics of what CSS entails. This is intended as a starting point for you to learn how to use CSS yourself. If you do not wish to learn CSS, but instead just want to change a small thing you can see if that is covered in one of the guides on each component.If at any point you are stuck, you can come to the World Anvil Discord server and ask your question in the channel #guild-css-help. There are a number of World Anvil users who have a deep understanding of CSS and can help guide you through the process of what you want to achieve.
Keep in mind that although CSS can do many things not everything might be possible exactly the way you want it.
This guide is not intended for you to fully grasp everything about CSS. It simply names and describes some of the core concepts so you can google properly!
Basic Example - Click to Expand
This basic example will change the bold BBCode text to be chocolate brown:
.user-css b {
color: chocolate;
}
Inspect Webpage
In order to effectively explore a website, you should use the Inspect tool and the developer console. It can give you useful information on why something is displayed the way it is. This is of course very useful if something does not display the way you expect it to. Being able to read and use this tool will take some time to learn, but if you plan on doing extensive CSS work it will definitely be worth it.To get started press right-click on the element you wish to know more about and select inspect in the context menu.
Selectors
The selector is the first part of each CSS rule you define. As mentioned it will determine which elements of the webpage are affected by your changes. It is good practice to make your selector as specific as possible. Otherwise, you can run into the problem that the rule is applied in situations where you do not want to see it.In the above example the selector is the text .user-css b. You can find a full reference on what selectors exist here.
Declaration Block
The declaration block is always surrounded by { and } to define it. Each line of the declaration block contains a property name, a colon, a property value and a semi-colon. This structure is always the same. The property name tells you which property of the selected element is changed and the property value provides the how.Here, the inspection tool and google are your friends. Once you have the name of the property you can easily find out what kind of values it accepts.
Variables
In CSS you can use variables to store values which you use in many places in one specific name. Then you only have to remember that and insert a specific color in many places. And it helps you later if you ever feel that that color needs to change!Define Variable - Click to Expand
.user-css {
--main-bg-color: pink;
}
Use Variable - Click to Expand
.user-css b {
background-color: var(--main-bg-color
}
CSS Guides
Getting Help
The best place to get help with CSS is on the Discord. There is a channel called #guild-css-help with many awesome and helpful people!HTML Colors
Whenever you want to change the color in something you need an HTML color either as a hex-value or as a name. There are many tools out there that will help you find the color you want. These are a few examples picked out. There are many more tools like these out there!Addidional Guides
Maybe I missed something, but when I click on the CSS Guides link above, I get an access denied message. Is the link broken or am I doing something wrong?
The category was still private, which is why you got access denied. Forgot to change it when I published the guides. Thanks for commenting and it should work now.