CSS vurgulu efektleri oluşturmak oldukça basittir ve temel vurgulu efektler bir dizi başka seçenekle hızlı ve kolay bir şekilde uygulanabilir ve değiştirilebilir. Basamaklı stil sayfaları (CSS), bir biçimlendirme dilinde oluşturulan bir belgenin stilini ve düzenini oluştururken kullanılan bir dildir ve vurgulu efektleri kolayca oluşturmak için kullanılabilir. Vurgulu efektler, bir fare tarafından kontrol edilen işaretçi nesnenin üzerine getirildiğinde, belgedeki metin, resimler veya diğer nesnelerle oluşan değişikliklerdir. CSS asılı efektleri tipik olarak CSS kodu içinde oluşturulur ve hızlı ve etkili bir şekilde uygulanabilir.
Oluşturulması en kolay CSS vurgulu efekt türlerinden biri, üzerine gelindiğinde web sitesindeki bir bağlantıda değişikliğe neden olan bir etkidir. Örneğin, birisi standart metne benzeyen veya sayfanın geri kalanından farklı bir renkte olan metinsel bir bağlantı oluşturmak isteyebilir, ancak “üzerine fareyle” veya “üzerine gelindiğinde” altı çizili veya üzerinde durulur. Bunun nasıl yapılacağı kesin olarak, genellikle sayfada kullanılan tam kodlamaya bağlı olacaktır, ancak basit bir durumda CSS üzerine gelme efekti “stil” bölümündeki CSS kurallarına eklenebilir.
Efektin eklendiği nesne için uygun etiketi kullanarak CSS üzerine gelme efekti için yeni bir kural oluşturulur. Örneğin, seçilen metin bir listenin parçası olabilir veya bir web sayfasının gövdesinde seçilebilir. Bu metnin gövde kodlamasında kendisiyle ilişkilendirilmiş belirli bir etiketi olmalıdır. Bu etikete dikkat çekildiğinde, kural verilen etiketin bulunduğu nesneler için CSS üzerine gelme efekti oluşturmak için oluşturulabilir.
Metni kullanmak, örneğin, bir kullanıcı üzerine geldiğinde bağlantının altı çizili yapmak istiyorsanız, o bağlantıyı gövde kodu içinde etiketleyerek ve bu etiket için özel bir kural oluşturarak başlayabilirsiniz. Bu kural dahilinde, o metnin ne renkte olması gerektiğini, kolayca çevreleyen metinden öne çıkmasını ve görsel olarak kullanıcının üzerine gelmek istediğini ve ardından CSS üzerine gelmek efektini tetikleyebileceğini belirtebilirsiniz. Bu efekt, metin satırının etiketine bir "vurgulu sözde sınıf" oluşturarak eklenir.
Mesela, metnin etiketi “a” ise, “a: hover {…}” gibi görünen sözde sınıfı, parantez içinde belirtilen istenen CSS vurgulu efekti ile kullanırsınız. Önceki örneği kullanarak, istenen efekt, üzerine gelindiğinde metnin altını çizmek olsa, ayraç içinde “text-decoration: underline;” yazardı. Farklı nesneler için yaratılabilecek birkaç farklı vurgulu efekt vardır ve her birinin efekti oluşturmak için belirli bir komutu vardır, ancak çoğu durumda işlem benzerdir.
