CSS'in ne olduğu, HTML'e nasıl bağlandığı ve temel seçici kullanımı.
CSS (Cascading Style Sheets), HTML elementlerine görünüm kazandıran stil dilidir. Renk, boyut, konum, animasyon gibi her şey CSS ile yapılır.
External ayrı .css dosyası — en doğru yöntem. Internal head içinde style etiketi. Inline element üzerinde style özelliği — sadece zorunluysa kullanın.
Aynı elemente birden fazla stil uygulandığında hangi stilin kazanacağını belirleyen kuraldır. Özgüllük (specificity) ne kadar yüksekse o stil kazanır.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<!-- 1. External CSS (En iyi yöntem) -->
<link rel="stylesheet" href="style.css">
<!-- 2. Internal CSS -->
<style>
h1 { color: navy; }
</style>
</head>
<body>
<!-- 3. Inline CSS (Sadece zorunluysa) -->
<p style="color: red; font-size: 18px;">Bu bir paragraftır.</p>
<h1>Bu başlık CSS ile stillendirildi</h1>
</body>
</html>
/* Element seçici */
p { color: #333; }
/* Sınıf seçici */
.kirmizi { color: red; }
/* ID seçici */
#baslik { font-size: 32px; }
/* Çoklu seçici */
h1, h2, h3 { font-family: Arial; }
/* Torun seçici (nav içindeki a) */
nav a { color: white; }
/* Doğrudan çocuk seçici */
ul > li { list-style: square; }
/* Özellik seçici */
input[type="email"] { border: 2px solid blue; }
/* Pseudo-class */
a:hover { color: purple; }
button:focus { outline: 2px solid orange; }
li:first-child { font-weight: bold; }
li:nth-child(2n) { background: #f0f0f0; } /* çift satırlar */
/* Pseudo-element */
p::first-line { font-weight: bold; }
p::before { content: "→ "; color: blue; }