|
|
In the early days on World Wide Web, HTML was fairly simple. The set of mark-up tags available to web developers was relatively small, consisting of codes that defined the structure of a web document. Over time, developers demanded more control over the look of their documents, so the folks who designed the browser software obliged by adding more tags to create tables, frames, and other now common web page elements. Other tags were introduced to control the appearance of text rendered by a browser.
Over the years, HTML has evolved into something far different from its original purpose. Instead of a straight-forward mark-up language for defining structure, it has become a complex set of tags used for controlling how a web page looks. Look at the HTML for a typical web page and you will find that many, if not most, of the mark-up tags are used to control the layout of the page content. HTML files have grown needlessly large and overly complex. What's the solution? In a word (actually two): style sheets.
Style sheets, or cascading style sheets as they are officially designated, provide a way to return HTML to its original purpose by removing from a web page the tags that define its appearance and storing that information outside the body of the document. Perhaps, the most commonly used mark-up tag for controlling the appearance of text in a document is the <font> tag, which is used to change the font, size, and color of text in a page. Let's say you were creating a web page in which all the level 2 headings were to be displayed in bold red so it would look like the following.
To do that with standard mark-up, you would have to insert the following around the appropriate text throughout the document.
<h2><font color="red">My Big Read Heading</font></h2>
It wouldn't be much of a bother if they were used only in a couple of places, but spread them throughout a document and making that change becomes tedious. Whether you type in the mark-up tags yourself or use a WYSIWYG editor, changing the text styles can get old real quick. The solution is to create and use style sheets. Style sheets are placed inside the head section of the HTML file. A simple style sheet to accomplish the above formatting is shown below.
<style>
h2 {color: red;}
</style>
Everywhere the <h2> tag is used in the document, the above style would be applied. If you decided to switch the color from red to to green, you only have to make a change in one line of the style sheet. Consider the steps you would have to perform if the font tag were used.