CSS Tutorial-Chapter Four

Introduction

In chapter 3 we introduced "milliseconds" which will be expounded in chapter 4 along with whether or why to have CSS as embedded, external or inline and what is the term "semantic web." Chapter 4 will conclude with a discussion about teaching or preaching or style separated from content.

Analyzing Load Time

It is widely accepted that fast-loading pages improve the user experience. Rather than round-trip through the server retrieving a completely new page with every click, often the browser can either alter the layout of the page instantly or fetch a small amount of HTML, XML, or JavaScript from the server and alter the existing page. In either case, this significantly decreases the amount of time between a user click and the browser finishing rendering the new content.

However, for many sites that reference dozens of external objects, the majority of the page load time is spent in separate HTTP requests for images, JavaScript, and stylesheets.

While the above is vitally important if changes are contemplated to existing web pages and the possible use of CSS, table or table less rendering of content, an individual must make a decision as to possible changes. In terms of personal benefit versus personal cost.

The FireFox browser has a load time analyzer which we illustrated in the previous chapter. But remember us saying to view your web pages in various graphic browsers, non graphic browsers and possibly cell phones which have internet, PDA's and other devices?

Embedded CSS is contained within the <head> section of a web page. Triggered by the command to execute the CSS <style type="text/css">. Followed by how the CSS should style the web page and then ends with completion of the execution </style>. Each web page could therefore contain its very own CSS, which styles content according to a very specific CSS instructions.

External CSS would style web pages, but without the execution detail within the head section of those web pages which would be styled in the same manner. The execution of CSS would start in the head section using <link REL="stylesheet" TYPE="text/css" HREF="example.css">, <style type="text/css" media="screen" title="currentStyle">@import "example.css"; or similar and end the CSS execution with </script>.

Inline CSS is the least flexible of the options. When applying inline CSS you are styling your elements right inside the code. Examples are <p style="margin: 20px;">My paragraph text</p> or <h2 STYLE="background: #000080; color: green; line-height: 50px; font-size: 40px">.

The last CSS option will surely peek your interest. Because within your web pages is some similar HTML style coding, but you have never even thought about using CSS, until reading this tutorial to simplify your web pages and significantly reduce the time spent on style, leaving very little time for actual content. So what's the deal?

You have unknowingly put stress upon your ISP server, view your web pages differently using various graphic browsers, non graphic browsers and so forth. In addition you become frustrated because so much time is being spent to change your web pages and every page is different. A "mess of a hess", right Ollie?

Dear reader if important lessons are to be learned from this tutorial, perhaps these are a few: Web pages are both style and content. Style is the method used to present content. Content is the king of our cyber universe, style is merely a hand maiden. But different styles in presenting content are extremely important, because all of us do not think, read, act, visualize or interact in the same manner.

There are possibly three groups of people who wish to publish or change web pages.

Now let us proceed on a serious note, before finally ending this chapter with a discussion about the "semantic web."

Regretfully or thankfully because of my work as a tax attorney, I tend to determine whether to work online or offline building web pages as cost per hour. The real cost. For instance. I could go online and convert a page or my website from tables to table less CSS. Time expended say one hour. Or purchase software costing twenty dollars and spend thirty minutes to accomplish the same task, but offline or from my personal computer. Say I do ten pages regularly per week. Online time is 10 hours or offline 5 hours. Time saved 5 hours or the cost of my purchased software-four dollars per hour saved. When will I completely recoup my investment and then be dollars and time ahead? So I download trial software, make the comparison detailed and make up my mind based upon facts and figures, not my own personal opinion or that of another person.

What is the semantic web? There is nothing to gain by reinventing the wheel, so below you will find what other good people have to say. Along the way you will also find friends who are ready, willing and able to help you.