Demystifying CSS At-Rules

CSS at-rules (or @rules) are so-named because they utilize an @ character. They aren’t used as often as other CSS elements, and for a long time I didn’t really understand them. If you’ve ever been confused about CSS at-rules, here’s a quick guide:

@charset

This is used to specify the character set encoding of your stylesheet (external). It’s found at the top of the stylesheet, and usually looks something like this:

@charset “iso-8859-1”;

@import

This is used to import a stylesheet, in the form of:

@import url(newstylesheet.css);

@import is usually used to hide certain styles from older browsers, which don’t recognize it. So it’s used in conjunction with the link tag.

@media

This will apply its contents only to a specific type of media. Some options are:

all – every media

aural – speech synthesizers

braille – braille

handheld – for handheld devices

print – for printers

screen – for computer screens

For example, I could specify that for printers, all text must be bold and in a serif font. I would do this:

@media print { body {font-family:serif; font-weight:bold;} }

@font-face

This one, you know already. It’s a method of specifying and embedding fonts of your choice in your website design, and I’ve previously posted tips on using it, as well as links to awesome @font-face kits you can use.