CSS nasıl açılır?

CSS dosyası, bir HTML sayfası gibi görsel sonucu göstermek için değil, CSS kodunu düzenlemek için açılır. Dosyayı bir metin veya kod editörüyle açın; tasarımın tarayıcıdaki sonucunu görmek için CSS dosyasını HTML belgesine bağlayıp HTML dosyasını tarayıcıda açın. Harici CSS dosyası, HTML belgesinin <head> bölümündeki <link> etiketiyle yüklenir.

CSS dosyası nasıl açılır ve kullanılır?​

En basit deneme için aynı klasörde index.html ve style.css adlı iki dosya oluşturun. Dosya uzantılarının gerçekten .html ve .css olduğuna dikkat edin. Bazı işletim sistemlerinde bilinen uzantılar gizlendiği için dosya yanlışlıkla style.css.txt olarak kaydedilebilir.

1. style.css dosyasını Not Defteri veya bir kod editörüyle açın ve aşağıdaki kuralları ekleyin:
   
   Kod:

   body {
     background-color: #f2f2f2;
   }
   
   h1 {
     color: navy;
   }

2. index.html dosyasını açın ve CSS dosyasını <head> bölümünde bağlayın:
   
   Kod:

   <!doctype html>
   <html lang="tr">
   <head>
     <meta charset="utf-8">
     <title>CSS denemesi</title>
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <h1>Merhaba</h1>
   </body>
   </html>

3. Her iki dosyayı kaydedin. Ardından index.html dosyasını tarayıcıda açın.
4. Sayfanın arka planı açık gri, başlığın rengi lacivert görünüyorsa CSS dosyası doğru yüklenmiştir.

Buradaki href="style.css" ifadesi, CSS dosyasının HTML dosyasıyla aynı klasörde olduğunu belirtir. CSS dosyası css adlı bir alt klasördeyse yol href="css/style.css" olmalıdır. Üst klasörde bulunan bir dosyaya ulaşmak için ise ../style.css gibi göreli yol kullanılır.

CSS kodunu açmanın yöntemleri​

CSS üç yaygın biçimde HTML belgesine uygulanabilir. Proje büyüdükçe genellikle harici dosya daha düzenli ve tekrar kullanılabilir bir seçimdir.


Dahili kullanım için örnek:

Satır içi kullanım ise şöyle yazılır:

Bu yöntemler küçük denemelerde işe yarar; ortak tasarım kurallarını her HTML dosyasına tekrar yazmamak için harici CSS dosyası daha pratiktir.

CSS açılmıyor veya uygulanmıyorsa​

CSS dosyasına çift tıkladığınızda yalnızca kod metni görmeniz normaldir. Tarayıcıda görsel sonucu görmek için HTML dosyasını açmalısınız. Stil uygulanmıyorsa şu kontrolleri yapın:

1. HTML dosyasındaki href yolunun CSS dosyasının gerçek konumuyla eşleştiğini kontrol edin.
2. Dosya adında büyük-küçük harf farkı olmadığından emin olun; özellikle sunucularda Style.css ile style.css farklı dosyalar olabilir.
3. CSS dosyasını ve HTML dosyasını kaydettikten sonra sayfayı yenileyin.
4. Tarayıcının geliştirici araçlarında Ağ veya Network bölümünü açıp CSS dosyasının bulunamadığını belirten bir hata olup olmadığını inceleyin.
5. CSS sözdiziminde süslü parantezlerin, iki noktanın ve noktalı virgüllerin doğru kullanıldığını kontrol edin.

Yanlış dosya yolu, eksik dosya uzantısı ve CSS dosyasının kaydedilmemesi en sık karşılaşılan sorunlardır. Dosyayı doğrudan tarayıcıda açmak yalnızca kuralları metin olarak gösterir; CSS’nin etkisini görmek için her zaman onu kullanan HTML belgesini açın.

Sık sorulan sorular​

Bilinmeyen bir CSS özelliği bütün dosyayı durdurur mu?​

Genellikle hayır. Tarayıcı tanımadığı özellik-değer bildirimini yok sayar. Ancak kapanmayan yorum, bozuk seçici veya başka sözdizimi hataları daha geniş bir bölümü etkileyebilir. Geliştirici araçlarında hangi kuralın uygulanmadığını inceleyin.

Bu örneği internet bağlantısı olmadan açabilir miyim?​

HTML ve CSS dosyaları yereldeyse bu basit örnek çalışabilir. Harici yazı tipi, görsel veya başka ağ kaynağı eklerseniz onların ayrıca erişilebilir olması gerekir. Yerel dosyada görünen sonuç, sitenin sunucuda da aynı yollarla yükleneceğini tek başına kanıtlamaz.