Section 1.0. Introduction | CSS Cookbook, 2nd Edition

1.0. Introduction

Cascading style sheets (CSS) provides a simple way to style the content on your web pages. CSS may look complicated to the first-time CSS user, but this chapter shows how easy it is to use CSS. The recipes provide the basics to get you started with CSS. After you write a few lines of HTML page, add a little CSS and you immediately see the results.

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

<html>  <head>   <title>CSS Cookbook</title>  <head>  <body>   <p>Hello, world!</p>  </body> </html>

Save the file and view it in your web browser. This line is nothing special as you can see in Figure 1-1.

Figure 1-1. Default rendering of HTML text without CSS

To change the style of the HTML text from to sans serif, add a bit of the following CSS (see Figure 1-2):

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

Or, keeping the default font, change the font size to 150% font-size, using the following example that you see in Figure 1-3:

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

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

Figure 1-3. The size of the text gets larger

In this chapter, you'll learn about selectors and properties, organizing style sheets, and positioning. These general recipes prepare you for fancier recipes in upcoming chapters.