O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required