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.

The default rendering of HTML text without CSS
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>
The font, changed to sans serif through CSS
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>
Increasing the size of the text
Figure 2-3. Increasing the size of the text

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

Get CSS Cookbook, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial