Why do I like Cascading Styles Sheets (CSS) and what makes CSS so great. The answer only makes sense if you know what CSS is.

The Holy Grail of CSS is to separate the content of a web page from the instructions that control what it looks like. This makes it much easier for various devices to display the web page correctly. The same page would display correctly on all standard web browsers (Internet Explorer, FireFox, Opera, Netscape, etc.), and devices used by persons with a handicap, cell phones, other devices, and yet-to-be-developed interfaces. The web site designer would not have to make separate pages for these devices. However, reality is different and here in the real world CSS does not do all these things. It does have enough positive points to make it worthwhile to learn and incorporate it into your web pages.

There are multiple ways to control how something looks on a web page. The color, size, and font used for a headline or for a paragraph of text can be defined with in-line styles and tags. The term “in-line” means that the commands for controlling the color, size, and font are mixed in with the content. This makes the source code for the page cluttered and hard to read and edit when you want to update it or fix something. Also, because you’re repeating the same commands over and over throughout the page, the file size of the page gets larger and hence 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 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. 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!

But with CSS what do you do if you want one paragraph or a set of paragraphs to look different? You define a class. If 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”, then you would define the necessary items that you want to look different (p tags for example). “.rcol p” would be used to control how a paragraph tag was rendered. You simply add “class=rcol” to the paragraph tag, 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 in CSS comes into play: the default definitions cascade down into a class as long as the class does not contain something that overrides the default. This means that in our example text rendered in a paragraph tag looks different for the rcol class, but because that’s the only thing we’ve defined for rcol, everything else would use the same styles as the rest of the page.

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. 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, you should get the page built, functioning, and in a form that can be used reliably on as many platforms as possible.

Not all web site software packages like Microsoft Front Page, Dreamweaver, or Adobe GoLive, etc. fully support CSS. You’ll have to do some coding manually. Don’t worry, it’s not that hard. I have an online course that can teach you how, just follow the link at the end of this article. Take the time to learn CSS and implement it in your web pages. It will be time well spent.

By Fred Black 

When a business owner decides to bring their business to the web, generally the last thing that they think about is search engine optimization. They assume that whomever they hire to do their web design will put up a site and then submit it to the search engines and the traffic will magically pour in. Unfortunately it takes more than that to drive search engine traffic to your site, and even more unfortunately most developers don’t program with SEO in mind, nor do they educate the client about the process involved in gaining traffic from search engines.

Whether it’s carelessness or a lack of knowledge, or a combination of the two, this often leads to a client that several months down the road doesn’t understand why their site doesn’t get any traffic and isn’t helping their business. A good designer will not only program with SEO in mind, but will also educate the client about the basic principles of SEO, whether they are the one who executes it or not.

Many times the clients I inherit have gone through this scenario and then face drastic on-site changes to get their site search engine friendly before we are even able to begin the arduous process of link building. Whether you are designing a site for yourself or for a client, following the simple steps below when programming will ultimately save the business time and money and result in a search engine friendly site that truly maximizes the online potential of the business.

Use Proper Tags for Headings, Bold Text, Italic Text, and Lists

HTML has heading tags, bold tags, italic tags, and ordered and unordered lists for a reason and you should use them. Using CSS you can practically style them however you like, but actually using a heading tag for your headings, and bold tags for important text, will help allow search engines understand what text on a page is a heading or what is more important than the surrounding text. Simply applying a CSS style that makes text larger or bold doesn’t do that.

Optimize Your Images

Search engine spiders can’t read text within an image. Adding ALT text to your image tag helps, but ideally you should remove all wording from the image and style it using CSS, adding the remaining portion of the image as a background image to the text. Here is a side-by-side comparison of two images that look the same in your browser, but much different to a search engine spider.

Avoid Canonical Problems

Believe it or not, search engines can see http://yoursite.com, http://www.yoursite.com, and http://www.yoursite.com/index.html as three different pages. A simple solution is to use a 301 redirect to point all of your pages to their “www” counterpart. You can also select the preferred domain that Google shows in the new Google Webmaster Tools console.

Get Rid of Session IDs if You have a PHP Site

Have you ever seen a PHPSESSID variable added to the end of a URL on a PHP page (it looks something like PHPSESSID=34908908)? This happens because PHP will add a unique PHPSESSID to URLs within your site if cookies aren’t available. This can be extremely problematic for your site’s search engine ranking. Google and Yahoo will see a unique PHPSESSID in the URL every time they visit a page on your site, and in turn think that said page is a different page each time. At worst, this could be viewed as duplicate content and get your site banned, and at best it will reduce the perceived value of each page. One solution that I’ve used successfully is to utilize url_rewriter.tags.

Put CSS and JavaScript in External Files

Nearly every site nowadays uses CSS and JavaScript for something. While both are great for enhancing user experience, neither will help your search engine ranking if left on your page. One of the factors that search engines consider when ranking your site is the percentage of code relevant to the search term. CSS and JavaScript can take up hundreds of lines of code, minimizing the importance of your text and in turn hurting your ranking. By putting them in separate files and simply including them in your page by reference, you can reduce hundreds of lines down to one and increase the amount of code in the file that is relevant content.

Minimize the Use of Tables in Layouts

The debate about whether or not tables should be used in site design has been going on for years and there’s no end in site. I fall somewhere in the middle – there are certain circumstances (like organizing tabular data) where I think tables still make the most sense, but I also appreciate the SEO benefits of using CSS layouts. CSS layouts drastically reduce the amount of code in your site that isn’t content that the user sees. Just like moving CSS and JavaScript to an external file, the less on-page code that isn’t content, the better. Check out search engine friendly layouts for some free example layouts.

Validate Your Site

A site doesn’t have to be perfectly coded to rank high in the search engines (there are many, many other factors), but valid HTML will help ensure that search engines and browsers alike will accurately see your page. Try using the official W3C Validator or install this handy Firefox extension. Validating generally identifies areas of code that are redundant, unnecessary, or not accepted across all browsers. All of which will help make your site more search engine friendly.

By Adam McFarland of iPrioritize

When I help people with web pages, I encourage them to edit the HTML directly and not rely on programs like Microsoft FrontPage or Adobe GoLive to layout their pages. One of the things that most people have a hard time grasping is what HTML Color Codes mean and how they work.

HTML Color Codes are 6 characters wide and look like “#80FF12″. This is really made up of 3 2-digit hex numbers that represent Red, Green, and Blue. I probably just lost a good portion of the readers, didn’t I? Let me back up and explain some things about hex values and color.

How to describe a color using numbers? There are a lot of ways to specify a particular color, but one of the ways that’s used with computers is to specify the values of Red, Green, and Blue to mix together to achieve the desired color. As we vary the amounts of Red, Green, and Blue we can create most any color you desire.

Why does this relate to computers? Computer displays, TVs, LCDs, and other “projected light” display devices use pixels to display what you see on the screen. The color value for those pixels is specified in a RGB (Red, Green, and Blue) value. For example, if your PC monitor is set to 1024 x 768 resolution, then there are 768 lines (going across your screen from top to bottom) on your screen, each line has 1024 pixels or little dots in it. Each of those pixels or little dots is actually made up of three smaller dots or light sources: a red one, a green one, and a blue one.

Ink is different. Printers that you use with your computer generally specify color as a four (or more) color “reflective” ink value made up of Yellow, Magenta, Cyan, and Black which is abbreviated as YMCK. Your computer uses formulas to convert the RGB values to CMYK values so that you can print what you see on your screen accurately.

How does the computer represent a RGB color value? As 3 separate values (one for Red, one for Green, and one for Blue) and each one ranges between 0 and 255. If you count the 0 as a value, that’s a total of 256 possible values. When you put the Red, Green, and Blue values together to represent a color, you get a possibility of 16.7 million colors (256 x 256 x 256). That’s a lot of colors and most people consider this to be “true” color because it can represent most photographs and images.

OK then, what is a Hex value? I’m glad you asked! Your computer stores information as single ones and zeros. Each of these tiny single values is called a “bit”. We then combine 8 of these “bits” to make a “byte”. So a byte is 8 bits. If you recall from high school math, you can count in various “bases”. We normally use base 10 or “decimal”, which uses 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 to represent a number. Likewise, if we use the ones and zeros I just mentioned, we’re talking about just two possible values for each digit, 0 or 1, and this is called base 2 or “binary”. However, in computers, we also use base 16, or hexadecimal (hex for short) because it packs more values into a single space. Hex uses the following digits to represent a number: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. To represent the number 128 in decimal or base 10 takes 3 digits (128), in binary it takes 8 digits (10000000), and in hex or base 16 it takes just 2 digits (80). So by using hex values we save storage space and gain efficiency.

OK, my head hurts now, how does this relate to HTML color codes? HTML colors codes are made up of 3 sets of hex numbers, one for Red, one for Green, and one for Blue.

For example:
000000 is black (0’s for all three colors)
FFFFFF is white (255’s for all three colors)
FF0000 is all RED (255 for Red, 0 green, 0 blue)
00FF00 is all GREEN (0 Red, 255 green, 0 blue)
0000FF is all Blue (0 red, 0 green, 255 blue)
FFFF00 is Yellow (255 red, 255 green, and 0 blue)
808080 is a gray (128 red, 128 green, and 125 blue)

Generally in HTML, you also put a “#” in front of the color code, but this is not necessary when you specify all 6 digits. If you make profiles for mySpace.com, leave off the “#” too because they filter them and it won’t display the color correctly if you use the “#”.

You can use the calculator that comes with Microsoft Windows to convert between Decimal and Hex values. Open the calculator and select View and then Scientific. Once you do this, you’ll see more buttons and controls on the calculator. Click “Dec” and the key in a number. Now click “Hex” and it’ll convert the number to hex. To convert from Hex to Dec, click on “Hex”, key in the number, and then click “Dec”. Sometimes you’ll get a color specification in Decimal, for example (128, 30, 80) and you can use this method to convert it to hex (80, 1E, 50) which would look like this for your HTML color #801E50.

I hope you understand more about HTML Color Codes and how colors are stored and specified in computers.

By Fred Black