CSS (Cascading Style Sheet) basit ve kullanışlı bir işaretleme dilidir. CSS diğer bir adıyla Stil şablonları yazı,resim, bağlantı, kenar çizgileri vb. HTML öğelerine sitil vermek yani biçimlendirmek için kullanılır. CSS kullanımı sayesinde yüzlerce sayfayı tek bir dosya ile biçimlendirebiliriz. Bu sayede hızlı ve esnek web sayfaları oluşturabiliriz.
CSS’ in Yapısı :
CSS’ in söz dizimi Seçici ve Bildirim olarak 2 bölümden oluşmaktadır. Seçici kısmında tüm HTML etiketlerini kullanabiliriz. Bunun yanı sıra biraz sonra bahsedeceğimiz Id(Kimlik) ve Class(sınıf) seçicilerini de kullanabiliriz. Bildirim alanı ise kendi içinde özellik ve değer bölümlerinden oluşmaktadır. 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.
Aşağıdaki örnek kullanımda seçici olarak h1 etiketi kullanılarak color ve font-size özelliklerine değerler verilmiştir.
Seçiciler Class (Sınıf), ID ve Tag (etiket) seçiciler olmak üzere üçe ayrılır.
Sınıf (Class) Seçicisi: Belirli bir elemana bağlı olmayan sitiller tanımlamamızı sağlar. Birden fazla öğeye uygulanılabilir ve birden fazla kullanılabilir. Örnek olarak baslik adinda bir sınıf seçicisi oluşturarak kullanımını görelim.
1 2 3 4 5 6 7 | .baslik{ color:#861012; font-weight: bold; font-size:25px; } |
Oluşturduğumuz Class (Sınıf) seçici önünde “.” olduğuna dikkat edelim.
Şimdide bu sitili sayfamızda bulunan H1 ve p etiketlerine uygulayalım.
1 2 3 4 5 6 | <body> <h1 class="baslik">www.yazilimkodlama.com</h1> <p class="baslik">www.yazilimkodlama.com</h1> </body> |
Ekran görüntüsü aşağıdaki şekilde olacaktır.
ID (Kimlik) Seçiciler : Sayfaya eklediğimiz resim, tablo, div, video, vb. nesneler için bir ID tanımlayarak ve bu ID’ yi kullanarak biçimlendirme yapabiliriz. 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.
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ğimizde #haber_baslik isminde ID seçicisini kullanarak p etiketine uygulayacağız.
1 2 3 4 5 6 7 | #haber_baslik{ text-align: center; font-size: 1.4em; color: blue; } |
Şimdi oluşturduğumuz bu id seçicisini p etiketine uygulayalım.
1 2 3 | <p id="haber_baslik">www.yazilimkodlama.com</p> |
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.
Örnek olarak sayfamızdaki paragraflarda yani p etiketinde yazı büyüklüğünün 16px, yazı tipinin Arial ve Kalın olmasını sağlamamak için, stilimiz aşağıdaki şekilde oluşturulur.
1 2 3 4 5 6 7 | p{ font-family: Arial; font-size: 16px; font-weight: bold; } |
