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.
- Visit fonts.google.com.
- Click on any font that isn't CSS' Default one.
- Select a Style.
- Click top view selected families button:
- 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.)
Top comments (2)
I don't think this is a great content. I explain why:
1- @media rules aren't Javascript in CSS: as their name said, their are rules to different styles for different media types/devices. This is not a tip, this is how CSS works across different device \ orientation \viewport
2- The default font is set by the browser.
3- Yes, you can use libreries or frameworks, but I suggest to have a strong knowledge of how works CSS first: rules as CSS Flex and CSS Grid are more than enough to develop a responsive website.
Well, good point. Sorry for the late response, but I actually disagree. First of all, I do agree that you need to understand the core concepts of CSS, but I see nothing against CSS frameworks. CSS frameworks simplify CSS so people can use them more easily.
Secondly, the @media property isn't only for styling elements on different devices and viewport. It can style your website when printed, and much more. It's more like a conditional when displaying elements. Which is similar to JavaScript's "if" statement.
Thirdly, while some browsers share the same font, many clients just use a browser for everything. So to their prospective, there is a default font.
Nice talking to you Davide, and I am sorry if this post doesn't reach your quality standard.