At-Rules to Consider

At-rules are instructions or directives to the CSS and can be used for a variety of purposes.

Importing

The import at-rule will bolt on another style sheet. Just add something like the following if you want to add the styles of another style sheet to your existing one:

@import url(addonstyles.css);
As a rule, it is used in place of the link element to link a CSS file to an HTML page:

<style type=”text/css” media=”all”>@import url(monkey.css);</style>

Media Types

The media at-rule applies its contents to a specified media, such as print. For example:

@media print {
body {
font-size: 10pt;
font-family: times new roman, times, serif;
}

#navigation {
display: none;
}
}

The media-type can be:

all – for every media under, over, around and in the sun.

aural – for speech synthesizers.

handheld – for handheld devices.

print – for printers.

projection – for projectors.

screen – for computer screens.

You can also use braille, embossed, tty or tv.

IE supports only the following media-types for now – all, screen and print.

Character Sets

The charset at-rule sets the character set encoding of an external stylesheet. It appears at the top of the stylesheet and looks something like

@charset “ISO-8859-1”;

Font Faces

The font-face at-rule is used for a detailed description of a font.

It requires a font-family descriptor, which the font can be referenced to. Use the src descriptor in order to embed a font. Other descriptors added to the font-face at-rule become conditions for that embedded font to be used.

Thus, adding a font-weight: bold style to the at-rule, the src of the font-family will only be applied to a selector with the font-family property if the font-weight property is also set to bold.

Here is the sample of a font-face at-rule you can use:

@font-face {
font-family: somerandomfontname;
src: url(somefont.eot);
font-weight: bold;
}

p {
font-family: somerandomfontname;
font-weight: bold;
}

This will apply the somefont.eot font to paragraphs (it would not if the p selector was not set to font-weight: bold).

Pages

The page at-rule is for paged media and can apply styles to printed media. It defines a page block that extends on the box model. Thus, you can define the size and presentation of a single page.

You can use various specific properties such as size, which can be set to portrait, landscape, auto or a length. The marks property can also be used to define crop marks.

@page {
size: 15cm 20cm;
margin: 3cm;
marks: cross;
}

You can use three pseudo classes with the page at-rule, which would take the form of @page :pseudo-class { stuff }.

:first applies to the first page of the paged media.

:left and :right apply to left-facing and right-facing pages accordingly to specify a greater left margin on left-facing pages and a greater right margin on right-facing pages.