CSS Kodlarını HTML Belgesine Ekleme Yöntemleri
Bu yazımızda, web sayfalarının görsel tasarımını şekillendiren temel yapı taşı olan CSS kodlarını, HTML belgesine ekleme yöntemlerini detaylarıyla ele alacağız.
CSS Kodlarımızı HTML Belgesine Nasıl Ekleriz?
CSS kodlarımızı HTML dökümana eklemek istediğimizde bunun için üç farklı yöntemden yararlanırız:
- inline styles (dahili stil)
- internal styles (sayfa içi stil)
- external styles (harici stil)
CSS Inline Styles Kullanımı
CSS, her ne kadar HTML’den farklı bir söz dizimine (syntax) sahip olsa da, “inline style” ile doğrudan HTML kodu içerisine CSS kodlarını yazabiliriz. Bunun için tek yapmamız gereken, stilize etmek istediğimiz HTML elementinin açılış etiketine “style” özelliğini eklemektir. Bakınız:
|
1 |
<p style='color: red;'>CSS bu be!</p> |
Bu yöntemle, yazdığımız CSS stili direkt olarak belirttiğimiz HTML elementine uygulanır. Daha fazla stil eklemek için yapmamız gereken şey style özelliğini genişletmektir. Ancak bunu yaparken her stil tanımının sonunu bir noktalı virgül (;) ile sonlandırmayı unutmamalıyız. Yukarıdaki örneğimizi biraz daha genişletelim:
|
1 |
<p style='color: red; font-size: 20px;'>CSS bu be!</p> |
Her ne kadar “inline style” kullanımını tüm web tasarımında temel stil yöntemi olarak tavsiye edilmese de, bazı özel durumlarda bu yöntem oldukça kullanışlı olabilir:
- Hızlı testler: Bir stil değişikliğinin sayfada nasıl görüneceğini hızla görmek istediğimizde, “inline style” kullanarak doğrudan HTML içinde değişiklik yapabiliriz.
- Tek seferlik özelleştirmeler: Eğer bir elementi sadece tek bir yerde özelleştirmek istiyorsak ve bu stilin başka hiçbir yerde kullanılmayacağını biliyorsak, “inline style” kullanabiliriz.
- Öncelikli stiller: CSS’te, “inline style” kullanılan stiller diğer stil tanımlamalarına göre daha yüksek bir önceliğe sahiptir. Eğer belirli bir stilin diğer tüm CSS tanımlamalarının üzerinde olmasını istiyorsak, “inline style” kullanarak bu önceliği sağlayabiliriz.
- Dinamik stil değişiklikleri: Bazı durumlarda, JavaScript gibi bir script dili ile dinamik olarak stil değişiklikleri yapmak isteyebiliriz. Bu gibi durumlarda “inline style” kullanımı, programatik olarak stil değişiklikleri yapmayı kolaylaştırır.
CSS Internal Styles Kullanımı
CSS kodlarını web sayfamıza dahil etmek için bir diğer yöntem de “internal styles” yani “dahili stiller” kullanmaktır. Bu yöntemle, CSS kodlarını doğrudan HTML dokümanının <head> bölümü içerisine eklemek için tek yapmamız gereken <style> etiketlerini kullanmaktır. Bakınız:
|
1 2 3 4 5 |
<head> <style> /* CSS kodları buraya yazıyoruz */ </style> </head> |
Örnek üzerinden inceleyelim:
|
1 2 3 4 5 6 7 8 9 10 |
<head> <style> p { color: blue; } </style> </head> <body> <p>CSS bu be!</p> </body> |
Yukarıdaki örnekte de görüleceği üzere, stil tanımımızı direkt olarak HTML dokümanımızın içine ekledik. Bu şekilde, tanımladığımız stil tüm sayfa genelinde geçerli olacaktır. Ayrıca, birden fazla stil tanımını art arda ekleyebiliriz:
|
1 2 3 4 5 6 7 8 9 10 11 |
<head> <style> p { color: blue; font-size: 18px; } </style> </head> <body> <p>CSS bu be!</p> </body> |
“Internal styles” kullanımının bazı avantajları vardır:
- Bölgesel değişiklikler: Eğer sadece tek bir HTML sayfasında geçerli olacak stil değişiklikleri yapmak istiyorsak, bu yöntemi kullanabiliriz.
- Sayfa özgü stiller: Bir web sayfamızın diğerlerinden farklı bir stil ile gösterilmesini istiyorsak, dahili stiller ideal bir çözüm olabilir.
- Hızlı prototipleme: Bir web sayfasının nasıl görüneceğini hızlıca görmek istiyorsak, stil tanımlamalarını doğrudan sayfa içine ekleyerek hızlı prototip çalışmaları yapabiliriz.
Ancak, bu yöntemle stil tanımlamalarını birden fazla sayfada kullanmak istediğimizde her sayfaya tekrar tekrar eklememiz gerekecektir. Bu nedenle, sitenin genel tasarımını belirleyen stiller için sonuncu yöntemimiz olan “external styles” yöntemini tercih etmek daha uygundur.
CSS External Styles Kullanımı
Web tasarımında stil kodlarını organize etmenin en yaygın yolu, “harici stiller” ya da diğer adıyla “external styles” kullanmaktır. Bu yöntemle, CSS kodlarımızı ayrı bir dosya içerisinde saklayarak HTML belgemize kolaylıkla entegre edebiliriz. Şimdi doğal olarak akla “Bu bağlantıyı nasıl oluştururuz?” sorusu geliyordur.
Bu bağlantıyı oluşturabilmemiz için ilk adımda <link> elementini kullanmamız gerekir. Bu element, HTML belgesinin <head> bölümüne eklenir ve harici stil dosyalarını belirtmek için kritik bir rol oynar.
Kapanış etiketi olmayan <link> elementinin href ve rel olmak üzere iki önemli özelliği vardır. Bunlardan href özelliği, bağlamak istediğimiz CSS dosyasının yolunu veya adresini belirtir. Örneğin, stil dosyamızın web üzerinde bir adresi varsa, bu adresi burada belirtmemiz gerekir. Örneğin:
|
1 |
<link href='https://www.siteadi.com/stylesheets/style.css' rel='stylesheet'> |
Burada dikkat edilmesi gereken diğer önemli özellik rel‘dir. Bu özellik, bağlanan dosyanın ne olduğunu tanımlar. CSS dosyasını bağlıyorsak, bu özelliğin değeri “stylesheet” olarak belirlenmelidir.
Ancak çoğu zaman, CSS dosyamızı aynı klasörde veya alt klasörlerde tutarız. Bu tür durumlarda, dosyanın tam internet adresi yerine göreli bir yol belirtmemiz yeterlidir. Bakınız:
|
1 |
<link href='./style.css' rel='stylesheet'> |
Harici stillerin kullanımının bazı avantajları vardır:
- Düzenli kod yapısı: Stil kodlarını ayrı bir dosyada tutarak, kod yapısını daha düzenli ve okunabilir hale getirebiliriz.
- Tekrar kullanım: Aynı stil dosyasını birden fazla HTML sayfasında kullanabiliriz. Bu, kod tekrarını önler ve değişiklik yapmak istediğimizde sadece bir dosyada güncelleme yapmamız yeterlidir.
- Hızlı yüklenen sayfalar: Stil dosyası bir kez indirildiğinde tarayıcı tarafından önbelleğe alınır. Bu, sayfaların daha hızlı yüklenmesine yardımcı olabilir.
- Modüler tasarım: Farklı stil dosyalarını farklı HTML sayfaları veya sayfa bölümleri için kullanarak, modüler bir tasarım yaklaşımı benimseyebiliriz.
Özetlemek gerekirse, büyük projelerde ve çok sayfalı web sitelerinde harici stiller kullanmak, kodun daha düzenli, yönetilebilir ve optimize edilmiş olmasını sağlar.
Tablo halinde CSS kodlarını HTML belgesine ekleme yöntemlerini aşağıdaki gibi kıyaslayabiliriz:
| Stil Yöntemi | Tanımı | Hangi Durumlarda Kullanılır? |
|---|---|---|
| Inline Style | Doğrudan HTML elementinin içerisine style özelliği aracılığıyla yazılan CSS kodlarıdır. | 1. Hızlı testler için 2. Tek seferlik özelleştirmeler için 3. Öncelikli stiller gerektiğinde 4. Dinamik stil değişiklikleri için (JavaScript ile birlikte) |
| Internal Style | HTML dosyasının <head> bölümünde <style> etiketi içerisine yazılan CSS kodlarıdır. | 1. Sayfa özelinde stil tanımlamaları için 2. Birden fazla elemente aynı stilin uygulanması gerektiği, fakat bu stilin sadece bu sayfada kalması istendiği durumlar için |
| External Style | CSS kodlarını ayrı bir dosyada (genellikle .css uzantılı) tutarak, bu dosyayı HTML’e <link> ile bağlama. | 1. Aynı stil kodlarının birden fazla sayfada kullanılması gerektiği durumlarda 2. Kodların organize edilmesi ve yönetilmesi gerektiğinde 3. Cache avantajlarından yararlanarak site performansını artırmak için |