CSS Master Bootcamp - Beginner to Expert Level

CSS (Cascading Style Sheets), HTML ile oluşturulan yapının görsel tasarımını kontrol eden dildir. Renkler, yazı tipleri, boşluklar ve yerleşim CSS ile belirlenir. HTML yapıyı kurarken CSS bu yapıyı kullanıcı için estetik hale getirir. Modern web sitelerinin tamamı CSS olmadan kullanılamaz hale gelir.

h1 { color: red; }

CSS üç farklı şekilde HTML'e bağlanabilir: inline, internal ve external. Inline CSS doğrudan HTML elementine yazılır. Internal CSS head içinde style tag ile yazılır. External CSS ise ayrı dosya olarak bağlanır ve en profesyonel yöntemdir.

<link rel='stylesheet' href='style.css'>

CSS selector'lar HTML elementlerini hedeflemek için kullanılır. class, id, tag selector en temel yapılardır. Daha spesifik selector'lar daha yüksek önceliğe sahiptir.

.box { color: blue; }

CSS’de her element bir kutu (box) olarak değerlendirilir. Bu kutu margin, border, padding ve content katmanlarından oluşur. Layout sisteminin temelini box model oluşturur.

div { margin: 10px; padding: 20px; }

CSS position özelliği elementin sayfa içindeki konumunu belirler. static, relative, absolute, fixed ve sticky değerleri vardır.

div { position: absolute; top: 0; }

Flexbox tek boyutlu layout sistemidir. Elementleri yatay veya dikey olarak düzenler. align ve justify özellikleri ile hizalama yapılır.

display: flex; justify-content: center;

Grid iki boyutlu layout sistemidir. Satır ve sütun yapısını aynı anda yönetir.

display: grid; grid-template-columns: 1fr 1fr;

Responsive design farklı ekran boyutlarına uyum sağlar.

@media (max-width: 768px) {}

CSS animasyonları elementlere hareket kazandırır.

transition: all 0.3s ease;

Tüm CSS bilgilerini kullanarak responsive dashboard tasarla.

/* full system */