CSS Nedir?

21 Ekim 2024 01:17

Barış Okan Fındık

CSS, HTML ve XML belgelerinin nasıl görüntüleneceğini tanımlayan bir stil dilidir. CSS’in en büyük avantajı, web sayfalarına stil eklemenin hızlı ve esnek bir yolunu sunmasıdır. HTML yapısal olarak veriyi tanımlarken, CSS bu verilerin nasıl sunulacağını, yani renk, yazı tipi, arka plan gibi stil özelliklerini belirler. Bir web sayfasını ziyaret ettiğinizde gördüğünüz tüm renkler, yazı tipleri, düzenler, kenar boşlukları ve daha birçok görsel detay CSS kullanılarak oluşturulur.

css

CSS’in Tarihçesi

İçindekiler

CSS ilk olarak 1996 yılında World Wide Web Consortium (W3C) tarafından tanıtıldı. O zamanlar web tasarımı daha basit ve sınırlıydı. CSS, geliştiricilere web sayfalarını daha etkili bir şekilde tasarlama fırsatı sundu. HTML tek başına stil ve düzenleme seçenekleri açısından sınırlıydı ve CSS’in tanıtılmasıyla birlikte tasarım dünyası büyük bir devrim yaşadı. O günden bu yana CSS birçok sürümle güncellendi ve geliştirildi. CSS2 ve CSS3, CSS’in daha gelişmiş sürümleridir ve özellikle CSS3 ile birlikte animasyonlar ve daha karmaşık düzenleme özellikleri hayatımıza girdi.

CSS Nasıl Çalışır?

CSS, web sayfalarının HTML yapısına entegre edilen stil kurallarından oluşur. Bu kurallar, belirli HTML elementlerini seçer ve bu elementlerin nasıl görüneceğini tanımlar. CSS üç ana yolla bir web sayfasına eklenebilir:

1-Inline CSS: Stil kuralları doğrudan HTML elementlerinin içinde tanımlanır. Bu yöntem genellikle küçük değişiklikler için kullanılır. Ancak, büyük projelerde önerilmez, çünkü sayfanın bakımını zorlaştırabilir.

<h1 style=”color: blue; font-size: 24px;”>Başlık</h1>

2-Internal CSS (Dahili CSS): CSS kuralları, HTML sayfasının <head> bölümünde <style> etiketi içinde tanımlanır. Bu yöntem, tek bir sayfa için stil tanımlamak istediğinizde kullanılır.

<style>
h1 {
color: blue;
font-size: 24px;
}
</style>

3-External CSS (Harici CSS): CSS dosyası ayrı bir dosyada tutulur ve HTML dosyasına bağlanır. Bu, en yaygın kullanılan yöntemdir, çünkü birden fazla sayfa için ortak bir stil dosyası kullanma olanağı tanır. Bu, sayfa yönetimini ve stil değişikliklerini çok daha kolay hale getirir.

<link rel=”stylesheet” href=”styles.css”>

CSS Box Model Nedir?

CSS Box Model, her HTML elementinin, bir dikdörtgen kutu olarak ele alındığı bir modeldir. Bu model, sayfadaki elementlerin yerleşimini ve boyutlarını belirlerken çok önemlidir. Box Model, bir elementin kenar boşlukları (margin), dolgu (padding), kenarlıklar (border) ve içerik alanını (content) kapsar. Bu dört bileşen, web sayfalarının düzenini ve görselliğini kontrol etmek için kullanılır.

Box Model’i anlamak, özellikle tasarımla ilgili sorunların çözümünde ve daha karmaşık düzenlerin oluşturulmasında büyük bir avantaj sağlar. İşte Box Model’in temel bileşenleri:

Content (İçerik): HTML elemanının asıl içeriği. Bu bölümde metin, resim ya da başka öğeler yer alır.
Padding (Dolgu): İçerik ile kenarlık arasındaki boşluktur. Padding değerleri, içerikten kenarlığa olan uzaklığı belirler.
Border (Kenarlık): Elementin etrafında yer alan ve stil verilebilen çizgidir.
Margin (Dış Boşluk): Elementin etrafındaki boşluktur. Diğer elementlerden olan uzaklığı ayarlamak için kullanılır.

Örneğin, bir elementin Box Model’ine şu şekilde stil verebiliriz:

div {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}

Yukarıdaki kod, bir elementin toplam genişliğini padding, border ve margin değerlerini dikkate alarak hesaplar. Bu hesaplama, elementlerin ekrandaki konumlarını doğru bir şekilde yerleştirmek için önemlidir.

css

CSS’in Avantajları

Esneklik: CSS, bir web sayfasının stilini değiştirmeyi çok daha kolay hale getirir. Sadece bir CSS dosyasını düzenleyerek, tüm web sitesinin stilini değiştirebilirsiniz.
Küresel Değişiklikler: Birden fazla sayfa üzerinde stil değişikliği yapmak, harici bir CSS dosyası ile oldukça basittir. Bir dosyada yapılan bir değişiklik, o dosyaya bağlı tüm sayfalarda anında güncellenir.
Daha Hızlı Yüklenme Süresi: CSS dosyası tek bir yerden yüklenir, bu da web sayfasının daha hızlı yüklenmesini sağlar. Ayrıca, sayfa başına tekrarlanan stil kodlarından kaçınılır.
Karmaşık Düzenler: CSS Grid ve Flexbox gibi modern düzen sistemleri, karmaşık ve dinamik web sayfası düzenleri oluşturmayı kolaylaştırır.

Sonuç

CSS, web tasarımında vazgeçilmez bir araçtır ve sayfaların sadece estetik olarak değil, kullanıcı deneyimi açısından da daha işlevsel olmasını sağlar. Web sitelerinin görünümünü kişiselleştirmenin ve stil vermenin temel yolu olan CSS, HTML ile birlikte çalışarak internetin görsel yönünü oluşturur.

Özellikle modern web tasarımında CSS’in gelişmiş özelliklerini kullanarak, daha hızlı, daha çekici ve daha kullanıcı dostu web sayfaları oluşturmak mümkündür. Bu nedenle, CSS öğrenmek web geliştiricileri için oldukça önemlidir.

Benzer İçerikler