CSS, “Cascading Style Sheets” ifadesinin kısaltmasıdır ve web sayfalarının görünümünü ve stilini belirlemek için kullanılan bir stil ve düzenleme dili olarak hizmet eder. CSS, HTML veya XML gibi işaretleme dilleriyle kullanılır ve web sayfalarının görsel tasarımını, renklerini, yazı tiplerini, konumlarını ve diğer görsel özelliklerini kontrol eder.
CSS’nin temel görevleri şunlardır:
- Görünüm Kontrolü: CSS, bir web sayfasının tüm görsel özelliklerini kontrol eder. Yazı tipleri, yazı boyutları, arka plan renkleri, kenar boşlukları, çerçeveler ve diğer tasarım öğeleri CSS ile tanımlanabilir.
- Düzen Kontrolü: CSS, sayfa öğelerinin ve bileşenlerinin yerleşimini kontrol eder. İçerik blokları, sütunlar, yükseklik ve genişlik ayarları, sayfa düzeni gibi konular CSS ile düzenlenebilir.
- Medya Uyumlu Tasarım: CSS, web sayfalarını farklı ekran boyutlarına ve cihazlara (mobil cihazlar, tabletler, masaüstü bilgisayarlar) uyumlu hale getirme yeteneği sunar. Bu, responsive web tasarımın temelini oluşturur.
- Gezinti ve Link Stilleri: CSS, bağlantıların renkleri, durumları (ziyaret edildi, üzerine gelindi) ve diğer etkileşimli özellikleri belirlemek için kullanılır.
- Animasyon ve Geçiş Efektleri: CSS, animasyonlar, geçişler ve diğer görsel efektler oluşturmak için kullanılabilir. Örneğin, hover etkileri veya hareketli görsel geçişler.
CSS, web geliştiricilerin web sayfalarını daha güzel ve kullanıcı dostu hale getirmelerine yardımcı olur. Ayrıca, aynı içeriği farklı cihazlarda uygun bir şekilde sunmalarını sağlayarak mobil uyumlu ve responsive web tasarımın temelini oluşturur. CSS, HTML ve JavaScript gibi diğer web teknolojileri ile birlikte kullanılarak etkileyici ve işlevsel web siteleri oluşturulabilir.
CSS Nasıl Kullanılır ?
CSS (Cascading Style Sheets), web sitelerinin görünümünü ve düzenini kontrol etmek için kullanılan bir stil dilidir. İşte CSS’in nasıl kullanılması gerektiğiyle ilgili bazı temel prensipler:
CSS Dosyası Oluşturma: İlk adım, ayrı bir CSS dosyası oluşturmaktır. Bu dosya, web sitenizin stil kurallarını içerecektir. CSS dosyasını oluştururken “.css” uzantısını kullanmalısınız (örneğin, “stil.css”).
HTML Belgelerine CSS Bağlantısı: CSS dosyanızı HTML belgenize bağlamanız gerekmektedir. “ etiketi kullanarak CSS dosyasının yolunu belirtmelisiniz. Örneğin:
CSS Kurallarını Tanımlama: CSS dosyanızda, belirli HTML öğeleri veya sınıflar için kurallar tanımlayabilirsiniz. Bir CSS kuralı, bir seçici ve stil bildirimlerinden oluşur. Örneğin:
h1 {
color: blue;
font-size: 24px;
}
Bu kural, h1 etiketini seçer ve metnin rengini mavi, font boyutunu 24 piksel olarak belirler.
CSS Seçicileri: CSS seçicileri, hangi HTML öğelerinin stil kurallarını etkileyeceğini belirler. En yaygın kullanılan seçiciler şunlardır:
Element Seçici: h1, p, div gibi HTML etiketleri.
Sınıf Seçici: .className şeklinde belirtilen sınıflar.
ID Seçici: #idName şeklinde belirtilen benzersiz kimliklere sahip öğeler.
Stil Özelliklerini Belirleme: CSS dosyanızda stil özelliklerini belirleyebilirsiniz. Örnek bazı stil özellikleri şunlardır:
Renk: color: red;
Yazı Tipi: font-family: Arial, sans-serif;
Arka Plan Rengi: background-color: #f1f1f1;
Kenarlık: border: 1px solid black;
Genişlik ve Yükseklik: width: 200px; height: 150px;
CSS Kodunu Organize Etme: CSS kodunuzu daha okunabilir ve yönetilebilir hale getirmek için kodu düzenli bir şekilde yazmaya özen gösterin. Girintilemeler, açıklamalar ve gruplama kullanarak kodunuzu organize edebilirsiniz.
CSS Öncelik ve Miras: CSS’de belirli kurallar, diğerlerine göre öncelik kazanabilir. Öncelik, seçicinin özgüllüğüne, sıralamaya ve kullanılan özelleştirme yöntemine göre değişir. Dahili stil etiketleri ve en son bağlantılanan CSS dosyası genellikle daha yüksek önceliğe sahiptir.
Tarayıcı Uyumluluğu: CSS kodunuzun farklı tarayıcılarda düzgün çalışmasını sağlamak için tarayıcı uyumluluğuna dikkat etmelisiniz. Bazı özellikler farklı tarayıcılarda farklı sonuçlar verebilir, bu nedenle test etmeyi unutmayın.
CSS, web sitelerinin görünümünü özelleştirmenin güçlü bir yoludur. Yukarıdaki temel prensiplere uyarak CSS kullanabilir ve web sitenizin tasarımını istediğiniz şekilde kontrol edebilirsiniz.
