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 hangi yöntemlerle ekleyebileceğimizi detaylarıyla ele alacağız.
CSS Kodlarımızı HTML Belgesine Nasıl Ekleriz?
CSS kodlarımızı bir HTML belgesine eklemek için şu üç temel yolu kullanırız:
- Inline styles (Dahili stil)
- Internal styles (Sayfa içi stil)
- External styles (Harici stil)
Her yöntemin kendine özgü avantajları, dezavantajları ve kullanım senaryoları bulunur. Gelin, örnekler ve senaryolar üzerinden bu üç yöntemi inceleyelim.
CSS “Inline Styles” Kullanımı
CSS kodlarını HTML etiketlerinin “style” özniteliği içine yazarak kullanabiliriz. Bu yöntem, tek bir element için stil tanımlamak istediğimizde elverişlidir. Örneğin:
<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:
<p style='color: red; font-size: 20px;'>CSS bu be!</p>👎 Inline CSS uzun vadede kodu karmaşık hale getirir. Her element için ayrı ayrı stil tanımlamak kod tekrarına neden olduğundan bakımı zorlaşır. Öyle ki, kendinizi neyi nereye neden yazdım derken bulabilirsiniz.
CSS “Internal Styles” Kullanımı
Bir HTML dökümanının tamamını stilize etmek istediniz diyelim. Ancak her bir HTML etiketi için ayrı stil kuralları yazmak istiyorsunuz ama bir yandan da bu stil kodlarının HTML etiketleriyle bir keşmekeş oluşturmasını istemiyorsunuz diyelim. Böylesi bir senaryo için pekala Internal CSS kullanabilirsiniz.
Bunu yapabilmek için HTML dökümanının <head> bölümünde <style> etiketi kullanılır. Bu yöntem, stil kurallarının aynı dosya içerisinde olmasını sağlar ve “yalnızca o sayfaya özel” bir stilleme oluşturur. Böylece belirli bir sayfanın tamamını veya belli bölümlerini kolayca stilize edebilirsiniz.
<head>
<style>
/* CSS kodları buraya yazıyoruz */
</style>
</head>
Bir örnek üzerinden inceleyelim:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Örneği</title>
<!-- Internal CSS: Stil ayarları burada tanımlanır -->
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa;
}
h1 {
color: #ff5733;
text-align: center;
}
p {
color: #333;
font-size: 16px;
line-height: 1.6;
margin: 10px 20px;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #0056b3;
}
</style>
</head>
<body>
<h1>Internal CSS Kullanımı</h1>
<p>Bu sayfada tüm stil ayarları <strong>Internal CSS</strong> ile yapılmıştır. Stil kuralları sadece bu sayfaya özel olarak uygulanır.</p>
<a href="#">Bir bağlantı örneği</a>
</body>
</html>
Yukarıdaki örneğimizde, kodun içinde; body, h1, p ve a gibi HTML etiketleri stilize edilmiştir. body etiketine bir arkaplan rengi atanarak sayfanın genel görünümü düzenlenmiştir. h1 etiketi ortalanarak rengi değiştirilmiş, p etiketinde yazı rengi, boyutu ve satır aralığı ayarlanmıştır. Ayrıca, a etiketi için bağlantı rengi belirlenmiş ve üzerine gelindiğinde farklı bir renk ile altı çizilmesi sağlanmıştır.
Bu sayede sayfanın görünümü, Internal CSS aracılığıyla doğrudan HTML dosyasının içinde tanımlanan stiller ile düzenlenmiştir. Harici bir stil dosyasına ihtiyaç duyulmadan, bu sayfa için özelleştirilmiş bir tasarım elde edilmiştir.
👎 Internal CSS, sayfa bazında kullanışlı olsa da, birden fazla sayfa için kullanıldığında stil tekrarı oluşturur ve bakımı zorlaşır.
CSS “External Styles” Kullanımı
External CSS (Harici Stil), HTML dosyasından ayrı bir CSS dosyası oluşturarak sayfanın stil tanımlamalarını gerçekleştiren bir yöntemdir. Stil kuralları, .css uzantılı bir dosyada tutulur ve bu dosya HTML dosyasına <link> etiketi aracılığıyla bağlanır. Örneğin:
<link href='https://www.siteadi.com/stylesheets/style.css' rel='stylesheet'>rel özelliği, bir HTML belgesine bağlanan dosyanın türünü tanımlar. Eğer bir CSS dosyası bağlıyorsanız, bu özelliğin değeri stylesheet olmalıdır. Böylece tarayıcıya dosyanın bir stil dosyası olduğunu söylemiş oluruz.
CSS dosyasını genellikle aynı klasörde veya alt klasörlerde tutarız. Bu durumda tam internet adresi yerine göreli bir yol kullanılır. Göreli yol, CSS dosyasının HTML dosyasına göre konumunu belirtir. Bunu şu şekillerde yapabiliriz:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Dosya Yolları Örneği</title>
<!-- 1. Aynı klasörde bulunan CSS dosyasını bağlama -->
<!-- style.css dosyası, bu HTML dosyasının bulunduğu klasörde -->
<link href="style.css" rel="stylesheet">
<!-- 2. Alt klasörde bulunan CSS dosyasını bağlama -->
<!-- style.css dosyası, "css" isimli alt klasörün içinde -->
<link href="./css/style.css" rel="stylesheet">
<!-- 3. Bir üst klasörde bulunan CSS dosyasını bağlama -->
<!-- style.css dosyası, bir üst klasörde yer alıyor -->
<link href="../style.css" rel="stylesheet">
<!-- 4. Tam internet adresiyle (mutlak yol) CSS dosyasını bağlama -->
<!-- CSS dosyası, tamamen farklı bir sunucudan yükleniyor -->
<link href="https://www.example.com/style.css" rel="stylesheet">
</head>
<body>
<h1>CSS Dosya Yolları Örneği</h1>
<p>Bu sayfada dört farklı yolla CSS dosyaları bağlanmıştır:</p>
<ul>
<li>Aynı klasörde bulunan CSS dosyası</li>
<li>Alt klasörde bulunan CSS dosyası</li>
<li>Bir üst klasörde bulunan CSS dosyası</li>
<li>Mutlak adres ile bağlanan CSS dosyası</li>
</ul>
</body>
</html>
Harici CSS (External CSS) kullanarak yapılan stillemeler, HTML elementlerini seçmek için CSS seçicileri kullanılarak gerçekleştirilir. Stil kuralları, belirli HTML etiketlerine, sınıflara veya ID’lere göre uygulanır. Bu işlem, CSS Seçiciler kullanarak gerçekleştirilir. Örneğin:
/* Harici CSS dosyasındaki stil tanımlamaları */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
h1 {
color: #333;
text-align: center;
margin-top: 20px;
}
p {
font-size: 16px;
line-height: 1.5;
color: #666;
margin: 20px;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
External Styles (Harici CSS) kullanımı, web geliştirme sürecinde büyük bir avantaj sağlar ve bu yüzden kullanıcılar tarafından sıklıkla tercih edilir. Harici CSS, HTML kodundan bağımsız olarak ayrı bir dosyada tutulur ve bu dosya <link> etiketiyle HTML dosyasına bağlanır. Bu yöntem, özellikle birden fazla sayfaya sahip projelerde tekrar kullanılabilirlik açısından büyük kolaylık sağlar. Aynı CSS dosyası, farklı HTML sayfalarında kullanılabilir ve böylece tüm sayfaların tasarımı merkezi bir yerden yönetilebilir.
Harici CSS’nin bir diğer önemli avantajı, kodun düzenli ve okunabilir kalmasını sağlamasıdır. Stil kuralları ayrı bir dosyada tanımlandığı için HTML içeriği sadeleşir ve stil kodlarıyla içeriğin birbirine karışması önlenir. Bu da hem geliştirme hem de bakım aşamasında zaman tasarrufu sağlar.
Ayrıca, harici CSS dosyaları tarayıcı tarafından önbelleğe alınır. Bu durum, sayfaların yüklenme hızını artırarak kullanıcı deneyimini iyileştirir. Örneğin, bir kullanıcı sitenizin farklı sayfalarını ziyaret ettiğinde, tarayıcı aynı CSS dosyasını tekrar indirmez; önbellekten kullanır. Bu da sunucu yükünü azaltır ve performansı artırır.
Son olarak, büyük projelerde iş birliği açısından da harici CSS oldukça kullanışlıdır. Tasarımcılar ve geliştiriciler, HTML yapısını bozmadan yalnızca CSS dosyasını düzenleyerek çalışabilir. Tüm bu avantajlar nedeniyle harici CSS kullanımı, modern web geliştirmede standart bir uygulama haline gelmiştir.