Category Archives: CSS Tutorial

Learn the basic layout and css web design techniques reading these cascading style sheets tutorials. CSS Tutorials for advanced or intermediate level web designers. These tutorials has been written by the PHP developer and web designer Mr Bikram Choudhury

Web font – how to use a special font in your website

The easiest way to use Web Fonts in your website

CSS @font-face rule, a way of linking to TrueType (TTF) and OpenType fonts (EOT) to your website text documents.

About Browser Support of Web Fonts : Safari has supported this type of font linking since version 3.1, and Opera has announced that they plan to support it in Opera 10. Firefox 3.5 onwards only downloads the fonts as needed, so a stylesheet can list a whole set of fonts of which only a select few will actually be used.

Continue reading Web font – how to use a special font in your website

Get some preliminary idea about web fonts

This tutorial may seem to be little complex, as I found it in some site and I have just posted it here as it is. But later I have written more easy contemporary guide on web fonts to use it in your website.

It may be your requirement : I have a beautiful font and I want to use this font in my website. I want to make sure that everyone can see this font using any operating system or browser. What shall I do for it. What is the CSS code to use a font in my webserver. The first step I have made that I have uploaded the font file in my website (running in a web server) using FTP method. Then what CSS code I shall use to use this font?

Continue reading Get some preliminary idea about web fonts

Simple registration form using DIV, label & CSS

Simple registration form using DIV, label & CSS without tables

The following links shows the way you how to create simple registration form using DIV

The following site shows 2 ways to create table less registration form design using DIV , Label & CSS styles.

Absolute positioned DIV, inside relative container

Mixing relative positioning and absolute positioning together

How to apply absolute positioning inside relative positioning container element explained in this example. Here the container is a DIV block with relative positioning and an absolutely positioned element (it is also a DIV block) will be placed inside this container DIV.

In this example we have placed a container DIV with Gray background which is relatively positioned and a pink DIV which is actually a child div inside contained div.

Continue reading Absolute positioned DIV, inside relative container

CSS Background Shorthand Properties

Read a good tutorial on CSS Shorthand properties : http://www.dustindiaz.com/css-shorthand/

Background shorthand code :

<style type="text/css">
div#id_name { background:red url(image_url.jpg) repeat-x top left scroll; }
</style>

<div id="id_name">
My Div have a good background image
</div>

The default background properties of a DIV :

#id
{
background-color: transparent;
background-image: none;
background-repeat: repeat;
background-position: top left;
background-attachment: scroll;
}