Hey kid.
I’m Fish^12. Wanna learn CSS? This is the second installment of my CSS series. Make sure you're properly caught up before reading this guide.
This time, we're going to be talking about the more technical aspects of CSS. Very boring stuff, I know, but you're gonna need to know this stuff before we can move on to the cool shit, like making themes.
Preface: This guide is intended for beginners. If you know how selectors, classes, and :root works, you can downvote this guide.
THE SYNTAX
Last time, we covered the period in the syntax of a div. There's also a variant which uses the octothorpe (#), or uses nothing at all. Observe.
#page-title {
text-indent: 1em;
}
This is an ID. The octothorpe specifies an element that should only exist once per page, which also means that ID will override class. Generally speaking, you're not going to be making these things; instead, you're mostly going to be modifying them.
Examples of other IDs.
- #header
- #top-bar
- #side-bar
- #toc
- #footer
- #license-area
If you're feeling like a detective, you can kind of guess what each ID is targeting based on its name. If you search around with inspect, you're bound to find some of these.
.blockquote {
text-indent: 1em;
}
This is a class. Class is generally used multiple times in a single page, which allows you to easily stylize multiple elements simultaneously. We've covered how to make your own in the previous essay.
Examples of other classes. It's a bit more difficult to guess what each of these will do just based off of its name, so I will be elaborating on their use.
- .owindow — Stylizes the pop up window when you click on someone's user profile, when you experience an error, or when you're saving your article.
- .page-options-bottom — All the options at the bottom of the page, like Edit and History.
- .yui-navset — Handles some of the formatting for tabs.
- .page-widget-box — Stylizes the small boxes in the rating module.
p {
text-indent: 1em;
}
"Hi! I'm an indented paragraph."
This one is a tag which targets a specific type of element, in this case, p is short for paragraph. This is basically targeting each time you've got a line of text. Very helpful for stuff like adding a text-indent to the beginning of each paragraph for that novel look.
Examples of other tags. I will also be elaborating on their use.
- a — Stylizes links and other interactable text.
- h1 — These are the header titles you can make with +. Goes all the way up to h5.
- tr — Stands for table row. The table element also has td (data cells) and th (header cells), among others.
- ul — Stands for unordered list. Used for creating lists. There's also ol (ordered list).
- li — Stands for list item. This is the listed item that works with ul and ol.
Note: You'll also find these tags on other sites; they are built into HTML/CSS and their naming conventions are not specific to Wikidot. You can't make your own tags, unfortunately.
Remember how I said that the crux of these guides will be making a theme for yourself? What I just told you are all classes and selectors that are part of the base Sigma-10 theme. When you modify them, you'll directly affect the page.
This is a step towards making your own theme.
THE SYNTAX STRIKES BACK
CSS has a powerful supplement to the standard classes called pseudo-classes. They generally add a lot of functionality/specificity beyond what standard selectors are capable of doing in a concise manner.
Pseudo-classes come in many flavors but we're only gonna be focusing on one particular pseudo-class today; it is the tool for setting up themes in a concise, organized, and consistent manner.
:root {
--carbon: #323232;
}
.blockquote {
background: var(--carbon);
}
The :root pseudo-class allows you to set up custom variables for easy access. For example, in this case, we declared that the variable --carbon is equal to #323232, so whenever we use var(--carbon), it'll automatically take on that specific color.
This helps keep your code consistent across an entire page, lets you modify all elements that use those variables in a single edit, allows other people to easily see how your CSS is laid out, helps reduce the amount of CSS you have, and helps speed up the creation process.
You can also name the variable whatever you want; in this case, I've named it carbon, because I will remember that easily.
Variables are also not limited to colors.
:root {
--carbon: #323232;
--customBorder: 0.4em double pink;
--importedFont: "Major Mono Display";
--standardWidth: "2em";
}
.blockquote {
color: var(--carbon);
border: var(--customBorder);
font-family: var(--importedFont);
padding: 10px var(--standardWidth);
}
Here, we've also got a custom border, a custom font, and a custom size.
Additionally, themes such as Sigma Plus and Black Highlighter both use variables to help style, so there are pre-existing variables that you can manipulate without having to modify entire classes.
For example, if you're using Sigma-10…
#header h1 a::before {
content: "SCP Foundation" !important;
}
#header h2 span::before {
content: "Secure Contain Protect" !important;
}
Note: The !important property overrides all other styles. The only way to override the !important property is to have another !important property of higher specificity. It is extremely intrusive and can quickly become messy when used, so it is better to never use this property!
…instead of doing this to change the header text, you can instead…
:root {
--header-title: "SCP Foundation";
--header-subtitle: "Secure Contain Protect";
}
…do this. Easy and clean.
:root is the single most important pseudo-class you can learn. It will be very important for making themes.
THE FORMATTING
While there is no right or wrong way to write CSS, there are certainly better ways. Ideally, your work should look readable and accessible, which helps others interpret your code and helps you get back into your workflow whenever you leave and come back.
Note: You only need one CSS module per page. That means all the CSS you do will fit inside that module, which means it can get messy extremely quickly if you don't take the proper steps to combat this.
#page-title,#footer,.blockquote{text-indent:1em;box-shadow:1px 1rem pink;background-color:red;border:solid 1px orange;padding:1em 2rem 1vw 1vh;margin:2vw 3px;text-shadow:0 0 5px purple;}
Horrid! What the hell am I supposed to be looking at?
If I wanted to make this presentable, then it should look like this.
#page-title,
#footer,
.blockquote {
text-indent: 1em;
box-shadow: 1px 1rem pink;
background-color: red;
border: solid 1px orange;
padding: 1em 2rem 1vw 1vh;
margin: 2vw 3px;
text-shadow: 0 0 5px purple;
}
There we go. At a glance, we can immediately spot how the stylings being used here will apply to three different selectors; #page-title, #footer, and .blockquote. We can also see the separation between the declared selectors and their styles with the long spacing.
In order to create the spacings at the beginning of each styling, you can use the alt code Alt+09 or Tab to quickly insert a long space. Afterwards, every time to go to the next line, it will automatically add another long space for you. It is very convenient and I recommend you memorize this.
Additionally, you are encouraged to include comments into your CSS which allows everyone to better navigate your code, including yourself.
/*Hi! This is a comment! This will not be interpreted as formatting. This effectively allows you to add clarification or markers to your code to make it easier to navigate without affecting your CSS.*/
.blockquote {
text-indent: 1em; /*You can even add comments here!*/
}
/*And this stuff is for anything in the page header.*/
#header {
background-color: green;
}
#account-options {
margin: 20px;
}
/*Proper spacing helps!*/
Note: When I say anything, you can literally put in anything in your comments. Don't be the kind of person that puts in song lyrics that no one will ever understand except for yourself. The goal is to create easy access to your work, not be quirky.
CONCLUSION
You are now more familiar with how Wikidot set up its CSS. You also know how to begin setting up :root so that you can speed up your workflow. With this knowledge, you are now one more step towards making your own themes.