How to position HTML element in the center using CSS.

Jan 19

Zaheer ParachaCSS, Web Development , , , 3 Comments

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. More

article clipper vert How to position HTML element in the center using CSS.
 

Reset CSS: A simple solution to browsers’ inconsistencies.

Jan 10

Zaheer ParachaCSS, Web Development , No Comments

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. More

article clipper vert Reset CSS: A simple solution to browsers inconsistencies.
 

Make your stylesheet a work of art.

Dec 08

ZaheerCSS , , No Comments

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.

article clipper vert Make your stylesheet a work of art.
 

CSS Rounded Box Generator

Nov 19

ZaheerCSS , , 1 Comment

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



article clipper vert CSS Rounded Box Generator
 

Creating Cross Browser Compatible CSS Text Shadows

Nov 14

ZaheerCSS , No Comments

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

article clipper vert Creating Cross Browser Compatible CSS Text Shadows
 

Dynamically Resize Text

Nov 06

ZaheerCSS , , , No Comments


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>

article clipper vert Dynamically Resize Text
 

Cascading Style Sheet Cheatsheet

Oct 26

ZaheerCSS , , No Comments

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

article clipper vert Cascading Style Sheet Cheatsheet
 

Dynamically loading an external JavaScript or CSS file

Oct 26

ZaheerAjax, CSS, Javascript , , , , No Comments

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

Dynamically loading an external JavaScript or CSS file

article clipper vert Dynamically loading an external JavaScript or CSS file