So this is a Body-themed website. I'm not sure what I'm going to do with it, but I do know I am very much fucking around. The borders on these paragraphs are within the html file itself, so that's pretty nifty, if I do say so myself.

I'm going to have to think up a lot of paragraphs for this. I guess I can talk about my Body characters. That makes sense.

Reese Ardor: they/them. They're extremely stoic, and fairly soft-spoken, but they have an intense curiosity for the truth behind the fraud Throwings.

Reńe Quinn: he/him. In Flitch, he lived recklessly, especially for a fraud. He's madly in love with the Crest and would do anything to keep it safe.

Luna Sidestone: he/him. Crafty, placid, and sadistic, he had some fingers in the pot even before living in the Body. He always needs amusement, or else some unspecified mental break will occur.

Mare O'Morris: she/her. Previously, she ruled over a crime organization that still has a knee over Flitch's throat. She prefers flight to fight, but she's sharp as a whip when she has to be.

Iris Sullivan: they/them. With an unerring eye for detail, they disperse information among their peers. And if the information is delivered condescendingly? Well, that's just their writing style!

Simon Abber: they/them. Physically, they resemble a child; most assume they're still wet behind the ears. They loathe hearing people's pity, almost as much as they enjoy correcting that pity.

Ginger Campbell: she/her. Her silver tongue and calm demeanor have prevented countless fights between her companions. Similarly, her coaxes can spurn anyone to turn against their loved ones.

Cole Factory: he/him. He has a nose for the finer things in life, among which include food, candles, and people. He's adored his time in the Body: so many pretty smells...

Augusta Gall: she/her. Though she considers her fellows akin to her own flesh and blood, she's lost most of her humanity. She sequesters herself in her domain, emerging only to deliver news.

Dexterity: the Creation of Hands. He doesn't like Luna, per se, but he does feel some sort of way towards him. Either way, Luna makes a lot of fun gestures when Dex touches him.

Mobility: the Evasion of Legs. She views Mare as a half-pet, half-helpful-tool, and finds it cute that Mare shares this view, even if she gets annoyed when her pet acts out.

Sight: the Information of Eyes. The least spirited of the gods, they and Iris barely interact, only coming into contact if Iris isn't doing their job. They're always there, though.

Sound: the Warning of Ears. Sound likes Simon's company. Simon is the only human able to understand Sound, and Sound doesn't want anyone else. All Sound wants is more for Sound's collection.

Pausing for a brief moment to lay down some CSS knowledge on the box model.
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
Text taken from W³ Schools website.

Intelligence: the Mindfulness of the Head. They and Reńe have just met, so they don't have much of an opinion on him. He seems... similar to Emotion. Also they getmore text than everyone else so I can see what the justify property does in CSS. So I'm going to fill this out until it's more than two lines on the website. My dog is coming over and sniffing and lying down, how cool. I think she's been a little anxious today, since we're building a shelf.

Wooowzers

Alright we're pretty much done with all the characters. There aren't any other characters than the ones I've listed, other than Reese's mom Catherine and Simon's father figure who are both dead
I'm just trying to see what this list looks like.
Hopefully you can see the dogs.

Jesus Christ okay you can you just need the entirety of the link. Um. I'm just going to. Move on. It is pretty funny how they break the border actually. It's funnier on mobile and I'm not going to change that.

If you want a list to be indented you change the "list-style-position".
Ain't that neat. Okay I've gotto make thisas longasp oissble so you see what I'm talking about. My dog is wandering around outside, I can hear his claws on the floor. I feel like he's going to come into my room. Nevermind I hear him plummeting down the stairs like he always does.

Cool. Those two things are done. Now time for a third super cool and awesome list. Woohoo.

Just trying things out
Just testin'

Okay that's done. A final test. A test for the ages.

This'll work
I don't think I did anything crazy this time
coke

Here's a link to tables if you ever feel like doing something with tables.
And here is a link to display elements. Essentially what it's saying is that some elements have a built-in line break, and some don't, and you can change that through CSS. (The link also goes through the difference between display:none and visibility:hidden.)

Okay positions. This is something I think you struggled with when it came to formatting the mobile version of this page, so pay attention.
A static position is the default position. It's going to interact with everything normally, pretty much.
A relative position is something that's relative to the screen it's on, I think. According to W³, Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
A fixed position will stay at the same place on the screen no matter how you scroll. There is one in the top left corner of this very webpage.
Absolute means it's in relation to whatever it's inside of. If it's inside nothing, it's inside of the body.
Sticky is like your art blog tumblr header. So that's a pretty good example for you.
And then you can also position text within images. Woo-hoo.
Z-indexes are basically how things stack if they're in the same position. You can look into it more here.
Overflow is the weird clipping stuff you see on mobile. You can help it by setting it to auto, I think.
I already kind of know about float but here is some important information regarding the clear attribute and what float can be used for.
Information about the inline-block display. Aligning elements (horizontal/vertical centering and such).

I wonder if that worked.

It did!! hurrah.

Whoops not quite as well as I wanted actually.

Okay there we go. Fixed it

A link to pseudo-classes. Seems like it will mostly be useful for hover. I still don't get children/parents

And here is how you do things with pseudo-elements, like change list markers or the first letter or first line of a paragraph or whatever. (This is how you change what selected text looks like!!)

Here is where they explain opacity. It's kind of a no-brainer thing for you, but maybe you'll forget sometime and need this link.

I have configured a navigation bar. Here is the link if I want to make a different style of navigation bar, which I feel like I will.

Here is where you go if you want to make an image gallery, which you know is something you want.

IMAGE SPRITES!!! This will help you for links and such :}

ahhhhhh attribute selectors ahhh might be useful but I don't want to get into them now ahhhhh

Forms. I just sincerely doubt I will use forms, but you know, never hurts to know where they are. If you ever neeed to do something with math or some shit you can just go to the next page, the amount of doubt I hold that I will ever use counters surpasses the highest point on Earth, hence why I am not linking to it directly.

ALRIGHT TIME TO LEARN WHICH ATTRIBUTES ARE GIVEN MORE IMPORTANCE IN THE CSS HIERARCHY

Inline styles ('style="color: pink";' or something like that)
IDS (the ones that use 'id="blah"', and its equivalents in the style sheet - '#blah'
Classes/pseudo-classes/attribute selectors (you know what two of these are, at least)
Elements/pseudo-elements (just the things by themselves)

If ever you need to calculate specificity values, W³ Schools gives you a handy chart towards the bottom of this page.
Of course, if you add !important to something, then it will be the most important specificity of them all. Until you add another !important. But don't do that. It makes things confusing.
Oh boy. Math. Well, I shouldn't be snarky, that does look like it might be helpful.

For some reason rounded border corners are considered advanced. I already learned that in html but I might as well leave a link here ig.

Whoa border images!! that actually is kind of cool.

Ough backgruond images.....you can stack images on top of each other that is so freaking fun

Remember, if you want a color to be a certain opacity, you have to use RGBA, you can't just use hex codes, even though you like them.

How wonderful.

Wooowzers