CSS Rules

 

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.


If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)


PDF mobile

CSS Rules


The @font-face CSS Rule

  • font-family: sans-serif; font-size: 16pt; font-style: normal; font-weight: normal
  • font-family: Tuffy; font-size: 16pt; font-style: normal; font-weight: normal
  • font-family: Tuffy; font-size: 16pt; font-style: oblique; font-weight: normal
  • font-family: Tuffy; font-size: 16pt; font-style: italic; font-weight: normal
  • font-family: Tuffy; font-size: 16pt; font-style: normal; font-weight: bold
  • font-family: Tuffy; font-size: 16pt; font-style: oblique; font-weight: bold
  • font-family: Tuffy; font-size: 16pt; font-style: italic; font-weight: bold

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 @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.


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

Valid HTML 5