Hey kid.
I’m Fish^12. Wanna learn CSS? This is the guide for that.
The biggest issue with creating a guide for CSS is that I would not be the first person to do so. CSS is part of the trifecta of web design alongside HTML and JavaScript, and thus has a piece of the internet carved out solely to detail its uses; MDN web docs, CodePen, StackOverflow, among others. If you want a much more rigorous and comprehensive guide on CSS, there are a multitude of offsite resources available to you.
However, I can tell you how to take advantage of CSS within the context of the SCP wiki.
Preface: This guide is for absolute beginners. Anyone with even a passing knowledge of CSS can comfortably downvote this article. Additionally, this guide is dependent on the user having access to a computer; while this can be done on mobile, it is a pain in the ass.
Let us begin with the humble blockquote.
Sexy train is leaving the station.
A solid div; it’s one of the first things you learn as a new SCP writer. It allows you to easily create test logs, interview transcripts, after action reports, etc. Classic.
If you don't know how to make a blockquote, this is what it looks like in plain text.
[[div class="blockquote"]]
Sexy train is leaving the station.
[[/div]]
Note: A div is short for division; essentially, it is a way to divide a webpage up into parts. There's more types, but for now, this is all you need to know.
That's interesting and all but… how does it work? What does it look like under the hood? What if I wanted to change the look of this thing?
For this, we must learn about our first weapon.
THE INSPECT TOOL
Let's bring back that blockquote.
Sexy train is leaving the station.
Right click on it. Once you right click on a webpage (or any element; in this case, you should be right clicking on the blockquote), it will create a context menu. They generally look like this.
Back
Forward
Reload
Save As
Print
View Page Source
Inspect
At the bottom, you can spot the Inspect option; hit that.
This will open up a side bar; it’s going to look complicated, so only focus on the Elements tab in the top half for now. Try locating the blockquote.
It should look like this.
<div class="blockquote">
<p>Sexy train is leaving the station.</p>
</div>
Click on the blockquote.
The Styles tab located in the bottom half will detail all the CSS associated with the blockquote.
div.blockquote {
border: 1px dashed #999;
background-color: #f4f4f4;
padding: 0 1em;
margin: 1em 3em;
}
From here, you are now handed the keys to everything. This side bar gives you the ability to edit any webpage and view the changes in real time.
You can change existing variables…
background-color: #f4f4f4 -> #b3ebf2;
…add new styles…
border-radius: 100%;
…and remove any styles you want.
border-color: #999 -> transparent;
But, wait. This is cool and all, but these changes are temporary. If I refresh the page, these things go away.
How do we actually save these changes?
THE CSS MODULE
Wikidot has a module that allows you to insert CSS into your articles called, you guessed it, the CSS module. It looks like this.
[[module css]]
[[/module]]
In order to actually affect your page, all we have to do is copy the code we were messing with earlier into this module.
Let's do it with our blockquote.
[[module css]]
div.blockquote {
background-color: #b3ebf2;
border-radius: 100%;
border-color: transparent;
}
[[/module]]
Now, all the styles that we had earlier now applies to the blockquote. Every blockquote should reflect these changes.
Sexy train is leaving the station.
THE TRICKY PART
Let's combine our new knowledge and freedom by taking a dive off a bridge.
We are going to let our poor blockquote go; instead, we will create new life.
First, we must name it. I'll name mine… dipstick.
[[module css]]
.dipstick {
}
[[/module]]
Note: In order to make a new div, you do need to add the period to the beginning. There's also more than just this, but we'll can talk about it another day.
Alright, now let's load this baby up with styles. I'll just do a bunch of random, more complicated ones, just for you to see what we can get up to.
[[module css]]
.dipstick {
border: 1rem double black;
box-shadow: 1rem 1rem lightblue;
background: linear-gradient(45deg, orange, purple);
color: white;
padding: 1rem;
margin: 1em 3em;
text-align: center;
}
[[/module]]
Now that we've got what we want, we can now deploy the div!
[[div class="dipstick"]]
Sexy train is leaving the station.
[[/div]]
Which translates to…
Sexy train is leaving the station.
And there we have it!
CONCLUSION
This is the absolute bare minimum in learning (or really copying, either or) CSS. All elements on a page can be inspected and manipulated as needed, after which you can apply those changes in the CSS module.
CSS is a thing I am passionate about, but it's basically akin to learning a new language. It will take time to learn the basic steps, and it will take more time to master it. I'm still not good at it. But why does that have to stop us?
Tune in next time; I've got more planned.