CSS kodları, genellikle üç farklı yöntemle bir web sayfasına eklenir:
-
İç CSS (Internal CSS):
- CSS kodları, HTML belgesinin
<style>etiketi içine yerleştirilerek HTML dosyasının<head>bölümünde tanımlanabilir. Bu yöntemle, bir sayfanın özel stilini belirlemek istediğinizde kullanışlıdır.
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: 'Arial', sans-serif; background-color: #f0f0f0; } </style> <title>İç CSS Örneği</title> </head> <body> <h1>Merhaba, Dünya!</h1> <p>Bu bir iç CSS örneğidir.</p> </body> </html> - CSS kodları, HTML belgesinin
-
Harici CSS (External CSS):
- CSS kodları, ayrı bir CSS dosyasına yazılarak HTML belgesine
<link>etiketi ile bağlanabilir. Bu yöntem, birden çok sayfada aynı stili paylaşmak için kullanışlıdır.
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Harici CSS Örneği</title> </head> <body> <h1>Merhaba, Dünya!</h1> <p>Bu bir harici CSS örneğidir.</p> </body> </html>style.css:
body { font-family: 'Arial', sans-serif; background-color: #f0f0f0; } - CSS kodları, ayrı bir CSS dosyasına yazılarak HTML belgesine
-
Enline CSS (Inline CSS):
- CSS kodları doğrudan HTML öğelerine
styleözelliği içinde yazılarak eklenir. Bu yöntem, belirli bir öğenin stilini belirlemek istediğinizde kullanışlıdır.
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Enline CSS Örneği</title> </head> <body style="font-family: 'Arial', sans-serif; background-color: #f0f0f0;"> <h1>Merhaba, Dünya!</h1> <p>Bu bir enline CSS örneğidir.</p> </body> </html> - CSS kodları doğrudan HTML öğelerine
Her üç yöntem de kullanılabilir, ancak proje ihtiyaçlarına ve sayfanın karmaşıklığına bağlı olarak tercih edilen yöntem değişebilir.