CSS Nedir? Temel Özellikler ve Örneklerle Başlangıç

HTML ile iskeletini oluşturduğun web sayfalarını renklendirmek, hizalamak ve modern bir görünüme kavuşturmak için CSS kullanman gerekir. CSS, web sitelerinin tasarım dilidir ve HTML ile birlikte çalışarak içeriklerin ekranda nasıl görüneceğini belirler.

HTML ve CSS Birlikte Nasıl Çalışır?

HTML belgesi bir binanın tuğlalarını ve odalarını temsil ederken, CSS o binanın boyasını, mobilyalarını ve dekorasyonunu temsil eder. Tarayıcılar önce HTML dosyasını okuyarak sayfanın içeriğini yükler, ardından CSS dosyalarını işleyerek bu içeriği biçimlendirir.

CSS kodlarını HTML dosyasına dahil etmenin birkaç farklı yolu vardır. En yaygın ve önerilen yöntem, harici bir stil dosyası kullanmaktır. Aşağıdaki örnekte, HTML belgesine harici bir CSS dosyasının nasıl bağlandığını görebilirsin:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Merhaba Dünya</h1>
</body>
</html>

CSS Seçiciler

Stil yazmak istediğin HTML elemanlarını hedeflemek için seçicileri kullanırsın. Seçiciler, hangi elemanın hangi stili alacağını tarayıcıya söyler.

Etiket Seçiciler

Doğrudan HTML etiket adını kullanarak sayfadaki o türdeki tüm elemanları hedefleyebilirsin:

p {
    color: gray;
}

Sınıf (Class) Seçiciler

Birden fazla farklı elemana aynı stili vermek veya belirli bir grubu hedeflemek için sınıf seçiciler kullanılır. Sınıf adlarının başına nokta (.) konur:

.kutu {
    background-color: lightblue;
}

ID Seçiciler

Sayfa içinde benzersiz olan tek bir elemanı hedeflemek için ID kullanılır. ID seçicilerin başına diyez (#) konur:

#ana-baslik {
    font-size: 24px;
}

Renkler ve Yazı Tipleri

Web sayfalarını okunabilir ve estetik kılmak için renk ve tipografi ayarları kritik öneme sahiptir.

Renk Kullanımı

Metin rengini değiştirmek için color, arkaplan rengini değiştirmek için ise background-color özelliğini kullanırsın. Renkleri isimleriyle, HEX kodlarıyla veya RGB formatıyla belirtebilirsin:

body {
    color: #333333;
    background-color: #f9f9f9;
}

Yazı Tipi Özellikleri

Metinlerin boyutunu, kalınlığını ve yazı tipini ayarlamak için şu özellikleri kullanabilirsin:

h1 {
    font-family: Arial, sans-serif;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
}

Kutu Modeli (Box Model)

CSS'te her HTML elemanı aslında görünmez bir kutudur. Kutu modeli; içerik (content), iç boşluk (padding), kenarlık (border) ve dış boşluk (margin) olmak üzere dört ana katmandan oluşur.

.kart {
    width: 200px;
    padding: 20px;
    border: 1px solid #ccc;
    margin: 15px;
}

• İçerik (Content): Metin veya görselin bulunduğu gerçek alan.
• Padding: İçerik ile kenarlık arasındaki boşluk.
• Border: İçeriği ve padding alanını çevreleyen kenarlık.
• Margin: Kutunun diğer elemanlarla olan dış mesafesi.

Flexbox Düzeni

Modern web tasarımlarında elemanları yan yana getirmek, ortalamak veya boşlukları ayarlamak için Flexbox (Flexible Box Layout) kullanılır. Flexbox, özellikle tek boyutlu düzenlerde hayat kurtarır.

Öncelikle bir container elemanını flex olarak tanımlarsın:

.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

justify-content özelliği elemanların yatay eksende nasıl dağılacağını belirlerken, align-items dikey eksendeki hizalamayı kontrol eder.

Görüşmek üzere.