PART I

CSS Basics

If you come from a graphic design background, the idea of using code to control the look and feel of a website probably sounds bizarre. But it’s not as bad as it sounds. Styling a site with Cascading Style Sheets (CSS) involves creating a set of instructions that tell the browser what color, size, and font you want to use for your text; how much whitespace you want around different parts of the page; and so on.

The instructions consist of simple pairs of properties and values. Most properties have intuitive names such as font-size, margin-top, or border-color. Values are specified using keywords or concepts that you’re likely to be familiar with, for example pixels and RGB or HSL color formats. If you’re not sure what they are, don’t worry because everything is explained along the way. The three chapters in Part I provide all the basic knowledge you need to start styling your web pages with CSS.

Chapter 1 explains why CSS separates the style information from the HTML markup of web pages. You’ll learn what a style rule looks like, and how to make your styles available to all pages in a website. There are also some hints on how to use browsers’ developer tools to understand how styles interact with each other.

Chapter 2 introduces the important concept of CSS selectors. Selectors tell the browser which elements you want to apply the styles to. One of the most important selectors is the type (or tag) selector, which redefines the default look of an HTML element. CSS3 defines more than 40 selectors. This chapter introduces you to a subset of the most widely used, and shows you how to give links unique styles in different parts of a page.

Chapter 3 covers the nuts and bolts of specifying sizes, colors, and other values used in style rules. Don’t try to memorize all the details. Come back to it as a reference when necessary.