İçeriğe geç
Codary
CSS3 Modül 1: CSS3 Sıfırdan Giriş ve Seçiciler

1.1 CSS3 Nedir, Dahili, Harici ve Inline CSS

Kolay
Ders 1 / 27 %0 Ders listesi
1.1 CSS3 Nedir, Dahili, Harici ve Inline CSS 1.2 CSS Seçiciler: Element, Class ve ID Seçicileri 1.3 Renkler ve Arka Planlar (RGB, HEX, HSL) 1.4 Yazı Tipleri ve Tipografi (Font-Family & Size) 1.5 Kombinatör Seçiciler (Torun, Çocuk, Kardeş) 1.6 Hatayı Bul: Stil Uygulanmıyor 2.1 CSS Kutu Modeli (Box Model: Content, Padding, Margin) 2.2 Box-Sizing ve Çerçeve Yarıçapı (Border-Radius) 2.3 Görüntüleme Özellikleri (Display: Block, Inline, Flex) 2.4 Konumlandırma (Position: Relative, Absolute, Fixed, Sticky) 2.5 Taşma (Overflow) ve Gölgelendirme (Box-Shadow) 3.1 Modern Flexbox Temelleri (Display: Flex) 3.2 Flexbox Hizalama (Justify-Content & Align-Items) 3.3 Flex Çocuk Elemanları (Flex-Grow, Shrink & Basis) 3.4 CSS Grid Temelleri (Grid-Template-Columns & Fr Birimi) 3.5 Gelişmiş Grid Alanları (Grid-Column & Grid-Row) 3.6 Hatayı Bul: Menü Yan Yana Durmuyor 4.1 Responsive Tasarım ve Medya Sorguları (@media) 4.2 CSS Değişkenleri (Custom Properties - `--var`) 4.3 CSS Dönüşümleri (Transform: Rotate, Scale, Translate) 4.4 Yumuşak Geçişler (Transitions) 4.5 Keyframe Animasyonları (@keyframes) 5.1 Proje 1: Şık Profil Kartı ve Rozet Tasarımı 5.2 Proje 2: Esnek Flexbox Navigasyon Menüsü 5.3 Proje 3: Responsive Kart Izgarası (Grid Layout) 5.4 Proje 4: Açık/Karanlık Tema Toggle ve CSS Değişkenleri 5.5 Proje 5: Animasyonlu Fiyatlandırma Tablosu
Misafir olarak çalışıyorsun. İlerlemeni kaydetmek ve sonraki dersleri açmak için giriş yap. Giriş yap / Kayıt ol

CSS Nedir?

HTML ile kurduğun sayfa, boyası yapılmamış bir evin iskeleti gibidir: duvarlar, odalar, kapılar yerindedir ama her şey gri ve sadedir. CSS bu eve boya ve mobilya getirir. Aynı HTML'e farklı CSS yazarak tamamen farklı görünen siteler elde edebilirsin.

Bir CSS kuralının anatomisi

Örnek KodCSS
h1 {
    color: blue;
    font-size: 32px;
}
  1. h1: Seçici. "Hangi elemanlara stil vereceğim?" sorusunun cevabı. Burada sayfadaki tüm h1 başlıkları.
  2. { }: Süslü parantezler, bu seçiciye ait kuralların başını ve sonunu gösterir.
  3. color: blue;: Bir bildirim. Solda özellik (color, yani yazı rengi), sağda değer (blue), aralarında iki nokta üst üste, sonunda noktalı virgül vardır.
  4. İstediğin kadar bildirimi alt alta yazabilirsin.
Noktalı virgülü unutmak en sık yapılan CSS hatasıdır. Unutursan tarayıcı hata vermez ama o satır ve bir sonraki satır sessizce çalışmaz. Bir stil işe yaramıyorsa önce noktalı virgüllere bak.

CSS'i sayfaya eklemenin üç yolu

1. Dahili (internal) CSS

Kurallar sayfanın içindeki <style> etiketine yazılır. Bu kursta editörde hep bu yöntemi kullanacağız.
Örnek KodHTML
<style>
    p { color: gray; }
</style>

2. Harici (external) CSS

Kurallar ayrı bir stil.css dosyasına yazılır ve sayfanın <head> bölümüne bağlanır. Gerçek projelerde en doğru yöntem budur, çünkü tek bir CSS dosyası sitenin tüm sayfalarını birden değiştirir.
Örnek KodHTML
<link rel="stylesheet" href="stil.css">

3. Satır içi (inline) CSS

Stil doğrudan etiketin style niteliğine yazılır. Sadece tek bir elemanı etkiler ve kodu dağınık hale getirdiği için nadiren kullanılır.
Örnek KodHTML
<p style="color: red; font-weight: bold;">Uyarı!</p>

Basamaklı (cascading) ne demek?

Bir elemana birden fazla kural uygulanırsa tarayıcı bir öncelik sırası izler. Kabaca: satır içi stil, style etiketindeki kuraldan güçlüdür; aynı güçteki iki kuraldan sonra yazılan kazanır. Bu konuyu seçiciler dersinde biraz daha açacağız.
Görev Kendin yazarak öğren
İlk CSS kurallarını yaz.

  1. Bir style etiketi aç.
  2. İçine h1 seçicisi için iki bildirim yaz: yazı rengi #10b981 ve ortalı hizalama (text-align: center).
  3. style etiketini kapat ve altına Codary CSS3! yazan bir h1 ekle.
  4. Bir paragraf ekle ve ona satır içi stille style="color: crimson" ver.

    Bilgi Kontrol Quizi

    Harici bir CSS dosyasını HTML sayfasına bağlamak için hangi etiket kullanılır?

    index.html

    Parantez ve tırnaklar kendiliğinden kapanır. Tab girinti ekler; editörden çıkmak için önce Esc, sonra Tab.

    Çıktı Konsolu: Hazır 
    Çıktı görmek için "Kodu Çalıştır" butonuna basın...