CSS statements | Rulesets | CSS @rule

If required read ⌚ CSS3 Essentials before start.

CSS Statement: Single line or declaration block with selector which generally provide result or output. My personal opinion about statement is when an action or output followed by proper CSS syntax. Invalid statement is also a statement and they have no result.

Types of CSS statements

1. Rulesets/CSS rule
2. At-rule

1. Rulesets/CSS rule: Properties and values form declarations, multiple declarations form into declarations block, while declarations blocks and selectors form into a complete CSS rules. A selector and declaration block are ruleset or rule.
2. At-rule is three types
1. Each at-rule has a different syntax. Basic syntax: @identifier (rule);
2. @rule metadata information
1. Not a nested statement
2. @charset
1. Sample: @charset "utf-8";, @charset "iso-8859-15"; or â€
2. @charset is not allowed in an internal style or inline style
3. Only use when non-ASCII character is required in some properties.
4. First statement in stylesheet.
3. @import
1. Import style rules from other style sheet
2. First statement in stylesheet, second statement if @charset or list of @charset is present.
3. Structure:
1. @import url; -- Unconditional so all the medium has the same effect.
2. @import url list-of-media-queries; -- List-of-media-queries is comma separated.
4. Sample: @import 'custom.css'; @import url("ept.css") print, speech
3. @rule conditional/nested information
1. All @rules are nested.
2. Nested Statements: Subset of a at-rule.
3. Nested block of CSS rules is applicable only when certain condition is match with at-rule.  
4. @media
1. One or more media queries produce a result.
5. @supports
1. If the browser meets the criteria of the given condition.
4. @rule descriptive information
1. @page
1. When printing a document @page can change specific css properties.
2. @font-face
1. A custom font which to display text.
2. Font can be loaded from remote or self computer.
3. @keyframes
1. CSS animation sequence  

 Ref [1] https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule