At-Rules and Media Queries

At-Rules and Media Queries
namecheap placeholder image

At-rules in CSS allow you to do many cool things like importing other stylesheets, embedding your fonts and targetting your styles for specific media types.

In general, all at-rules start with the at sign (@). What follows directly after is the rule you're trying to use.

Importing Stylesheets

The @import rule is used when you want to import a stylesheet. This is useful for when you want to break up a larger stylesheet into smaller files, and then import then individually.

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>@import</title>
			<style>
				@import url('styles.css');
			</style>
		</head>
		<body>

		</body>
	</html>
	

All you need to do is provide a url and the browser will go and fetch it!

An important thing to note is that @import needs to come before any styles do.

Embedding Fonts

In an earlier lesson, we went over web safe fonts, basically fonts that are safe to use. But what if you want to use a custom font that perhaps many users will not have installed?

Enter the @font-face rule. You can import any font you want like this:

	
	@font-face {
    	font-family: "font_name";
    	src: url(font.font_extension);
	}
	

All you need to do is give the font a name and point the browser to the file itself. The recommended font formats are .woff, .woff2, and .tiff.

You could even use all three formats by providing the browser a list of fonts, like this:

	
	@font-face {
    	font-family: "font_name";
    	src: url(font.woff),
		 	 url(font.woff2),
		  	 url(font.tiff);
	}
	

Optionally, you can also define the font's weight and style.

	
	@font-face {
    	font-family: "font_name";
    	src: url(font.woff),
		 	 url(font.woff2),
		  	 url(font.tiff);
		font-weight: 400;
		font-style: normal;
	}
	
udemy placeholder image

Media Queries

Media queries are used to target your styles for a specific form of media. This is accomplished with the @media at-rule.

Print

When you try and print a webpage, if the website is kind enough to supply print styles, the browser will apply them, hopefully making the pages print-friendly in the process.

Let's say you wanted to make the font sizes bigger for print. This is how you would do it:

	
	@media print {
		body {
			font-size: 125%;
		}
	}
	

When you go and print, the words will now be bigger than normal. It's that simple.

Screen Size

A massive part of mobile-first web design revolves around the technique of applying different styles depending on the browser screen.

Maybe you want to hide certain elements on mobile or show additional elements when on desktop. Both are possible with screen media queries.

For the sake of example, let's make it so that when your screen is smaller than 600px the page's background color will be blue, but any larger and it is red.

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Width Media Query</title>
			<style>
				@media screen and (max-width: 600px) {
					body {
						background-color: blue;
					}
				}
				@media screen and (min-width: 600px) {
					body {
						background-color: red;
					}
				}
			</style>
		</head>
		<body>

		</body>
	</html>
	
Smaller than 600px.
Smaller than 600px.
Larger than 600px.
Larger than 600px.

That is the very basics of responsive design; trying to tailor the styles depending on the screen size viewing the page.

If your website is complex enough, you could essentially have different designs for when the page is loaded on mobile and loaded on desktop.

We take advantage of these media queries, actually. Try resizing the browser if you're on desktop! At a small-enough screen size, this site's design is mobile-optimized, thanks to media queries.