CSS Advanced - At-Rules

Complete CSS Tutorial

First Step - Beginner CSS	Second Step - Intermediate CSS	Third & Final Step - Advanced CSS
1. Applying CSS	1. Class and ID Selectors	1. Display
2. Selectors, Properties, and Values	2. Grouping and Nesting	2. Page Layout
3. Colors	3. Pseudo Classes	3. At-Rules
4. Text	4. Shorthand Properties	4. Pseudo Elements
5. Margins and Padding	5. Background-images	5. Specificity
6. Borders
7. Putting It All Together

At-rules encapsulate a bunch of CSS rules and apply them to something specific. Woo.

Importing

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


@import url(addonstyles.css);

This is often used in place of the link element to link a CSS file to an HTML page, by essentially having an internal style sheet that looks something like this:


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

The benefit of this is that older browsers, such as Netscape 4.x don't have a clue about at-rules and so won't link to the style-sheet, which, if you have well-structured markup, will leave functional (although un-styled) plain HTML.

Teach Yourself by BH24 HTML Editor Tool!

Media types

The media at-rule will apply 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;
 }
}

Teach Yourself by BH24 HTML Editor Tool!

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.
Note: having said all of that, the only media-types currently supported by IE are all, screen and print.

Character sets

The charset at-rule simply sets the character set encoding of an external stylesheet. It would appear at the top of the stylesheet and look something like @charset "ISO-8859-1";

CSS Tutorial by BH24

Font faces

The font-face at-rule is used for a detailed description of a font and can embed an external font in your CSS.
It requires a font-family descriptor, which the font can be referenced to, the value of which can be an existing font name (so overwriting that font when conditions are met) or it can be a completely new name. To embed a font, the src descriptor is used. Other descriptors added to the font-face at-rule become conditions for that embedded font to be used, for example, if you were to add 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.
You might use a font-face at-rule like this:


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

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

Teach Yourself by BH24 HTML Editor Tool!

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

Support for embedded fonts is patchy at best. Mozilla based browsers don't support them and have no immediate plans to do so. Only Internet Explorer seems to have any kind of decent support and this is by no means straightforward. To embed fonts with IE, you need to use Microsoft's WEFT software, which will convert the characters of a TrueType font into a condensed OpenType font (and this can then only be used on the URI that you specify). Because of this limited (and quite complicated) compatibility, it is best not to use fonts that do not have an adequate alternative system font.

Pages

The page at-rule is for paged media and is an advanced way to apply styles to printed media. It defines a page block that extends on the box model (see Margins and Padding) so that you can define the size and presentation of a single page.
There are a number of conventions that apply to page at-rules, such as there is no padding or border and this isn't a computer screen we're talking about - pixels and ems as units aren't allowed.
There are a number of specific properties that can be used, 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;
}

Pseudo classes for paged media There are three pseudo classes that are used specifically in conjunction 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 respectively. This might be used to specify a greater left margin on left-facing pages and a greater right margin on right-facing pages.
There are a number of other facets specific to the page at-rule such as page-breaks and named pages, but seeing as this at-rule works on hardly any browser, you've probably wasted enough time reading this part anyway. It's a nice enough idea though...

W3Examiner

Search This Blog