Web dünyasında biraz zaman geçirdiysen mutlaka “HTML ve CSS” ikilisini bir arada duymuşsundur. Çünkü bu iki teknoloji, internet sitelerinin iskeletini ve görünümünü oluşturur. HTML yapıyı kurarken, CSS ise sayfaya estetik kazandırır. Kısacası: HTML çerçeveyse, CSS onun kıyafetleri ve tarzıdır.
Peki CSS tam olarak nedir, nasıl kullanılır, neden önemlidir? Gel, birlikte adım adım bakalım.
CSS Nedir?
CSS, açılımıyla Cascading Style Sheets yani “Basamaklı Stil Şablonları”dır. Bir web sayfasının rengini, yazı tipini, şeklini, bölümlerin yerleşimini ve daha birçok görsel detayını kontrol etmeye yarar.
En basit haliyle CSS, “Bu eleman nasıl görünsün?” sorusunun cevabıdır.
Örneğin:
Bir paragrafın rengini kırmızı yapmak,
Sayfadaki kutuları yan yana dizmek,
Arka planı siyah yapmak,
Butonlara hover efekti eklemek…
Bunların hepsi CSS ile yapılır.
Daha güzel bir benzetmeyle:
HTML bir evi oluşturur, CSS o evi döşer. Halısı, perdesi, duvar rengi, koltuk yerleşimi… Hepsi CSS’in uzmanlık alanıdır.
CSS Kodları Nelerdir?
CSS’in yapısı aslında sandığından daha basittir. En temel hali şu şekildedir:
selector {
property: value;
}
Bir örnek:
p {
color: blue;
font-size: 18px;
}
Burada:
selector (p): Hangi HTML elemanının seçileceğini gösterir.
property (color, font-size): Hangi özelliğin değiştirileceğini söyler.
value (blue, 18px): O özelliğin değeridir.
En çok kullanılan CSS özelliklerinden bazıları:
color (yazı rengi)
background-color (arka plan rengi)
font-size (yazı boyutu)
margin (dış boşluk)
padding (iç boşluk)
display (elemanın gösterim tipi)
border (çerçeve)
width / height (genişlik / yükseklik)
Bir web tasarımcısının en yakın arkadaşları bunlardır diyebiliriz.
CSS Nasıl Kullanılır?
CSS, HTML dosyasına üç farklı yöntemle eklenebilir. Basitten gelişmişe doğru sıralayalım:
Satır içi (inline) CSS
Direkt HTML etiketinin içine yazılır.
<p style="color: red;">Bu yazı kırmızı.</p>
Hızlı bir çözüm ama büyük projelerde pek tercih edilmez.
Sayfa içinde (internal) CSS
HTML dosyasının <head> bölümüne <style> etiketiyle eklenir.
<style>
p {
color: green;
}
</style>
Tek sayfalık projelerde iş görür.
Harici (external) CSS – En profesyonel yöntem
Tüm stiller ayrı bir .css dosyasına yazılır.
<link rel="stylesheet" href="style.css">
Bu yöntem hem düzenli hem de yönetmesi kolaydır. Gerçek projelerde yüzde 99 bu kullanılır.
CSS’in Avantajları Nelerdir?
CSS’in web dünyasında bu kadar sevilmesinin birçok sebebi var. En önemlileri şöyle:
Tasarımı koddan ayırır
HTML yapıya odaklanırken, CSS tamamen görsellikten sorumludur. Böylece her şey çok daha düzenli olur.
Tek dosyayla tüm siteyi kontrol edersin
20 sayfalık bir web siten varsa ve hepsinin arka planını değiştirmek istiyorsan, sadece bir CSS dosyasını düzenlemen yeter.
Tasarımlar daha esnek ve tutarlı olur
Aynı stil kurallarını tekrar tekrar yazmak zorunda kalmazsın. Tüm site aynı görsel kimliğe kavuşur.
Hızlıdır
CSS sayesinde kodlar sadeleşir ve tarayıcı sayfayı daha hızlı işler.
Mobil uyumluluk sağlar
Responsive tasarım tamamen CSS’in bir sanatıdır. Telefon, tablet, masaüstü… Hepsine tek dosyayla uyum sağlayabilirsin.
CSS Öğrenmek Ne Kadar Sürer?
Bu aslında tamamen ne kadar pratik yaptığına bağlı. Fakat genel bir ortalama verecek olursak:
Temel CSS → 1-2 hafta
Orta seviye (flexbox, grid, animasyonlar) → 1-2 ay
Profesyonel kullanım (responsive tasarım, component mantığı) → 3-6 ay
CSS, başlangıçta basit görünen ama ileri seviyeye geldikçe inanılmaz derinleşen bir yapıdadır. Özellikle Flexbox ve CSS Grid öğrendikten sonra tasarımları düzenlemek çok daha keyifli hale gelir.
Önemli olan nokta şu:
CSS ezber işi değildir, mantık ve pratik işidir.
HTML ve CSS Arasındaki Fark Nedir?
Bu iki teknoloji çoğunlukla birlikte kullanılsa da görevleri tamamen farklıdır.
HTML (ne var?)
Sayfanın yapısını oluşturur.
Başlıklar, paragraflar, resimler, listeler…
Bir anlamda sayfanın iskeleti.
CSS (nasıl görünüyor?)
Renk, boyut, yerleşim gibi görsel her şeyi kontrol eder.
HTML’i daha estetik ve düzenli hale getirir.
Kısacası:
HTML olmadan CSS’in anlamı yoktur, CSS olmadan HTML çok sade ve sıkıcı görünür.
CSS Sayfaya Nasıl Eklenir?
Yukarıda bahsettiğimiz gibi üç yol var ama en temiz çözüm:
<link rel="stylesheet" href="style.css">
Yani bir style.css dosyası oluşturup, tüm stilleri orada toplamak.
Eğer sayfan büyükse, CSS dosyalarını bile modüllere ayırabilirsin:
reset.css
global.css
header.css
footer.css
responsive.css
Bu şekilde her şey çok daha düzenli ilerler.
CSS, web tasarımın olmazsa olmazıdır. Basit bir yazıyı bile bambaşka bir görünüme sokabilir. Renkler, boşluklar, hizalama, animasyonlar… Kısacası tasarımın tüm ruhunu CSS verir. HTML ile birlikte çalıştığında, ortaya modern, şık ve kullanıcı dostu sayfalar çıkar.
Eğer yeni başlıyorsan, ilk günlerde kafanın karışması çok normal. Ama birkaç örnek yapıp özellikle Flexbox ve Grid’i öğrendikten sonra her şeyin oturduğunu göreceksin.
Kısaca CSS öğrenmek sabır ister ama karşılığını fazlasıyla verir.
0 Yorum