CSS nedir? Renk, kutu modeli ve mobil tasarım dersleri

İlk CSS kuralın

Bir CSS kuralının seçici, özellik ve değerini ayırt ederek uygulamak.

Kavramı kur

CSS, HTML ağacındaki öğelere görünüm kuralları uygular. Kuralın başındaki seçici hangi öğelerin etkileneceğini belirtir; süslü parantez içindeki bildirimler neyin değişeceğini söyler. color bir özelliktir, tomato onun bir değeridir. Aynı öğeye birden fazla kural uygulanabildiği için tarayıcı uygun değerleri kaskad kurallarıyla seçer.

Neden böyle çalışıyor?

İlk örneklerde style etiketi kullanmak tek dosyada deneme yapmayı kolaylaştırır. Proje büyüyünce kuralları ayrı bir CSS dosyasına ayırabilirsin. Her değişiklikte hem HTML hem CSS dosyasını kaydet; tarayıcıda doğru dosyayı açtığını kontrol et. Yüklenmeyen bir dosya ile eşleşmeyen bir seçici birbirinden farklı hatalardır.

Çalışma sırası

Bir özelliği değiştirmeden önce hangi sonucu beklediğini yaz. Sonra yalnızca o özelliği değiştir ve farkı gözlemle. Aynı anda renk, boyut, boşluk ve yerleşimi değiştirmek hangi kuralın ne yaptığını anlamanı zorlaştırır. Geliştirici araçlarının Styles ve Computed bölümleri hangi bildirimin gerçekten uygulandığını gösterir.

İkinci örnek · 1

h2 seçicisi sayfadaki bütün h2 öğelerini seçer. Kodun tamamı yazılı derste bulunur.

<style>
  h2 { color: #245f9e; font-size: 28px; }
  p { color: #334155; line-height: 1.7; }
</style>
<h2>Bugünkü hedefim</h2>
<p>Bir CSS kuralını açıklayabiliyorum.</p>

Beklenen sonucu oku

Süslü parantezlerin eksikliği sonraki kuralların da yanlış yorumlanmasına yol açabilir.

Beklenen çıktı: Mavi bir h2 ve rahat satır aralığına sahip koyu paragraf.

Bir değeri sen değiştir

Başlığın yalnızca rengini değiştir; sonucu tahmin et. İkinci bir h2 ekle; ikisinin de neden etkilendiğini anlat.

Hata nereden gelir?

CSS dosyası yüklenmiyorsa link href yolunu Network bölümünde denetle.

Kendi çözümünü kur

Aynı başlığa ikinci bir color kuralı ekle; DevTools ile hangisinin kazandığını incele. Aynı özgüllük ve koşullarda daha sonra yazılan bildirim kazanabilir; üstü çizilmiş bildirime bak.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<style>
h2 { color: #a33b31; }
p { font-size: 18px; line-height: 1.8; }
</style>
<h2>Deneme başlığı</h2><p>Okunabilir bir paragraf.</p>

Kendini kontrol et

color ve background-color aynı şeyi mi değiştirir? Yanıt: Hayır; color metnin, background-color öğenin arka planının rengini belirler.

Beklenen çıktı: Kırmızımsı başlık ve 18px paragraf.

Sınıflar (class) ile seçmek

Tekrar kullanılabilir sınıflarla öğeleri seçmek ve kaskadı okumak.

Kavramı kur

Bir sınıf HTML’de bir veya birden fazla öğeye verilen yeniden kullanılabilir bir addır. class="uyari" öğeyi adlandırır; .uyari seçicisi o adı taşıyanları bulur. Başındaki nokta CSS sözdiziminin parçasıdır, HTML class değerine yazılmaz. Aynı öğeye boşlukla ayrılmış birden fazla sınıf verebilirsin.

Neden böyle çalışıyor?

Sınıf adını öğenin o anki rengine göre değil görevine göre seçmek değişiklikleri kolaylaştırır. “kirmizi” yerine “uyari” demek, rengi değişse bile anlamı korur. Bir kuralı birden fazla öğede kullanmak kopya CSS miktarını azaltır; bu da ileride tutarsız tasarımları önler.

Çalışma sırası

Tarayıcı bir öğeye eşleşen kuralları birlikte değerlendirir. Bir sınıf kuralı ile genel etiket kuralı çakıştığında özgüllük önem kazanır. İlk aşamada karmaşık seçiciler yerine basit sınıflarla çalış; DevTools’ta hangi bildirimin geçersiz kaldığını görerek kaskadı öğren.

İkinci örnek · 1

class özelliğine nokta yazılmaz; CSS seçicisinde nokta bulunur. Kodun tamamı yazılı derste bulunur.

<style>
.kart { padding: 16px; border: 1px solid #cbd5e1; }
.uyari { background: #fff3cd; color: #704b00; }
</style>
<p class="kart">Normal not</p>
<p class="kart uyari">Kaydetmeden çıkma.</p>

Beklenen sonucu oku

Seçici yazımında büyük/küçük harf ve tireleri tutarlı kullan.

Beklenen çıktı: İki kartta aynı boşluk ve kenarlık; yalnızca ikinci kartta uyarı renkleri.

Bir değeri sen değiştir

Üç paragraf ekle; yalnızca birine uyari ver. Bir öğede kart ve uyari sınıflarını birlikte kullan.

Hata nereden gelir?

class=".uyari" yazmak CSS .uyari seçicisiyle amaçladığın adı oluşturmaz; HTML’de noktasız yaz.

Kendi çözümünü kur

.kart.uyari ve .kart .uyari seçicilerinin hangi HTML yapılarında çalıştığını ayrı örneklerle dene. İki seçici arasındaki boşluk “içinde bulunan” ilişkisi kurar.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<style>.not{padding:12px}.onemli{border-left:3px solid #2563eb}</style>
<p class="not">Birinci not</p><p class="not onemli">İkinci not</p>

Kendini kontrol et

.kart .uyari neyi seçer? Yanıt: kart sınıflı öğenin içinde bulunan uyari sınıflı öğeleri; iki sınıfı aynı öğede aramaz.

Beklenen çıktı: İki notun boşluğu eşit; ikinci notun sol kenarlığı var.

Renkler ve yazı tipleri

Renk, yazı boyutu ve satır aralığını okunabilir bir bütün olarak düzenlemek.

Kavramı kur

Tipografi sadece bir yazı tipi seçmek değildir. Metnin boyutu, satır aralığı, kalınlığı ve satır uzunluğu birlikte okunabilirliği etkiler. Uzun bir paragraf için fazla küçük yazı kullanmak veya bütün metni kalın yapmak gözün önemli bilgiyi ayırmasını zorlaştırır. Önce gövde metnini rahat okunur yap, sonra başlık ölçeğini belirle.

Neden böyle çalışıyor?

font-family bir tercih sırası belirtir. İlk yazı tipi yoksa tarayıcı sıradakini dener; sans-serif gibi genel aile bu zincirin sonunda güvenli bir dönüş yoludur. rem kök yazı boyutuna göre ölçeklenir. line-height değerini birimsiz yazmak, alt öğelerin farklı boyutlarında orantılı satır aralığı kurulmasına yardımcı olur.

Çalışma sırası

Renk seçerken yalnızca beğeniye bakma. Yazı ile zemin arasında yeterli kontrast, bağlantıların ayırt edilebilirliği ve hata bilgisinin renk dışında da anlatılması önemlidir. Tasarımı küçük ekranda, yakınlaştırılmış görünümde ve farklı ışık koşullarını düşünerek değerlendir.

İkinci örnek · 1

font-family listedeki ilk kullanılabilir yazı tipini seçer. Kodun tamamı yazılı derste bulunur.

<style>
body { font-family: system-ui, sans-serif; color: #182131; }
p { font-size: 1.125rem; line-height: 1.8; max-width: 65ch; }
a { color: #245f9e; text-decoration: underline; }
</style>
<p>Rahat okunabilen metin, genişlik ve boşlukla birlikte tasarlanır. <a href="#hedef">Kaynağı incele</a>.</p>

Beklenen sonucu oku

max-width:65ch uzun paragrafın satırını yaklaşık karakter genişliğiyle sınırlar.

Beklenen çıktı: Okunabilir boyutta, sınırlı satır genişliğinde metin ve altı çizili bağlantı.

Bir değeri sen değiştir

Aynı paragrafı 1rem ve 1.25rem ile karşılaştır. Satır aralığını 1.1 ve 1.8 yap; okumadaki farkı not et.

Hata nereden gelir?

Açık gri metni beyaz zeminde çok soluk bırakmak okunabilirliği düşürür; kontrastı ölç.

Kendi çözümünü kur

Tarayıcıyı yüzde 200 yakınlaştır; içerik kaybolmadan okunabiliyor mu? Yakınlaştırma metni büyütür; yerleşimin sabit yüksekliklerle kesilmediğini kontrol et.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<style>.metin{font:1.1rem/1.8 system-ui,sans-serif;max-width:60ch;color:#1e293b}</style>
<p class="metin">Bir paragrafın tasarımı, sözcükler kadar onları çevreleyen boşluklarla da ilgilidir.</p>

Kendini kontrol et

font-family listesinin sonuna sans-serif yazmak ne sağlar? Yanıt: Özel yazı tipleri kullanılamadığında genel bir yazı ailesine geri dönüş sağlar.

Beklenen çıktı: Sistem yazı tipiyle koyu renkli, rahat satır aralıklı bir paragraf.

Kutu modeli: padding, border, margin

Kutu modelini hesaplamak ve taşmayı nedenine göre çözmek.

Kavramı kur

Her CSS kutusunda içerik alanı, padding, border ve dıştaki margin bulunur. Varsayılan content-box modelinde width yalnızca içerik genişliğidir. Bu nedenle 200px genişlik, iki tarafta 20px padding ve 3px border toplamda 246px yer kaplar; margin bu kutunun dışına ayrıca eklenir.

Neden böyle çalışıyor?

box-sizing:border-box genişlik hesabına padding ve border değerlerini dahil eder. Böylece width:200px dediğinde kutunun dış kenarlığına kadar olan genişliği 200px tutabilirsin. Margin hâlâ dışarıdadır. Bu kural bir kutuyu otomatik olarak mobil uyumlu yapmaz; verilen genişliğin kapsayıcıya sığması da gerekir.

Çalışma sırası

Taşma gördüğünde sayfaya overflow:hidden ekleyip belirtisini gizleme. DevTools kutu modelinde genişliği, padding değerlerini ve üst kapsayıcıyı incele. Uzun bölünemeyen metin, sabit min-width veya flex öğesinin minimum boyutu da taşmaya neden olabilir; sorunu gerçek kaynağında düzelt.

İkinci örnek · 1

content-box içerik genişliğine padding ve border ekler. Kodun tamamı yazılı derste bulunur.

<style>
* { box-sizing: border-box; }
.kart { width: 240px; max-width: 100%; padding: 20px;
  border: 4px solid #2563eb; margin: 12px 0; }
</style>
<div class="kart">Dış genişliğim en fazla 240px.</div>

Beklenen sonucu oku

max-width:100% kutunun kapsayıcısından geniş olmasını sınırlamaya yardım eder.

Beklenen çıktı: Padding ve kenarlığıyla birlikte en fazla 240px genişliğinde bir kutu.

Bir değeri sen değiştir

width:200px; padding:20px; border:3px için content-box toplamını hesapla. Aynı kutuyu border-box yapıp ölçümü karşılaştır.

Hata nereden gelir?

Padding ile margin aynı yere boşluk koymaz; DevTools renkli kutu gösterimini incele.

Kendi çözümünü kur

Kapsayıcıyı 180px genişliğe getir; max-width kuralının etkisini incele. İki yatay taraf vardır: genişliğe sağ ve sol padding ile sağ ve sol border eklenir.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<style>*{box-sizing:border-box}.kutu{width:200px;max-width:100%;padding:20px;border:3px solid #245f9e}</style>
<div class="kutu">Toplam genişlik: 200px.</div>

Kendini kontrol et

200px content-box + iki yanda 20px padding + 3px border kaç piksel eder? Yanıt: 246px; margin hesabın dışında ayrıca yer kaplar.

Beklenen çıktı: border-box sayesinde 200px dış genişlik; iç alan 154px.

Flexbox ile yan yana dizmek

Flexbox ile bir satırın hizasını ve dar ekranda sarılmasını yönetmek.

Kavramı kur

Flexbox, bir kapsayıcının doğrudan çocuklarını tek ana eksen üzerinde düzenler. display:flex verdiğin öğe kapsayıcıdır; onun çocukları flex öğeleri olur. Ana eksen varsayılan olarak yataydır. justify-content ana eksen boyunca dağılımı, align-items ona dik eksende hizalamayı kontrol eder.

Neden böyle çalışıyor?

Birden çok kartı yan yana dizdiğinde toplam genişlik dar ekrana sığmayabilir. flex-wrap:wrap yeni satıra geçmeye izin verir; gap öğeler arasındaki düzenli boşluğu oluşturur. Her öğeye ayrı margin yazmak yerine kapsayıcıda gap kullanmak ilk ve son öğe boşluklarını daha anlaşılır yönetir.

Çalışma sırası

Bir satırda uzun metin olması, beklemediğin minimum genişlikler doğurabilir. Flex öğelerinde min-width:0 veya uzun kelimeler için uygun kırılma kuralı gerekebilir. Önce hangi öğenin genişlediğini ölç; sonra sadece o öğeyi düzelt. Her kutuya rastgele width vermek esnek yerleşimin amacını bozar.

İkinci örnek · 1

display:flex yalnızca doğrudan çocukların yerleşimini düzenler. Kodun tamamı yazılı derste bulunur.

<style>
.satir { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.kart { flex:1 1 160px; min-width:0; padding:16px; background:#eef2ff; }
</style>
<div class="satir"><div class="kart">HTML</div><div class="kart">CSS</div><div class="kart">JavaScript</div></div>

Beklenen sonucu oku

align-items:center farklı yükseklikte öğeleri çapraz eksende ortalar.

Beklenen çıktı: Geniş ekranda yan yana, dar ekranda saran üç kart.

Bir değeri sen değiştir

Üç kartı yan yana diz ve aralarına gap ekle. Bir kartın metnini uzat; align-items değerlerini karşılaştır.

Hata nereden gelir?

flex kuralını kapsayıcı yerine çocuklara veya tersine koymak beklenen etkiyi vermez; görevleri ayır.

Kendi çözümünü kur

Ekranı daralt; flex-wrap kapalıyken ve açıkken farkı gözlemle. flex:1 1 160px esneme, küçülme ve başlangıç boyutunu tek kuralda belirtir.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<style>.grup{display:flex;flex-wrap:wrap;gap:10px}.oge{flex:1 1 140px;min-width:0;padding:14px;background:#e0f2fe}</style>
<div class="grup"><div class="oge">Bir</div><div class="oge">İki</div></div>

Kendini kontrol et

justify-content varsayılan yatay flex düzeninde hangi ekseni yönetir? Yanıt: Ana ekseni, yani varsayılan düzende yatay dağılımı yönetir.

Beklenen çıktı: İki esnek öğe; alan azaldığında yeni satıra geçebilir.

Mobil uyumlu tasarım (media query)

Mobil öncelikli bir yerleşimi ekran genişliğine göre geliştirmek.

Kavramı kur

Mobil uyumluluk bir cihaz adı listesi değildir. İçeriğin farklı genişliklerde okunabilmesi ve kullanılabilmesidir. Önce dar ekran için tek sütunlu, rahat bir düzen kur. Daha geniş alan oluştuğunda gerekli yerleri çok sütuna çıkar. Bu yaklaşım temel içeriğin küçük ekranda unutulmasını önler.

Neden böyle çalışıyor?

Media query belirli bir koşul sağlandığında CSS kurallarını etkinleştirir. min-width genişlik eşik değerine ulaştığında; max-width ise belirli genişliğe kadar devreye girer. Eşiklerini telefon marka/modeline değil, içeriğin sıkıştığı noktaya göre seç. Düzenin iki eşik arasında da çalışması gerekir.

Çalışma sırası

Testi yalnızca tarayıcıdaki tek bir hazır telefon ölçüsünde yapma. Pencereyi yavaşça daralt, uzun başlık ekle ve yakınlaştır. Görsellerin kendi kapsayıcısından taşmadığını, düğmelerin tıklanabilir kaldığını ve sıranın değişirken anlamın kaybolmadığını gözlemle.

İkinci örnek · 1

Temel kurallar dar ekran için tek sütun kurar. Kodun tamamı yazılı derste bulunur.

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{box-sizing:border-box}.liste{display:grid;gap:16px}
@media(min-width:700px){.liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kart{padding:20px;background:#eef2ff}
</style>
<div class="liste"><div class="kart">İlk ders</div><div class="kart">İkinci ders</div></div>

Beklenen sonucu oku

Viewport meta satırı HTML belgesinde ayrıca bulunmalıdır.

Beklenen çıktı: 700px altında tek, daha genişte iki sütun.

Bir değeri sen değiştir

Önce yalnızca tek sütunlu sürümü kur. Alan yeterli olduğunda iki sütuna geçiren min-width koşulu ekle.

Hata nereden gelir?

Viewport eklemek tek başına sabit genişlikli düzeni düzeltmez; esnek ölçüler de gerekir.

Kendi çözümünü kur

320px, 700px ve 1000px genişliklerde, ardından yakınlaştırmayla dene. Eşik değeri pencerenin CSS pikseli cinsinden genişliğini kontrol eder; fiziksel piksel sayısını değil.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<style>.kartlar{display:grid;gap:12px}@media(min-width:600px){.kartlar{grid-template-columns:1fr 1fr}}.kartlar div{padding:16px;background:#e2e8f0}</style>
<div class="kartlar"><div>A</div><div>B</div></div>

Kendini kontrol et

Mobil öncelikli tasarımda temel CSS hangi görünümü kurar? Yanıt: Dar ekran için çalışan temel görünümü; geniş ekran düzeni koşullarla eklenir.

Beklenen çıktı: 600px genişliğe kadar tek, sonrasında iki sütun.

Hover ve geçiş efektleri

Kullanıcı etkileşimlerine ölçülü görsel geri bildirim eklemek.

Kavramı kur

Hover fareyle bir öğenin üzerine gelindiğinde eşleşir. Telefonda kalıcı bir fare işaretçisi olmadığı için önemli bilgi veya işlem yalnızca hover durumunda ortaya çıkmamalıdır. Bir düğmenin normal hâli zaten anlaşılır olmalı; hover yalnızca etkileşimi desteklemelidir. Klavye için focus-visible durumunu ayrıca düşün.

Neden böyle çalışıyor?

Transition bir özelliğin eski değerden yeni değere geçişini zamana yayar. “all” yazmak beklemediğin özellikleri de hareketlendirebilir; hangi özelliklerin değişeceğini açıkça listelemek daha kontrollüdür. Kısa ve amaçlı bir renk geçişi, her öğenin hareket etmesinden daha yararlı olabilir.

Çalışma sırası

Bazı kullanıcılar cihazlarında hareketi azaltmayı seçer. prefers-reduced-motion koşuluyla zorunlu olmayan hareketi kapat. Animasyonların bilgiye erişim için şart olmaması, tasarımın hareket olmadan da çalışması gerektiğini gösterir. Hareketi işlev yerine dekorasyon olarak kullanıp dikkati dağıtma.

İkinci örnek · 1

hover bir işaretçi durumudur; tek erişim yolu olarak tasarlanmaz. Kodun tamamı yazılı derste bulunur.

<style>
.dugme{padding:12px 18px;background:#eef2ff;border:1px solid #64748b;transition:background-color .15s}
.dugme:hover{background:#c7d2fe}.dugme:focus-visible{outline:3px solid #245f9e;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.dugme{transition:none}}
</style>
<button class="dugme">Kaydet</button>

Beklenen sonucu oku

prefers-reduced-motion kullanıcı tercihine saygı göstermeyi sağlar.

Beklenen çıktı: Fare üzerine gelince rengi değişen, klavyeyle odaklanınca belirgin çerçevesi olan düğme.

Bir değeri sen değiştir

Yalnızca background-color için kısa geçiş ekle. Fare kullanmadan Tab ile düğmeye ulaş.

Hata nereden gelir?

outline:none verip yerine görünür odak eklememek klavye kullanıcısını kaybettirir.

Kendi çözümünü kur

Hareket azaltma tercihini aç ve geçişin kapandığını doğrula. Önce hareket olmadan anlaşılır düğmeyi kur, sonra geçişi ekle.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<style>a{color:#245f9e;text-decoration:underline}a:focus-visible{outline:2px solid currentColor;outline-offset:4px}</style>
<a href="#sonuc">Sonuç bölümüne git</a><p id="sonuc">Hedef burası.</p>

Kendini kontrol et

Hover neden tek başına yeterli etkileşim göstergesi değildir? Yanıt: Dokunmatik ve klavye kullanan kişiler hover durumuna aynı şekilde erişmeyebilir.

Beklenen çıktı: Altı çizili ve klavye odağı görünen bağlantı.

Tailwind CSS: CSS yazmadan tasarım

Tailwind sınıflarını bildiğin CSS kurallarıyla ilişkilendirmek.

Kavramı kur

Tailwind bir HTML öğesine küçük yardımcı sınıflar yazarak CSS özelliklerini uygulamana olanak verir. p-4 bir boşluk ölçeğine, flex display özelliğine, rounded bir kenar yuvarlama değerine karşılık gelir. Bu sınıflar HTML’in veya CSS’in yerine başka bir dil koymaz; üretilen stil kurallarını seçmenin bir yoludur.

Neden böyle çalışıyor?

Sınıf adını ezberlemekten önce hangi CSS kavramını kullandığını bilmelisin. Esnek yerleşim bilmiyorsan flex yazmak tek başına doğru düzeni sağlamaz. Bir kartın sınıflarını boşluk, tipografi, yüzey ve etkileşim olarak gruplandırarak okumak uzun class metnini daha anlaşılır yapar.

Çalışma sırası

Bu sitedeki bazı eski örnekler öğrenme kolaylığı için tarayıcı CDN yaklaşımı kullanır. Gerçek projede seçtiğin Tailwind sürümünün resmî kurulumunu izle ve gerekli CSS’i derle. Sürümler arasında kurulum ve bazı adlar değişebilir. Bir sınıf uygulanmıyorsa önce derlenmiş CSS’te o kuralın varlığını denetle.

İkinci örnek · 1

Önce normal CSS ile kutunun amacını açıklayabilmelisin. Kodun tamamı yazılı derste bulunur.

<style>
.kart{padding:16px;border:1px solid #cbd5e1;border-radius:12px}
.baslik{font-size:24px;font-weight:700}
</style>
<article class="kart"><h2 class="baslik">Önce CSS mantığı</h2><p>Bu çalışan örnek Tailwind kurulumu istemez.</p></article>

Beklenen sonucu oku

Kopyalanmış uzun class listesini tek tek gruplara ayırarak incele.

Beklenen çıktı: Yardımcı sınıfların karşılığı anlaşılabilen, normal CSS ile çalışan bir kart.

Bir değeri sen değiştir

padding, border ve font-size kurallarının görevlerini açıkla. Tailwind örneğindeki sınıfları ilgili CSS kavramlarıyla eşleştir.

Hata nereden gelir?

CDN tabanlı öğrenme örneğini üretim için varsayılan tercih sayma; resmî derleme kurulumunu öğren.

Kendi çözümünü kur

Yerel projede resmî kurulumla derleme yap; HTML görünürken CSS yüklenmeyen durumu Network ile ayır. Sınıf metni bir stil dosyası değildir; onu tanımlayan CSS’in sayfada bulunması gerekir.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<style>.alan{display:flex;gap:12px;padding:16px}.etiket{font-weight:700}</style>
<div class="alan"><span class="etiket">HTML</span><span>İçerik</span></div>

Kendini kontrol et

Tailwind kullanınca CSS kutu modelini öğrenmek gereksiz olur mu? Yanıt: Hayır; yardımcı sınıflar aynı CSS özelliklerini uygular, temel kavramlar yine gereklidir.

Beklenen çıktı: Yan yana yerleşen, aralarında boşluk olan iki metin.