At-rule clarification

Question

I’m having a hard time wrapping my head around at-rules. How are they different than rulesets? They seem to be the same.

Answer 1

At-rules, identified by the '@' symbol, are rules(or directives) that apply to the whole document, whereas rule sets apply to specific elements in the the document.
For example:

@font-face is used when defining a custom font which can be used for the entire document
@import is used to import an external stylesheet to be used within the entire document

All other rulesets, are standard rulesets which apply to SPECIFIC parts of the documents. For example:

h1 {
font-weight: bold;
color: blue;
}
This ruleset will ONLY apply to h1 elements in the documents. So the difference between @ rules and standard rulesets is that @ rules are used to specify a rule/ directive that will apply to the whole document, whereas standard rulesets refer to specific elements in the document
Hope this helps!