The CSS3 Media rule is a rule that allows for use of media queries. Media queries can allow you to style your webpage (either a portion or all of it) differently based on different media types or devices.
A Media Query is created by using the `@media` tag and then supplying a rule in order to check for things such as:
* Width and height of the current viewport
* Orientation of the device (this applies to tablets or phones)
* Current resolution
* And More
There are currently four possible Media Types:
* all (Default - this will target all devices)
* print (Used for printers; e.g. providing separate print styles)
* screen (Used for computers, phones, tablets, etc.)
* speech (Used for accessibility devices such as screenreader that narate the contents of a webpage)
Media queries are used for all sorts of purposes as they allow many differnet media features. One of the most common uses of a Media query is to make a web page responsive; meaning it will behave differently based on the screen size.
The CSS in the Media Query rule only applies when the rule holds true. For example, looking at the snippet above, the body background will be changed to `#000` only when the a user visits the page with a device that is 1000px wide or less. If above 1000px, that rule will not apply.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->