What are at-rules in CSS and what is the "at" used for [duplicate]

Question

In CSS there are at-rules that do different things, but with them I have seen the @ symbol used in several keywords like:

@import   
@media   
@keyframes  

and others, but I am searching to know what the @ actually means and how it is used or better yet, how it benefits, change or differentiates from the rest of CSS.

I have read the W3 section about at-rules but it does not explain clearly (I actually read that and I ended up even more confused) what @ means and it is specifically used for.

Answer 1

@charset at-rule can be used to specify the character encoding of an external style sheet. It must appear before anything else in the file.

@import at-rule allows us to import one style sheet into another. All @import at-rules must appear before any rules.

@media at-rule lets us target rules to the media types we specify.

@page at-rule can be used to specify margins for paged media. You can set different margins for left- and right-hand pages when you’re printing double-sided pages, as well as for the first page.

@font-face at-rule allows us to specify custom fonts.

@namespace at-rule in CSS3 lets us declare an XML namespace, as well as an optional prefix with which that namespace can be specified.

If I were you I would check out the following links.

Firstly : http://reference.sitepoint.com/css/atrulesref

As well as the following:

https://developer.mozilla.org/en-US/docs/CSS/At-rule
http://css-tricks.com/at-rule-css/