HTML and CSS Reference
In-Depth Information
Here, you create a CSS rule for
<h2>
elements and specify the font-family as Peralta. You can then refer
to the style sheets in a web page as follows:
<link href='
http://fonts.googleapis.com/
css?family=Peralta' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
Figure 13-10.
Using web fonts from Google Web Fonts
Note that you should refer to the style sheet provided by Google Web Fonts prior to using the Peralta
font definition in your own style sheet (
StyleSheet.css
). Figure 13-10 shows how
<h2>
headings look in the
browser.
As you can see, the subheading is displayed using the Peralta font face provided by Google Web Fonts.
In the preceding examples, you used fonts provided by a third party (Font Squirrel or Google), but if
required you can also use your own fonts by generating a
@font-face
kit for them. The Font Squirrel web
site allows you to generate your own
@font-face
kits by uploading your own fonts. Once the
@font-face
kit
is generated for such fonts, you can use them in your web pages as discussed in this section.
Rounded Corners, Shadows, Gradients, and Transparency
One of the most common effects applied to DOM elements in a web page is to put them in a box. Box
attributes such as borders, border width and style, color, and so on are configured using various CSS
properties. CSS3 offers features that help you enhance the box layout even further. These cool additions
may very well become the CSS3 features you use most frequently. Using them, you can do the following:
• Add boxes with rounded corners to DOM elements.
• Add shadows to boxes.
• Set more than one image as the background.
• Add a gradient ill to the background.
Let's see how you can apply each of these features to DOM elements.
