Home ›

Learning to Design Web Pages with Style

Feb 10, 2003  By Russell J.T. Dyer
 in
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
Submitted by Anonymous (not verified) on Wed, 02/11/2009 - 06:54.

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
Submitted by Edgard Durand (not verified) on Fri, 01/07/2005 - 22:02.

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
Submitted by Anonymous on Thu, 02/20/2003 - 03:00.

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
Submitted by RussellDyer (not verified) on Mon, 02/24/2003 - 03:00.

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.

Webcast
More Resources
How to Build an Optimal Hadoop Cluster to Store and Maintain Unlimited Amounts of Data Using Microservers

Realizing the promise of Apache® Hadoop® requires the effective deployment of compute, memory, storage and networking to achieve optimal results. With its flexibility and multitude of options, it is easy to over or under provision the server infrastructure, resulting in poor performance and high TCO. Join us for an in depth, technical discussion with industry experts from leading Hadoop and server companies who will provide insights into the key considerations for designing and deploying an optimal Hadoop cluster.

Learn More

Sponsored by AMD

White Paper
More Resources
Red Hat White Paper: Using an Open Source Framework to Catch the Bad Guy

Built-in forensics, incident response, and security with Red Hat Enterprise Linux 6

Every security policy provides guidance and requirements for ensuring adequate protection of information and data, as well as high-level technical and administrative security requirements for a system in a given environment. Traditionally, providing security for a system focuses on the confidentiality of the information on it. However, protecting the data integrity and system and data availability is just as important. For example, when processing United States intelligence information, there are three attributes that require protection: confidentiality, integrity, and availability.

Learn more about catching the bad guy in this free white paper.

Learn More

Sponsored by DLT Solutions