CSS Rules

CSS Rules

back to top

The @font-face CSS Rule

There are four @font-face rules, one for each font file. The extra font-style: oblique styles in the examples look like the italic styles, but are actually a slanted transformation of the glyphs from the normal upright type face referenced in the font-style: normal @font-face rules. In other font faces, particularly serif fonts, the true italic font style may have a different appearance from the oblique font style.

Some places to get fonts:

• The Tuffy font used in the examples here are available at Thatcher's Fonts
• Typodermic Fonts has commercially available fonts and an older set of Larabie Fonts

back to top

The @import CSS Rule

An @import rule specifies the URL of an external style sheet to be imported. It can also include a media query expression consisting of a media type, one or more parenthesized media feature expressions, or both, separated by the conjunction and:

@import url(style-sheet-url) media-type and (media-feature:value);

The media query expressions that can be used in @import rules are the same as the ones used in @media rules.

back to top

The @media Rule

A @media rule can include one or more media query expressions, separated by commas, each consisting of a media type, one or more parenthesized media feature expressions, or both, separated by the conjunction and:

@media media-type and (media-feature:value) { ... }

The styles inside the braces will only be applied in situations that match the media query.

Media Types in Media Queries

Continuous media types

• @media braille { ... }
• @media screen { ... }
• @media speech { ... }
• @media tty { ... }

Hybrid (continuous or paged) media types

• @media all { ... } (default)
• @media handheld { ... }
• @media tv { ... }

Paged media types

• @media embossed { ... }
• @media print { ... }
• @media projection { ... }

These media query values can also be used in the @import CSS Rule, the media attribute of the <style> tag and the media attribute of the <link> tag.

Media Features in Media Queries

width, height

device-width, device-height

orientation

aspect-ratio

device-aspect-ratio

color

color-index

monochrome

resolution

scan

grid

back to top