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.
