CSS Nedir?

CSS, Cascading Style Sheets’in kısaltmasıdır. Türkçeye “Basamaklı Stil Sayfaları” olarak çevrilir. HTML ile beraber kullanılan bir işaretleme dilidir. HTML, web sayfalarının içeriğini ve yapısını tanımlarken, CSS, web sayfalarının görünümünü ve biçimlendirmesini tanımlar.

CSS, web sayfalarında kullanılan renkleri, yazı tiplerini, boyutları, hizalamaları ve arka planları kontrol etmek için kullanılır. Ek olarak, web sayfalarının hareketlerini ve etkileşimlerini de tanımlamak için kullanılabilir.

CSS, web sayfalarının daha çekici ve kullanıcı dostu olmasını sağlar. Ek olarak, web sayfalarının değişik cihazlarda ve tarayıcılarda tutarlı bir halde görünmesini sağlar.

CSS’in Temel Yapısı

CSS, bir takım kuraldan oluşur. Her kaide, bir öğeyi nasıl biçimlendireceğini belirten bir seçici ve bir değerden oluşur.

Mesela, aşağıdaki CSS kuralı, tüm paragrafların yazı tipini Arial olarak ayarlar:

p {
  font-family: Arial;
}

CSS, seçiciler, değerler ve nitelikler olmak suretiyle üç temel öğeden oluşur.

Seçiciler

Seçiciler, CSS kurallarını hangi öğelere uygulayacağınızı belirler. CSS’te, aşağıdaki şeklinde çeşitli seçici türleri bulunur:

• Eleman seçicileri: Bir öğenin tüm örneklerine uygulanır. Mesela, aşağıdaki CSS kuralı, tüm paragraflara uygulanır:

p {
  font-family: Arial;
}

• Klasör seçicileri: Bir öğeye uygulanan bir sınıfa uygulanır. Mesela, aşağıdaki CSS kuralı, tüm .başlık sınıfına haiz öğelere uygulanır:

.başlık {
  font-size: 20px;
}

• İd seçicileri: Bir öğeye uygulanan bir isme uygulanır. Mesela, aşağıdaki CSS kuralı, #ana-menu id’sine haiz öğeye uygulanır:

#ana-menu {
  background-color: #000;
}

Değerler

Değerler, CSS kuralının ne yapmasını istediğinizi belirtir. CSS’te, aşağıdaki gibi çeşitli değerler bulunur:

• Metin değerleri: Metin değerleri, yazı tipleri, renkler ve arka planlar gibi metin özelliklerini tanımlamak için kullanılır. Mesela, yukarıdaki örnekte, font-family değeri Arial yazı tipini belirtir.
• Sayısal değerler: Sayısal değerler, boyutlar, kenarlık kalınlıkları ve konumlar gibi sayısal özellikleri tanımlamak için kullanılır. Mesela, yukarıdaki örnekte, font-size değeri 20 px yazı tipi boyutunu belirtir.
• Boolean değerler: Boolean değerler, bir öğenin etkin mi yoksa pasif mi olduğunu, görünür mü yoksa görünmez mi olduğunu vb. tanımlamak için kullanılır. Mesela, aşağıdaki CSS kuralı, tüm paragrafların etkin olmasını sağlar:

p {
  display: block;
}

Nitelikler

Nitelikler, CSS kuralının uygulanacağı öğenin ek özelliklerini tanımlamak için kullanılır. Mesela, aşağıdaki CSS kuralı, tüm paragrafların kenar boşluğunu 20 px olarak ayarlar:

p {
  padding: 20px;
}

CSS’in Avantajları

CSS’in birçok pozitif yanları vardır. Bunlar içinde şunlar bulunur:

• Web sayfalarının daha çekici ve kullanıcı dostu olmasını sağlar.
• Web sayfalarının değişik cihazlarda ve tarayıcılarda tutarlı bir halde görünmesini sağlar.
• Web sayfalarının oluşturulmasını ve bakımını kolaylaştırır.

CSS Öğrenmek

CSS, öğrenmesi nispeten kolay bir dildir. CSS öğrenmek için, aşağıdaki kaynakları kullanabilirsiniz:

• CSS Kursları: Çevrimiçi ve çevrimdışı olarak birçok CSS kursu mevcuttur. Bu kurslar, CSS’in temellerinden ileri düzey özelliklerine kadar her şeyi kapsar.
• CSS Dokümantasyonu: CSS’in resmi dokümantasyonu, CSS’in tüm özelliklerini ve özelliklerini detaylı bir şekilde açıklar.
• CSS Kaynakları: CSS hakkında bilgi edinmek için birçok internet sayfası ve blog mevcuttur. Bu kaynaklar, CSS’in temellerini öğrenmenize yada belirli bir CSS özelliği hakkında daha çok bilgi edinmenize destek olabilir.