Harici (external) CSS kullanarak HTML belgenizdeki stil kurallarını başka bir dosyada tanımlayabilir ve böylece daha düzenli ve sürdürülebilir bir kod elde edebilirsiniz. İşte bir HTML belgesinde harici CSS kullanımının örnekleri:
-
CSS Dosyası Oluşturma:
- İlk olarak, stil kurallarını içeren bir CSS dosyası oluşturun. Örneğin, "style.css" adında bir dosya:
/* style.css */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; margin: 0; padding: 20px; } h1 { color: #0066cc; } p { line-height: 1.6; } -
HTML Dosyasına Bağlantı:
- HTML belgenizin
<head>bölümünde oluşturduğunuz CSS dosyasına bağlantı ekleyin.
<!-- index.html --> <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Harici CSS Örneği</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Merhaba, Dünya!</h1> <p>Harici CSS kullanımı örneği. Bu paragraf, belirtilen stil özelliklerine sahiptir.</p> </body> </html> - HTML belgenizin
Bu şekilde, stil kurallarınızı HTML belgesinden ayırarak, projenizdeki sayfalar arasında stilin paylaşılmasını ve bakımın daha kolay olmasını sağlayabilirsiniz. Harici CSS kullanımı ayrıca tarayıcıların önbellek avantajlarından da yararlanmanıza yardımcı olabilir.