HTML and CSS

Hello everybody !
I have been willing to write an article about code for a little while but I kept telling myself "Oh, Dana, you know no one cares right ?"
But now that I have spent the whole summer screaming because my HTML/CSS wouldn't work the way I wanted it to, I guess I have no choice anymore, but to let people know about the struggle that is my life.
Apart from being overly dramatic about things that do not matter and not care about anything that's actually important.

So let's get to it !
"Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications", Wikipedia says. "Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language," it adds, when I type "CSS" instead of "HTML" (who would have thought ?).
I wouldn't explain it any better than Wikipedia, but you're not here to read some article I copy-pasted, are you ? There is only one thing I can do better than our favourite online encyclopedia : homemade examples.
So, basically, HTML is what lets you do this :

I'm so tired

So, up there's the title, and right here's where I'm putting the text. You might have noticed that this is some text. Right now I am trying to write enough so there will be more text than the box can take, and it will efficiently show you that it puts a little scrollbar on the side so that it can all fit. It would not do that if I hadn't put it in the code.
Doesn't this "box" I made look like some meme ? I think it looks like an oldschool meme. Choosing "Impact" as the font for the title probably did not help. I'm sorry, reading all this was absolutely useless, it's just an example, the article is what's supposed to be interesting. Right now I am praying so that when I press "preview" I will see that cute little scrollbar.

Phew ! I think it works. If it doesn't, it's not my fault, it's your computer's.
So you see, HTML is what lets me change the appearance of my article (or my website if that's what I am working on). What I just did is actually very simple : I created a box with a picture as a background, and inside that box I wrote the title with a font I chose, then created another box in which I put my text. Again, it will be easier to understand with an example, so here is this rainbow "box" as I am seeing it right now (except I put the code in bold so that you can easily differentiate it from the text) :

"What is that witchcraft ?" I hear some of you say. Well, that's code, the language being HTML. If it's the first time you see it, it is absolutely normal that you do not understand a thing, but let me tell you what the most important "tags" do. Most tags need to be surrounded by <> (or <./> without the dot if they mark the end of the tag) to function, some others need to be following a "div" or "span".
br forces a line break. Guess what ? I'm gonna put it here, right after the word "lasagna". Attention : lasagna
div creates a box. Pretty much. You'll have to add tags to it in order to see it or change it.
span lets you add tags to modify the text that's in it.
height & width, when following a "div", let you change its height and width (wow).
color lets you change the color of your text or, if it's inside a div, whatever attribute you give it's (for example background-color). If I want to make my text white, I'll type color: white or color: #FFFFFF, for #FFFFFF is the hexadecimal code for white.
border changes the border of the div. If I want a thin white normal border I'll type border: 1px solid #FFFFFF. If I want a thin black dotted border I'll type border: 1px dotted #000000
overflow:auto puts a scrollbar on the side once the text "overflows" the div.

Of course, there are many more specific tags that let you create many different boxes (of course. That's what code is all about. Boxes.) and modify the appearance of your text as much as you want (font, size, color, how much space there is between each letter, whatever). There are also more simple tags to modify text that you might have already seen if you've ever been on a forum, such as b or i that make your text bold or italic.
But now, I hear you say "But Dana, when will I ever use that ? I'm just a S/ES/L student who will most probably end up being a math teacher/economics teacher/drug addict !", and you know what ? You might actually never use any HTML. But you most definitely can !
I'm sure some of you will go on a forum someday, and that's the one place where you'll look super fashionable if you put your text post inside a pastel-pink box with waves as a border, and put your title with the "Edwardian Script" font in a super artsy place. But that's not it: you can use it right here, on the blog !
I'd bet that every single one of you has been writing their article in the "normal mode", meaning that you did not click off the "Rédiger" button and on the "HTML" one (can you believe it ? It's been right under your eyes the entire time !). The "normal mode" lets you type you article directly just the way you'll see it once it's published. It has buttons specifically so that you can underline your text, put it in bold, or in italic. It even has buttons that let you put a picture or a youtube video directly on your article ! Since it just appears as you click it, you might think it's magic, but let me tell you a secret : it's actually HTML. The "Rédiger" mode just hides it.
You can make the experience next time you write an article : write some text and using the "b" button put it in bold, and then toggle to the HTML mode. Isn't that my favourite b tag that you see ?

So go on ! Let go of the normal mode ! Come with me to the dark side HTML mode ! Make boxes ! Put some colours behind all that text ! Experience the freedom of knowing exactly where the b tag ends instead of getting upset because for some reason what you write afterwards is still in bold even though you only wanted that one sentence to be ! This is what my article looks like right now. You might think it is a bit messy, but I know exactly where every tag starts, and ends, and I can move them anytime I want.

I can hear some complaining again. "Oh, but Dana, the title of your article says CSS too, but you've only been telling us about HTML the whole time..." Is that because you think this is goodbye ? 2017 is the year of ridiculously long articles, my friends.
Now, why am I not telling you about CSS ? Well, the answer is very simple : CSS is un-intuitive as heck. If you don't even know about HTML, trying to understand CSS is just... silly. Of course, once you've started, you realize that HTML and CSS are of the easiest code languages there are, but just like that, trust me, you would not understand.
I just couldn't help but mention it because I have been spending my holidays working on the appearance of two websites, using a lot ot HTML of course, but also CSS, that I had never touched before July. If you want your website to look cool, CSS is very important. It's what lets you, for example, do this :

...Mood

Put your mouse on the picture. Trust me. It wont bite. If you're on mobile you probably can just tap on it. Look. It moves ! It's magic.

So there you go ! Now you know what HTML and CSS are.
Had any of you ever used it before ? Or do you plan to use it now ? Do you think I should make my future articles super colorful and cool looking, showing off my HTML and CSS skills ? Do you find the concept of code even remotely interesting ?
Please tell me so in the comments ! Don't hesitate to tell me your opinion, or if my rainbow box looks silly on mobile.

PS : Go check out the "Google Translate Sings" video for "Look What You Make Me Do", it's amazing and will make you go "#me".