CSS'ye Giriş

CSS, bir web sitesinin görünümünü tasarlamada ve güzelleştirmede en önemli araçlardan biridir. Size temel bilgileri ve CSS'nin nasıl kullanılacağını öğreteceğiz

CSS, HTML Güzelliğini Değiştirebilir

CSS, bir Web sayfasını biçimlendirmek için kullandığımız dildir.

CSS nedir?

CSS, Basamaklı Stil Sayfaları anlamına gelir
CSS, HTML öğelerinin ekranda, kağıtta veya diğer ortamlarda nasıl görüntüleneceğini açıklar
CSS çok fazla iş tasarrufu sağlar. Aynı anda birden çok web sayfasının düzenini kontrol edebilir
Harici stil sayfaları CSS dosyalarında saklanır

CSS Demosu - Bir HTML Sayfası - Birden Çok Stil!

Burada dört farklı stil sayfasıyla görüntülenen bir HTML sayfası göstereceğiz. Farklı stilleri görmek için aşağıdaki "Stil Sayfası 1", "Stil Sayfası 2", "Stil Sayfası 3", "Stil Sayfası 4" bağlantılarına tıklayın:

CSS'yi Neden Kullanmalı?

CSS, farklı cihazlar ve ekran boyutları için tasarım, düzen ve gösterimdeki varyasyonlar dahil olmak üzere web sayfalarınız için stiller tanımlamak için kullanılır.

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS Büyük Bir Sorunu Çözdü

HTML ASLA bir web sayfasını biçimlendirmek için etiketler içermeyi amaçlamamıştı!

HTML, bir web sayfasının içeriğini tanımlamak için oluşturuldu, örneğin:

<h1> Bu bir başlıktır </h1>

<p> Bu bir paragraftır.</p>

HTML 3.2 spesifikasyonuna <font> gibi etiketler ve renk öznitelikleri eklendiğinde, web geliştiricileri için bir kabus başladı. Her sayfaya yazı tipi ve renk bilgisinin eklendiği büyük web sitelerinin geliştirilmesi uzun ve pahalı bir süreç haline geldi.

Bu sorunu çözmek için World Wide Web Konsorsiyumu (W3C) CSS'yi yarattı.

CSS, HTML sayfasından stil biçimlendirmesini kaldırdı!

CSS Çok Fazla İş Kurtarır!

Stil tanımları normalde harici .css dosyalarına kaydedilir.

Harici bir stil sayfası dosyasıyla, yalnızca bir dosyayı değiştirerek tüm web sitesinin görünümünü değiştirebilirsiniz!

CSS Sözdizimi

Bir CSS kuralı, bir seçici ve bir bildirim bloğundan oluşur.
CSS Tanıtımı

Seçici, stil vermek istediğiniz HTML öğesini işaret eder.

Bildirim bloğu, noktalı virgülle ayrılmış bir veya daha fazla bildirim içerir.

Her bildirim, iki nokta üst üste ile ayrılmış bir CSS özellik adı ve bir değer içerir.

Birden çok CSS bildirimi noktalı virgülle ayrılır ve bildirim blokları küme parantezleriyle çevrilidir.

p {
  color: red;
  text-align: center;
}

Örnek Açıklama

p, CSS'deki bir seçicidir (stillemek istediğiniz HTML öğesini gösterir: <p>).
color bir özelliktir ve red özellik değeridir
text-align bir özelliktir ve center özellik değeridir