If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

Even before the web, advertising pioneer David Ogilvy found that advertisements in at least four colors are 100% more memorable than ads in black and white. He also notes that white (or light) background colors with black (or dark) text color improved conversion by 100% as opposed to the reverse. Colors capture visitors’ attention, trigger emotions and when used correctly they help you keep viewers around long enough to make you money.

When visitors first load your website you have approximately 30 seconds to catch their attention. Your web design better be appealing, easy to view, and instantly captivate your visitor or you can say hello to Mr. Back Button…

So which color has a calming effect? Which one increases heart rate? Do certain colors make a customer more comfortable with buying from your site?

The colors of the layout can largely affect a users perception of how easy to use, or professional you web site looks.

The Colors Are Meaningful; The First Impression of Your Web Site

Different colors have different meanings and associations. They engage your visitors emotions, silently and powerfully… Than, What Colors Mean…

WHITE – Cleanliness, and refinement. Brides wear white as a sign of purity as do doctors. Impressions: refreshing, clarity, and truthfulness.

BLACK – Power, sophisticated, seriousness. Creates drama and strong emotions but too much is overwhelming. A bad background choice. Impressions: mystery, exclusive, or evil.

BLUE – The most popular color worldwide. Promotes business dependability; a good choice for building customer loyalty. Impressions: cooling, serene, can also be cold.

RED – Excitement, danger, passion, energetic. Red draws attention, increases heart rate and stimulates appetite. Use it to focus attention with boldness and accents, and promote excitement. Impressions: Enthusiasm, encourages confidence, action.

GREEN – Natural, healthy, peaceful. Green promotes tranquility, and financial stability. The second favorite color, green is easy on the eye. Impressions: renewal, harmony,relaxing.

PURPLE – Wisdom, royalty, spirituality or sophistication, celebration or mournfulness. Purple is made of blue (calming) and red (stimulating) and the dominant undertone will define perception. Frequently a favorite of adolescent girls and creative people; purple can promote a premium service or create a romantic, feminine appeal. Impressions: encourages creativity, uplifting, spiritual, and calming.

ORANGE – Warmth, energy, play, excitement. It can add fun to your site, or be a highlight on charts and graphs. Impressions: stimulates activity and appetite, and encourages socialization.

BROWN – Effectiveness, stability, and richness. It’s associated with natural, organic things. Impressions: a connection to the earth, wholesome feelings, and orderliness.

Now that You know your colors will have an immediate effect on visitors, what are your winning Color Schemes…?

Some Effective Color Schemes

So what’s the right color scheme for a positive effect? First, carefully consider colors to promote your image. Use a background color and text color that contrast but work in harmony. Variations of one color don’t provide enough contrast.

A light background color (instead of white) maintains contrast, but is easier to read since it softens the screen’s brightness. Gray’s a favorite background choice, although, green is gaining favor as the “new gray.” Choose a text color that stands out and is easy to read against your background. Use bold, primary colors to draw attention to important page elements. But be careful: Too many colors can distract and reduce readability. In addition, colors should enhance site usability. Establishing a color for headings and a color for links allows visitors to navigate quickly and easily.

Accommodating the Color Blind Online

Web sites with good balance and color schemes have the usability and appearance. Similarities in hues and brightness harmonize colors and create attractive color schemes. However, they’re not “user-friendly” for the visually impaired. Nearly one in 12 visitors to your site will have some form of color-blindness. Most commonly, the inability to distinguish between red and green. So a red-green combination is a bad choice for usability. If links are a different color, but aren’t identifiable as links, color-blind visitors may not realize that they are links. Blue is recognizable by everyone, and the standard usage of blue, underlined lettering for links gives all visitors the same usability.

With all colors, it’s best to keep them bright and distinct to clearly separate headings, links, and text, and increase functionality.

Use the following links to help choose your winning color schemes.

• For browser safe colors organized by hue:
  http://websitetips.com/colorcharts/weinman/hue/
• For color harmonies to create combinations and themes:
  http://www.easyrgb.com/harmonies.php

Give thought to what emotions your colors will trigger, and how the colors enhance your site’s usability. When you consider your viewer’s needs, select a color scheme that is appealing, and is easy for them to use, you’ll have the winning edge to convert visitors into customers.

• 0 Comments

There are three ways to apply CSS to HTML.

In-line

In-line styles are plonked straight into the HTML tags using the style attribute.

They look something like this:

<p style=“color: red”>text</p> 

This will make that specific paragraph red.

But, if you remember, the best-practice approach is that the HTML should be a stand-alone, presentation free document, and so in-line styles should be avoided wherever possible.

Internal

Embedded, or internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page.

This would look something like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>CSS Example</title>
<style type=“text/css”>
	p {
		color: red;
	}

	a {
		color: blue;
	}
</style>
…

This will make all of the paragraphs in the page red and all of the links blue.

Similarly to the in-line styles, you should keep the HTML and the CSS files separate, and so we are left with our saviour…

External

External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like:

p {
	color: red;
}

a {
	color: blue;
} 

If this file is saved as “web.css” then it can be linked to in the HTML like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
	<title>CSS Example</title>
	<link rel=“stylesheet” type=“text/css” href=“web.css” />
…

In the CSS Advanced Tutorial, we will see that there are other ways of linking external style sheets, but this will suffice for now.

To get the most from this guide, it would be a good idea to try out the code as we go along, so start a fresh new file with your text-editor and save the blank document as “web.css” in the same directory as your HTML file.

Now change your HTML file so that it starts something like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html>

<head>
	<title>My first web page</title>
	<link rel=“stylesheet” type=“text/css” href=“web.css” />
</head>
…

Save the HTML file. This now links to the CSS file, which is empty at the moment, so won’t change a thing. As you work your way through the CSS Beginner Tutorial, you will be able to add to and change the CSS file and see the results by simply refreshing the browser window that has the HTML file in it, as we did before.

• 0 Comments

CSS brings 16,777,216 colours to your disposal. They can take the form of a name, an rgb (red/green/blue) value or a hex code.

red
Is the same as
rgb(255,0,0)
Which is the same as
rgb(100%,0%,0%)
Which is the same as
#ff0000
Which is the same as
#f00

There are 17 valid predefined colour names. They are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

transparent is also a valid value.

The three values in the rbg value are from 0 to 255, 0 being the lowest level (for example no red), 255 being the highest level (for example full red). These values can also be a percentage.

Hexadecimal (previously and more accurately known as ‘sexadecimal‘) is a base-16 number system. We are generally used to the decimal number system (base-10, from 0 to 9), but hexadecimal has 16 digits, from 0 to f.

The hex number is prefixed with a hash character (#) and can be three or six digits in length. Basically, the three-digit version is a compressed version of the six-digit (#f00 becomes #ff0000, #c96 becomes #cc9966 etc.). The three-digit version is easier to decipher (the first digit, like the first value in rgb, is red, the second green and the third blue) but the six-digit version gives you more control over the exact colour.

‘color’ and ‘background-color’

Colours can be applied by using color and background-color (note that this must be the American English ‘color’ and not ‘colour’).

A blue background and yellow text could look like this:

h1 {
	color: yellow;
	background-color: blue;
}

These colours might be a little too harsh, so you could change the code of your CSS file for slightly different shades:

body {
	font-size: 0.8em;
	color: navy;
}

h1 {
	color: #ffc;
	background-color: #009;
}

Save the CSS file and refresh your browser. You will see the colours of the first heading (the h1 element) have changed to yellow and blue.

You can apply the color and background-color properties to most HTML elements, including body, which will change the colours of the page and everything in it.

• 0 Comments

You can alter the size and shape of the text on a web page with a range of properties, outlined below:

font-family

This is the font itself, such as Times New Roman, Arial, or Verdana.

The font you specify must be on the user’s computer, so there is little point in using obscure fonts. There are a select few ‘safe‘ fonts (the most commonly used are arial, verdana and times new roman), but you can specify more than one font, separated by commas. The purpose of this is that if the user does not have the first font you specify, the browser will go through the list until it finds one it does have. This is useful because different computers sometimes have different fonts installed. So font-family: arial, helvetica, for example, is used so that similar fonts are used on PC (which traditionally has arial, but not helvetica) and Apple Mac (which, traditionally, does not have arial and so helvetica, which it does normally have, will be used).

Note: if the name of a font is more than one word, it should be put in quotation marks, such as font-family: "Times New Roman".

font-size

The size of the font. Be careful with this - text such as headings should not just be a paragraph in a large font; you should still use headings (h1, h2 etc.) even though, in practice, you could make the font-size of a paragraph larger than that of a heading (not recommended for sensible people).

font-weight

This states whether the text is bold or not. In practice this usually only works as font-weight: bold or font-weight: normal. In theory it can also be bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 or 900, but seeing as many browsers shake their heads and say “I don’t think so”, it’s safer to stick with bold and normal.

font-style

This states whether the text is italic or not. It can be font-style: italic or font-style: normal.

text-decoration

This states whether the text is underlined or not. This can be:

• text-decoration: overline, which places a line above the text.
• text-decoration: line-through, strike-through, which puts a line through the text.
• text-decoration: underline should only be used for links because users generally expect underlined text to be links.

This property is usually used to decorate links, such as specifying no underline with text-decoration: none.

text-transform

This will change the case of the text.

• text-transform: capitalize turns the first letter of every word into uppercase.
• text-transform: uppercase turns everything into uppercase.
• text-transform: lowercase turns everything into lowercase.
• text-transform: none I’ll leave for you to work out.

body {
	font-family: arial, helvetica, sans-serif;
	font-size: 0.8em;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.5em;
}

a {
	text-decoration: none;
}

strong {
	font-style: italic;
	text-transform: uppercase;
}

Text spacing

The letter-spacing and word-spacing properties are for spacing between letters or words. The value can be a length or normal.

The line-height property sets the height of the lines in an element, such as a paragraph, without adjusting the size of the font. It can be a number (which specifies a multiple of the font size, so ‘2′ will be two times the font size, for example), a length, a percentage or normal.

The text-align property will align the text inside an element to left, right, center or justify.

The text-indent property will indent the first line of a paragraph, for example, to a given length or percentage. This is a style traditionally used in print, but rarely in digital media such as the web.

p {
	letter-spacing: 0.5em;
	word-spacing: 2em;
	line-height: 1.5;
	text-align: center;
}

• 0 Comments

margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element.

Change the CSS code for h2 to the following:

h2 {
	font-size: 1.5em;
	background-color: #ccc;
	margin: 1em;
	padding: 3em;
}

You will see that this leaves one-character width space around the secondary header and the header itself is fat from the three-character width padding.

The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left are the self-explanatory properties you can use.

The Box Model

Margins, padding and borders (see next page) are all part of what’s known as the Box Model. The Box Model works like this: in the middle you have the content area (let’s say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually represented like this:

Margin box

Border box

Padding box

Element box

You don’t have to use all of these, but it can be helpful to remember that the box model can be applied to every element on the page, and that’s a powerful thing!

Related Pages

• 0 Comments

Borders can be applied to most HTML elements within the body.

To make a border around an element, all you need is border-style. The values can be solid, dotted, dashed, double, groove, ridge, inset and outset.

border-width sets the width of the border, which is usually in pixels. There are also properties for border-top-width, border-right-width, border-bottom-width and border-left-width.

Finally, border-color sets the colour.

Add the following code to the CSS file:

h2 {
	border-style: dashed;
	border-width: 3px;
	border-left-width: 10px;
	border-right-width: 10px;
	border-color: red;
}

This will make a red dashed border around all HTML secondary headers (the h2 element) that is 3 pixels wide on the top and bottom and 10 pixels wide on the left and right (these having over-ridden the 3 pixel wide width of the entire border).

• 0 Comments

You should already have an HTML file like the one made at the end of the HTML Beginner Tutorial, with a line that we added at the start of this CSS Beginner Tutorial, linking the HTML file to the CSS file.

The code below covers all of the CSS methods in this section. If you save this as your CSS file and look at the HTML file then you should now understand what each CSS property does and how to apply them. The best way to fully understand all of this is to mess around with the HTML and the CSS files and see what happens when you change things.

body {
	font-family: arial, helvetica, sans-serif;
	font-size: 80%;
	color: black;
	background-color: #ffc;
	margin: 1em;
	padding: 0;
}

/* By the way, this is a comment */

p {
	line-height: 1.5em;
}

h1 {
	color: #ffc;
	background-color: #900;
	font-size: 2em;
	margin: 0;
	margin-bottom: 0.5em;
	padding: 0.25em;
	font-style: italic;
	text-align: center;
	letter-spacing: 0.5em;
	border-bottom-style: solid;
	border-bottom-width: 0.5em;
	border-bottom-color: #c00;
}

h2 {
	color: white;
	background-color: #090;
	font-size: 1.5em;
	margin: 0;
	padding: 0.1em;
	padding-left: 1em;
}

h3 {
	color: #999;
	font-size: 1.25em;
}

img {
	border-style: dashed;
	border-width: 2px;
	border-color: #ccc;
}

a {
	text-decoration: none;
}

strong {
	font-style: italic;
	text-transform: uppercase;
}

li {
	color: #900;
	font-style: italic;
}

table {
	background-color: #ccc;
}

• 0 Comments

For the CSS Beginner Tutorial we looked solely at HTML selectors - those that represent an HTML tag.

You can also define your own selectors in the form of Class and ID selectors.

The benefit of this is that you can have the same HTML element, but present it differently depending on its class or ID.

In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a name preceded by a hash character (#).

So the CSS might look something like:

#top {
	background-color: #ccc;
	padding: 1em
}

.intro {
	color: red;
	font-weight: bold;
}

The HTML refers to the CSS by using the attributes id and class. It could look something like this:

<div id=“top”>

<h1>Chocolate curry</h1>

<p class=“intro”>This is my recipe for making curry purely with chocolate</p>

<p class=“intro”>Mmm mm mmmmm</p>

</div>

The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

You can also apply a selector to a specific HTML element by simply stating the HTML selector first, so p.jam { whatever } will only be applied to paragraph elements that have the class ‘jam’.

• 0 Comments

Grouping

You can give the same properties to a number of selectors without having to repeat them by separating the selectors by commas.

For example, if you have something like:

h2 {
	color: red;
}

.thisOtherClass {
	color: red;
}

.yetAnotherClass {
	color: red;
}

You could make it:

h2, .thisOtherClass, .yetAnotherClass {
	color: red;
}

Nesting

If the CSS is structured well, there shouldn’t be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.

For example:

#top {
	background-color: #ccc;
	padding: 1em
}

#top h1 {
	color: #ff0;
}

#top p {
	color: red;
	font-weight: bold;
}

Removes the need for classes or ID’s if it is applied to HTML that looks something like this:

<div id=“top”>

	<h1>Chocolate curry</h1>

	<p>This is my recipe for making curry purely with chocolate</p>

	<p>Mmm mm mmmmm</p>

</div> 

This is because, by separating selectors with spaces, we are saying ‘h1 inside ID top is colour #ff0‘ and ‘p inside ID top is red and bold‘.

This can get quite complicated (because it can go for more than two levels, such as this inside this inside this inside this etc.) and may take a bit of practice.

• 0 Comments

Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo class { property: value; }, simply with a colon in between the selector and the pseudo class.

Many CSS proposals are not supported by all browsers, but there are four pseudo classes that can be used safely when applied to links.

• link is for an unvisited link.
• visited is for a link to a page that has already been visited.
• active is for a link when it is gains focus (for example, when it is clicked on).
• hover is for a link when the cursor is held over it.

a.snowman:link {
	color: blue;
}

a.snowman:visited {
	color: purple;
}

a.snowman:active {
	color: red;
}

a.snowman:hover {
	text-decoration: none;
	color: blue;
	background-color: yellow;
}

Although CSS gives you control to bypass it, maintaining different colours for visited links is good practice as many users still expect this. As pseudo classes (other than hover) are not often used, this is a feature that is unfortunately not as common as it once was. Because of this, it is less important than it used to be, but if you are looking for the optimum user response, then you should use it.

Traditionally, text links were blue if not visited and purple if visited, and there is still reason to believe that these are the most effective colours to use, although, again, with the increasingly widespread use of CSS, this is becoming less commonplace and the average user no longer assumes that links must be blue or purple.

You should also be able to use the hover pseudo class with elements other than links. Unfortunately, Internet Explorer doesn’t support this method. This is a bloody irritation because there are lots of nice little tricks you can do that look delightful in other browsers.

• 0 Comments