How to position HTML element in the center using CSS.

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.

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.
 

Homer Simpson in pure CSS.

No Comments

OK developers here is your next software project. Create a web page that will display Homer Simpson’s image on the screen. Too easy for you? Here is the catch. You cannot use any image. Yes that is correct you will need to draw Simpson’s image without using any graphics. Sounds impossible? If  you think this cannot be done  check out what Roman Cortes did with just the CSS.

CSS Simpson

Isn’t that amazing. It is awesome how some developers can use their skills to achieve what many might consider impossible.

Now do you think you can deliver the project in two weeks?  icon smile Homer Simpson in pure CSS.

The moral here is that for software developers there is nothing impossible. Where there’s a will there’s a way. Always maintain the ‘Can do’ attitude.

article clipper vert Homer Simpson in pure CSS.
 

Make your stylesheet a work of art.

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.
 

Cascading Style Sheet Cheatsheet

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

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