CSS Nedir? CSS, “Stil”e vurgu yapılan Basamaklı Stil Sayfaları anlamına gelir. HTML bir web belgesini yapılandırmak için kullanılırken (başlıklar ve paragraflar gibi şeyleri tanımlar ve resimleri, videoları ve diğer medyaları gömmenizi sağlar), CSS gelir ve belgenizin stilini belirler; sayfa düzenleri, renkler ve yazı tiplerinin tümü CSS ile belirlenir. HTML’yi temel (her evde bir tane vardır) ve CSS’i estetik seçimler olarak düşünün.
CSS Nasıl Çalışır?
CSS, HTML öğeleriyle etkileşim kurarak web sayfalarınızı stilize etmenizi sağlar. Öğeler, bir web sayfasının bağımsız HTML bileşenleridir – örneğin bir paragraf – HTML’de şöyle görünebilir:
<p>Örnek paragraf</p>Bu paragrafın bir web tarayıcısı aracılığıyla web sayfanızı görüntüleyen kişilere kırmızı ve kalın görünmesini istiyorsanız, şuna benzeyen CSS kodunu kullanırsınız:
p { color:red; font-weight:bold; }Bu durumda, “p” (paragraf) “seçici” olarak adlandırılır; bu, CSS stilinin hangi HTML öğesini etkileyeceğini belirleyen CSS kodunun parçasıdır. CSS’de seçici, ilk küme parantezinin soluna yazılır. Kıvrımlı parantezler arasındaki bilgilere bildirim denir ve seçiciye uygulanan özellikleri ve değerleri içerir. Özellikler yazı tipi boyutu, renk ve kenar boşlukları gibi şeylerdir, değerler ise bu özelliklerin ayarlarıdır. Yukarıdaki örnekte, “renk” ve “yazı tipi kalınlığı” her ikisi de özelliktir. “pembe” ve “kalın” değerlerdir. Tam parantezli bildirim görünümü:
{ color:red; font-weight:bold; } Aynı temel ilkeler, yazı tipi boyutlarını, arka plan renklerini, kenar boşluğu girintilerini ve daha fazlasını değiştirmek için uygulanabilir. Örneğin;
{ background-color:yellow; }Bu kod sayfanızın arka planını açık mavi yapar veya,
p { font-size:18px; color:blue; }bu kod ile ise mavi harflerle 18 puntoluk bir yazı tipi paragrafı oluşturacaktır.
Harici, Dahili veya Satır İçi CSS Nedir?
Yine de bu CSS kodunun aslında HTML içeriğine nasıl uygulandığını merak ediyor olabilirsiniz. HTML’ye çok benzeyen CSS, bilgisayarınızdaki bir metin düzenleyici veya kelime işlemci aracılığıyla basit, düz metinle yazılır ve bu CSS kodunu HTML sayfalarınıza eklemenin üç ana yolu vardır. CSS kodu (veya Stil Sayfaları) harici, dahili veya satır içi olabilir. Harici stil sayfaları .css dosyaları olarak kaydedilir ve tek bir dosya aracılığıyla tüm web sitesinin görünümünü belirlemek için kullanılabilir. Harici bir stil sayfası kullanmak için, .html dosyalarınızın harici stil sayfasına bağlanan ve şuna benzeyen bir başlık bölümü içermesi gerekir:
<head>
<link rel=”stylesheet” type=”text/css” href=stil.css”>
</head>Bu, .html dosyasını harici stil sayfanıza (bu durumda stil.css) bağlayacak ve o dosyadaki tüm CSS talimatları bağlantılı .html sayfalarınıza uygulanacaktır.
Dahili stil sayfaları, doğrudan belirli bir .html sayfasının başlığına yazılan CSS talimatlarıdır. (Bu, özellikle benzersiz bir görünüme sahip bir sitede tek bir sayfanız varsa kullanışlıdır.) Dahili stil sayfası aşağıdakine benzer:
<head>
<style>
Body { background-color:black; }
p { font-size:22px; color:lightblue; }
</style>
</head>siyah arka plan rengi ve 22 punto, açık mavi yazı tipine sahip paragraflar artık bu tek .html sayfasına uygulanacaktır.
Son olarak, satır içi stiller, doğrudan HTML koduna yazılan ve yalnızca tek bir kodlama örneğine uygulanabilen CSS parçacıklarıdır. Örneğin:
<h1 style=”font-size:32px;color:pink;”>Örnek Başlık</h1>tek bir .html sayfasındaki belirli bir başlığın, 32 punto ve pembe yazı tipinde görünmesine neden olur.
Genel olarak konuşursak, harici stil sayfaları bir web sitesinde CSS uygulamak için en etkili yöntemdir (bir sitenin stilini özel bir CSS dosyasından takip etmek ve uygulamak daha kolaydır), dahili stil sayfaları ve satır içi stil, bireysel stil değişikliklerinin yapılması gereken durumlarda kullanılması daha uydundur.
Bu nedenle, web sitenizi destekleyen temel, çerçeveler, duvarlar ve kirişler HTML ise, daha sonra ortaya çıkan boya rengini, pencere stillerini ve çevre düzenlemesini CSS olarak düşünün. İlk önce bu temeli kurmadan hiçbir yere varamazsınız, ancak bir kez yaptığınızda CSS, iç dekoratörünüzü serbest bırakmanın biletidir.
CSS Avantajları
- CSS zaman kazandırır − CSS’i bir kez yazabilir ve ardından aynı sayfayı birden çok HTML sayfasında yeniden kullanabilirsiniz. Her HTML öğesi için bir stil tanımlayabilir ve bunu istediğiniz kadar Web sayfasına uygulayabilirsiniz.
- Sayfalar daha hızlı yüklenir − CSS kullanıyorsanız, her seferinde HTML etiketi nitelikleri yazmanız gerekmez. Sadece bir etiketin bir CSS kuralını yazın ve bunu o etiketin tüm oluşumlarına uygulayın. Yani daha az kod, daha hızlı indirme süreleri anlamına gelir.
- Kolay bakım − Genel bir değişiklik yapmak için, stili değiştirmeniz yeterlidir; tüm web sayfalarındaki tüm öğeler otomatik olarak güncellenecektir.
- HTML’e göre üstün stiller − CSS, HTML’den çok daha geniş bir öznitelik dizisine sahiptir, bu nedenle HTML sayfanıza HTML özniteliklerine kıyasla çok daha iyi bir görünüm verebilirsiniz.
- Çoklu Cihaz Uyumluluğu − Stil sayfaları, içeriğin birden fazla cihaz türü için optimize edilmesini sağlar. Aynı HTML belgesini kullanarak, PDA’lar ve cep telefonları gibi elde taşınabilir cihazlar veya yazdırma için bir web sitesinin farklı sürümleri sunulabilir.
- Global web standartları − Artık HTML özellikleri kullanımdan kaldırılıyor ve CSS kullanılması tavsiye ediliyor. Bu nedenle, gelecekteki tarayıcılarla uyumlu hale getirmek için tüm HTML sayfalarında CSS kullanmaya başlamak iyi bir fikirdir.
