CSS (Cascading Style Sheets), HTML sayfalarına stil eklemek için kullanılan bir dildir. CSS eklemek için üç temel yöntem vardır:
1. Inline CSS (Satır İçi CSS)
HTML elemanlarına doğrudan stil eklemek için style özelliği kullanılır. Bu yöntem sadece belirli bir HTML elemanına stil uygular.
Örnek:
1 2 3 | <p style="color: red; font-size: 20px;">Bu metin kırmızı renkte ve 20px boyutunda olacak.</p> |
2. Internal CSS (Dahili CSS)
HTML dosyasının <head> bölümüne <style> etiketiyle CSS eklenir. Bu yöntem sayfa içindeki tüm elemanlar için stil tanımlar.
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!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> <style> body { background-color: lightblue; } h1 { color: green; } </style> </head> <body> <h1>Merhaba Dünya!</h1> <p>Bu sayfa arka planı açık mavi ve başlık yeşil renkte olacak.</p> </body> </html> |
3. External CSS (Dış CSS)
CSS dosyasını ayrı bir dosya olarak oluşturup, HTML dosyasına bağlantı verilir. Bu yöntem, stilin tüm sayfalara uygulanabilmesini sağlar ve daha büyük projeler için daha düzenli ve yönetilebilir bir yöntemdir.
Örnek:
CSS Dosyası (styles.css):
1 2 3 4 5 6 7 8 9 | body { background-color: lightgray; } h1 { color: blue; } |
HTML Dosyası (index.html):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>External CSS Örneği</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>External CSS ile Stil</h1> <p>Bu sayfa arka planı açık gri ve başlık mavi renkte olacak.</p> </body> </html> |
Bu üç yöntem, CSS ekleme için yaygın olarak kullanılır. Genellikle daha büyük projelerde dış CSS tercih edilir, çünkü stil dosyasının ayrı olması, yönetimi ve bakımı kolaylaştırır. Ancak küçük projelerde ve hızlı testlerde inline veya internal CSS yeterli olabilir.
Yorum Yap