Friday, July 23, 2010

Some Background on CSS

Today's World Wide Web is definitely not what it was twenty years ago. I remember one of my first experiences using the Internet in the early 1990s. A friend of mine invited me over to his house to check out a new technology his family recently set up in their home. He showed me baseball scores from a website that published sports information. When he told me that the scores were updated within the previous hour, I was amazed. I remember that there wasn't much color or style associated with the feed we were examining. Just black and white text with team names and scores.

Between that time and the Web 2.0 (enhanced interaction, video, etc.) world we live in now, web pages became much more flavorful. Advanced arrangements, color, and other effects were brought into the presentation of web content to give the information visual appeal. Web pages became burdened by tags specifying font styles and color, table markup for setting up the page layout, and other tags that were not necessarily pertinent to the information being presented. Consistency in the look and feel between one web page and the next for a particular web site became difficult to maintain.

The development of CSS in the late 1990's brought a welcomed improvement to the web. With CSS, the presentation tags that determine color, background images, and other aspects of a site's look and feel can be pulled out from content itself. A common example of how CSS changes the way web pages are developed uses the old HTML font tag, which was used to specify how the text enclosed within it would be presented. Here's an example. Consider a situation where you want the font for each of your paragraphs to have a particular size, color, and style. You might use the following markup to accomplish your formatting:

<p><font example text></font></p>

Using CSS, the font tag would be unnecessary. Instead, your web document would likely access a style sheet (linked to from your page header) that formats every paragraph from a central location. With CSS in place, your paragraph would look like this instead:

<p>Some example text...</p>

The formatting of the font size, color, and face would all be done separate from the content itself. This makes it easier for search engines and web readers to see the actual content (in this case, "Some example text...") instead of having to do extra work parsing through the font tag and its attributes. CSS also reduces the amount of work by a web developer by removing the need to repetitively specify how various elements of a page should look. Although this was a simple example, consider a full page of HTML , with hundreds or even thousands of tags. The difference between CSS and the traditional HTML tag usage becomes obvious.

Using CSS provides a few major benefits over the old school HTML standard, including the following:

o CSS provides the ability to define styles for multiple HTML tags in a centralized location so that they don't have to be specified over and over again.
o CSS allows for separation of content from presentation, which makes content more accessible to search engines and web page readers.
o CSS provides more flexibillty in working with background images, form elements, and other aspects of a web page. There are many more attributes available with CSS than what could be specified with the deprecated HTML standard.

With a little practice, you can become adept at using basic CSS to format your web pages. Becoming an expert with CSS then becomes an issue of accumulating experience with CSS properties and their associated values, and learning the effects of how styles can be applied to tags. You can polish your CSS skills by experimenting with using CSS to arrange and format page mockups. If you become good enough, you might even become comfortable designing from scratch using CSS.

Article Source: