Top 3 CSS tips I wished somebody have told me

Hello World!

Welcome back, and here are the top 3 CSS tips I personally wished somebody told me when I started out. As usual, we'll be going straight to the point.

Tip 1: @media

75% of you probably don't know what @media is, well, I am part of that 75% a few weeks ago. You might be thinking, if @media is so hard, why should I learn it?

Okay, I won't contradict, @media is one of the hardest CSS concepts. Okay, now that I lost 99% of viewers, let's get into @media!

First, let's start with an example.

@media only screen and (max-width: 600px) {  body {    background-color: blue;  }}

So basically, the background color will be blue to all devices with a width of less than 600px.

Understood a word I was saying? Basically, see the (max-width: 600px) part? So the max width of the screen to display the style is 600px.

Kind of like JavaScript in CSS right? Oh, and btw, you can do that in Javascript too!

var width = window.innerWidth;if(width > 100){   alert('Device bigger than 100px');}

In Summary: @media = JavaScript in CSS

Tip 2: CSS Default Font = Bad

No offence to CSS, but your default font sucks. Here is a quick tutorial on changing your font.

1. Visit fonts.google.com.
2. Click on any font that isn't CSS' Default one.
3. Select a Style.
4. Click top view selected families button:
5. Follow the instructions that pop-up from side

Easy enough, shouldn't take more than a few minutes, remember to say bye to CSS' default font!

Tip 3: Use libraries

Plain CSS is good, but not very efficient. You can download a popular CSS Library like bootstrap or Tailwindcss. I'll probably write a post about this tomorrow.

CSS libraries aren't replacing CSS, at the end of the day, any CSS library is basically an addon to CSS.

So, usually, if you're learning CSS, you're probably learning JavaScript too! So with the remainder of this heading, let's talk about a JavaScript library called CheaterJS.

CheaterJS is basically a module with a lot of common JavaScript functions. Now back to CSS!

Conclution (Concluding Statements)

Oh, this is the part where I say bye and those sort of stuff. If you hate promotion, this is a good indicator that it's time for you to leave.

To the 0% which is still reading, farewell, and have a nice day. Please follow me for more stuff like this.(Don't follow me in real life plz.)