CSS Cookbook, 3rd Edition

Chapter 2. CSS Basics

Introduction

Cascading Style Sheets (CSS) provide a simple way to style the content on your web pages. CSS may look complicated to first-time users, but this chapter shows how easy it is to use CSS.

Here’s an exercise with the traditional “Hello, world!” example. First, open a text editor or a favorite web page editor tool and enter the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title>CSS Cookbook</title>
 <head>
 <body>
  <p>Hello, world!</p>
 </body>
</html>

Save the file and view it in your web browser. There is nothing special about this line, as shown in Figure 2-1.

Figure 2-1. The default rendering of HTML text without CSS

To change the style of the HTML text to sans serif, add the following CSS, as shown in Figure 2-2:

<p style="font-family: sans-serif;">Hello, world!</p>

Figure 2-2. The font, changed to sans serif through CSS

To keep the default font but change the font size to 150%, use the following code, as shown in Figure 2-3:

<p style="font-size: 150%">Hello, world!</p>

Figure 2-3. Increasing the size of the text

In this chapter, you’ll learn about selectors and properties, ...