CSS Nedir? Temel Yapısı ve Web'deki Kullanımı
CSS kuralları, HTML öğelerinin görünümünü özellik ve değerlerle düzenler. Sayfa sayısı arttığında haricî bir CSS dosyasıyla ortak stilleri tek yerden yönetebilirsiniz.
Bu yazıda neler var?
CSS, “Cascading Style Sheets” ifadesinin kısaltmasıdır; Türkçede Basamaklı Stil Sayfaları olarak adlandırılır. HTML ile oluşturduğunuz içeriğin rengini, yazı tipini, boyutunu ve yerleşimini CSS ile belirlersiniz. Bir CSS kuralı seçici, özellik ve değerden oluşur; örneğin 32 piksel yazı boyutunu bir başlığa uygulayabilirsiniz.
CSS Ne İşe Yarar?
CSS, web sayfasındaki HTML öğelerinin görsel özelliklerini düzenler. Bir başlığın rengini, paragrafın yazı boyutunu veya düğmenin kenarlığını tanımlayın. İç boşluk ve dış boşluk değerleriyle öğelerin çevresindeki alanı ayarlayın. Hizalama kuralları da metinlerin ve diğer öğelerin sayfadaki konumunu belirler.
Yerleşim kurarken Flexbox ve Grid özelliklerini kullanın. Flexbox, öğeleri bir satır veya sütun boyunca düzenlemenizi sağlar; Grid ise satır ve sütunlardan oluşan bir düzen kurar. Medya sorguları, ekran genişliği gibi koşullara göre farklı CSS kuralları uygular. Geçiş ve animasyon özellikleri de görsel değişimleri tanımlamak için kullanılır.
CSS Kuralı Nasıl Yazılır?
Seçici, hangi HTML öğesinin biçimleneceğini gösterir. Özellik, görünümün hangi yönünü değiştireceğinizi belirtir; değer ise uygulanacak ayarı tanımlar. Her özellik ve değer çiftini süslü parantezlerin içine yazın. Bir bildirimin sonuna noktalı virgül koyun.
Örnek kural: h1 { color: blue; font-size: 32px; }. Burada h1 seçici, color ve font-size özellik, blue ve 32px değerlerdir. Kural bütün h1 başlıklarının yazı rengini mavi, yazı boyutunu 32 piksel yapar. Yeni bir bildirim eklerken özellik ile değeri iki nokta üst üste işaretiyle ayırın.
CSS HTML Sayfasına Nasıl Eklenir?
CSS'i satır içi, dâhilî veya haricî yöntemle ekleyin. Satır içi CSS'i tek bir HTML öğesinin style özniteliğine yazarsınız. Dâhilî CSS, HTML belgesindeki <style> bölümünde yer alır. Haricî CSS ise ayrı bir .css dosyasında bulunur ve HTML belgesine <link> etiketiyle bağlanır.
| Yöntem | Yazıldığı yer | Uygun kullanım |
|---|---|---|
| Satır içi | HTML öğesinin style özniteliği | Tek öğeye özel stil |
| Dâhilî | HTML belgesindeki <style> bölümü | Tek sayfanın stilleri |
| Haricî | Ayrı bir .css dosyası | Birden fazla sayfanın ortak stilleri |
Birden fazla sayfada aynı tasarımı kullanacaksanız haricî dosyayı seçin. Örneğin stil.css dosyasını HTML belgesinin <head> bölümüne şu etiketi ekleyerek bağlayın: <link rel="stylesheet" href="stil.css">. Dosya adı ve yolu, projedeki gerçek konumla eşleşmelidir. HTML belgesi hazırlama adımları için HTML dosyası hazırlama rehberine bakabilirsiniz.
HTML ve JavaScript'ten Farkı Nedir?
HTML, sayfanın yapısını ve içeriğini tanımlar. Başlık, paragraf ve bağlantı HTML öğeleridir. CSS, bu öğelerin nasıl görüneceğini belirler. JavaScript ise sayfaya davranış ve etkileşim ekler. Bu diller aynı sayfada birlikte çalışabilir, ancak görevleri farklıdır.
Örneğin bağlantı metnini HTML ile oluşturun, rengini CSS ile belirleyin. Bağlantıya tıklanınca menünün açılmasını istiyorsanız JavaScript ile etkileşim tanımlayın. Bu ayrımı bilmek, bir değişikliğin hangi dosyada yapılacağını seçmenizi kolaylaştırır. Görünüm kuralını JavaScript'e, içerik yapısını CSS'e yazmayın.
Flexbox, Grid ve Medya Sorguları Ne Zaman Kullanılır?
Flexbox'ı öğeleri tek bir satırda veya sütunda sıralamak için kullanın. Örneğin yatay bir menüde bağlantıları yan yana getirin. Grid'i satır ve sütunlardan oluşan sayfa düzenlerinde tercih edin. Kartları iki boyutlu bir ızgarada göstermek, Grid'in uygun kullanımına örnektir.
Ekran boyutu değiştiğinde yerleşimi uyarlamak için medya sorgusu yazın. Sorgu, belirttiğiniz koşul sağlandığında ilgili CSS kurallarını uygular. Böylece geniş ekranda yan yana duran bölümleri dar ekranda alt alta düzenleyebilirsiniz. Tek bir kural bütün ekranlarda uygun görünmüyorsa, önce yerleşimi hangi ekran koşulunda değiştireceğinizi belirleyin.
Haricî CSS Dosyası Nasıl Düzenlenir?
Önce HTML belgenizin yanında stil.css adlı bir dosya oluşturun. Dosyaya seçicileri ve ilgili özellik-değer çiftlerini yazın. Ardından HTML belgesinin <head> bölümünde dosyayı <link> etiketiyle çağırın. Projede birden fazla HTML sayfası varsa aynı dosyayı her sayfaya bağlayarak ortak renkleri ve yazı stillerini tek noktadan düzenleyin.
Kuralları sayfanın amacına göre gruplandırın. Örneğin başlık stillerini h1 seçicisi altında, menü stillerini ilgili sınıf seçicisi altında toplayın. Dosyaya yeni bir kural ekledikten sonra sayfayı yenileyip değişikliğin doğru öğeye uygulandığını kontrol edin. Bir görünüm kuralı birden fazla yerde tekrarlanıyorsa ortak kuralı haricî dosyada tutun.
Sık Yapılan CSS Hataları ve Çözümleri
CSS değişikliği görünmüyorsa önce seçiciyi ve dosya bağlantısını denetleyin. HTML'deki öğe adının CSS seçicisiyle eşleştiğinden emin olun. Sınıf seçicisi yazarken sınıf adının başına nokta koyun; örneğin menu sınıfı için .menu kullanın. Haricî dosyada dosya adını ve href içindeki yolu kontrol edin.
- Kapanmayan süslü parantez: Her açılan { işaretinin karşısına } ekleyin ve kuralın sınırını kontrol edin.
- Eksik noktalı virgül: Özellik-değer bildirimlerinin arasına noktalı virgül koyun.
- Yanlış değer: Özelliğin beklediği değeri yazın; yazı boyutu için 32px gibi bir uzunluk değeri kullanın.
- Yanlış dosya yolu: CSS dosyasının adı ve klasör konumu ile HTML'deki href değerini eşleştirin.
Hataları bulmak için aynı anda çok sayıda kural eklemeyin. Önce tek bir seçiciye bir özellik verin, sonucu kontrol edin ve sonra yeni bildirim ekleyin. Böylece yanlış seçiciyi, yazım işaretini veya dosya yolunu daha kolay ayırt edersiniz. Değişiklik farklı bir öğeyi etkiliyorsa seçicinin hedefini yeniden inceleyin.