Bildiğiniz gibi CSS, bir web sayfasındaki bütün görsel düzenlemeleri yapan bir web tasarım teknolojisidir. İmleç özelliği de bu görsel düzenlemelerin içinde yer alır. Yani CSS kullanarak çok kolay bir şekilde imleçleri değiştirebilir, kendi oluşturduğunuz veya internetten bulduğunuz resim dosyalarını da imleç olarak kullanabilirsiniz. Bunun yanında tanımladığınız bir imleci bütün sayfa için kullanabilir veya sayfanızda bulunan elemanlar için ayrı ayrı imleçler oluşturabilirsiniz.

Çok kısa olarak şunu da söylemek isterim ki imleçlerin asıl görevi sayfanızı ziyaret eden kullanıcıları yönlendirmektir. Örneğin bir linkin veya bir yazı alanının üzerine gelindiğinde imleç değişir ve kullanıcıya bu elemanları nasıl kullanıcağını gösterir. Küçük ama etkili bir yöntem!

CSS'de temel olarak 32 adet imleç işareti bulunur. Duruma göre istediğiniz kullanabilirsiniz. Öncelikle imleç tanımlaması CSS'deki cursor komutu ile yapılır.

hedef { cursor : imleç kodu;}

Aşağıdaki uygulamada hangi imleç için hangi imleç kodu kullanılmalıdır sorusunun cevabını bulabilirsiniz.

Bazı örnekler

body { cursor : pointer; /*Sayfa imlecini el işareti yapar */ }
#button1 { cursor : not-allowed;  /* button1 kimliğinin imlecini yasak işareti yapar */}
.link2 { cursor : help;  /* link2 sınıfının imlecini soru işaretli hale getirir */}

Aşağıdaki CSS kodu, kendi oluşturduğumuz veya internetten bulduğumuz resim dosyasını imleç olarak atar. Resmin formatı, arka plan şeffaflığını destekleyen bir format olmalıdır (png gibi) . Örneğin bir resmi bütün sayfa için imleç olarak atamak isterseniz,

body { cursor : url( resim-yolu/resim.png ),auto;}

komutunu kullanabilirsiniz. Benzer şekilde aşağıdaki gri alan imleci için bir resim atanmıştır. Fare ile alana gelirseniz imlecin değiştiğini görebilirsiniz.