144 CHAPTER 4 Getting started with CSS3
You can still have content in the CSS file, as shown in the example, but it must follow the
@import rules. You can also specify the media type for each @import rule, as shown in the
following example that specifies screen and print types.
@charset 'UTF-8';
@import url('/Content/header.css'); screen
@import url('/Content/menu.css'); screen
@import url('/Content/sidebar.css'); screen
@import url('/Content/mainContent.css');
@import url('/Content/footer.css'); print
body {
background-color: white;
color: gray;
}Notice that the @import rule for the mainContent.css file is missing the media type, which
means that the default media type of all is applicable, and this CSS file will be used for the
screen and the printer.Using @font-face rule to import fonts
You might want to use a specific font, but you know that many users will not have that font
on their computer. To solve this problem, you can provide a link to the font so it can be
downloaded and used in your style sheet. The following is an example of specifying the
@ ont-face rule to define the myFont font, which will be loaded from a file on the current f
website, Fancy_Light.ttf or Fancy_Light.eot.
@font-face {
font-family: myFont;
src: url('Fancy_Light.ttf'),
url('Fancy_Light.eot'); /* IE9 */
}Starting with Internet Explorer 9, support was added for Embedded Open Type (.eot) files
only, which Microsoft developed for web use. These font files can be created from exist-
ing TrueType font files by using the Microsoft Web Embedding Fonts Tool (WEFT). Firefox,
Chrome, Safari, and Opera support True Type Files (.ttf) files, so you must specify both file
types to be compatible with most browsers.NOTE FONT LICENSING
Fonts are intellectual property, just like software, music, and video. Be sure to have the
proper license to use any font with the @font-face rule.Lesson summary
■■A style rule, or style, is composed of two parts: the selector and the declaration block.
■■The selector locates the elements in the HTML document to be styled.