@ Rules

  • @import imports another stylesheet into the current stylesheet
  • @charset specifies the character set the stylesheet is using
  • @font-face specifies a font-face to be used

 

@import

 

Imported stylesheets are used (usually within external stylesheets) in a similar manner to using the <link> element. The keyword @import is used before the stylesheet location and media type:

 

@import “style.css” screen, print, tv ;

or

@import url("style.css") ;

 

The @import must have no spaces between the @ character and import, and must precede all other declarations. Thus, if in an external stylesheet it must be the first rule to be defined, and similarly it should be placed at the top of an internal stylesheet, like so:

 

<style>

@import “style.css” ;

ul { color: blue; }

… more rules go here …

</style>

 

The @import rule allows a modular approach to developing styles for a site, whereby various style sheets can be included wherever required. For instance, a master stylesheet can be created for a whole site and perhaps a seasonal stylesheet used that imports the master stylesheet then applies specific styling that overrides the master stylesheet to give the required seasonal styling.

 

 

@charset

 

Used to specify the character set the stylesheet is written in.

 

The @charset rule must be written right at the beginning of the style sheet without even a space before it. The value is held in quotes and should be one of the standard character-sets.

 

<style type="text/css">

<!--

@charset "iso-8859-1"
.......other CSS rules .....

-->

</style>

 

 

@font-face

 

Can be used to describe a font face to be used, or to define the location of a font for download.

 

<style tyle="text/css">

<!--

@font-face {

font-family: "Delicious";
src: url("https://example.com/fonts/Delicious.ttf");

}
@font-face {

font-family: Delicious;
src: local ("Delicious"),
url("https://www.example.com/fonts/delicious.tt")
format("truetype");
unicode-range: U+??,U+100-220;
font-size: all;
font-family: sans-serif;

}

-->

</style>

Leave a Reply