Internet Business Blog
« Previous | Home | Next »

 

Learning CSS Makes for Better Web Sites.

Share/Bookmark

September 26, 2006

The other day I was asked why I like Cascading Styles Sheets (CSS) and what makes CSS so great. Here's my answer to those questions.

The Holy Grail of CSS it to completely separate web page content from the instructions that control its look and feel. If this is achieved then it's much easier for various devices to display the web page correctly. For example the same page would display correctly on a standard web browser (Internet Explorer, FireFox, Opera, Netscape, etc.), devices used by persons with a handicap, cell phones, and yet-to-be-developed interfaces. Nor would the web site designer have to make separate web pages for some of these devices. Reality is quite different though and here in the real world, CSS does not yet do all these things. But it does have enough positive benefits to learn how it works and to incorporate it into your web pages.

There are a different ways to control how things look on a web page. For example, the color, size, and font used for a headline or the color, size, and font for a paragraph of text can be defined with in-line styles and tags. In-line means that the formatting commands for controlling the color, size, and font are mixed in with the content. This makes the source code for the page much harder to read and modify when you want to change it or fix a problem. In addition, because you're repeating the same commands over and over down the page, it makes the file size of the page get larger and larger and less efficient (slower) for those browsing your site.

As opposed to in-line styles, CSS is not repeated throughout the page. CSS can be defined in the head section, or put in a separate file and referenced from the main HTML file, or both. CSS consists of definitions of how a page component should render itself on the page. For example, you can define that a headline should be blue, 24 point, centered text and that a paragraph should be black, 12 point, justified text. Once that is defined, any normal HTML paragraph tags or headline tags would use these definitions when rendered. You can define almost all the normal HTML objects this way; background color, background image, background image position, tables, cells, images, divs, etc. This leaves your HTML code clean and much easier to read.

But Wait! Just like those Ronco TV commercials, there's more! If you have a multi-page web site and you use CSS and all your CSS definitions are in a separate file, you have one place to go to change the look and feel of all the pages in your site. Imagine if you have a 50 page site and you learn that the size of your text in all your paragraphs is too small or the wrong color to maximize sales: instead of having to edit 50 pages and change the definition of each paragraph, you simply edit the CSS file and you're done!

With CSS what do you do if you want one headline, or table, or a set of paragraphs to look different from the default? You define a class and assign that class to the object. Suppose you have a right column where you display ads; in your CSS you would define a class and give it a name such as ".rcol". You would then define the necessary items that you need: for example, ".rcol p" would be used to control how a paragraph tag was rendered. Once that class is added to the CSS file, you simply add "class=rcol" to the paragraph tag in the HTML file, or the table tag if it's in a table, or div tag if it's in a div, etc.

This is also where the cascading part of CSS happens: the default definitions cascade down into a class definition as long as the class does not contain something that overrides the default. This means that in our example, text in a paragraph tag looks different for the rcol class, but because it's the only thing we've defined for rcol, everything else would use the same styles as the rest of the page. In fact, even the default paragraph definitions for parameters other than that which we've defined in our ".rcol p" class will be used. In other words if we don't specify a font color in our ".rcol p" class and but we do define a font color in our default paragraph style, or in a container that ".rcol" is in, then ".rcol p" will be rendered with that font color.

You can also define size and positioning for objects in CSS. This is one place where we hit the real world of CSS pretty hard. Not all browsers support the size and position commands the same way. This leads to hacks that define a position and then use a command that is known, for example, to cause Internet Explorer to bail out of the CSS, after that line you use a position command that Netscape for example understands. This works because CSS uses the last definition of an object, so this technique can be used to "trick" or "hack" CSS into working across more browsers than it normally would. I don't recommend doing this. One reason is that it's messy and easy to forget why you did something. The other reason is because as browsers are updated, or new devices come online, they may not follow these unwritten and unsupported hacks and your pages are apt to be all messed up. To get around this I usually use CSS as much as I possibly can and then use tables and in-line definitions to control positioning and size. Some people will go to great lengths to use CSS for everything, even replacing all tables, but here in the real world, when your Internet business relies on your web site, your focus and objective should get the page built, functioning, and in a form that can be used reliably on as many platforms as possible, as quickly as possible.

Not all web page creation software, packages like Microsoft Front Page, Dreamweaver, or Adobe GoLive support CSS fully. You'll have to do some coding by hand. Don't get nervous, it's not all that hard. I have a course that can teach you how to get started with CSS, step by step: www.WebSiteTrainingOnline.com.

Taking the time to learn CSS and implement it in your web pages is a smart thing to do. It will be time well spent. If you have an Internet business or a business that depends on a web site, knowing how the core technologies function just makes good sense!

Until Next Time,
Fred

About the Author

Fred Black is an experienced online business operator, programmer, web site developer, father, husband, musician, and songwriter. Visit his Internet Business Blog at: http://www.pqInternet.com.


You may reprint or distribute this article as long as you leave the content and the About the Author resource box at the end intact.


Get Free Updates! Enter your name and e-mail address to receive a short notice each time I make a new post.

First Name:

Last Name:

E-Mail Address:

E-Mail again:

NOTE: You will receive a confirmation email. You must click the link in the email to activate your free updates. Please check your spam folder(s) if you don't receive the email.


Share/Bookmark

Tip Jar: Leave a Donation

Comments: 1,   TrackBacks: 1.

Posted by Fred on September 26, 2006 | Printer-Friendly

TrackBack: http://www.pqInternet.com/Blog/mt-tb.cgi/7


Assigned Categories: Internet Business | Technology | Web Site Design, HTML, CSS


Related Entries:

 

 
Comments and TrackBacks 
TrackBacks:
  1. Fred Black: pqInternet.com...
    Rolling, Rolling, Rolling... Get them Links a Rolling!
    As noted in a previous post, the color you use for links on your web page can dramatically effect how many people click the links. In addition to the link color, the behavior of the links when you move the...
    Posted On: February 27, 2007 10:18 AM.
Comments:
  1. From: Silvia

    Thanks for all of the information, it saves me a lot of time buy not having to Google research on everything.

    Posted by Silvia on August 17, 2010 10:20 AM

 


Post A Comment




Remember personal info?




Comment Policy <--- Read the comment policy (Updated 1/13/2010).

About  Contact  Free Products Fred W. Black

Blog Feeds, EMail, etc.:

Subscribe by EMail

RSS 2.0 Feed for www.pqInternet.com.
Add to Google Toolbar

Free Updates via EMail

Receive Free Updates.

Free Products and Software.

Search

 

Link to Me!

How to Link to this Blog.

Products

Products I Use & Recommend

www.3WayLinks.Net

www.1WayLinks.Net

Free Traffic System

Wordtracker Keyword Research Tool

www.aweber.com Opt-In List Management.

1&1 Hosting

Categories

All

ClickBank

Copywriting

Free Videos

Funny

Internet Business

Internet Marketing

Life

Search Engines: SEO

Social Media

Technology

Traffic

Truth and Freedom

Web Site Design, HTML, CSS

Recent Entries

Facebook Fan Pages and Static FBML Part 3: iFrames!

Facebook Fan Pages and Static FBML Part 2

Facebook Fan Pages and Static FBML - Part 1

Texting Social Media Updates - Useful vs. Useless

Success or Failure in an Internet Business Depends on Who's Looking Back at You in the Mirror...

Bullets from God - The Greatest Copywriter of All Time?

Success is not Sticky - You Have to Hold the BALL!

Birthday Salute!

New Layout

What's the Value of a Link to SEO (Search Engine Optimization)?

Internet Business Ethics 101

Exploding Your Copy (and life) From Sissy to SEISMIC.

Long Tail Keywords

I'm a Slasher!

Start Your Own Home Internet Business with these 7 Easy Steps...

All Entries

Recently Commented On

Mozilla Thunderbird Email Client - Part 2: Corrupted Inbox

Facebook Fan Pages and Static FBML - Part 1

Long Tail Keywords

Bullets from God - The Greatest Copywriter of All Time?

Success is not Sticky - You Have to Hold the BALL!

Success or Failure in an Internet Business Depends on Who's Looking Back at You in the Mirror...

Replacing a ClickBank Vendor's Sales Page with Your Own.

Facebook Fan Pages and Static FBML Part 2

Archives

All

Blog Roll

Clayton Makepeace

Terry Dean

Ryan Healy

ProBlogger

Internet Business Resources Blog

Michel Fortin

G. Brent Riggs

Jonathan Leger

Mark J Ryan

Dr. Joe Vitale

Search Engine Journal

Friday Traffic Report

Links

Cell Phones for Soldiers

Front Street Playschool

Clebe McClary

the IconFactory

Fred Black Music

Daryl Laws Sports Performance Blog

Williams High School Booster Club

Jacob Ingle

Light Peak

EasyIRS.com

Web Hosting

My Recommended Web Hosting Service: 1&1 Hosting

Mugs, Mousepads, etc.

About this Blog...

By:Fred W. Black

Contact Information

Powered by:Movable Type 3.34.

Copyright 2006 -2010, PhaseQuest.Com.
All rights reserved.

Subscribe by EMail RSS 2.0 Feed for www.pqInternet.com.

Add to Google Toolbar
My Facebook Fan Page
Twitter
Add www.pqInternet.com, to Google. Add www.pqInternet.com, to My Yahoo! Add www.pqInternet.com, to My MSN. Subscribe to www.pqInternet.com, with Bloglines Add www.pqInternet.com, to Your Technorati Favorites! Add www.pqInternet.com, to Windows Live

rs

Some photos are by: Lee Hinshaw Photography

© Copyright 2006 - 2010 PhaseQuest, all rights reserved.

 

Get Free Updates!

Insert your name and e-mail address to receive a short notice each time I make a new post.

First Name:

Last Name:

E-Mail Address:

E-Mail again:

NOTE: You will receive a confirmation email. You must click the link in the email to activate your free updates. Please check your spam folder(s) if you don't receive the email.

*I value your privacy and will never sell, rent, giveaway, or abuse your information.