Bu sayfada · 7 başlık
Öğren · Dene · Üret
CSS: çalışma alanı ve ilk kullanım
Kurulum gerektirmeden editör ve tarayıcıyla başla; örnek kodu değiştirerek öğren.
CSS Geliştirme Ortamı Hakkında Bilmen Gereken 5 Temel Soru
Web sayfalarını biçimlendirmek, renk, tipografi, kutu modelleri, Flexbox ve Grid ile modern responsive düzenler inşa etmek için kullanılır.
Responsive (mobil uyumlu) tasarımlar, mikro animasyonlar, buton stilleri, grid kart düzenleri ve renk temaları yapılır.
Tüm modern web projelerinde, tasarım sistemlerinde ve kullanıcı arayüzlerinde kullanılır.
VS Code veya benzeri bir editörde `.css` dosyası olarak kaydedilip HTML’e bağlanır; tarayıcıda doğrudan yorumlanır.
Kullanıcının gördüğü ve hissettiği her şey CSS’tir; bir sitenin profesyonel ve güvenilir görünmesini sağlayan anahtardır.
Ne işe yarar?
CSS, HTML içeriğinin rengini, yazı tipini, boşluklarını ve farklı ekranlardaki yerleşimini belirler. Bir stil dilidir.
Kurulum yerine çalışma alanını hazırla
HTML ve CSS indirip kurulan programlar değildir. Bir kod editörü ve güncel tarayıcı yeterlidir. VS Code kullanabilir veya aşağıdaki örneği burada deneyebilirsin.
- Bir proje klasörü aç. Dosya uzantılarının görünür olduğundan emin ol.
- index.html adlı dosya oluştur. Adının yanlışlıkla index.html.txt olmadığını kontrol et.
- CSS için stil.css adlı dosya oluşturabilir ve HTML head bölümüne <link rel="stylesheet" href="../assets/css/ogrenme.css"> ekleyebilirsin.
- Dosyaları kaydet; index.html dosyasını tarayıcıda aç. Değişiklikten sonra sayfayı yenile.
- Inspect / İncele bölümünde HTML ağacını ve uygulanan CSS kurallarını gör.
İlk çalışan örneğin
Bir değeri değiştir ve önizle
Aşağıdaki tam HTML dosyasında .kart içindeki arka plan rengini değiştir.
<!doctype html>
<html lang="tr">
<meta charset="utf-8">
<style>
body { font-family: system-ui; padding: 24px; }
.kart { background: #eef2ff; padding: 24px; border-radius: 16px; }
</style>
<div class="kart"><h1>Merhaba!</h1><p>CSS ile ilk tasarımım.</p></div>
</html>▶ Sonuç
Başlık ve paragraf tarayıcıda görünür.
Takılırsan bunlara bak
- CSS yüklenmiyorsa dosya yolu ve uzantı aynı mı?
- Değişiklik görünmüyorsa dosyayı kaydettin mi ve doğru sekmeyi mi yeniliyorsun?
- Bir kart taşıyorsa sabit genişlik, minimum genişlik ve uzun metinleri incele.
Editör ve tarayıcı ile kapsamlı CSS atölyesi
HTML işaretleme, CSS stil dilidir. Bu çalışma alanında dosya yolu, düzenleme ve tarayıcı doğrulamasını birlikte uygula.
Videoyla adım adım izle · 5:50
Türkçe açıklamalı sessiz görsel anlatım. Sesli ders veya kesintisiz ekran kaydı değildir. Duraklatıp kendi ortamında uygula.
Video bölümleri ve tam metin
Dar ekrandan büyüyen bir ders kataloğu
HTML tanıtım sayfanı okunabilir ve farklı genişliklerde kullanılabilir bir öğrenme kataloğuna dönüştür. CSS kararlarının her birini bir ihtiyaca bağla.
Önce planla
Ortak yazı, renk ve boşluk değişkenleri tanımla.
Uygulama 1
Ortak yazı, renk ve boşluk değişkenleri tanımla.
Uygulama 2
Gövde metnini ve başlık ölçeğini kur; uzun satırları sınırla.
Uygulama 3
border-box ile kutu hesabını tutarlı yap.
Uygulama 4
Kartları önce tek sütun kur; uygun eşikte iki sütuna çıkar.
Uygulama 5
Bir menü satırını Flexbox ile hizala; dar ekranda sarılmasını sağla.
Uygulama 6
Hover yanında focus-visible durumunu tasarla.
Uygulama 7
Zorunlu olmayan geçişleri hareket azaltma tercihinde kapat.
Uygulama 8
320px, 768px, geniş ekran ve yüzde 200 yakınlaştırmada bütün içeriği kontrol et.
Doğrulama 1
Sayfa yatay taşmıyor; metin kesilmiyor.
Doğrulama 2
Düğme ve bağlantıların odak işareti görünür.
Doğrulama 3
Yerleşim sabit cihaz listesine değil içerik ihtiyacına göre kurulmuş.
Doğrulama 4
Her sınıfın hangi CSS görevini temsil ettiğini açıklayabiliyorum.
Bitirme projesi: Dar ekrandan büyüyen bir ders kataloğu
HTML tanıtım sayfanı okunabilir ve farklı genişliklerde kullanılabilir bir öğrenme kataloğuna dönüştür. CSS kararlarının her birini bir ihtiyaca bağla.
- Ortak yazı, renk ve boşluk değişkenleri tanımla.
- Gövde metnini ve başlık ölçeğini kur; uzun satırları sınırla.
- border-box ile kutu hesabını tutarlı yap.
- Kartları önce tek sütun kur; uygun eşikte iki sütuna çıkar.
- Bir menü satırını Flexbox ile hizala; dar ekranda sarılmasını sağla.
- Hover yanında focus-visible durumunu tasarla.
- Zorunlu olmayan geçişleri hareket azaltma tercihinde kapat.
- 320px, 768px, geniş ekran ve yüzde 200 yakınlaştırmada bütün içeriği kontrol et.
Projen bitti mi? Bunları doğrula
- Sayfa yatay taşmıyor; metin kesilmiyor.
- Düğme ve bağlantıların odak işareti görünür.
- Yerleşim sabit cihaz listesine değil içerik ihtiyacına göre kurulmuş.
- Her sınıfın hangi CSS görevini temsil ettiğini açıklayabiliyorum.
Temellerden sonra devam müfredatı
Bu modül başlangıç ve uygulamalı temel sağlar. Aşağıdaki konular ayrı derinleşme alanlarıdır; yalnızca bu sayfayı bitirmek bütün dili bildiğin anlamına gelmez.
- CSS Grid ve kapsayıcı sorguları
- Kaskad katmanları, özgüllük ve tasarım sistemleri
- Erişilebilir kontrast, performans ve üretim derlemesi
Bitirme projesi için referans çözüm
Önce kendi projen üzerinde çalış. Bu küçük başlangıç çözümünü inceleyip görevlerde istenen ek durumlarla geliştir.
CSS
<!doctype html>
<html lang="tr"><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive ders kataloğu</title>
<style>
:root{--zemin:#fff;--yazi:#182131;--cizgi:#dbe1ea;--vurgu:#245f9e}
*{box-sizing:border-box}
body{margin:0;padding:24px;background:var(--zemin);color:var(--yazi);font:1rem/1.8 system-ui}
main{max-width:960px;margin:auto}
h1{font-size:clamp(2rem,5vw,3rem);line-height:1.2}
nav{display:flex;flex-wrap:wrap;gap:16px}
a{color:var(--vurgu);text-underline-offset:4px}
a:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.katalog{display:grid;gap:16px;margin-top:28px}
article{min-width:0;border:1px solid var(--cizgi);border-radius:12px;padding:22px;transition:border-color .15s}
article:hover{border-color:var(--vurgu)}
p{max-width:65ch;overflow-wrap:anywhere}
@media(min-width:650px){.katalog{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){article{transition:none}}
</style>
<main><h1>Öğren, dene, açıkla</h1>
<nav><a href="#html">HTML</a><a href="#css">CSS</a></nav>
<section class="katalog"><article id="html"><h2>HTML</h2><p>İçeriğin yapısını kur.</p></article>
<article id="css"><h2>CSS</h2><p>Okunabilir görünüm ve esnek yerleşim oluştur.</p></article></section>
</main></html>Tarayıcıda aç. 320px ve 900px genişlikte sütunları, Tab odağını ve yüzde 200 yakınlaştırmayı dene.
Bu içerik işine yaradı mı?
Görüşünü aşağıdan işaretleyebilir ve varsa notunu bırakabilirsin.