Bir CSS Rule (kural), bir veya daha fazla HTML elementine stil vermek için yazılan tam bir CSS ifadesidir.

ANATOMY (Anatomisi)

selector {
    property: value;
}

 

Detaylı Anatomi:

/* ┌─ SELECTOR (Seçici)
   │
   ▼                                    */
h1 {  /* ← Opening brace (Açılış süslü parantezi) */
    color: blue;  /* ← Declaration (Bildirim) */
    font-size: 24px;  /* ← Başka bir declaration */
}  /* ← Closing brace (Kapanış süslü parantezi) */

 

Bileşenler:

selector {
    property: value;
    │         │
    │         └─ VALUE (Değer)
    └─ PROPERTY (Özellik)
    
    └──────────┘
    DECLARATION (Bildirim)
}

└──────────────────────┘
DECLARATION BLOCK (Bildirim Bloğu)

└──────────────────────────┘
COMPLETE CSS RULE (Tam CSS Kuralı)

 

TERMİNOLOJİ

1. CSS RULE (Tüm yapı)

h1 {
    color: blue;
}

Tüm bu yapıya "CSS Rule" denir.

2. SELECTOR (Seçici)

h1  ← Selector

Hangi element(ler)e stil uygulanacağını belirler.

3. DECLARATION BLOCK (Bildirim Bloğu)

{
    color: blue;
    font-size: 24px;
}

Süslü parantezler içindeki tüm bildirimler.

4. DECLARATION (Bildirim)

color: blue;

Tek bir özellik-değer çifti + noktalı virgül.

5. PROPERTY (Özellik)

color  ← Property

Değiştirmek istediğin stil özelliği.

6. VALUE (Değer)

blue  ← Value

Özelliğe atadığın değer.

FARKLI CSS RULE TİPLERİ

1. Style Rule (En yaygın)

p {
    color: red;
    margin: 10px;
}

 

2. At-Rule (@ ile başlayan)

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

@import url('styles.css');

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@font-face {
    font-family: 'MyFont';
    src: url('font.woff2');
}

 

RULE vs DECLARATION vs STATEMENT

Karşılaştırma:

/* STATEMENT (İfade) - En genel terim */
@import url('base.css');  /* At-rule statement */

p { color: blue; }  /* Style rule statement */

/* RULE (Kural) */
h1 {
    font-size: 32px;
}  /* ← Bu bir rule */

/* DECLARATION (Bildirim) */
color: red;  /* ← Bu bir declaration */
font-size: 16px;  /* ← Bu da bir declaration */

ÇOKLU SEÇİCİLERLE RULE

/* Tek bir rule, birden fazla selector */
h1, h2, h3 {
    font-family: Arial;
    color: navy;
}

/* Bu şuna eşittir: */
h1 { font-family: Arial; color: navy; }
h2 { font-family: Arial; color: navy; }
h3 { font-family: Arial; color: navy; }

 

NESTED RULES (Modern CSS)

.card {
    padding: 20px;
    
    /* İç içe rule */
    h2 {
        color: blue;
    }
    
    p {
        margin: 10px 0;
    }
}

/* Derlendiğinde: */
.card { padding: 20px; }
.card h2 { color: blue; }
.card p { margin: 10px 0; }

 

CONDITIONAL RULES

/* Media Query içinde rules */
@media (min-width: 768px) {
    .container {  /* ← Bu bir rule */
        max-width: 1200px;
    }
    
    .sidebar {  /* ← Bu da ayrı bir rule */
        width: 300px;
    }
}

/* Container Query */
@container (min-width: 400px) {
    .card {  /* ← Rule */
        display: grid;
    }
}

/* Supports Query */
@supports (display: grid) {
    .layout {  /* ← Rule */
        display: grid;
    }
}

SCOPE İLE RULES

/* Modern CSS Scoping */
@scope (.card) {
    h2 {  /* ← Bu rule sadece .card içinde geçerli */
        color: blue;
    }
    
    p {  /* ← Bu da */
        margin: 0;
    }
}

 

INVALID RULES (Geçersiz Kurallar)

Sözdizimi Hataları:

/* ❌ Noktalı virgül eksik */
p {
    color: red
    font-size: 16px;
}

/* ❌ İki nokta eksik */
p {
    color red;
}

/* ❌ Süslü parantez eksik */
p {
    color: red;

/* ❌ Geçersiz property */
p {
    collor: red;  /* typo */
}

/* ❌ Geçersiz value */
p {
    color: bluee;  /* typo */
}

 

Browser Davranışı:

p {
    color: red;
    font-sizeee: 16px;  /* ❌ Geçersiz - ignore edilir */
    margin: 10px;  /* ✓ Bu hala çalışır */
}

 

DECLARATION'DA ÖZEL DURUMLAR

Shorthand Properties

.box {
    /* Tek bir declaration, 4 değer */
    margin: 10px 20px 10px 20px;
    
    /* Aynı şeyin longhand hali - 4 ayrı declaration */
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

 

Multiple Values

.element {
    /* Tek declaration, virgülle ayrılmış değerler */
    font-family: Arial, Helvetica, sans-serif;
    
    /* Tek declaration, boşlukla ayrılmış değerler */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    
    /* Tek declaration, birden fazla background */
    background: 
        linear-gradient(red, blue),
        url('pattern.png');
}

 

Custom Properties:

.element {
    /* Declaration: custom property tanımlama */
    --main-color: blue;
    --spacing: 20px;
    
    /* Declaration: custom property kullanma */
    color: var(--main-color);
    padding: var(--spacing);
}

 

IMPORTANT DECLARATION:

.element {
    color: red !important;
    /*         ^^^^^^^^^^
       Bu declaration'ın bir parçası */
}

!important declaration'ın değerinin bir parçasıdır, ayrı bir şey değil.

RULE SPECIFICITY

Her rule'un bir specificity'si vardır:

/* Specificity: 1 */
p { color: black; }

/* Specificity: 10 */
.text { color: blue; }

/* Specificity: 100 */
#main { color: red; }

/* Specificity: 111 */
#main p.text { color: green; }

 

Aynı elemente birden fazla rule uygulandığında, en yüksek specificity'li rule kazanır.

COMPUTING A RULE

Browser'ın bir rule'u nasıl işlediği:

.parent {
    font-size: 20px;
}

.child {
    font-size: 1.5em;
}
```
```
1. Parse CSS → Rule'u anla
2. Match selector → .child elementlerini bul
3. Apply declarations → Her declaration'ı uygula:
   - font-size: 1.5em
   - Parent'ın computed value: 20px
   - Computed value: 30px (20 × 1.5)
4. Paint → Ekrana çiz

Terimler:

• Rule: Tüm yapı (selector + declarations)
• Selector: Hangi elementler
• Declaration: property: value çifti
• Property: Değiştirilen özellik
• Value: Atanan değer
• Declaration Block: Tüm declarations ({ ... })

At-Rules: @ ile başlayan özel kurallar (@media, @import, @keyframes, vb.)