CSS Nedir?

CSS (Cascading Style Sheets), web sayfalarının görünümünü ve biçimlendirmesini kontrol etmek için kullanılan bir stil dilidir. HTML, web sayfalarının içeriğini tanımlarken, CSS bu içeriğin nasıl görüntüleneceğini (renkler, yazı tipleri, düzen, vb.) belirler. CSS, HTML elementlerinin stilini tek tek veya gruplar halinde tanımlayarak, web sayfalarının tutarlı ve estetik bir görünüme sahip olmasını sağlar.

Ayrılık İlkesi: CSS, içeriği (HTML) ve sunumu (CSS) birbirinden ayırarak daha düzenli ve yönetilebilir bir yapı sunar.
Tekrar Kullanılabilirlik: CSS kuralları birden fazla HTML elementine uygulanabilir, bu da kod tekrarını azaltır ve geliştirme sürecini hızlandırır.
Esneklik: CSS, farklı cihazlar (masaüstü, tablet, mobil) için farklı stil tanımlamalarına olanak tanır (duyarlı tasarım).

Örnek:


<!DOCTYPE html>
<html>
<head>
  <title>CSS Örneği</title>
  <style>
    h1 {
      color: blue;
      text-align: center;
    }
    p {
      font-size: 16px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <h1>Merhaba Dünya!</h1>
  <p>Bu bir CSS örneğidir. Başlık mavi ve ortalanmış, paragraf ise 16 piksel boyutunda ve satır yüksekliği 1.5 olarak ayarlanmıştır.</p>
</body>
</html>

CSS Nasıl Çalışır?

CSS, HTML elementlerine uygulanacak stil kurallarını tanımlayan bir dizi kuraldan oluşur. Her kural, bir seçici (selector) ve bir veya daha fazla bildirim (declaration) içerir. Seçici, stilin uygulanacağı HTML elementini belirtirken, bildirimler stil özelliklerini ve değerlerini tanımlar.

CSS'in çalışma prensibi şu adımlardan oluşur:

HTML ayrıştırma: Tarayıcı, HTML belgesini ayrıştırarak DOM (Document Object Model) ağacını oluşturur.
CSS ayrıştırma: Tarayıcı, CSS kurallarını ayrıştırarak CSSOM (CSS Object Model) ağacını oluşturur.
Render ağacı oluşturma: Tarayıcı, DOM ve CSSOM ağaçlarını birleştirerek render ağacını oluşturur. Render ağacı, ekranda görüntülenecek elementleri ve stillerini içerir.
Yerleşim (layout): Tarayıcı, render ağacındaki her elementin boyutunu ve konumunu hesaplar.
Boyama (painting): Tarayıcı, render ağacındaki elementleri ekrana boyar.

CSS Kaynakları: CSS kuralları üç farklı şekilde HTML sayfasına eklenebilir:

Satır içi (inline) CSS: Stil kuralları doğrudan HTML elementinin içinde tanımlanır. (Önerilmez)
Dahili (internal) CSS: Stil kuralları HTML belgesinin <head> bölümünde <style> etiketi içinde tanımlanır.
Harici (external) CSS: Stil kuralları ayrı bir .css dosyasında tanımlanır ve HTML belgesine <link> etiketi ile bağlanır. (En iyi uygulama)

CSS Seçicileri: CSS seçicileri, stilin uygulanacağı HTML elementlerini belirtmek için kullanılır. En sık kullanılan seçici türleri şunlardır:

Element seçicileri: HTML elementinin adını kullanarak (örneğin, p, h1, div).
Sınıf seçicileri: HTML elementinin class özelliğini kullanarak (örneğin, .baslik, .paragraf).
ID seçicileri: HTML elementinin id özelliğini kullanarak (örneğin, #ana-baslik, #icerik).
Öznitelik seçicileri: HTML elementinin özniteliklerini kullanarak (örneğin, [type="text"], [href^="https://"]).
Sözde sınıf seçicileri: Elementin belirli bir durumunu kullanarak (örneğin, :hover, :active, :focus).
Sözde element seçicileri: Elementin belirli bir bölümünü kullanarak (örneğin, ::before, ::after, ::first-line).

Temel CSS Sözdizimi ve Kullanımı

CSS sözdizimi, seçiciler ve bildirim bloklarından oluşur. Bir bildirim bloğu, özellik (property) ve değer (value) çiftlerinden oluşur.

Örnek:


/* Seçici */
h1 {
  /* Bildirim bloğu */
  color: blue; /* Özellik: color, Değer: blue */
  text-align: center; /* Özellik: text-align, Değer: center */
}

Temel CSS Özellikleri:

color: Metin rengini belirler.
font-size: Metin boyutunu belirler.
font-family: Metin yazı tipini belirler.
text-align: Metin hizalamasını belirler.
background-color: Arka plan rengini belirler.
width: Elementin genişliğini belirler.
height: Elementin yüksekliğini belirler.
margin: Elementin dış boşluğunu belirler.
padding: Elementin iç boşluğunu belirler.
border: Elementin kenarlığını belirler.

CSS Değerleri: CSS özelliklerinin alabileceği değerler, özelliğe bağlı olarak değişir. Bazı yaygın değer türleri şunlardır:

Renkler: Renk adları (örneğin, red, blue, green), hexadecimal değerler (örneğin, #FF0000, #00FF00), RGB değerleri (örneğin, rgb(255, 0, 0), rgb(0, 255, 0)), HSL değerleri (örneğin, hsl(0, 100%, 50%), hsl(120, 100%, 50%)).
Boyutlar: Piksel (px), em, rem, yüzde (%).
Anahtar kelimeler: auto, inherit, initial.

CSS Kutu Modeli (Box Model)

CSS kutu modeli, her HTML elementini bir kutu olarak ele alır. Bu kutu, içerik (content), iç boşluk (padding), kenarlık (border) ve dış boşluk (margin) olmak üzere dört bölümden oluşur.

Kutu Modelinin Bileşenleri:

İçerik (Content): Elementin içeriği (metin, resim, vb.).
İç Boşluk (Padding): İçerik ile kenarlık arasındaki boşluk.
Kenarlık (Border): Elementin etrafındaki çizgi.
Dış Boşluk (Margin): Element ile diğer elementler arasındaki boşluk.

Kutu Modelinin Önemi: Kutu modeli, elementlerin boyutunu ve konumunu anlamak için önemlidir. width ve height özellikleri, varsayılan olarak sadece içeriğin boyutunu belirler. padding ve border özellikleri de elementin toplam boyutuna eklenir. box-sizing özelliği kullanılarak bu davranış değiştirilebilir.

Örnek:


.kutu {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 30px;
}

Bu örnekte, kutunun içeriği 200px genişliğinde ve 100px yüksekliğindedir. İç boşluk 20px, kenarlık 5px ve dış boşluk 30px'tir. Kutunun toplam genişliği 200px + 2 * 20px + 2 * 5px + 2 * 30px = 310px'dir. Kutunun toplam yüksekliği 100px + 2 * 20px + 2 * 5px + 2 * 30px = 210px'dir.

Aşağıdaki tablo, kutu modelinin farklı bileşenlerinin özelliklerini ve varsayılan değerlerini göstermektedir:

Özellik	Açıklama	Varsayılan Değer
width	Elementin genişliği	auto
height	Elementin yüksekliği	auto
padding	Elementin iç boşluğu	0
border	Elementin kenarlığı	none
margin	Elementin dış boşluğu	0

CSS Yerleşim Teknikleri (Layout Techniques)

CSS, web sayfalarının düzenini kontrol etmek için çeşitli yerleşim teknikleri sunar. En yaygın kullanılan teknikler şunlardır:

Normal Akış (Normal Flow): Elementler, HTML'de göründükleri sırayla yukarıdan aşağıya ve soldan sağa doğru yerleştirilir.
Pozisyonlama (Positioning): Elementlerin konumunu değiştirmek için kullanılır. position özelliği ile static, relative, absolute, fixed ve sticky değerleri alabilir.
Float: Elementleri sola veya sağa yaslamak için kullanılır. Özellikle metinlerin etrafında resimler yerleştirmek için kullanışlıdır.
Flexbox: Esnek kutu modeli, karmaşık düzenleri kolayca oluşturmak için kullanılır.
Grid: İki boyutlu bir düzen sistemi sunar. Özellikle web sayfalarının ana düzenini oluşturmak için idealdir.

Pozisyonlama:

static: Varsayılan değerdir. Elementler normal akışta yerleştirilir.
relative: Element, normal akışta olduğu gibi yerleştirilir, ancak daha sonra top, right, bottom ve left özellikleri kullanılarak konumlandırılabilir.
absolute: Element, normal akıştan çıkarılır ve en yakın konumlandırılmış (positioned) atasına göre konumlandırılır. Eğer konumlandırılmış bir ata yoksa, belgeye göre konumlandırılır.
fixed: Element, normal akıştan çıkarılır ve tarayıcı penceresine göre konumlandırılır. Sayfa kaydırıldığında bile sabit kalır.
sticky: Element, normal akışta olduğu gibi yerleştirilir, ancak belirtilen bir kaydırma eşiğine ulaşıldığında sabitlenir.

Flexbox:

Flexbox, elementleri esnek bir şekilde yerleştirmek için kullanılan bir düzen modelidir. Ana konteyner ve öğeler (items) olmak üzere iki temel kavramı vardır.

Örnek:


<div class="container">
  <div class="item">Öğe 1</div>
  <div class="item">Öğe 2</div>
  <div class="item">Öğe 3</div>
</div>

<style>
  .container {
    display: flex;
    flex-direction: row; /* Öğeleri yatay olarak sırala */
    justify-content: space-around; /* Öğeleri eşit aralıklarla yerleştir */
    align-items: center; /* Öğeleri dikey olarak ortala */
  }
  .item {
    width: 100px;
    height: 50px;
    background-color: lightblue;
    border: 1px solid black;
    text-align: center;
    line-height: 50px;
  }
</style>

Grid:

Grid, iki boyutlu bir düzen sistemidir. Satırlar ve sütunlar oluşturarak elementleri yerleştirmek için kullanılır.

Örnek:


<div class="container">
  <div class="item">Öğe 1</div>
  <div class="item">Öğe 2</div>
  <div class="item">Öğe 3</div>
  <div class="item">Öğe 4</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* İki eşit sütun oluştur */
    grid-gap: 10px; /* Öğeler arasındaki boşluk */
  }
  .item {
    background-color: lightgreen;
    border: 1px solid black;
    text-align: center;
    padding: 20px;
  }
</style>

CSS'de Medya Sorguları (Media Queries)

Medya sorguları, farklı cihazlar ve ekran boyutları için farklı stil kuralları tanımlamak için kullanılır. Bu, web sayfalarının duyarlı (responsive) olmasını sağlar. Medya sorguları, @media kuralı ile tanımlanır.

Örnek:


/* Ekran genişliği 768 pikselden küçükse */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .menu {
    display: none; /* Menüyü gizle */
  }
}

/* Ekran genişliği 768 pikselden büyükse */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
  .menu {
    display: block; /* Menüyü göster */
  }
}

Yaygın Medya Sorgusu Kullanım Alanları:

Farklı ekran boyutları için farklı düzenler oluşturmak.
Farklı cihazlar (masaüstü, tablet, mobil) için farklı yazı tipi boyutları ve renkler kullanmak.
Yazdırma için özel stil kuralları tanımlamak.
Ekran yönüne (portrait veya landscape) göre farklı stil kuralları uygulamak.

Aşağıdaki tablo, yaygın medya sorgusu özelliklerini ve kullanımlarını göstermektedir:

Özellik	Açıklama	Örnek
max-width	Maksimum ekran genişliği	@media (max-width: 768px)
min-width	Minimum ekran genişliği	@media (min-width: 768px)
orientation	Ekran yönü (portrait veya landscape)	@media (orientation: portrait)
print	Yazdırma için stil kuralları	@media print

CSS Preprocessor'ler (Ön İşlemciler)

CSS preprocessor'ler, CSS'i daha güçlü ve esnek hale getirmek için kullanılan araçlardır. En popüler CSS preprocessor'leri şunlardır:

Sass (Syntactically Awesome Style Sheets): Değişkenler, iç içe kurallar, mixin'ler ve fonksiyonlar gibi özellikler sunar.
Less (Leaner Style Sheets): Sass'a benzer özellikler sunar.
Stylus: Esnek bir sözdizimine sahip bir CSS preprocessor'üdür.

CSS Preprocessor'lerinin Avantajları:

Kod Tekrarını Azaltma: Değişkenler ve mixin'ler sayesinde kod tekrarını azaltır.
Daha İyi Organizasyon: İç içe kurallar ve modüler yapılar sayesinde kodu daha iyi organize etmeyi sağlar.
Daha Kolay Bakım: Değişkenler sayesinde stil değişikliklerini kolayca yönetmeyi sağlar.
Fonksiyonlar: Karmaşık hesaplamalar ve stil manipülasyonları için fonksiyonlar kullanmayı sağlar.

Sass Örneği:


/* Değişkenler */
$primary-color: #007bff;
$secondary-color: #6c757d;

/* Mixin */
@mixin button-style($color) {
  background-color: $color;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* İç içe kurallar */
.container {
  width: 80%;
  margin: 0 auto;

  h1 {
    color: $primary-color;
    text-align: center;
  }
}

/* Mixin kullanımı */
.btn-primary {
  @include button-style($primary-color);
}

.btn-secondary {
  @include button-style($secondary-color);
}

Bu Sass kodu, derlendikten sonra aşağıdaki CSS koduna dönüşür:


.container {
  width: 80%;
  margin: 0 auto;
}

.container h1 {
  color: #007bff;
  text-align: center;
}

.btn-primary {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

CSS Vaka Çalışması: Duyarlı Bir Web Sitesi Tasarımı

Bir e-ticaret web sitesi için duyarlı bir tasarım oluşturmak istediğimizi varsayalım. Bu tasarım, masaüstü, tablet ve mobil cihazlarda iyi görünmeli ve kullanıcı deneyimini en üst düzeye çıkarmalıdır.

Adım 1: HTML Yapısını Oluşturma

İlk olarak, web sitesinin temel HTML yapısını oluştururuz:


<!DOCTYPE html>
<html>
<head>
  <title>E-Ticaret Web Sitesi</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>E-Ticaret Sitesi</h1>
    <nav>
      <ul>
        <li><a href="#">Anasayfa</a></li>
        <li><a href="#">Ürünler</a></li>
        <li><a href="#">Hakkımızda</a></li>
        <li><a href="#">İletişim</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="products">
      <h2>Ürünler</h2>
      <div class="product-list">
        <div class="product">
          <img src="urun1.jpg" alt="Ürün 1">
          <h3>Ürün 1 Adı</h3>
          <p>Ürün 1 Açıklaması</p>
          <span class="price">100 TL</span>
          <button>Sepete Ekle</button>
        </div>
        <div class="product">
          <img src="urun2.jpg" alt="Ürün 2">
          <h3>Ürün 2 Adı</h3>
          <p>Ürün 2 Açıklaması</p>
          <span class="price">150 TL</span>
          <button>Sepete Ekle</button>
        </div>
      </div>
    </section>
  </main>
  <footer>
    <p>Tüm Hakları Saklıdır © 2023</p>
  </footer>
</body>
</html>

Adım 2: Temel CSS Stillerini Oluşturma

Daha sonra, web sitesinin temel CSS stillerini oluştururuz. Bu stiller, tüm cihazlarda ortak olan temel görünümü belirler:


body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  display: inline;
  margin: 0 10px;
}

nav a {
  color: white;
  text-decoration: none;
}

main {
  padding: 20px;
}

.products {
  text-align: center;
}

.product-list {
  display: flex;
  justify-content: space-around;
}

.product {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}

.product img {
  width: 100%;
  height: auto;
}

.price {
  font-weight: bold;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

Adım 3: Medya Sorguları ile Duyarlı Tasarım Oluşturma

Son olarak, medya sorguları kullanarak farklı cihazlar için farklı stil kuralları tanımlarız. Örneğin, mobil cihazlarda menüyü gizleyebilir ve ürünleri tek sütunda gösterebiliriz:


/* Mobil cihazlar için (ekran genişliği 768px'den küçükse) */
@media (max-width: 768px) {
  nav ul {
    display: none; /* Menüyü gizle */
  }

  .product-list {
    flex-direction: column; /* Ürünleri tek sütunda göster */
  }

  .product {
    width: 100%; /* Ürünlerin genişliğini %100 yap */
  }
}

Bu vaka çalışması, CSS'in web sitelerinin görünümünü ve biçimlendirmesini nasıl kontrol ettiğini ve medya sorgularının duyarlı tasarım oluşturmak için nasıl kullanıldığını göstermektedir.