CSS Nedir? (Cascading Style Sheets)

CSS (Basamaklı Stil Sayfaları), HTML ile oluşturulan web sayfalarının tasarımını ve düzenini belirlemek için kullanılan bir stil dilidir. CSS sayesinde web sitelerinin renkleri, yazı tipleri, arka planları ve yerleşimleri özelleştirilebilir.

CSS'in temel amacı, HTML'in yapısal içeriğinden stil öğelerini ayırarak web sitelerinin daha düzenli ve erişilebilir olmasını sağlamaktır.

CSS'in Faydaları ve Önemi

Tasarım ve Estetik: CSS, web sayfalarının profesyonel ve modern görünmesini sağlar.
Sayfa Düzeni: HTML elemanlarını düzenleyerek sayfaların uyumlu ve kolay okunur olmasını sağlar.
Kod Tekrarını Azaltma: Aynı stilleri farklı HTML sayfalarına uygulayarak kod tekrarını önler.
Kolay Güncelleme: Bir stil dosyasını güncelleyerek tüm web sitesi tasarımını değiştirebilirsiniz.
Hız ve Performans: Sayfa boyutlarını küçültür ve yüklenme süresini hızlandırır.
Duyarlılık (Responsive Design): CSS ile mobil uyumlu tasarımlar yapılabilir.

CSS Nasıl Kullanılır?

CSS üç farklı şekilde kullanılabilir:

1. Satır İçi (Inline) CSS

HTML etiketleri içine doğrudan style özelliği eklenerek kullanılır. Ancak kod tekrarına sebep olduğu için önerilmez.

html

<p style="color: blue; font-size: 18px;">Bu, mavi renkli bir paragraftır.</p>

2. Dahili (Internal) CSS

HTML belgesinin <head> kısmında <style> etiketi ile tanımlanır.

html

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal CSS</title>
    <style>
        body {
            background-color: lightgray;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: darkblue;
            text-align: center;
        }
        p {
            font-size: 16px;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>CSS Örneği</h1>
    <p>Bu bir dahili CSS örneğidir.</p>
</body>
</html>

3. Harici (External) CSS

Harici bir .css dosyası oluşturularak HTML'e bağlanır. Bu yöntem, büyük projeler için en çok tercih edilendir.

HTML dosyasında:

html

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

style.css dosyasında:

css

body {
    background-color: #f4f4f4;
    font-family: 'Arial', sans-serif;
}
h1 {
    color: navy;
    text-align: center;
}

CSS Seçiciler (Selectors)

CSS'de belirli HTML elemanlarını seçmek için farklı seçiciler kullanılır.

**1. Evrensel Seçici (`*`)**

Sayfadaki tüm HTML elemanlarına stil uygular.

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

2. Etiket Seçici (`element`)

Belirtilen HTML etiketine stil uygular.

css

h1 {
    color: red;
    font-size: 24px;
}

3. Sınıf Seçici (`.class`)

Belirli bir sınıfa sahip HTML öğelerine stil uygular.

css

.ana-baslik {
    color: blue;
    font-weight: bold;
}

html

<h1 class="ana-baslik">Bu bir ana başlıktır.</h1>

4. ID Seçici (`#id`)

Tek bir öğeye özel stil uygular.

css

#ozel-buton {
    background-color: green;
    color: white;
    padding: 10px;
}

html

<button id="ozel-buton">Tıkla</button>

5. İç İçe Seçiciler (Descendant Selector)

Bir öğenin içindeki belirli bir elemanı seçmek için kullanılır.

css

div p {
    color: gray;
}

html
<div>
    <p>Bu gri renkte olacaktır.</p>
</div>

CSS Kutu Modeli (Box Model)

CSS'in temel yapı taşlarından biri Kutu Modelidir. Her HTML öğesi, aşağıdaki özelliklere sahip bir kutu olarak düşünülebilir:

content (İçerik): Metin veya diğer öğeler burada bulunur.
padding (Dolgu): İçeriğin kenarlara olan mesafesidir.
border (Kenarlık): Kutu etrafındaki çizgidir.
margin (Kenar Boşluğu): Kutunun diğer öğelerle arasındaki mesafesidir.

css

.box {
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
}

html

<div class="box">Bu bir kutu modelidir.</div>

Flexbox ve Grid ile Düzenler

CSS, sayfa düzenini oluşturmak için Flexbox ve Grid sistemlerini sunar.

Flexbox ile Esnek Düzen

Öğeleri yatay veya dikey eksende hizalamak için kullanılır.

css

.container {
    display: flex;
    justify-content: space-between;
}

html

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

CSS Grid ile Kapsamlı Düzen

Satır ve sütun bazlı düzenler oluşturmak için kullanılır.

css

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

CSS ile Responsive (Mobil Uyumlu) Tasarım

Medya Sorguları (Media Queries)

Ekran boyutuna göre farklı stiller uygulamak için kullanılır.

css

@media (max-width: 768px) {
    body {
        background-color: lightcoral;
    }
}

Bu kod, ekran genişliği 768 pikselden küçük olduğunda arka plan rengini değiştirir.

CSS ile Animasyon ve Geçişler

CSS Geçişleri (Transitions)

Bir öğenin stil değişikliğini yumuşak hale getirir.

css

button {
    background-color: blue;
    transition: background-color 0.5s;
}

button:hover {
    background-color: red;
}

CSS Animasyonları (Animations)

Belirli bir hareketi tekrarlamak için kullanılır.

css

@keyframes hareket {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

.kutu {
    animation: hareket 2s infinite;
}

Sonuç

CSS, web tasarımında görselliği ve kullanıcı deneyimini büyük ölçüde iyileştiren bir teknolojidir. Sayfa düzeni, renkler, animasyonlar ve mobil uyumlu tasarımlar yapmak için CSS kullanılır. CSS'in gücünü tam anlamıyla kullanabilmek için pratik yaparak gelişmek önemlidir. 🚀

CSS Nedir? (Cascading Style Sheets)