Feature
Post

Category
Code


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.


  1. By Alex Flueras posted on April 1, 2010 at 4:36 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Interesting article. I will try to use the @font-face attribute.

  2. By josh posted on April 7, 2010 at 8:19 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Nice! Thanks for the great explanation!

  3. By Erken posted on April 7, 2010 at 10:44 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Quick and Clear! Thanks for the reminder :)

  4. Trackback