CSS3 · Gün 1

CSS, web sayfasının görünümünü kontrol eden dildir. Bu ilk günde temel kavramlara hakim olacak; selektörlerden box model’a, position özelliklerinden birim sistemine kadar her şeyin nasıl çalıştığını anlayacağız.

1. Selektörler ve Özgüllük

Temel Selektörler

/* Tag selector — tüm <p>'leri seçer */
p { color: black; }

/* Class selector — class="kart" olanları seçer */
.kart { padding: 16px; }

/* ID selector — id="hero" olanı seçer */
#hero { background: black; }

/* Attribute selector */
a[target="_blank"] { color: blue; }

/* Pseudo-class */
a:hover { text-decoration: underline; }

/* Pseudo-element */
p::first-line { font-weight: bold; }

Birleşik Selektörler

/* Descendant — .card içindeki tüm h3'ler */
.card h3 { font-size: 20px; }

/* Child — .card'ın direkt çocukları */
.card > h3 { font-size: 24px; }

/* Adjacent sibling — h2'den hemen sonraki p */
h2 + p { margin-top: 0; }

/* General sibling — h2'den sonraki tüm p'ler */
h2 ~ p { color: gray; }

Özgüllük (Specificity)

CSS’te birden fazla kural aynı elemente uyduğunda, özgüllük kazananı belirler. Hesaplama:

Selektör Tipi	Puan
Inline style (`style="..."`)	1000
ID	100
Class, attribute, pseudo-class	10
Tag, pseudo-element	1

.btn          { color: blue; }      /* 10 puan */
.btn.primary  { color: green; }     /* 20 puan — kazanır */
#submit       { color: red; }       /* 100 puan — kazanır */

!important kötü mü? Genelde evet. Özgüllüğü override eder ama bakımı zorlaştırır. Sadece utility class veya 3rd-party CSS override’da kullanın.

2. Renk, Font ve Birim Sistemi

Renkler

color: red;                    /* keyword */
color: #ff0000;                /* hex */
color: rgb(255, 0, 0);         /* RGB */
color: rgba(255, 0, 0, 0.5);   /* RGB + alpha */
color: hsl(0, 100%, 50%);      /* HSL */
color: hsla(0, 100%, 50%, 0.5);

Modern syntax (CSS Color Module 4):

color: oklch(70% 0.15 200);    /* OKLCH — algıyla doğrusal renk */
color: color-mix(in srgb, red 50%, blue 50%);

Birim Sistemi

Birim	Anlam	Kullanım
`px`	Pixel	Sabit boyutlar (border, küçük detaylar)
`em`	Parent font-size’ın katı	Component-relative
`rem`	Root (html) font-size’ın katı	Genel typography
`%`	Parent boyutunun yüzdesi	Layout
`vh` / `vw`	Viewport yüksek/genişlik	Full-screen elementler
`ch`	”0” karakter genişliği	Metin sütun genişliği
`fr`	Grid fraction	Grid layout

html { font-size: 16px; }    /* 1rem = 16px */
h1   { font-size: 2rem; }    /* 32px */
p    { font-size: 1rem; }    /* 16px */
.hero { min-height: 100vh; } /* tam viewport */

Font

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 400;       /* 100-900 */
    line-height: 1.6;       /* satır yüksekliği (font-size'a oranlı) */
    letter-spacing: 0.01em;
}

3. Box Model

Her HTML elementi bir dikdörtgen kutudur. Bu kutu 4 katmandan oluşur:

┌─────────────────────────────┐
│ margin                       │  ← element dışı boşluk
│  ┌───────────────────────┐  │
│  │ border                 │  ← çerçeve
│  │  ┌─────────────────┐  │  │
│  │  │ padding          │  │  │  ← içerik etrafı boşluk
│  │  │  ┌───────────┐  │  │  │
│  │  │  │  content   │  │  │  │  ← asıl içerik
│  │  │  └───────────┘  │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid #333;
    margin: 16px;
}

box-sizing

Varsayılan olarak width SADECE content’i kapsar. Padding ve border ekleniyor. Daha sezgisel olan: box-sizing: border-box.

*, *::before, *::after {
    box-sizing: border-box;  /* width artık padding+border dahil */
}

Bu kural neredeyse her modern CSS reset’inde vardır. Production’da mutlaka açın.

4. Display ve Position

display

block — Tam genişlik, yeni satır (div, p, h1…)
inline — İçerik kadar genişlik, satır içi (span, a…)
inline-block — Satır içi ama width/height alır
none — Hiç render edilmez
flex — Flexbox container (yarın işleyeceğiz)
grid — Grid container (3. günde)

.gizli { display: none; }
.icon  { display: inline-block; width: 24px; }

position

static — Varsayılan, normal akış
relative — Normal yerine göre offset alabilir
absolute — Akıştan çıkar, en yakın relative/absolute/fixed parent’a göre konumlanır
fixed — Viewport’a göre sabit
sticky — Scroll konumuna göre yapışan

.parent {
    position: relative;     /* referans */
}

.tooltip {
    position: absolute;
    top: 100%;
    left: 0;
}

.header {
    position: sticky;
    top: 0;
    z-index: 50;
}

z-index

Elementler birbirinin üstüne biner. z-index sıralamayı belirler — yüksek değer üstte. Sadece position: static olmayan elementlerde etki eder.

5. Margin & Padding Davranışları

Shorthand

margin: 10px;                  /* tüm yönler */
margin: 10px 20px;             /* üst-alt | sağ-sol */
margin: 10px 20px 30px;        /* üst | sağ-sol | alt */
margin: 10px 20px 30px 40px;   /* üst | sağ | alt | sol (saat yönü) */

Margin Collapsing

İki dikey margin yan yana geldiğinde, büyük olan kazanır — toplanmaz.

.a { margin-bottom: 30px; }
.b { margin-top: 20px; }
/* Aralarındaki boşluk: 30px (50px değil!) */

Bu sadece dikey margin’larda olur, yatayda değil. Flexbox/Grid içinde de olmaz. Yeni başlayanları en çok şaşırtan davranış.

auto ile Yatay Ortalama

.container {
    width: 1200px;
    margin: 0 auto;  /* sağ-sol auto → ortalar */
}

Pratik Sorular

Soru 1: .btn.primary ve #submit selektörleri çakışırsa hangisi kazanır? Neden?

#submit kazanır. ID selectorü 100 puan, .btn.primary ise 20 puan.

Soru 2: Bir elementin görsel genişliği tam 200px olsun. padding: 20px ve border: 2px var. CSS’i nasıl yazarsın?

.element {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 2px solid #333;
}
/* Görsel genişlik: 200px (border-box sayesinde) */

Soru 3: Bir popup’ı viewport ortasında sabit göstermek için ne kullanırsın?

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Günün Özeti

Bugün CSS’in temellerini öğrendik:

Selektörler ve özgüllük hiyerarşisi
Renk ve birim sistemi (px, em, rem, vh, %)
Box model: content → padding → border → margin
box-sizing: border-box’un neden vazgeçilmez olduğu
Display ve position ile temel layout
Margin collapsing gibi sürpriz davranışlar

Yarın Gün 2’de Flexbox’a giriş yapıyoruz — modern CSS layout’un

olmazsa olmazına.