What Is CSS? - HTML

In 1997, the World Wide Web Consortium released the first HTML 4 recommendation, the first to embody a serious effort to separate structure from presentation. The W3C envisioned a transitional period, in which Web authors would continue to use some presentation features in their pages, but the end point was clear: Any Web page that wanted to conform strictly to HTML would have to omit presentation-related coding. To see for yourself how difficult maintaining HTML 3.2 code can be, consider the following HTML:

what this HTML code looks like in a full page on a PC, while
what that same page looks like on a Mac (notice that the font is slightly different).

The maintenance nightmare
From looking at the HTML and then seeing the HTML interpreted by the browser, you can pretty much tell what part of the text is instructions to the browser and what part is the content. But would you feel comfortable making changes to the content—say, adding another bulleted set of questions and answers? Probably not. With all those codes embedded within the text, you might mess something up. And you probably wouldn’t want someone else who didn’t know what all those codes meant doing it either.

How a PC browser displays the HTML code.

How a PC browser displays the HTML code.
The previous text displayed in a browser on a Mac.

The previous text displayed in a browser on a Mac.
The worst maintenance nightmares occur when you want to change the look of your pages throughout your Web site. Because the presentation code has to be included in every page, you have to change every page to change the look of your site. Consider the site map shown in Figure. Every screen should have the same formatting: same font, same heading sizes, same alignment, same text color, and same background color. With HTML 3.2, you could do this only by inserting all the needed presentation code on every single page.

Map of a Web site.

Map of a Web site.

<li>What does <i>Stay In Touch</i> do?</li>

<p><i>Stay In Touch</i>

allows you to harness the power of the World Wide Web to communicate with people who visit your web site. Using <i>Stay In Touch</i> list management service, you can set up a sign-in page on your web site today and customize it to match the rest of your web site. Your visitors can sign into your site when they visit. Then you can send mail to your visitors based on a number of criteria: the interest they indicate, the publications they read, etc.

To see an example of this, go to the Demo and view the Send Mail option.</p>

<li>How secure is my list?</li> Only you have access to your list. Access to your list is available exclusively from secure pages residing on our server. You have enough to worry about. The security of your list needn’t be one of those things.</p>

Note: The use of the italic tags (<i>) in the preceding code is arguably “formatting” and is used to simplify the example while conforming to the visual style of the text “Stay In Touch.” When using HTML 4.01 and CSS it might be better to use span tags (<span>) to refer to a CSS class instead of directly specifying the italic text attribute. See Chapter 16 for more information on styles and span tags. How comfortable would you be updating the previous HTML? How about if you needed to add another set of questions and answers? Already, you can see that using HTML 4.01 makes a world of difference.

There’s only one problem. The simpler, HTML 4.01-compliant code looks just terrible on-screen; with no presentation information in the code, the browser falls back on its default presentation settings.

Enter CSS
By themselves, strictly conformant HTML 4 documents are ugly. Web authors would never have accepted HTML 4 if the W3C had not also developed Cascading Style Sheets (CSS). In brief, CSS enables Web authors to specify presentation information without violating the structure versus presentation distinction. The information the browser must know to format the previous text is stored separately, in a style sheet.

The style sheet lists the presentation styles that the browser should use to display the various components of the document, such as headings, lists, and paragraphs. The style sheet is kept separate from the marked-up text. It can be stored in a special section of the HTML document itself, away from the document’s text, or in a separate file entirely.
The idea and the name come from the publishing industry, where style sheets are still used today. And they’re cutting costs wherever Web documents are created and maintained.

Think back to the problem of updating a Web site’s look, discussed earlier. Without CSS, you’d have to make changes to the presentation code in each and every page. Thanks to CSS, all you have to do is make changes to the single, underlying style sheet that every page uses, and the entire site’s appearance changes.

What does “cascading” mean?
In Cascading Style Sheets, the term “cascading” refers to what computer people call the order of precedence—that is, which style information comes first in the style pecking order. Here’s the order:

  • Element-specific style information comes first. This is style information that’s embedded within the HTML. But wait—doesn’t this violate the structure versus presentation rule? Yes, but sometimes it’s necessary. If element-specific information is given, it takes precedence over page-specific and global styles.
  • Page-specific style information is kept in a special section of the document, called the head, that’s separate from the text. It defines the way a particular page looks. If page-specific information is given, it takes precedence over global styles.
  • Global styles are specified in a separate style sheet file. They come into play unless conflicting element- or page-specific styles are given. See Figure for a summary of these points.

The cascading model of style definitions.

The cascading model of style definitions.

HTML 4.01 almost eliminates the need to have an HTML expert perform site maintenance. This means HTML 4.01 helps reduce the cost of maintaining your Web site. When was the last time you heard anything about reducing costs being associated with the Web?

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics