CSS dosyalarını oluşturmak ve HTML dosyalarına dahil etmek, web sayfalarını stilize etmek için yaygın bir yöntemdir. İşte bu adımları takip ederek CSS dosyalarını oluşturabilir ve HTML dosyalarına dahil edebilirsiniz:
-
CSS Dosyasının Oluşturulması:
- Bir metin düzenleyici kullanarak CSS kodlarını içeren bir dosya oluşturun. Örneğin, "styles.css" olarak adlandırabilirsiniz.
/* styles.css */ body { font-family: Arial, sans-serif; background-color: #f0f0f0; color: #333; } h1 { color: #008080; } p { font-size: 16px; line-height: 1.5; }- Bu örnek, genel bir sayfa stilini tanımlar.
-
CSS Dosyasının HTML Dosyasına Eklenmesi:
- HTML dosyanızın
<head>bölümüne, oluşturduğunuz CSS dosyasını ekleyin. Bu, tarayıcının HTML sayfanızı düzenlemek için CSS stil tanımlarını kullanmasını sağlar.
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML ve CSS Örneği</title> <link rel="stylesheet" href="styles.css"> <!-- CSS dosyasının eklenmesi --> </head> <body> <h1>Merhaba, Dünya!</h1> <p>Bu benim HTML ve CSS örneğim.</p> </body> </html>hrefözelliği ile CSS dosyasının yolunu belirtirsiniz. Yukarıdaki örnekte, CSS dosyası ile HTML dosyası aynı klasörde bulunuyor; fakat dosyalar farklı klasörlerde ise, dosya yolu buna göre ayarlanmalıdır.
- HTML dosyanızın
-
Sonuçları Gözlemleme:
- Tarayıcıda HTML dosyanızı açarak, CSS stil tanımlarının etkilerini gözlemleyebilirsiniz.
Bu adımları takip ederek, HTML dosyanıza bağlı bir CSS dosyası oluşturabilir ve sayfanızın stilini ayrı bir dosyadan yönetebilirsiniz. Bu, kodunuzu daha düzenli hale getirir ve bakımını kolaylaştırır.