Why does this exercise employ unexplained concepts?

There are a few things I couldn’t understand in this exercise’s css.

For instance:

@media only screen and (max-width: 590px) {
  h1 {
    font-size: 4rem;
  }
}

They have not been explained before on my full stack career path. What’s with the @ selector and the following keywords?

This is a media query. In this particular case, it is saying “for screens smaller than 590px across, apply the following styling (the h1{font-size: 4rem;}).”


Essentially, media queries can be used to make websites responsive; they can set conditions for certain CSS rules, based off things to do with the screen (resolution, width, height, etc).