Css Temelleri – STİL ŞABLONU

CSS, açılımı “Cascading Style Sheet” olan ve dilimize Stil şablonları olarak yerleşen basit ve kullanışlı bir işaretleme dilidir. Stil Şablonu HTML ögelerine (yazı, paragraf, kenar çizgisi, resim, bağlantı…) stil vermek amacıyla kullanılır.

HTML/XHTML etiket dillerinin sayfa tasarımında yetersiz kalması nedeniyle “World Wide Web Consortium” (W3C, Dünya Çapında Ağ Birliği) tarafından oluşturulmuştur; içerik kısmı (HTML) ile biçimlendirme kısmını birbirinden ayırarak yüzlerce sayfayı tek bir dosya ile biçimlendirme olanağı tanımaktadır. Bu, web sayfalarımıza esneklik bize ise hız kazandırır.

CSS’nin Yapısı

CSS’ nin söz dizimi aşağıda görüldüğü gibi “Seçici” ve “Bildirim” olarak iki ana bölümden oluşur. Bildirim ise kendi içinde özellik ve değer olarak iki kısma ayrılmaktadır.

• Seçici olarak tüm HTML etiketlerini kullanabileceğimiz gibi ileride göreceğimiz ID (kimlik) ve Class (sınıf) seçicilerini de kullanabiliriz.
• Bildirim bloğu süslü parantez ile açılır ve kapanır. Bildirimler arasında “;” (noktalı virgül) kullanılır. Her Bildirim, “Özellik” ve “Değer” içerir. Özellik ve değer arası “:” (iki nokta üst üste) ile ayrılır.
• Özellik, değiştirilmek istenen stil özniteliğidir. Örnek; color, font-size vb.
• Değer ise stil özniteliklerine verilen değerlerdir. Örnek; blue, 14px vb.
• Seçiciler Class (Sınıf), ID ve Tag (etiket) seçiciler olmak üzere üçe ayrılır.

Sınıf (Class) Seçicisi

Sınıf seçicileri birden fazla ögeye uygulanabilir ve birden fazla kullanılabilir. Örneğin önemli adında bir sınıf seçicisi oluşturalım, özellik olarak da yazının renginin kırmızı ve kalın olmasını sağlayalım;

Sınıf seçici olarak belirlediğimiz ismin  önüne “.” (nokta) koymamız gerekmektedir. Bu ismi herhangi bir ögenin class özniteliğine atayarak stili uygulamış oluruz. Örneğimiz için  .onemli  sınıf  (class)  seçicisi yukarıdaki gibi olacaktır.Bu stilimizi sayfamızda H1 ve p  etiketlerine uygulayalım.

Görüldüğü üzere iki farklı öge için (p ve h1) aynı sınıf (class) seçicisini uygulamış olduk. Aynı şekilde bu stili herhangi bir ögenin sınıf (class) özniteliğine atayarak defalarca kullanabiliriz. Bu sebeple bu tür seçiciler çoğul seçici olarak da adlandırılır.

ID Seçicisi

Sınıf (class) seçicilerini birden fazla ögeye atayarak kullanabiliyorduk; ID seçiciler ise yalnız bir ögeye atanır ve bir kez kullanılırlar. Örneğin “haber_baslik” adında bir stil oluşturalım, özellik olarak da yazı renginin mavi ve ortalı olmasını sağlayalım;

ID seçicisi olarak belirlediğimiz ismin önüne “#”  koymamız  gerekmektedir.  ID‟ye  verdiğimiz isim, sayfa içinde aynı isme sahip ögeye (etiket) uygulanmış olacaktır. Örneğimiz için  #haber_baslik  ID  seçicisi yukarıdaki gibi  olacaktır. Bu  stilimizi p etiketine uygulayalım. 

Görüldüğü üzere yalnızca tek bir ögeye (etikete) uygulanmıştır. Bu tür seçiciler tekil seçici olarak da adlandırılır.

Not: Gerek sınıf (class) seçici olsun, gerekse ID seçici olsun isim verirken Türkçe karakter kullanılmamalı ve isimlendirme rakamla başlamamalıdır.

Etiket (Tag ) Seçicisi

Etiket seçicileri aynı türden tüm ögelere (etiketlere), istediğimiz stili uygulamak için kullanılır. Bir başka deyişle etiketleri kendi isteğimize göre uyarlarız. Örneğin sayfamızdaki tüm karakterlerin boyutunun 20px olmasını istiyorsak;

olarak  yazmamız  yeterlidir. Bir  başka örnek olarak sayfamızdaki paragraflarda yazı  büyüklüğünün 16px, yazı  tipinin Arial ve kalın olmasını sağlamak  için, stilimizi  aşağıdaki  şekilde oluşturuyoruz.