Ders 9 – CSS Temelleri: Sayfana Stil Vermeye Başla

Bu derste HTML sayfalarına stil vermek için kullanılan CSS diline giriş yapacaksın. style.css dosyasını sayfaya bağlamayı, yazı tiplerini ve renkleri değiştirmeyi öğrenerek ilk tasarım adımlarını atacaksın.

1. CSS Nedir?

CSS (Cascading Style Sheets), HTML ile oluşturduğun iskelete görünüm kazandırmak için kullanılan stil dilidir. Yazı tipi, renk, arka plan, boşluklar, hizalamalar gibi görsel tarafın neredeyse tamamı CSS ile kontrol edilir.

HTML = “Ne var?” gibi düşünebilirsin.

CSS = “Nasıl görünsün?” gibi düşünebilirsin.

2. CSS'i HTML Sayfasına Bağlamak

Projenin kök klasöründe (index.html ile aynı yerde) bir style.css dosyası olduğunu varsayıyoruz.
HTML dosyanın <head> bölümüne şu satırı ekleyerek bağlayabilirsin:

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

Bu satır, tarayıcıya “Bu sayfanın stilleri style.css dosyasının içindedir.” demek gibidir. Dosya adının ve yolunun doğru olduğundan emin ol.

3. CSS Yazım Mantığı: Seçici, Özellik, Değer

CSS kuralları genel olarak şu şekilde yazılır:

seçici {
  özellik: değer;
}

seçici (selector): Hangi HTML elemanına stil vereceğini belirtir. Örneğin p, h1, .kutu
özellik (property): Değiştirmek istediğin özellik. Örneğin color, background-color, font-size
değer (value): Özelliğe vereceğin yeni görünüm. Örneğin kırmızı, 18px, #22f2a2

4. Renklerle Çalışmak: color ve background-color

CSS’de en çok kullanılan iki özellik: color (yazı rengi) ve background-color (arka plan rengi).

h1 {
  color: #22f2a2;          /* Başlığın yazı rengini değiştir */
}

body {
  background-color: #020617; /* Sayfanın arka plan rengini değiştir */
}

Renkleri 3 farklı şekilde yazabilirsin:

İsimle: red, blue, green
Hex kodla: #22f2a2, #000000
rgb ile: rgb(34, 242, 162)

Yeşil Başlık Örneği

Bu paragrafın arka planı koyu, yazısı aydınlık olabilir.

5. Yazı Tipi ve Boyutu: font-family ve font-size

Yazı tipi (font) ve yazı boyutu da tasarımın en önemli parçalarındandır.

body {
  font-family: "Inter", Arial, sans-serif; /* Genel yazı tipi */
  font-size: 16px;                         /* Temel yazı boyutu */
}

h1 {
  font-size: 28px;
}

p {
  font-size: 14px;
}

Genelde tüm sayfa için temel ayarları body seçicisinde yapmak, başlık ve paragraflar için küçük değişiklikler eklemek daha düzenli bir yapıya sahip olmanı sağlar.

6. Inline, Dahili (Internal) ve Harici (External) CSS

Aynı stil kodu üç farklı şekilde yazılabilir:

Inline CSS: Etiketin içine style yazarak.
<h1 style="color: red;">Merhaba</h1>
Dahili (internal) CSS: HTML sayfasının <head> kısmında <style> etiketi içinde.
Harici (external) CSS: Ayrı bir .css dosyasında (örneğin style.css) yazıp <link> ile bağlamak.

Biz projede harici CSS yöntemini kullanıyoruz. Bu yöntem, birden fazla sayfayı tek dosyadan kontrol etmeyi çok kolaylaştırır.

7. Mini Görev – Profil Sayfanı Renklendir

Daha önce oluşturduğun profil.html sayfasını (Ders 8) aç ve aşağıdaki adımları uygula:

Proje klasöründe style.css dosyan olduğundan emin ol.
profil.html dosyasının <head> kısmına <link rel="stylesheet" href="style.css"> satırını ekle.
body için genel yazı tipi ve arka plan rengini ayarla.
h1 başlığının rengini ve boyutunu değiştir.
Hobiler listesinin (<ul>) yazı rengini farklı yap.
Kaydedip tarayıcıda sonucu kontrol et.

İstersen her adımı yaptıktan sonra ekran görüntüsü alıp bana gösterebilirsin :)

Kaynaklar

MDN Web Docs – CSS Temelleri
Yeşil Bilişim: HTML & CSS notların