Fish's Absolute Beginner's Guide To CSS

Link to article: Fish's Absolute Beginner's Guide To CSS.

```
#page-title{display:none}
```

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

border-radius:1em;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;padding:0 1em;margin:auto;width:fit-content

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

border:2px dashed grey;padding:0 1em;margin:auto;line-height:1.1;

```
background-color:#b3ebf2
```
```
border-radius: 100%;
```
```
border-color: transparent;
```

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

background-color: #b3ebf2;border-radius: 100%;border-color: transparent;

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

box-shadow:1rem 1rem lightblue;border: 1rem double black;background: linear-gradient(45deg, orange, purple);color: white;padding: 1rem;text-align: center;margin:1em 3em;

```
margin:400px
```

```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
dipstick
```

[[include :scp-wiki:component:toggle-sidebar]]
[[module css]]
#page-title{display:none}
[[/module]]

[[>]]
[[module rate]]
[[/>]]
[[include :scp-wiki:component:author-label-source start=--
|name=Fish^12]]
Second essay. And this is my [http://scp-wiki.wikidot.com/hotfish| Author Page]!
[[include :scp-wiki:component:author-label-source end=--]]

Hey kid.

I’m [[*user 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.

[[div class="blockquote"]]
Sexy train is leaving the station.
[[/div]]

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 style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

@@[[div class="blockquote"]]@@
Sexy train is leaving the station.
@@[[/div]]@@

[[/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.

[[div class="blockquote"]]
Sexy train is leaving the station.
[[/div]]

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.

[[div style="border-radius:1em;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;padding:0 1em;margin:auto;width:fit-content"]]
Back
Forward
Reload
Save As
Print
View Page Source
Inspect
[[/div]]

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 style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

<div class="blockquote">
<p>Sexy train is leaving the station.</p>
</div>

[[/div]]

Click on the blockquote.

The Styles tab located in the bottom half will detail all the CSS associated with the blockquote.

[[div style="border:2px dashed grey;padding:0 1em;margin:auto;line-height:1.1;"]]

div.blockquote {
@@ @@ @@ @@ @@ @@ border: 1px dashed #999;
@@ @@ @@ @@ @@ @@ background-color: #f4f4f4;
@@ @@ @@ @@ @@ @@ padding: 0 1em;
@@ @@ @@ @@ @@ @@ margin: 1em 3em;
}

[[/div]]

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...

[[div class="blockquote" style="background-color:#b3ebf2"]]
= background-color: #f4f4f4 -> #b3ebf2;
[[/div]]

...add new styles...

[[div class="blockquote" style="border-radius: 100%;"]]
= border-radius: 100%;
[[/div]]

...and remove any styles you want.

[[div class="blockquote" style="border-color: transparent;"]]
= border-color: #999 -> transparent;
[[/div]]

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.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

@@[[module css]]@@

@@[[/module]]@@

[[/div]]

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.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

@@[[module css]]@@

div.blockquote {
@@ @@ @@ @@ @@ @@ background-color: #b3ebf2;
@@ @@ @@ @@ @@ @@ border-radius: 100%;
@@ @@ @@ @@ @@ @@ border-color: transparent;
}

@@[[/module]]@@

[[/div]]

Now, all the styles that we had earlier now apply to the blockquote. Every blockquote should reflect these changes.

[[div class="blockquote" style="background-color: #b3ebf2;border-radius: 100%;border-color: transparent;"]]
Sexy train is leaving the station.
[[/div]]

@@ @@

@@ @@

[[=]]
+ 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.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

@@[[module css]]@@

.dipstick {

}

@@[[/module]]@@

[[/div]]

**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 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.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

@@[[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]]@@

[[/div]]

Now that we've got what we want, we can now deploy the div!

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

@@[[div class="dipstick"]]@@
Sexy train is leaving the station.
@@[[/div]]@@

[[/div]]

Which translates to...

[[div style="box-shadow:1rem 1rem lightblue;border: 1rem double black;background: linear-gradient(45deg, orange, purple);color: white;padding: 1rem;text-align: center;margin:1em 3em;"]]
Sexy train is leaving the station.
[[/div]]

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; [https://scp-wiki.wikidot.com/fish-s-absolute-beginner-s-guide-to-syntax I've got more planned].

[[div style="margin:400px"]]
[[/div]]

[[include :scp-wiki:component:license-box]]
[[include :scp-wiki:component:license-box-end]]

Fish's Absolute Beginner's Guide To CSS

Module Styles

Inline Styles

Includes

CSS Classes

Page Source