CSS (Cascading Style Sheets), HTML belgelerini stilize etmek ve görüntülemek için kullanılan bir stil dilidir. HTML dosyanıza CSS kodlarını eklemek için aşağıdaki adımları takip edebilirsiniz:
-
CSS Kodunun Oluşturulması:
- Bir metin düzenleyici kullanarak CSS kodlarınızı oluşturun. Örneğin:
/* Stil tanımları */ body { font-family: Arial, sans-serif; background-color: #f0f0f0; color: #333; } h1 { color: #008080; } p { font-size: 16px; line-height: 1.5; }- Bu örnekte,
body,h1vepöğelerine stil tanımları eklenmiştir.
-
CSS Dosyasının Kaydedilmesi:
- CSS kodlarını içeren bir dosya oluşturun ve bu dosyayı bir
.cssuzantısı ile kaydedin. Örneğin, "styles.css" olarak kaydedebilirsiniz.
- CSS kodlarını içeren bir dosya oluşturun ve bu dosyayı bir
-
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 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 ilk 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 CSS kodlarını ekleyebilir ve sayfanızın görünümünü özelleştirebilirsiniz.