CSS At-Rules - 5 Rules (Reference)

@import url|string list-of-mediaqueries;

@import "navigation.css";

// Import ONLY if the media is maximum 768 pixels:
@import "mobstyle.css" screen and (max-width = 768px);

// Import ONLY if the media is print
@import "printstyle.css" print;

@keyframes animationname {keyframes-selector {css-styles;}}

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

@keyframes mymove {
  0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

not
// The not keyword reverts the meaning of an entire media query.

only
// The only keyword prevents older browsers that do not support media queries with
// media features from applying the specified styles. It has no effect on modern browsers.

and
//The and keyword combines a media feature with a media type or other media features.

They are all optional. However, if using not or only, must also specify a media type.


Media Types
// all
// print
// screen
// speech

Media Features
// any-hover
// any-pointer
// aspect-ratio
// color
// color-gamut
// color-index
// grid
// height
// hover
// inverted-colors
// light-level
// max-aspect-ratio
// max-color
// max-color-index
// max-height
// max-monochrome
// max-resolution
// max-width
// min-aspect-ratio
// min-color
// min-color-index
// min-height
// min-monochrome
// min-resolution
// min-width
// monochrome
// orientation
// overflow-block
// overflow-inline
// pointer
// resolution
// scan
// scripting
// update
// width

@font-face {
  font-properties
}

@font-face {
  font-family : name;

  src : URL;

  font-stretch : normal;
  font-stretch : condensed;
  font-stretch : ultra-condensed;
  font-stretch : extra-condensed;
  font-stretch : semi-condensed;
  font-stretch : expanded;
  font-stretch : semi-expanded;
  font-stretch : extra-expanded;
  font-stretch : ultra-expanded;


  font-style : normal;
  font-style : italic;
  font-style : oblique;


  font-weight : normal;
  font-weight : bold
  font-weight : 100;
  font-weight : 200;
  font-weight : 300;
  font-weight : 400;
  font-weight : 500;
  font-weight : 600;
  font-weight : 700;
  font-weight : 800;
  font-weight : 900;

  unicode-range : unicode-range;
}

@charset "charset";