Cascading Style Sheets (CSS) modern web geliştirmenin temel bir bileşenidir. CSS, bir web sayfasının sunumunu ve düzenini tanımlamak için kullanılan bir dildir. Başka bir deyişle, bir web sayfasının HTML öğelerinin nasıl şekillendirilmesi ve kullanıcıya nasıl gösterilmesi gerektiğini tanımlamak için kullanılır.
CSS, web geliştiricilerinin bir web sayfasının içeriğini sunumundan ayırmasına olanak tanır. Bu, HTML kodunun sayfanın yapısına ve içeriğine, CSS kodunun ise stil ve düzene odaklanabileceği anlamına gelir. Bu ayrım, sunumdaki değişiklikler içerikten bağımsız olarak yapılabildiği için web sayfalarının bakımını ve güncellenmesini kolaylaştırır.
Bu makalede, CSS kullanmanın faydalarını, CSS stillerinin HTML belgelerine nasıl yazılacağını ve uygulanacağını ve CSS kullanırken izlenecek en iyi uygulamaları inceleyeceğiz.
Neden CSS Kullanılmalı?
CSS, birçok faydası nedeniyle web geliştirmede standart bir teknoloji haline gelmiştir. İşte CSS kullanmanız için bazı temel nedenler:
- İçerik ve Sunumun Ayrıştırılması
Daha önce de belirtildiği gibi CSS, bir web sayfasının içeriğini sunumundan ayırmanıza olanak tanır. Bu, içeriği etkilemeden sunumda değişiklik yapılabildiği için web sayfalarının güncellenmesini ve bakımını kolaylaştırır. Bu ikisini birbirinden ayırmak aynı zamanda bir web sitesinin temel yapısını etkilemeden görünümünü değiştirmeyi de kolaylaştırır.
- Stilde Tutarlılık
CSS, bir web sitesi genelinde tutarlı bir görünüm ve his oluşturmak için kullanılabilir. Bu, başlıklar, paragraflar, listeler ve bağlantılar gibi ortak öğeler için stiller tanımlanarak elde edilir. Tutarlı stiller kullanarak kullanıcılar önemli öğeleri hızlı bir şekilde belirleyebilir ve web sitesinde daha verimli bir şekilde gezinebilir.
- Daha Hızlı Sayfa Yüklenme Süreleri
CSS dosyaları tarayıcı tarafından önbelleğe alınabilir, yani bir kullanıcı bir web sayfasını her ziyaret ettiğinde indirilmeleri gerekmez. Tarayıcının yalnızca HTML içeriğini ve yeni CSS dosyalarını indirmesi gerektiğinden, bu daha hızlı sayfa yükleme süreleriyle sonuçlanabilir.
- Erişilebilirlik
CSS, web sayfalarını engelli kullanıcılar için daha erişilebilir hale getirmek için kullanılabilir. Örneğin, CSS, görme engelli kullanıcılar için yüksek kontrastlı stiller oluşturmak veya daha büyük yazı tiplerini veya farklı renk şemalarını tercih eden kullanıcılar için alternatif stiller sağlamak için kullanılabilir.
- Duyarlı Tasarım
CSS, farklı ekran boyutlarına ve cihaz türlerine uyum sağlayan duyarlı tasarımlar oluşturmak için kullanılabilir. Bu, farklı ekran boyutları için stiller tanımlayarak ve bunları kullanıcının cihazına göre uygulamak için medya sorguları kullanarak elde edilir.
HTML Belgelerine CSS Stilleri Nasıl Yazılır ve Uygulanır?
CSS stillerini bir HTML belgesine uygulamak için aşağıdaki adımları izlemeniz gerekir:
- Bir CSS Dosyası Oluşturun
İlk adım, web sitenizin stillerini içeren bir CSS dosyası oluşturmaktır. Bu dosyayı Not Defteri veya Sublime Text gibi bir metin düzenleyici kullanarak oluşturabilirsiniz. Dosya, styles.css gibi bir .css uzantısına sahip olmalıdır.
- CSS Dosyasını HTML Belgenize Bağlama
Bu, tarayıcıya CSS dosyasını yüklemesini ve stillerini HTML belgesine uygulamasını bildirir.
CSS dosyanızı oluşturduktan sonra, onu HTML belgenize bağlamanız gerekir. Bu, HTML belgenizin head bölümüne bir bağlantı öğesi ekleyerek yapılır. Bağlantı öğesi, CSS dosyanızın yolunu aşağıdaki gibi içermelidir:
<head>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
- CSS Stillerini Yazma
Artık CSS dosyanız HTML belgenize bağlı olduğuna göre, CSS stilleri yazmaya başlayabilirsiniz. CSS stilleri bir seçici ve bir veya daha fazla bildirimden oluşur. Seçici, stillerin uygulanması gereken HTML öğesini/öğelerini tanımlar ve bildirimler uygulanacak stilleri belirtir.
İşte bir CSS stili örneği:
h1 {
color: red;
font-size: 24
Yukarıdaki örnekte, h1 seçicisi HTML belgesindeki tüm başlık düzeyi 1 öğelerini hedefler ve bunların rengini kırmızı ve yazı tipi boyutunu 24 piksel olarak ayarlar.
HTML öğelerinizi stilize etmek için kullanabileceğiniz bazı yaygın CSS özellikleri şunlardır:
- color: metin rengini ayarlar
- font-size: yazı tipi boyutunu ayarlar
- font-family: yazı tipi ailesini ayarlar
- text-align: metnin hizalamasını ayarlar
- background-color: arka plan rengini ayarlar
- border: kenarlık stilini ve genişliğini ayarlar
CSS’yi HTML öğelerinize dolgu ve kenar boşlukları eklemek, öğeler arasındaki boşluğu ayarlamak ve hatta animasyonlar ve geçişler oluşturmak için de kullanabilirsiniz.
CSS Kullanımı için En İyi Uygulamalar
CSS’den en iyi şekilde yararlanmak için bu en iyi uygulamaları takip etmelisiniz:
- Harici CSS Dosyaları Kullanın
Daha önce de belirtildiği gibi, harici CSS dosyaları kullanmak, sunumunuzu ve içeriğinizi ayırmanıza olanak tanır, bu da web sitenizin bakımını ve güncellenmesini kolaylaştırır. Ayrıca HTML belgelerinizin boyutunu azaltmaya ve sayfa yükleme sürelerini iyileştirmeye yardımcı olur.
- Semantik HTML kullanın
Semantik HTML, açık bir anlamı ve amacı olan HTML öğelerini kullanmayı ifade eder. Örneğin, ana başlık için h1 öğesi, paragraflar için p öğesi ve listeler için ul öğesi kullanmak gibi. Bu, arama motorlarının ve ekran okuyucuların web sitenizin içeriğini anlamasını kolaylaştırır.
- Seçicileri Doğru Kullanın
CSS yazarken, istenmeyen öğelere stil uygulamaktan kaçınmak için seçicileri doğru kullanmak önemlidir. Bu, bir üst öğenin tüm alt öğelerine stil uygulayan alt öğe seçicilerini kullanırken özellikle önemlidir.
- Duyarlı Tasarım Kullanın
Duyarlı tasarım, farklı cihazlarda ve ekran boyutlarında iyi çalışan web siteleri oluşturmak için gereklidir. Medya sorgularını ve esnek düzenleri kullanarak masaüstü bilgisayarlarda, tabletlerde ve akıllı telefonlarda harika görünen bir web sitesi oluşturabilirsiniz.
- Stilleri Test Edin
Finally, it’s important to test your styles on different devices and browsers to ensure that they work as intended. You can use browser developer tools to inspect your HTML and CSS and make adjustments as needed.
CSS, modern ve profesyonel görünümlü web siteleri oluşturmak için önemli bir araçtır. Web sitenizin içeriğini ve sunumunu birbirinden ayırarak, hızlı yüklenen ve farklı cihazlarda harika görünen, daha sürdürülebilir ve erişilebilir bir web sitesi oluşturabilirsiniz. En iyi uygulamaları izleyerek ve stillerinizi test ederek web sitenizin harika görünmesini ve tüm kullanıcılarınız için iyi çalışmasını sağlayabilirsiniz.