Getting Started with CSS excerpts: Styling tables, backgrounds, and borders

Knowledge of cascading style sheets (CSS) is essential for developing modern, attractive websites, but many beginners are put off by the need to learn about unfamiliar concepts, such as selectors, properties, and classes, before they can achieve anything. Getting StartED with CSS takes a practical approach by showing you how to use CSS in simple stages, starting by changing the default appearance of HTML tags to improve the look of text and links. It assumes no prior knowledge of CSS and avoids bombarding you with unnecessary technical details. At the same time, it explains all the main points and acts as a reference that you can come back to when you need to refresh your memory.

Aimed at anybody who wants to learn how to style websites using CSS, this book covers the following topics:

• What Is CSS, and Why Should I Learn It? (PDF , 2.2 MB)
• How Do I Improve the Look of Text and Links?
• How Can I Improve the Layout of My Text?
• How Can I Flow Text Around Images?
• How Do I Add Backgrounds and Borders to Improve the Look of My Page? (PDF , 2.2 MB)
• How Do I Solve the Mysteries of Width and Height?
• How Do I Create Differently Styled Sections?
• How Do I Style Lists and Navigation Menus?
• How Do I Style Tables? (PDF , 2.2 MB)
• How Do I Position Elements Precisely on the Page?
• Are There Any Guidelines for Basic Page Layout?
• How Do I Create Styles for Printing?
• Appendix: CSS Properties and Selectors

The printed book is available through Friends of Ed, an APress company.

Getting StartED with CSS © 2009 David Powers. Reproduced by permission of Friends of Ed. All rights reserved.

What Is CSS, and Why Should I Learn It?

In the beginning, the Web was simple. It consisted of plain, unadorned text. Headings were in large, bold type; links were blue and underlined—and that was it. The lack of images and any attempt at styling the page seem odd to us now, but the Web's origins lie in the scientific community, not with artists or graphic designers. However, it didn’t take long before people other than scientists realized the potential of the Web and began to demand the ability to include images. Once images began to brighten up web pages, designers wanted not only a way to make text look more interesting but also to lay out the contents of a page in more attractive ways than just headings and paragraphs. Many designers think of CSS as the “new” way to style web pages, so it comes as quite a surprise to discover that CSS has been with us for years. The original specification was published by the World Wide Web Consortium (W3C) at the end of 1996.

Download the complete chapter:

• Chapter 1: What Is CSS and Why Should I Learn It? (PDF, 2.2 MB)

How Do I Add Backgrounds and Borders to Improve the Look of My Page?

The secret of good web design is drawing the visitor's eyes to important parts of the page. Images, borders, and background colors all help to break up the page and focus attention. Images of the Grand Canyon not only look attractive, they tell the visitor what the Grand Canyon looks like. But images can also serve another purpose—decorative touches that please the eye and give a unified look to the site. Rather than littering the HTML markup with purely decorative images, it's preferable to add them as background. Although some HTML tags allow you to add background images, the options are very limited. CSS, on the other hand, gives you an amazing amount of control over the location and appearance of background images.

Download the complete chapter:

• Chapter 5: How Do I Add Backgrounds and Borders to Improve the Look of My Page? (PDF, 2.2 MB)

How Do I Style Tables?

Tables seem to be the most divisive of all HTML elements—you either love 'em or hate 'em. For years, they were the only way to build a grid structure to lay out web pages. But tables work in a unique way. The height of each row is determined by the tallest object in the row, and the width of each column is determined by the widest object in the column. Just when you think you have everything nicely aligned, you add something slightly bigger in a table cell, and the whole table structure shifts.

Download the complete chapter:

• Chapter 9: How Do I Style Tables? (PDF, 2.2 MB)