Web Geliştirme
85 ~35 dk
CSS'e Giriş ve Seçiciler
CSS Nedir?
CSS (Cascading Style Sheets), HTML elemanlarının görünümünü belirleyen stil dilidir.
CSS Bağlama Yöntemleri
<!-- 1. Satır içi (Inline) - Önerilmez -->
<p style="color: red; font-size: 18px;">Kırmızı metin</p>
<!-- 2. Dahili (Internal) -->
<head>
<style>
p { color: blue; }
</style>
</head>
<!-- 3. Harici (External) - Önerilen! -->
<head>
<link rel="stylesheet" href="stil.css">
</head>Temel Seçiciler
/* Etiket seçici */
p { color: #333; }
h1 { font-size: 24px; }
/* Sınıf seçici (.) */
.vurgulu { background-color: yellow; }
.hata { color: red; }
/* ID seçici (#) */
#baslik { font-size: 32px; text-align: center; }
/* Evrensel seçici */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Grup seçici */
h1, h2, h3 { font-family: Arial, sans-serif; }
/* Alt eleman seçici */
nav a { text-decoration: none; }
.menu li { display: inline-block; }Renkler
/* Renk isimleri */
color: red;
color: blue;
/* HEX (onaltılık) */
color: #ff0000; /* Kırmızı */
color: #333333; /* Koyu gri */
color: #06d6a0; /* Yeşil */
/* RGB */
color: rgb(255, 0, 0);
/* RGBA (saydamlık ile) */
color: rgba(0, 0, 0, 0.5); /* %50 saydam siyah */Yazı Tipi Özellikleri
body {
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}
h1 {
font-weight: bold; /* normal, bold, 100-900 */
font-style: italic;
text-align: center; /* left, center, right, justify */
text-transform: uppercase; /* lowercase, capitalize */
text-decoration: underline;
letter-spacing: 2px;
}🎯 Uygulama
- Harici CSS dosyası oluşturup HTML sayfanıza bağlayın
- Farklı seçici türlerini kullanarak sayfanızı biçimlendirin (etiket, sınıf, id)
- Renkleri HEX formatında kullanarak bir renk paleti oluşturun