Learning to Design Web Pages with Style

A review of Eric Meyer's new CSS book.

Title: Eric Meyer on CSS: Mastering the Language of Web Design

Author: Eric Meyer

Publisher: New Riders

ISBN: 0-7357-1245-X

URL: www.ericmeyeroncss.com

Price: $45.00 US, $69.99 CAN

Have you ever looked at the source code of a well-designed web page and were surprised to find only minimal HTML tags and a reference to a style sheet? That's the beauty of cascading style sheets (CSS)--simple, easy to maintain HTML code. A lot can be done with CSS. Many web designers have used CSS, but most don't take advantage of all it has to offer. In case you're not familiar with CSS, it's an aspect of web design for improving the look of a web page and for indexing the look of several web pages. It operates off of one document that lists text and other layout properties. With changes that are occurring in the web design world, knowing how to use CSS effectively is going to be necessary if you design web pages. If you don't believe it, consider the fact that <font> and some other formatting tags are being eliminated. “At this point in the game, it makes about as much sense to design without CSS as it does to write web pages without using HTML”, says Eric Meyer, Standards Evangelist for Netscape. Without CSS, you won't be able to change the appearance of text in your HTML documents.

Several good reference books have been written that can help you learn how to design web pages with CSS. However, being able to look up CSS properties and knowing how to apply them to make great-looking web pages is a very different matter. The difficulty lies in that CSS, in a sense, is a kind of artistic tool for web design. As such, acquiring skills in using CSS requires experimentation and, to make the process easier, the guidance of someone who is already talented in its use. To that end, Eric Meyer, who is also an Invited Expert of the Web Consortium's (www.w3.org) CSS working group, has written a new book in which he demonstrates how to design web pages with CSS. The book is called, Eric Meyer on CSS: Mastering the Language of Web Design. Before reviewing Meyer's new book, though, for those who are unfamiliar with CSS, let me explain it a bit and give a few examples. If you already know the basics of CSS, then skip over this next section.

Introduction to CSS

A style sheet is a list of instructions or rules for the web browser, so it knows how to display a particular web page. Without a style sheet, the browser will use its default settings for text and page layout. A style sheet can be located within a web page or it can be contained in a separate document and linked to from a web page. If a style sheet is located within a web page, then style rules are placed between opening and closing style tags (<style></style>). Styles and style tags must be placed inside the opening and closing header tags (<head></head>). They cannot, however, be placed within any other tags that might be located inside the header (e.g., <title></title>).

Within style tags, one can place style instructions that will be used throughout the web page. For instance, if you wanted all bold-faced text to be in red in addition to being bold, without a style sheet you would have to go through the HTML document and look for each instance of <b> and add a font tag after them like this, <font color=“red”> and a closing font tag (</font>) before the closing bold faced tags (</b>). Instead of doing all of that, you could simply add the following style sheet to the top of the web page:

<style>
  b{color: red;}</style>

For consistency of style and to save time typing the style sheet into each web page, you can set up a separate style sheet document and link all of your web pages to it. Links to external style sheets read like this:

<link rel="stylesheet" type="text/css"
href="main.css">

In this link, the name of the style sheet document is main.css, and it's located in the same directory as the web page that is linked to it. A directory path can be added to the href value if the style sheet is not in the same directory. Incidentally, it's customary to name style sheet files with an extension of “css”.

With an external style sheet, if you wanted to modify the color and some other font attributes of the main heading on all of the web pages linked to the style sheet, you could simply add this rule to your style sheet:

h1 {
  text-size: 200%;
  text-align: center;
  color:  navy;
}

In this example, all of the text enclosed in the <h1> heading tags in all of the web pages linked to this style sheet will be displayed double the size of the normal text, centered and in navy blue. As you can see, once a style sheet document is set up properly, one can easily make changes to all associated web pages simply by changing the style sheet. If your site has hundreds of web pages, it would take quite some time to implement any formatting changes. However, it would only take you seconds to make the changes with CSS.

There is a long list of style properties that one can set with CSS. If you'd like to learn more about the basics of CSS, you can go to the CSS section of the Web Consortium's site. A good reference book on CSS is one of Meyer's other books, Cascading Style Sheets: The Definitive Guide. It has become the staple of CSS designers, but I would suggest you consider buying Meyer's new book (reviewed below) as well.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Very useful files search

Anonymous's picture

Very useful files search engine. http://Indexoffiles.com is a search engine designed to search files in various file sharing and uploading sites.

Importance of CSS

Edgard Durand's picture

I think is very important for all webmasters to made the switch to use CSS on their websites.

Re: Learning to Design Web Pages with Style

Anonymous's picture

Erik Meyer is also the author of the CSS reference book, Cascading Style Sheets: The Definitive Guide published by O'Reilly, as well as Cascading Style Sheets 2.0 Programmer's Reference published by Osborne/McGraw-Hill. I haven't read the latter, but the O'Reilly book I use almost everyday. Could use a new edition, tho...

--scott trotter

Re: CSS: The Definitive Guide

RussellDyer's picture

I like Eric Meyer's O'Reilly book, CSS: The Definitive Guide, too. Even though it's still useful, you're right it does need updating. Eric told me that he is working on a second edition. He expects to have it finished by the end of the Summer. O'Reilly says they're planning on having it in the book stores by the end of this year. It will cover CSS 1 & 2 completely and will include an overview of CSS 3.

White Paper
Linux Management with Red Hat Satellite: Measuring Business Impact and ROI

Linux has become a key foundation for supporting today's rapidly growing IT environments. Linux is being used to deploy business applications and databases, trading on its reputation as a low-cost operating environment. For many IT organizations, Linux is a mainstay for deploying Web servers and has evolved from handling basic file, print, and utility workloads to running mission-critical applications and databases, physically, virtually, and in the cloud. As Linux grows in importance in terms of value to the business, managing Linux environments to high standards of service quality — availability, security, and performance — becomes an essential requirement for business success.

Learn More

Sponsored by Red Hat

White Paper
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState