1. Changing the background color

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333">
  <tr>
    <td>

	</td>
   </tr>
</table>

2. Setting a fixed width and background color for the content area

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333">
  <tr>
    <td>
		<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" bgcolor="#ffffff">
		<tr>
			<td>

			</td>
		</tr>
		</table>
	</td>
   </tr>
</table>

3. Changing the font size, style and color of the content area

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333">
  <tr>
    <td>
		<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" style="font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px;" bgcolor="#ffffff">
		<tr>
			<td>

			</td>
		</tr>
		</table>
	</td>
   </tr>
</table>

4. Setting a different font, color and style for headings

<span style="font-size: 14px; font-weight: bold; color: #ed0000;
font-family:Arial, Helvetica, sans-serif;">Latest News from the Web Development Blog</span>

5. Inserting a line between two blocks of text

	<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" style="font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px;" bgcolor="#ffffff">
		<tr>
			<td>
				First block of text.
			</td>
		</tr>
		<tr>
			<td style="border-top: 1px solid #66666;">
				Second block of text.
			</td>
		</tr>
	</table>

6. Inserting and floating an image to the left

	<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" style="font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px;" bgcolor="#ffffff">
		<tr>
			<td width="150" align="left" valign="top">
				<img src="http://full.path.to.the.image/image.jpg" width="120" height="100" alt="My image" />
			</td>
			<td width="450" align="left" valign="top">
				Text next to the image
			</td>
		</tr>
		<tr>
			<td colspan="2">
				Copyright text
			</td>
		</tr>
	</table>

7. Aligning text to right (or left or center)

	<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" style="font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px;" bgcolor="#ffffff">
		<tr>
			<td>
				<div>Some text goes here</div>
				<div align="right"><a href="#">Read more</a></div>
			</td>
		</tr>
	</table>

8. Changing a link color

<a href="#" style="color: #00ccff;
text-decoration: none;">Read more</a>

9. Adding a border around the content area

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333">
  <tr>
    <td>
		<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" style="font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px; border: 1px solid #00ccff; border-collapse: collapse;" bgcolor="#ffffff">
		<tr>
			<td>

			</td>
		</tr>
		</table>
	</td>
   </tr>
</table>

10. Opening a link in a new window

<a href="http://www.google.com" target="_blank"
style="color: #00ccff; text-decoration: none;">Go to Google</a>

Putting it altogether

<table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="#cccccc">
  <tr>
    <td>
		<table width="600" border="0" align="center" cellpadding="10" cellspacing="5" style="font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px; border: 1px solid #999999; border-collapse: collapse;" bgcolor="#ffffff">
		<tr>
			<td colspan="2" height="70" bgcolor="#000033">
				<span style="font-size: 14px; font-weight: bold; color: #ff6600; font-family:Arial, Helvetica, sans-serif;">Latest News from the Web Development Blog</span>
			</td>
		</tr>
		<tr>
			<td colspan="2" height="10" bgcolor="#ff6600"></td>
		<tr>
		<tr>
			<td width="150" align="left" valign="top">
				<img src="http://eisabainyo.net/weblog/wp-content/uploads/2010/05/sexy-web-design.jpg" width="250" height="326" alt="Sexy Web Design Book Cover" />
			</td>
			<td width="450" align="left" valign="top">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt nisl et felis sodales faucibus. In hac habitasse platea dictumst. Sed tincidunt egestas velit mollis faucibus. Aliquam feugiat, neque nec porta accumsan, odio nulla laoreet risus, ut vestibulum lacus velit eget mi. Aliquam vehicula magna sed leo lobortis et luctus magna venenatis. Nunc et massa ipsum. In tristique, elit hendrerit tincidunt consectetur, diam purus tempor ante, eget scelerisque velit est vitae lorem. Nullam vulputate blandit dui et tempor. Curabitur quam lectus, suscipit non placerat a, consectetur vel velit. </p>
				<p>Vestibulum egestas ipsum quis elit pulvinar ullamcorper. Vestibulum ac neque sed neque consequat ornare eu et justo. Phasellus pulvinar vestibulum nisl, ut tempus dolor commodo at. Morbi ultricies nisl vel massa accumsan tempor. Donec quam nibh, euismod vitae vestibulum ac, ullamcorper non eros. Integer quis sapien ac enim rhoncus auctor. Nulla facilisi. Vivamus et varius massa. Integer aliquam ultricies risus nec vulputate. Donec porta viverra magna, a suscipit arcu porta non. </p>
				<div align="right"><a href="#" style="color: #ff6600; text-decoration: none;" target="_blank">Read more</a></div>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<p>Praesent ut purus sit amet elit tincidunt laoreet a sed mauris. Integer a lacinia augue. Donec hendrerit sapien et lorem tincidunt a luctus purus vehicula. Cras magna diam, auctor sit amet pretium in, pretium a odio. Proin sed laoreet lorem. Mauris tortor diam, tempus sit amet lacinia in, egestas eu lectus. Vivamus aliquet hendrerit tellus sit amet pretium. Praesent dictum libero pretium magna pretium congue. Pellentesque consequat est a tortor tincidunt placerat in a ante. Sed non elit enim, vitae scelerisque ipsum. Integer fringilla, massa in ultrices bibendum, orci neque luctus arcu, in pulvinar elit risus eu nunc. Etiam dignissim malesuada consequat. Donec eget magna risus, eu vehicula ante. Quisque adipiscing placerat tincidunt. Aliquam ultrices vehicula velit, vel dignissim sem feugiat malesuada. Donec magna nisi, pretium at ullamcorper ultrices, sodales eu odio. Nulla facilisi. Curabitur hendrerit dictum rhoncus. Praesent bibendum dapibus ligula, ut placerat dolor vulputate vel. </p>
			</td>
		</tr>
		<tr>
			<td colspan="2" bgcolor="#cccccc">
				<span style="font-size: 10px; font-weight: bold; color: #666666; font-family:Arial, Helvetica, sans-serif;">Copyright 2010 All Rights Reserved.</span>
			</td>
		</tr>
	</table>
	</td>
   </tr>
</table>

Email Newsletter Templates

If you are looking for professional email newsletter designs, ThemeForest is the best place to buy email newsletter templates because each template package comes with a complete HTML code and layered PSD file (and sometimes multiple color variations). Our favourites are:

iNewsletter

Platnum

Read How to code an HTML Email Newsletter on Web Development Blog!

Since writing How to style a Submit button in CSS a few months ago, I have found an alternative way to achieve the same result. In this example, we will be using <button> tag instead of <input> tag. The <button> tag will still submit the form that it belongs to when clicked because the type of the button is set as submit.

HTML

<button id="button" name="button" type="submit">
<span>Contact us today!</span></button>

CSS

#button {
	background: transparent url(contact.gif) 0 0 no-repeat;
	border: none;
	cursor: pointer;
	width: 180px;
	height: 50px;
}

#button span {
	display: none;
}

Read How to style a Submit button in CSS – Example 2 on Web Development Blog!

CSS

#comments .expandable .comment-body {
	height: 50px;
        overflow: hidden;
}

Javascript

$("#comments .comment-more a").live("click", function(){
	if ($(this).text() == 'more') {
		$(this).parent().parent().removeClass("expandable");
		$(this).text("less");
	} else {
		$(this).parent().parent().addClass("expandable");
		$(this).text("more");
	}
	return false;
});

HTML

<div id="comments">
	<div class="comment-content expandable">
		<div class="comment-body">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis cursus adipiscing. Donec risus leo, venenatis adipiscing euismod eget, ultricies vitae nunc. Curabitur fermentum tortor vitae nisl fermentum non scelerisque erat posuere. Sed auctor tempor venenatis. Morbi vel urna turpis, adipiscing molestie nisl. Curabitur ut lorem id neque mollis fringilla. Phasellus varius viverra suscipit. Proin eleifend quam in diam dictum suscipit. Praesent eleifend fringilla turpis sit amet commodo. In ullamcorper ligula non augue bibendum ultricies scelerisque tortor congue. Aenean nulla lectus, tincidunt egestas cursus sit amet, tristique non libero. Duis facilisis blandit nisi, eget cursus turpis tristique non. Fusce sodales dolor vel ligula rutrum venenatis. Cras molestie vulputate urna at iaculis. Mauris consequat accumsan mi, non facilisis enim porttitor gravida.</p>
		<p>Suspendisse et purus a tortor aliquet vestibulum. Sed ullamcorper euismod interdum. Aenean gravida, metus ac imperdiet venenatis, neque ligula viverra urna, a pellentesque elit mi id ligula. In suscipit nunc eget magna bibendum tempor. Nunc ac mauris ut risus posuere accumsan. Nulla dictum semper justo, quis adipiscing sem consectetur quis. Donec felis arcu, convallis pretium consectetur at, semper ullamcorper urna. Proin elit nisi, vehicula eget pretium ac, faucibus vitae justo. Praesent quis arcu eget massa interdum ullamcorper in nec mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent orci nisl, mollis et egestas ut, suscipit et orci. Morbi in justo sit amet ligula facilisis interdum ac id ante. Nam sit amet metus eget augue tristique interdum vitae in metus. Vestibulum tristique vestibulum lorem, eget pharetra ante aliquet eget. Donec fermentum adipiscing sagittis. Quisque interdum, augue non vulputate rutrum, sem tortor facilisis diam, in tincidunt nisi tellus ut eros. </p>
		</div>
		<span class="comment-more"><a href="#">more</a></span>
	</div>

	<div class="comment-content expandable">
		<div class="comment-body">
		<p>Vivamus viverra arcu non nibh sollicitudin consectetur. Vivamus sodales erat a tellus semper in feugiat eros pharetra. Aenean vel magna magna, scelerisque molestie risus. Fusce lobortis euismod justo, sed gravida neque porta nec. Aenean risus metus, accumsan et mattis et, semper non erat. Fusce velit enim, viverra a pulvinar nec, viverra vel erat. Praesent sed mi quam, vel dignissim nunc. Nullam accumsan quam ut eros congue eget accumsan arcu bibendum. Nam congue egestas fringilla. Aliquam felis mi, volutpat nec tempor eu, hendrerit quis lorem. Pellentesque pretium metus quis sapien luctus venenatis vitae pretium dolor. Fusce ac tellus a tellus posuere suscipit a quis ante. Quisque ut sem eget risus consequat ornare.</p>
		<p>Nunc id risus risus, sed pellentesque nisi. Donec pulvinar nisl sit amet eros venenatis ut dictum odio pretium. Nulla hendrerit ligula a metus rutrum sed feugiat libero mattis. Nam id mi ac leo iaculis volutpat. Maecenas nec enim ut mauris convallis auctor in sed purus. Nam porta magna vitae nisl tempus in eleifend felis viverra.</p>
		</div>
		<span class="comment-more"><a href="#">more</a></span>
	</div>
</div>

Recommended Books on jQuery

jQuery Cookbook: Solutions & Examples for jQuery Developers

jQuery in Action

Read Read more using jQuery live event on Web Development Blog!

This example code shows you how you can have a top branding bar similiar to diggbar in just a few lines of html and css.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>framebar example by Web Development Blog</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
    margin: 0;
    padding: 40px 0 0 0;
    overflow: hidden;
    font: 83%/1.4 Arial, Helvetica, Sans-Serif;
}
#bar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    min-width: 900px;
    height: 30px;
    padding: 5px 0;
    line-height: 1;
    background: #333;
    color: #fff;
    text-size: 1.2em;
}
#bar a {
    padding: 0 5px;
    color: #fff;
}
#frame {
    width: 100%;
    height: 100%;
    z-index: 10;
}
</style>
</head>
<body>
<!-- BEGIN: bar -->
<div id="bar">
<a href="http://eisabainyo.net/weblog/" title="Web Development Blog">Web Development Blog</a>
</div>
<!-- END: bar -->
<iframe scrolling="auto" id="frame" src="http://eisabainyo.net/weblog/" frameborder="0"></iframe>
</body>
</html>

Read Framebar (like diggbar) example in html and css with no javascript on Web Development Blog!

  <input type="submit" id="submit" value="Search" />

CSS

#submit {
  cursor: pointer;
}

Read Change the arrow into a hand when hovering over ‘Submit’ button on Web Development Blog!

<?php
  if (is_page('about')) {
      $image = 'image_about.jpg';
  } else if (is_page('projects')) {
      $image = 'image_projects.jpg';
  } else if (is_page('services')) {
      $image = 'image_services.jpg';
  } else if (is_page('contact')) {
      $image = 'image_contact.jpg';
  } else {
      $image = 'image_default.jpg';
  }
?>

<div id="header">
<img src="<?php echo bloginfo('template_url'); ?>
/images/<?php echo $image;?>"
alt="<?php bloginfo('name'); ?>" />
</div>

Read How to display a different header image for different pages in WordPress on Web Development Blog!

<li<?php if (is_page('gallery')) : echo ' class="current_page_item"'; endif; ?>><a href="gallery/">Gallery</a></li>

Note: wp_list_pages() template tag automatically add current_page_item class to the <li> element for the currently viewed page.

Read Highlight the current page link in WordPress on Web Development Blog!

The upper half of the <fieldset> border goes missing. This problem has been discussed here and shown here.

HTML:

<form action="login.php" method="post" id="login">
  <fieldset>
    <legend>Login</legend>
    <label for="username" class="label">Username</label>
    <input type="text" name="username" id="username"/>
    <label for="password" class="label">Password</label>
    <input type="password" name="password" id="password" />
    <input type="submit" name="submit" value="Login" />
  </fieldset>
</form>

CSS:

fieldset {
	border: 1px solid #333;
}

legend {
	display: none;
}

The workaround:

It looks like the problem occurs only when you set the <legend> to display: none in CSS. To solve this, we will need to add a span element inside the legend and set it to display: none and remove display: none from legend.

Updated HTML:

    <legend><span>Login<span></legend>

Updated CSS:

legend {
}

legend span {
	display: none;
}

Read Fieldset and Legend bug in IE8 on Web Development Blog!

<a href="http://www.google.com" rel="external">Google</a>

Javascript:

$(document).ready(function() {
    $("a[rel=external]").attr('target', '_blank');
});

Or

$(document).ready(function() {
    $('a[rel="external"]').click( function() {
        window.open( $(this).attr('href') );
        return false;
    });
});

Read Open link in a new window using jQuery on Web Development Blog!

sIFR stands for Scalable Inman Flash Replacement and it is an open source JavaScript and Adobe Flash dynamic web fonts implementation, enabling the replacement of text elements on HTML web pages with Flash equivalents.

Pros

• Looks nice
• Does not require a server side language
• Text created with sIFR can be copied/selected
• Graceful degradation (If flash is not installed, it will just display normal text)
• Works well with screen readers

Cons

• Not easy to configure
• Not easy to make font adjustments
• Requires Flash installed on client’s browser
• Can be slow if there are too many sIFR elements on a single page

Website | Demo

FLIR

FLIR stands for Facelift Image Replacement. FLIR uses PHP and Javascript to generate text into images with your desired font and replaces them on the fly.

Pros

• Looks nice
• Relatively easy to configure
• Does not require Flash

Cons

• Text cannot be selected/copied
• Uses a server side language (PHP) to generate images and therefore requires a server with PHP
• Requires GD library on the server
• Slow if there are too many FLIR elements on a single page

Website | Demo

My two cents

These techniques are good alternatives to using normal image replacement techniques with CSS for websites that use CMS and require content editors to update text and headings. However, they should be used sparingly as there is always an issue with speed and bandwidth. For example, it is ok to use these techniques for headings but not for body content. After all, websites should not only look pretty, but also accessible and usable. I prefer sIFR to FLIR because although it is harder to implement, it does not require a server side language, and looks nicer. It also degrades gracefully which is an important factor in ensuring a website’s accessibility.

Read sIFR vs FLIR – Font Replacement Techniques on Web Development Blog!