Positioning text in the center of an element is easily done using text-align:center property. But how do you position an entire element, for e.g; a div or an image in the center of the containing parent element?

For example, if you want to put an image at the center of your header div how do you accomplish this?

There are several ways to align an element in the center but the preferred and elegant method is to use margin property.

By setting left and right margin widths to “auto” you tell the browser to put this element at the horizontal center of the the parent element.

#outerDiv{
 background:#fff;
 border:1px solid #333;
 width:450px;

}
#innerDiv{
  margin:auto;
  background:#eee;
  width:50%
}

Piece of cake, huh? Not so fast. This approach will work in all browsers except, you guessed it, in IE6. I am sure you are not surprised that IE6 will not render this div as you would have expected. But there is a workaround for this IE6 behavior. You can set text-align property of the outer div to center and this will align your inner div nicely in the center in IE6.

This will, however, introduce a side effect. Since you are setting text-align property of the parent element to center, your inner div (the child) will inherit this property also and the text will be center-aligned. If you don’t want your text to be in the center, reset text-align property at the child level by adding text-align:left;

So your final style sheet will have this declaration.

#outerDiv{
 background:#fff;
 border:1px solid #333;
 width:450px;
 text-align:center;
}
#innerDiv{
 margin:auto;
 background:#eee;
 width:50%
 text-align:left;
}

Good luck!

How to position HTML element in the center using CSS. is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

Related posts:

• Position Ad Units in Posts Photo credit: AMagill Ever since I started placing AdSense units...
• An HTML element you don't want to omit. As web developers we have the tendency to blame web...
• Set focus on the first text field of HTML form. A HTML form is a very good channel that you...

One of the challenges web designers face is to get various web browsers render their web pages in a consistent manner. The reason is every browser assigns slightly different default styles to certain page elements.

A simple approach to handle this cross-browser inconsistency is to overwrite browsers’ default styles. This technique is known as resetting CSS. To me it is more like setting a starting point for your web page being rendered by various browser. By setting (or resetting) the base styles you start with a consistent base for each browser.
Now the question is how to reset browser’s default style. Eric Meyer created the following style sheet to reset browsers’ default CSS style.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Many web developers considered this as the standard reset style sheet. Save this CSS as reset.css and include this file in your header file (or header section of every web page). Make sure that this style sheet comes before your other style sheets otherwise it will overwrite your styles.

Reset CSS: A simple solution to browsers’ inconsistencies. is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

Related posts:

• Simple tips to make you a better blogger. Image credit:Kelly Sims To become a successful blogger is not...
• How to position HTML element in the center using CSS. Positioning text in the center of an element is easily...
• Dynamically Resize Text .codeText{color:blue;font-weight:normal;width:100%;} .subhead{color:gray;font-weight:bold;text-decoration:underline;} CSS, combined with little JavaScript, offers great flexibility...

Jina Bolton at Vitamin.com has an excellent post for all CSS developers. She described how you can write well structured stylesheets which are more efficient and easy to maintain. Some of the tips may look intuitive but many times we all need reminder to get the basics right. In my experience lot of developers do not give enough importance to structured and well written CSS. I recommend that you read this article. By following her tips you can be a more productive CSS expert.

Make your stylesheet a work of art. is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

Related posts:

• Make AdSense Deluxe plugin work with WordPress 2.8.5 Recently I upgraded to WordPress 2.8.5. The upgrade process itself...
• Improve your JavaScript code. Christian Heilmann compiled a list of seven rules for unobtrusive...
• About Hi, I’m Zaheer Paracha, I am the founder of zParacha.com....

A nice little tool to create rounded boxes for your website. You can choose the background color for your box. The tool will generate the CSS code and a sample HTML page. Generating rounded-box has never been easier.
CSS Rounded Box Generator

CSS Rounded Box Generator is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

Related posts:

• About Hi, I’m Zaheer Paracha, I am the founder of zParacha.com....
• #1 Programming Language – Java According to TIOBE Programming Community Index Java is still the...
• Automatically twitter your posts Twitter is a wonderful tool to promote your blog. Typically...

Sometimes it is nice to jazz up your website by giving text some graphical looks without actually using images. The CSS2 text-shadow property allows you to create shadow for your text. Unfortunately so far the only browser that supports this property is Safari. You can find tutorials on the web that show you how to create CSS text shadow but usually they only deal with one or two browsers. I stumbled upon this nice article that explains cross-browser compatible CSS text shadows. It has CSS code to handle all major browsers.

Creating Cross Browser Compatible CSS Text Shadows

Creating Cross Browser Compatible CSS Text Shadows is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

Related posts:

• Dynamically Resize Text .codeText{color:blue;font-weight:normal;width:100%;} .subhead{color:gray;font-weight:bold;text-decoration:underline;} CSS, combined with little JavaScript, offers great flexibility...
• Set focus on the first text field of HTML form. A HTML form is a very good channel that you...
• About Hi, I’m Zaheer Paracha, I am the founder of zParacha.com....

CSS, combined with little JavaScript, offers great flexibility to web designers. For instance, let say you want to allow visitors to change text size on your website. Now how do you do it? Using CSS is the easiest solution.
All you need is few style sheets and a JS script to dynamically enable those style sheets. Sounds daunting? Believe me it is very simple and easy to implement. Let me walk you through the process.

In this tutorial we’ll create a simple web page with options to select one of the three text sizes.
Let’s start with creating a simple HTML page.

<HTML>
<BODY>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sed a risus eu dolor viverra volutpat.In a tellus ut augue dignissim nonummy.
</BODY>
</HTML>

Assuming that we have three CSS files named style.css, sStyle.css and lStyle.css.
In mStyle.css and lStyle.css you only need one line if all you want is to change the text size.
So sStyle.css may have .body {font-size:small;}
and lStyle.css may have .body{font-size:large;}
By default the font-size value is medium. To reference these style sheets from our HTML,

we add them to the “head” section of our HTML. So our code will become:

<HTML>
<HEAD>
<link rel=”stylesheet” type=”text/css” href=”mystyles.css” media=”screen” />
<link rel=”alternate stylesheet” type=”text/css”
href=”mystyle_xl.css” media=”screen” title=”medium” />
<link rel=”alternate stylesheet” type=”text/css” href=”mystyle_xxl.css” media=”screen” title=”large”/>
</HEAD>
<BODY>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a risus eu dolor viverra volutpat.In a tellus ut augue dignissim nonummy.
</BODY>
</HTML>

To associate the style sheets to our web page we added the link elements in the header section. Style sheets can be added to a web page in one of the following three ways.

1. Persistent: This is the default style sheet and is always ‘on’. You just need to set rel attribute to ‘stylesheet’ to make a style sheet persistent for your web page. You can use this style sheet for common rules shared by all style sheets.
2. Preferred: This type of style sheet is enabled by default and can be ‘turned-off’ if the user selects an
   alternate style sheet. To make a style sheet preferred you need to include a title attribute in the link element.
3. Alternate: This type of style sheet can be selected by the user as alternative to the default or preferred style sheet. This is the type that we will use in this example. To declare a style sheet as alternative set the rel attribute to ‘alternate stylesheet’ and give a title to the style sheet. (See lines 2 and 3 in the header section above.)

When our web page loads the rules in the persistent style sheet will be applied to the page. Now let us add links to our page to allow user to change text size.

<HTML>
<HEAD>
<link rel=”stylesheet” type=”text/css” href=”mystyles.css” media=”screen” />
<link rel=”alternate stylesheet” type=”text/css” href=”mystyle_xl.css” media=”screen” title=”medium” />
<link rel=”alternate stylesheet” type=”text/css” href=”mystyle_xxl.css” media=”screen” title=”large”/>
</HEAD>
<BODY>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a risus eu dolor viverra volutpat.In a tellus ut augue dignissim nonummy.
<a href=”#” onClick=”enableSelectedStyle(‘default’); return false;”>Small</a>
<a href=”#” onClick=”enableSelectedStyle(‘medium’); return false;”>Medium</a>
<a href=”#” onClick=”enableSelectedStyle(‘large’); return false;”>Large</a>
</BODY>
</HTML>

We added three links to our page and each link invokes a Javascript method to swap the style sheet. Here is the JavaScript code.

function enableSelectedStyle(title){
var i, linkSheets, ss, title;
linkSheets = document.getElementsByTagName(“link”);
for(i=0; i<linkSheets.length;i++){
ss = linkSheets[i];
var b = ss.getAttribute(“title”);
if(b == null) continue;
if(b == title) ss.disabled = false;
else ss.disabled = true;
}
}

Script Explained:

The script retrieves all “link” elements of the document and then loop through them. If the element has a title attribute and its value is same as the input value, it activates that style. If the title value is different from the input value it disables that style sheet. Since the default style sheet link does not have ‘title’ attribute the script will not change it.

Here is the final code

<HTML><HEAD>
<script language=”JavaScript”>
function enableSelectedStyle(title){
var i, linkSheets, ss, title;
linkSheets = document.getElementsByTagName(“link”);
for(i=0; i<linkSheets.length;i++){
ss = linkSheets[i];
var b = ss.getAttribute(“title”);
if(b == null) continue;
if(b == title) ss.disabled = false;
else ss.disabled = true;
}
}
</script>
<link rel=”stylesheet” type=”text/css” href=”mystyles.css” media=”screen” />
<link rel=”alternate stylesheet” type=”text/css” href=”mystyle_xl.css” media=”screen” title=”medium” />
<link rel=”alternate stylesheet” type=”text/css” href=”mystyle_xxl.css” media=”screen” title=”large”/>
</HEAD>
<BODY>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a risus eu dolor viverra volutpat.In a tellus ut augue dignissim nonummy.
<a href=”#” onClick=”enableSelectedStyle(‘default’); return false;”>Small</a>
<a href=”#” onClick=”enableSelectedStyle(‘medium’); return false;”>Medium</a>
<a href=”#” onClick=”enableSelectedStyle(‘large’); return false;”>Large</a>
</BODY>
</HTML>

Dynamically Resize Text is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

Related posts:

• Set focus on the first text field of HTML form. A HTML form is a very good channel that you...
• Dynamically loading an external JavaScript or CSS file A very good article explaining how to load JavaScript and...
• Creating Cross Browser Compatible CSS Text Shadows Sometimes it is nice to jazz up your website by...

If you need quick reference CSS guide, look no further. This CSS cheat sheet is a comprehensive list of all CSS properties. Accompanying brief explanation adds value to this cheat sheet. You may want to bookmark this page.

Cascading Style Cheatsheet

Cascading Style Sheet Cheatsheet is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

Related posts:

• Improve your writing style without breaking a sweat. Image credit:Mooganic Nothing is more embarrassing than a misspelled word...
• About Hi, I’m Zaheer Paracha, I am the founder of zParacha.com....
• Reset CSS: A simple solution to browsers’ inconsistencies. One of the challenges web designers face is to get...

A very good article explaining how to load JavaScript and CSS files asynchronously and on demand.

Dynamically loading an external JavaScript or CSS file

Dynamically loading an external JavaScript or CSS file is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

Related posts:

• Improve your JavaScript code. Christian Heilmann compiled a list of seven rules for unobtrusive...
• Dynamically Resize Text .codeText{color:blue;font-weight:normal;width:100%;} .subhead{color:gray;font-weight:bold;text-decoration:underline;} CSS, combined with little JavaScript, offers great flexibility...
• How to add external jar files to Maven project POM Maven has made compiling Java projects almost an effortless job....