Cascading Style Sheets (CSS), web sayfalarının görüntülenme biçimini düzenlemek için kullanılan bir tarayıcı teknolojisidir. HTML'in yapısını belirlerken, CSS, bu yapının nasıl görüntüleneceğini kontrol eder. Bu makalede, CSS'in ne olduğunu ve nasıl çalıştığını anlatacağız.
CSS, bir web sayfasındaki HTML öğelerine stil eklemek ve düzenlemek için kullanılan bir stil dilidir. Temel amacı, sayfaları daha estetik, kullanıcı dostu ve tutarlı hale getirmektir. CSS, renk, tipografi, boyut, konum ve daha birçok görsel özelliği kontrol ederek web tasarımcılarına ve geliştiricilere geniş bir özgürlük tanır.
CSS, tarayıcılar tarafından HTML içeriğine uygulanır ve bu sayede sayfanın görüntülenme biçimini belirler. Temel çalışma prensipleri şunlardır:
a. Selektörler:
CSS, belirli HTML öğelerini seçmek ve stil uygulamak için selektörler kullanır. Örneğin, tüm paragraf öğelerini seçmek için:
cssCopy code
p { color: blue; font-size: 16px; }
Bu CSS kuralı, tüm <p> (paragraf) öğelerine mavi renk ve 16 piksel font boyutu uygular.
b. Özellikler ve Değerler:
CSS kuralları, belirli bir öğeye uygulanacak stil özelliklerini ve bu özelliklere atanan değerleri içerir. Örneğin, metin rengini belirlemek için color özelliği kullanılır:
cssCopy code
h1 { color: red; }
Bu kural, tüm <h1> başlıklarını kırmızı renkte gösterir.
c. Varsayılan Değerler ve Miras (Cascading):
CSS, "miras" veya "üst üste binme" prensibiyle çalışır. Bir öğe için belirlenmiş bir özellik yoksa, CSS, bu özelliği öğenin üstündeki öğelerden miras alır. Bu, stilin hiyerarşik bir şekilde uygulanmasını sağlar.
d. Harici ve Dahili Stil Sayfaları:
CSS kodu, harici bir dosyada (style.css) veya doğrudan HTML belgesi içinde (<style> etiketi içinde) tanımlanabilir. Harici dosyalar, birden çok sayfa arasında paylaşılabilir ve bakımı daha kolaydır.
htmlCopy code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Örneği</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Başlık</h1> </header> <section> <p>İlk paragraf.</p> <p>İkinci paragraf.</p> </section> </body> </html>
Örnek CSS dosyası (style.css):
cssCopy code
header { background-color: #333; color: white; padding: 10px; text-align: center; } p { font-size: 18px; line-height: 1.5; color: #555; }
Bu örnek, bir HTML belgesine bağlı harici bir CSS dosyası kullanarak başlık ve paragraflara stil uygular.
CSS, HTML içeriğine stil eklemek ve web sayfalarını görsel olarak iyileştirmek için güçlü bir araçtır. Bu yazıda temel çalışma prensipleri ve örnek bir kullanım senaryosu incelenmiştir. Geliştiriciler, CSS kullanarak web sayfalarını daha etkileyici ve kullanıcı dostu hale getirebilirler.