CSS ne için kullanılır?

CSS ne için kullanılır? www.yzokul.com.tr

CSS, bir web sayfasındaki öğelerin nasıl göründüğünü ve ekranda nasıl düzenlendiğini kontrol etmek için kullanılır. CSS olmadan bir web sayfası yalnızca düz metin ve kutulardan ibarettir. CSS ile renkleri, boyutları, boşlukları ve konumları değiştirebilirsin. Örneğin aynı cümle küçük siyah metin olarak ya da sayfanın ortasında büyük mavi metin olarak görünebilir. CSS bu seçimi mümkün kılar. 1

HTML bir web sayfasına içeriğini ve yapısını verir. Metni başlık, paragraf, liste veya bağlantı olarak işaretlemek için HTML kullanırsın. HTML tek başına düz bir sayfa üretir: beyaz zemin üzerinde siyah metin, yukarıdan aşağıya dizilmiş. Renklere, yazı tipi boyutlarına veya öğelerin yan yana nerede duracağına karar vermez. Görünümü kontrol etmek için başka bir şey gerekir. 2

CSS, tarayıcıya HTML öğelerinin nasıl görünmesi gerektiğini söyleyen ayrı bir kural kümesidir. CSS'i kendi dosyasında veya bloğunda yazarsın ve tarayıcı bu kuralları HTML'e uygular. Örneğin düz HTML bir başlığı varsayılan siyah metinle gösterir. Aynı başlık bir CSS kuralıyla büyük mavi harflerle görünebilir. İçerik aynı kalır; yalnızca görünüm değişir. 3

Bir CSS kuralı önce hangi öğenin biçimlendirileceğini seçer, sonra bu öğede neyin değiştirileceğini listeler. Öğeyi seçen kısma seçici denir. Süslü parantezlerin içindeki kısım, bildirim adı verilen değişiklikleri barındırır. Örneğin bir kural bir başlığı seçip rengini mavi olarak ayarlayabilir. Görselde, hedeflediği başlığı bir okla gösteren bir kural yer alır. 4

CSS metnin rengini ve bir öğenin arka plan rengini değiştirebilir. Metin için color özelliğini, arkasındaki arka plan için background-color özelliğini ayarlarsın. Örneğin bir paragraf beyaz zemin üzerinde siyah metinden koyu mavi zemin üzerinde beyaz metne dönüşebilir. Yalnızca o paragraf değişir; sayfanın geri kalanı olduğu gibi kalır. 5

CSS, font-size ayarıyla metni büyütebilir veya küçültebilir. Normal metin için 16 piksel ya da büyük bir başlık için 32 piksel gibi bir boyut verirsin. Örneğin aynı cümle 12 pikselde ve 28 pikselde görünebilir. Sözcükler aynıdır, ama büyük boyut dikkat çeker ve küçük boyut yer kazandırır. Yazı tipi boyutu metnin ne kadar yer kaplayacağını kontrol eder. 6

CSS, öğelerin içindeki ve çevresindeki boşluğu kontrol eder. Padding, içerik ile kenarlığı arasındaki boşluktur. Margin, kenarlığın dışındaki, bir öğe ile bir sonraki arasındaki boşluktur. Örneğin padding'i olan bir kutu metnini kenardan uzak tutar, margin ise o kutuyu diğer kutulardan uzak tutar. Boşluklar bir sayfayı ferah ya da sıkışık hissettirir. 7

CSS öğeleri sola, ortaya veya sağa hizalayabilir ve onları satırlar halinde düzenleyebilir. Öğelerin nerede duracağına karar vermek için hizalama ayarlarını kullanırsın. Örneğin üç düğme sol kenara itilebilir, ortada ortalanabilir veya bir satırda eşit olarak dağıtılabilir. Aynı öğeler, seçtiğin hizalamaya göre farklı düzenlenmiş görünür. 8

Bir HTML yapısı, farklı CSS kuralları uyguladığında tamamen farklı görünebilir. İçerik ve öğelerin sırası aynı kalır, ama renkler, yazı tipleri ve boşluklar bütün hissi değiştirir. Örneğin aynı sayfa açık zemin ve küçük gri metinle ya da koyu zemin ve büyük beyaz metinle görünebilir. Yalnızca CSS farklıdır. 9

Gerçek bir sayfada genellikle tek bir kural değil, aynı anda birlikte çalışan birçok CSS kuralı bulunur. Bir kural başlık rengini, bir diğeri paragraf yazı tipini, bir diğeri de bölümler arasındaki boşluğu ayarlayabilir. Örneğin beş kuralı olan bir sayfa üst bilgiyi, ana metni, bağlantıları ve alt bilgiyi ayrı ayrı biçimlendirebilir. Her kural kendi küçük işini üstlenir. 10

İki kural aynı öğede aynı şeyi ayarladığında, hangisinin uygulanacağına bir öncelik mekanizması karar verir. Tarayıcı ikisini birden uygulamaz; bir kazanan seçer. Öncelik, seçicinin ne kadar belirgin olduğuna ve kuralların hangi sırayla geldiğine bağlıdır. Örneğin tek bir belirli paragrafı hedefleyen bir kural, tüm paragrafları hedefleyen genel bir kuralı yenebilir. 11

Daha belirgin bir kural, genel bir kuralı geçersiz kılar. Bir kuralın tüm paragrafları siyah metne ayarladığını, başka bir kuralın tek bir paragrafı hedefleyip onu kırmızıya ayarladığını varsayalım. Kırmızı kural daha belirgindir, bu yüzden o paragraf kırmızı görünürken diğerleri siyah kalır. Bu, önceliğin pratikte nasıl işlediğini gösterir: kazanan kural, öğeyle daha kesin eşleşen kuraldır. 12

CSS, ekranın ne kadar geniş olduğuna bağlı olarak yerleşimi değiştirebilir. Yalnızca ekran belirli bir genişliğin altında veya üstündeyken geçerli olan kurallar yazarsın. Örneğin aynı sayfa geniş bir masaüstü ekranında yan yana üç sütun, dar bir telefon ekranında ise tek bir üst üste sütun gösterebilir. İçerik aynıdır; düzen uyum sağlar. 13

Yeni başlayanların sık yaptığı bir hata, HTML'in tek başına biçimlendirilmiş görünmesini beklemektir. HTML yapı verir, ama düz varsayılanların ötesinde renkleri, yazı tiplerini veya boşlukları ayarlamaz. Bir sayfa biçimlendirilmemiş görünüyorsa CSS eksik ya da bağlanmamıştır. Örneğin başlıkları ve paragrafları olan ama CSS'i olmayan bir sayfa beyaz zemin üzerinde düz siyah metin gösterir. CSS eklemek görünümü hemen değiştirir. 14

Bir CSS kuralı yalnızca doğru öğeyi hedeflediğinde işe yarar. Seçici yanlış öğeyi gösteriyorsa, biçimlendirmek istediğin öğede hiçbir şey değişmez. Örneğin tüm paragrafları hedefleyen bir kural bir başlığı etkilemez. Paragraflar değişirken başlık düz kalır. Seçicinin istediğin öğeyle eşleştiğini her zaman kontrol et. 15

CSS, renkler, yazı tipleri, boşluklar ve hizalama dahil olmak üzere web sayfası öğelerinin görünümünü ve yerleşimini kontrol eder. Aynı HTML yapısı, farklı CSS kuralları uygulanarak tamamen farklı tasarımlar kazanabilir. Kurallar çakıştığında öncelik mekanizmaları hangisinin kazanacağına karar verir. CSS ayrıca ekran boyutuna uyum sağlayan yerleşimler oluşturabilir, böylece tek bir sayfa hem geniş hem dar ekranlarda çalışır. 16