title: What are at-rules in CSS and what is the "at" used for
body: <p>In CSS there are at-rules that do different things, but with them I have seen the <strong>@</strong> symbol used in several keywords like:</p>
  
  <pre><code>@import   
  @media   
  @keyframes  
  </code></pre>
  
  <p>and others, but I am searching to know what the <strong>@</strong> actually means and how it is used or better yet, how it benefits, change or differentiates from the rest of CSS. </p>
  
  <p>I have read the <a href="http://www.w3.org/TR/CSS21/syndata.html#at-rules" rel="noreferrer">W3 section about at-rules</a> but it does not explain clearly (I actually read that and I ended up even more confused) what <strong>@</strong> means and it is specifically used for.</p>