Restyled by prettier-markdown

src/pages/docs/css/media-querries/index.md

@@ -2,6 +2,7 @@
 title: CSS Introduction
 excerpt: CSS is among the core languages of the open web
 ---
+
 <!--StartFragment-->
 
 # CSS
@@ -16,8 +17,6 @@ CSS Introduction
 
 If you're new to web development, be sure to read our [CSS basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics) article to learn what CSS is and how to use it.
 
-
-
 [CSS first steps](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps)
 
 CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.
@@ -36,8 +35,8 @@ With the basics of the CSS language covered, the next CSS topic for you to conce
 
 At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and to each other. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.
 
-* The **property** which is an identifier, that is a human-readable *name*, that defines which feature is considered.
-* The **value** which describe how the feature must be handled by the engine. Each property has a set of valid values, defined by a formal grammar, as well as a semantic meaning, implemented by the browser engine.
+- The **property** which is an identifier, that is a human-readable *name*, that defines which feature is considered.
+- The **value** which describe how the feature must be handled by the engine. Each property has a set of valid values, defined by a formal grammar, as well as a semantic meaning, implemented by the browser engine.
 
 ## [Copy](https://webdevhub.us/docs/css/#css_declarations)[CSS declarations](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#css_declarations "Permalink to CSS declarations")
 
@@ -89,13 +88,13 @@ A **statement** is a building block that begins with any non-space characters
 
 There are two kinds of statements:
 
-* **Rulesets** (or *rules*) that, as seen, associate a collection of CSS declarations to a condition described by a [selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).
-* **At-rules** that start with an at sign, '`@`' (`U+0040 COMMERCIAL AT`), followed by an identifier and then continuing up to the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of [at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule), defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like [`@charset`](https://developer.mozilla.org/en-US/docs/Web/CSS/@charset) or [`@import`](https://developer.mozilla.org/en-US/docs/Web/CSS/@import)), conditional information (like [`@media`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) or [`@document`](https://developer.mozilla.org/en-US/docs/Web/CSS/@document)), or descriptive information (like [`@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)).
+- **Rulesets** (or *rules*) that, as seen, associate a collection of CSS declarations to a condition described by a [selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).
+- **At-rules** that start with an at sign, '`@`' (`U+0040 COMMERCIAL AT`), followed by an identifier and then continuing up to the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of [at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule), defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like [`@charset`](https://developer.mozilla.org/en-US/docs/Web/CSS/@charset) or [`@import`](https://developer.mozilla.org/en-US/docs/Web/CSS/@import)), conditional information (like [`@media`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) or [`@document`](https://developer.mozilla.org/en-US/docs/Web/CSS/@document)), or descriptive information (like [`@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)).
 
 Any statement which isn't a ruleset or an at-rule is invalid and ignored.
 
 ### [Copy](https://webdevhub.us/docs/css/#nested_statements)[Nested statements](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#nested_statements "Permalink to Nested statements")
 
 There is another group of statements – the **nested statements**. These are statements that can be used in a specific subset of at-rules – the *conditional group rules*. These statements only apply if a specific condition is matched: the `@media` at-rule content is applied only if the device on which the browser runs matches the expressed condition; the `@document` at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only *rulesets* could be used inside conditional group rules. That was very restrictive and this restriction was lifted in *[CSS Conditionals Level 3](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3#Conditionals "This is a link to an unwritten page")*. Now, though still experimental and not supported by every browser, conditional group rules can contain a wider range of content: rulesets but also some, but not all, at-rules.
 
-<!--EndFragment-->
+<!--EndFragment-->