How to Preload Font using CSS @font-face – Tutorial

In this tutorial you will know how to preload font using CSS @font-face rule. So, you will be able to load and use a font that is not available in client’s machine. @font-face is not really a modern CSS3 property, but it is since from CSS2. Font face mainly designed to support Web fonts. The @font-face rule is supported by Firefox, Chrome, Internet Explorer 9, Opera, and Safari. Continue reading “How to Preload Font using CSS @font-face – Tutorial”

Live HTML, CSS, JS, XML, PHP Code Editor / Tester

Hi everyone,

In this post, I am going to show you how to build a browser based Side-to-Side Code-View Live HTML, CSS, JavaScript, XML, PHP Code Editor for your own. I made this application for code testing purpose and yes – it’s from scratch. You can write the code at left side and view the result at right side. You can use HTML, CSS, JavaScript (jQuery wil work also), XML and PHP. After write your codes at left side, you must press submit button to view result. You can also hit CTRL + Enter key on keyboard to submit the form. The finished version will be look like this – Continue reading “Live HTML, CSS, JS, XML, PHP Code Editor / Tester”

CSS Reset Default Styles for All Browsers

CSS Global ResetHello guys. This is very important to make the style of your website static in any way to make it look same in different browsers to make your website more user friendly. In this post we are going to learn how to Reset Default CSS for all browsers to get same visual equality in all browsers. Every browser has it’s own default style. Each browser has different padding, margin, line height, font size, font family, etc. from other browsers. So, we will use the most popular and widely used CSS reset by  Eric Meyer ( Continue reading “CSS Reset Default Styles for All Browsers”

Zebra striping effect on HTML table rows

Howdy folks! Today I am going to show you how to achieve zebra striping effect on HTML tables by using various methods. The zebra striping effect is basically used to differentiate each table rows from the previous and next one. Regular tabular data messed up while we read it without adding any kind of style to it. But the zebra striping effect not only looks good but also effectively increases user readability – user friendliness. Continue reading “Zebra striping effect on HTML table rows”

CSS Sprite: What is it and how to do it

CSS Sprite is a method not only to reduce HTTP Requests but also file sizes and preload images at once to optimize website. Basically,  CSS Sprite is the technique of taking out multiple images and combined them into one single image then selecting the image via CSS as background by using background property and position each part by background-position property. In this tutorial, we will learn CSS Sprite from the beginning.

Continue reading “CSS Sprite: What is it and how to do it”