Designing a Web Page with CSS - HTML, CSS, and Dynamic HTML - page 189

◗

7. Save your changes to the file and then reload home.htm in your Web browser.
As shown in Figure 3-40, the body text of the Web page has changed, using the
NobileRegular font in place of the previous font.

Figure 3-40 Text rendered in the NobileRegular font

Understanding the CSS @rules
The @font-face rule is one example of a CSS @ rule , which specifi es a command or
directive that controls how browsers interpret and run the contents of a CSS style sheet.
Figure 3-41 lists the @ rules and describes how they are used.

Figure 3-41 CSS @rules

@rule Description
@charset “ encoding ”; Defines the character encoding used in an external style sheet where
encoding is the name of the character set
@import url( url ) media Imports an external style sheet file located at url . The optional media
attribute provides a comma-separated list of media devices to be used
with the style sheet

@media media {
styles
}

Targets the style rules in styles to devices that match the media
types specified in media

@page location {
margins
}

Defines the page margins for printed output where location is either
left , right , or first for left page, right page, or first page, and
margins set the margin widths

@font-face {
font_description
}

Defines the properties of a custom Web font where font_description
indicates the source and features of the font

@namespace prefix uri

Defines an XML namespace where prefix is the namespace prefix
and uri is the location of the namespace

In general, all of the CSS @ rules should be placed at the top of the style sheet before
the style properties that may use them.