CSS Nedir? HTML Sayfalarını Biçimlendirme Rehberi

CSS’in tanımı ve web geliştirmedeki rolü

CSS, HTML veya XML gibi bir işaretleme diliyle yazılmış belgenin sunumunu ve biçimlendirilmesini belirleyen bir stil dilidir. Web geliştirmede HTML ve JavaScript ile birlikte kullanılan temel teknolojilerden biridir. CSS; renkleri, yazı tiplerini, metin hizalamasını, kenarlıkları, boşlukları, boyutları ve sayfadaki görsel düzeni tanımlayabilir. Böylece içerik ile görünüm birbirinden ayrılır: HTML bir başlığın veya paragrafın ne olduğunu söyler, CSS ise bu öğenin nasıl görüneceğini belirler.

CSS’in çalışma mantığında tarayıcı, sayfadaki HTML öğelerini seçer ve bu öğeler için yazılmış stil bildirimlerini uygular. Örneğin bir başlık için yazılan kural, o başlığın metin rengini kırmızı yapabilir; aynı kural sayfadaki bütün uygun başlıklara uygulanır. Daha sonra tasarım değiştirilmek istenirse, her başlığın HTML kodunu ayrı ayrı düzenlemek yerine ortak CSS kuralı değiştirilir. Harici bir CSS dosyasının birden fazla sayfada kullanılabilmesi de tekrarları azaltır ve aynı tasarımın korunmasını kolaylaştırır.

Örneğin HTML içindeki h1 öğesi sayfanın ana başlığını yapısal olarak ifade eder. CSS ile h1 öğesine color: navy ve font-size: 32px değerleri verilirse başlık lacivert renkte ve daha büyük görünür. HTML içeriği aynı kalırken yalnızca CSS değiştirilerek başlık farklı bir renkte veya boyutta gösterilebilir.

CSS’in HTML ile ilişkisi

HTML, web sayfasındaki öğelerin yapısını ve anlamını oluşturur; CSS ise bu öğelerin sunumunu düzenler. Başlık, paragraf, liste veya bağlantı gibi HTML öğeleri tarayıcı tarafından belge ağacının parçaları olarak okunur. CSS kuralları bu öğeleri seçerek hangi görsel özelliklerin uygulanacağını söyler. Bu nedenle CSS tek başına sayfanın içeriğini oluşturmaz; HTML ile birlikte çalışarak yapısal içeriği biçimlendirir.

Tarayıcı bir HTML belgesini açtığında önce öğeleri ve aralarındaki ilişkileri tanır, ardından sayfaya bağlı CSS kurallarını değerlendirir. Örneğin HTML içinde iki p öğesi ve bir h1 öğesi varsa, p { color: gray; } kuralı paragrafları, h1 { color: darkblue; } kuralı ise ana başlığı hedefler. Aynı HTML yapısı farklı bir CSS dosyasıyla kullanıldığında içerik değişmeden sayfanın yazı tipi, renkleri ve boşlukları değişebilir.

Bu ayrım, aynı yapısal içeriğin ekranda veya yazdırılmış bir belgede farklı biçimlerde sunulabilmesine de yardımcı olur. Örneğin HTML’deki h2 öğeleri her ortamda alt başlık olarak kalır; CSS bu başlıkların ekrandaki yazı boyutunu, rengini veya hizalamasını belirleyebilir. Bu sayede yapı HTML’de, görünüm kuralları ise CSS’te tutulur.

CSS kuralının temel yapısı

Bir CSS kuralı genellikle seçici, özellik ve değerden oluşur. Seçici, kuralın hangi HTML öğelerine uygulanacağını gösterir. Süslü parantezler arasındaki bildirim bölümünde özellik ve değer birlikte yazılır; özellik değiştirilecek görsel niteliği, değer ise bu niteliğin alacağı sonucu belirtir. Temel biçim şöyledir:

p { color: blue; }

Bu örnekte p seçicidir. color özelliktir, blue ise değerdir. İki nokta özellik ile değeri ayırır, noktalı virgül de bildirimin bittiğini gösterir. Tarayıcı, HTML belgesindeki p öğelerini bulur ve bu öğelerin metin rengini mavi olarak görüntüler. Aynı kuralın içine birden fazla bildirim eklenebilir:

h1 { color: darkgreen; font-size: 32px; text-align: center; }

Burada h1 öğesi aynı anda renk, yazı boyutu ve hizalama bakımından biçimlendirilir. Bir bildirimin uygulanabilmesi için özellik adının CSS’te tanınan bir özellik olması ve değerin o özellikle uyumlu olması gerekir. Sayısal ölçülerde çoğu zaman px gibi bir birim yazılır; renkler ise adla veya farklı renk gösterimleriyle belirtilebilir.

CSS dosyasında açıklama yazmak için /* açıklama */ biçimi kullanılır; tarayıcı bu bölümün içindeki metni stil bildirimi olarak uygulamaz. CSS sözdiziminde seçici ile süslü parantez arasındaki yapı, özellik-değer çiftleri, iki nokta ve noktalı virgül doğru kullanılmalıdır. Birden fazla kural aynı öğeyi hedeflerse hangi bildirimin uygulanacağı CSS’in öncelik düzeni, yani cascade mantığı ile belirlenir; bu konunun ayrıntıları ayrı bir başlıkta incelenir.

Seçiciler, özellikler ve değerler

Seçici, CSS kuralının hedefini belirler. En temel seçici türleri doğrudan HTML öğe adını kullanan tür seçiciler, HTML’deki class niteliğini hedefleyen sınıf seçicileri ve tekil bir id değerini hedefleyen kimlik seçicileridir. Örneğin h2 tüm h2 öğelerini, .uyari class değeri uyari olan öğeleri, #baslik ise baslik kimliğine sahip öğeyi seçer. Bir sınıf birden fazla öğeye verilebilir; id ise belge içinde tek bir öğeyi ayırt etmek için kullanılır. Seçiciler, öğelerin belge içindeki konumuna göre daha özel hedefler oluşturacak biçimde de birleştirilebilir.

Özellik, seçilen öğenin hangi yönünün değiştirileceğini gösterir. color metin rengini, background-color arka plan rengini, font-size yazı boyutunu, text-align metin hizalamasını ve width genişliği belirtmek için kullanılabilir. Değer, özelliğin alacağı sonucu tanımlar. Örneğin 20px bir uzunluk değeri, 80% bir yüzde değeri, center bir anahtar sözcük ve #ff0000 bir renk gösterimidir. Uzunluk belirten sıfırdan farklı sayısal değerlerde uygun birim kullanılması gerekir.

Örnek olarak .kart { background-color: white; width: 300px; } kuralı, kart sınıfına sahip öğelerin arka planını beyaz ve genişliğini 300 piksel yapar. Burada .kart seçici, background-color ve width özellik, white ve 300px ise değerlerdir.

CSS’i web sayfasına ekleme yöntemleri

CSS bir HTML sayfasına üç temel yolla eklenebilir: satır içi, sayfa içi ve harici CSS. Satır içi CSS, style niteliğiyle doğrudan HTML öğesine yazılır: <p style="color: blue;">Metin</p>. Bu yöntem yalnızca ilgili öğeyi hızlıca biçimlendirmek için kullanılabilir; ancak çok sayıda öğede tekrarlandığında HTML kodunu büyütür ve bakımını zorlaştırır.

Sayfa içi CSS, HTML belgesinin head bölümündeki style öğesine yazılır. Örneğin <style> h1 { color: green; } </style> kuralı, o HTML belgesindeki h1 öğelerini yeşil yapar. Harici CSS’te kurallar ayrı bir .css dosyasında tutulur ve HTML belgesine link öğesiyle bağlanır: <link rel="stylesheet" href="styles.css">. Harici yöntem, birden fazla sayfanın aynı görünüm kurallarını paylaşmasına izin verir. Tasarım değiştiğinde ortak CSS dosyasını düzenlemek, her HTML belgesindeki tekrarları tek tek değiştirmekten daha pratiktir.

Örneğin bir sitenin bütün sayfalarında başlıkların aynı renkte olması istenirse h1 kuralı harici dosyaya yazılabilir. Tarayıcı bu dosyayı yüklediğinde kuralın bağlandığı sayfalardaki uygun h1 öğelerine uygulanır. Bu yaklaşım yapısal HTML kodu ile sunum kurallarını daha belirgin biçimde ayırır.

Temel stil değişiklikleri

CSS’in pratik amacı, HTML öğelerinin görünümünü belirleyen özellikleri değiştirmektir. Renk için color, arka plan için background-color, yazı boyutu için font-size, yazı tipi için font-family ve metin hizası için text-align kullanılabilir. Bir öğenin basit ölçüsü width veya height ile belirlenebilir. Bu özellikler birlikte kullanılarak okunabilir ve ayırt edilebilir bir görünüm oluşturulur.

Örneğin aşağıdaki kural bir duyuru alanını biçimlendirir:

.duyuru { color: #222; background-color: #fff3cd; font-size: 18px; width: 400px; text-align: center; }

Burada duyuru sınıfına sahip öğenin metni koyu bir renkte, arka planı açık sarı tonda, yazısı 18 piksel boyutunda ve genişliği 400 piksel olur. Metin ortalanarak alanın içinde gösterilir. Renk değeri adla, onaltılık gösterimle veya başka CSS renk gösterimleriyle verilebilir; ölçü değerleri ise px ya da yüzde gibi uygun birimlerle yazılabilir.

Stil değişiklikleri yalnızca tek bir öğeye değil, aynı seçiciye uyan birden fazla öğeye de uygulanabilir. Örneğin .duyuru sınıfı üç paragrafta kullanılırsa aynı görünüm üçüne birden verilir. Sayfanın etrafındaki boşlukların ve öğelerin iç-dış alanlarının nasıl çalıştığını anlamak için kutu modeli kavramı temel bir başlangıç noktasıdır; ayrıntıları ayrı bir konuda ele alınır. Öğelerin iki boyutlu yerleşimini düzenleyen Flexbox ve Grid, farklı ekranlara uyum sağlayan responsive tasarım ve medya sorguları ise bu başlangıç kapsamının ötesindeki konulardır.