CSS Nedir ve Web Geliştirici Olmanıza Nasıl Yardımcı Olur?

Yazılım

Faik Yılmaz

Mayıs 5, 2025

Web tasarımına yeni başlayanlardan, ön ve arka uç geliştirme ekiplerinde uzmanlaşmış kişilere kadar herkesin CSS (Cascading Style Sheets) hakkında bilgi sahibi olması ve bu stil sayfalarını etkili bir şekilde kullanabilmesi önemlidir. Günümüzde şirketlerin %95’i işlerini çevrimiçi ortama taşıyor ve kullanıcı dostu, sağlam web sitelerine olan talep artıyor. Bu nedenle CSS’i göz ardı etmek büyük bir kayıp olabilir.

CSS terimiyle sıkça karşılaşırız, ancak şimdi bu terimin gerçekte ne anlama geldiğine daha yakından bakalım. CSS’in ne olduğunu, nasıl çalıştığını ve günümüzün dijital dünyasında neden vazgeçilmez bir uzmanlık alanı olduğunu anlamak için bu kapsamlı rehberi inceleyelim.

CSS Nedir?

CSS, Cascading Style Sheets‘in kısaltmasıdır. Basitçe ifade etmek gerekirse, web sayfalarının görünümünü tanımlayan bir işaretleme dilidir. CSS kullanarak bir web sitesinin yazı tiplerini, metinlerini, renklerini, arka planlarını, kenar boşluklarını ve düzenlerini kontrol edebilir ve web sitesinin profesyonel görünmesini sağlayabilirsiniz.

Ayrıca, web sitenizde animasyonlara ve efektlere ihtiyaç duyarsanız, CSS bu konuda da size yardımcı olabilir. Dönen simgeler, yükleme animasyonları, hareketli arka planlar ve tıklama efektleri gibi çeşitli animasyonlar kullanabilirsiniz. Kısacası, web sayfalarınızın estetik görünümünü iyileştirmenize olanak tanır.

Yazı tiplerini ve metinlerin stilini belirleme
Renkleri ve arka planları düzenleme
Kenar boşluklarını ve düzenleri kontrol etme
Animasyonlar ve efektler ekleme
Web sayfalarının genel görünümünü iyileştirme

CSS’in HTML ile nasıl kullanıldığına dair bir örnek:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightblue; text-align:center;}
h1 {color:navy; font-size:60px; }
p {font-family:verdana; font-size:40px;}
</style>
</head>
<body>
<h1>Başlık</h1>
<p>Paragraf</p>
</body>
</html>

CSS Nasıl Çalışır?

CSS, HTML öğeleriyle etkileşim kurarak çalışır. HTML öğeleri, CSS sözdizimini kullanarak stil verebileceğiniz bir web sayfasının bireysel bileşenleridir. Bir örnekle açıklayalım. HTML’de yazılmış bir paragraf şu şekilde görünür:

<p>Bu benim paragrafım!</p>

Şimdi, bu paragrafın web sayfanızı ziyaret eden kullanıcılara mavi ve kalın olarak görünmesini istiyorsanız, CSS kodu uygulayabilirsiniz. Bu durumda kod şöyle görünür:

p { color:blue; font-weight:bold; }

Burada, tırnak içindeki “p” ifadesi “seçici” olarak adlandırılır ve ilk süslü parantezin sol tarafında yazılır. CSS stilinin uygulanması gereken HTML öğesini belirtir. Süslü parantezler arasındaki girdilere ise “bildirim” denir. Bu bildirimler, seçiciye uygulanabilen özellikler ve değerlerden oluşur. Yukarıdaki örnekte, “color” ve “font-weight” özelliklerdir, “blue” ve “bold” ise değerlerdir.

Önemli Not: Özellikler yazı tipi boyutu ve biçimi, renk ve kenar boşlukları olabilirken, değerler bu özelliklere uygulanabilen ayarlardır. Örneğin, “border-color”, “background-position” ve “text-align” özelliklerdir, “red”, “top” ve “dotted” ise değerlerdir.

Benzer şekilde, web sayfanızın yazı tipi boyutunu ve arka plan renklerini belirli bir seçici kullanarak değiştirmek isterseniz, aynı temel prensipleri uygulayabilirsiniz. Örneğin:

body { background-color:pink; }

Bu kodu kullanarak arka plan rengini pembe olarak değiştirebilirsiniz.

Başka bir örnek:

p { font-size:20px; color:red; }

Bu kod, paragrafın yazı tipini 20 piksel olarak değiştirir ve harfler kırmızı renkte görünür.

CSS Türleri: Dahili, Harici ve Satır İçi CSS Stilleri

Üç tür CSS vardır: dahili, harici ve satır içi. Bu üç tür hakkında daha fazla bilgi edinmek için derinlemesine inceleyelim:

Dahili CSS Stili: Bu tür, bir HTML belgesinin <head> bölümüne bir <style> etiketi eklemenize olanak tanır. Bir web sitesinin yalnızca tek bir sayfasını stilize etmeniz gerektiğinde, dahili CSS sizin için doğru seçim olacaktır. Aksine, birden fazla web sayfasını stilize etmeniz gerekiyorsa, bu türü kullanmak iyi bir fikir olmayacaktır çünkü bu uzun ve dolambaçlı bir yöntemdir. Kuralları her web sayfasına uygulamanız gerekecektir.
Harici CSS Stili: Bu stil, web sayfalarınızı harici bir .css dosyasına bağlamanıza yardımcı olur. Kodu yazmak için ayrı bir dosya kullandığımız için, harici CSS bu dosyaları ayrı tutmamızı sağlar. Tek bir .css dosyasını düzenleyerek tüm web sitesini aynı anda stilize edebilirsiniz. Bu nedenle, harici sürüm büyük bir web sitesini değiştirmek için oldukça etkili bir yaklaşımdır.
Satır İçi CSS Stili: Belirli bir HTML öğesini stilize etmek mi istiyorsunuz? Cevabınız evet ise, satır içi stil uygun bir seçimdir. Herhangi bir seçici kullanmanıza gerek yoktur. Değişiklik yapmak için her HTML etiketine stil özniteliğini ekleyebilirsiniz. Ancak, her HTML etiketinin ayrı ayrı stilize edilmesi gerektiğinden, bu da zaman alıcı bir işlem olduğundan, satır içi stil önerilmez. Bununla birlikte, CSS dosyalarına erişemiyorsanız ve tek bir öğeyi stilize etmeniz gerekiyorsa, satır içi stil sizin için en iyisidir.

CSS Ne İçin Kullanılır?

Web Sitesi Bakımı: Bu işaretleme dili, web sitesi bakımında oldukça önemlidir. Web sitelerinin görünümünü iyileştirmek ve onları daha esnek ve çekici hale getirmek için kullanabilirsiniz. Ayrıca, HTML yapılandırması ve ilgili veri öğeleri dönüşümü konusunda size rahat ve sorunsuz bir şekilde yardımcı olabilir.
Sayfa Yüklemesini Hızlandırma: Yavaş yüklenen bir web sayfası, dijital dünyanın sinir bozucu sorunlarından biridir. CSS ile, HTML öğesinin özelliklerini her seferinde belirtmenize gerek yoktur. Bir öğe için tek bir kural belirleyebilir ve bu kuralı o öğenin birden çok tekrarında kullanabilirsiniz. Bu şekilde, kodu kısaltabilir ve web sitesinin yükleme süresini azaltabilirsiniz.
Web Tabanlı Bir Çevrimiçi Topluluk Oluşturma: CSS, çeşitli stil sayfası çerçeveleri içerir. Bu çerçeveleri kullanarak web tabanlı bir uygulama ve çevrimiçi topluluk geliştirebilirsiniz. Ayrıca, web tabanlı uygulamalar ve topluluklar oluşturmak, düzene koymak ve sürdürmek için CSS stil sayfası çerçevelerini kullanırken dahil edebileceğiniz bir dizi eklenti de mevcuttur.
Görüntüleri Güncelleme ve Şekillendirme: Bu kodu kullanarak görüntüleri şekillendirebilir, kenarlıklar ekleyebilir ve şekillerini ve boyutlarını değiştirebilirsiniz. Görüntülerin web sitenizde nasıl görünmesi gerektiğine karar vermenizi sağlar. Ayrıca, sonucu jpeg, gif ve png gibi farklı formatlarda alabilirsiniz. Daha sonra bunları gereksinimlerinize göre değiştirebilirsiniz. Küçük resimler, filigranlar ve görüntü kırpma oluşturmada da yardımcı olur.

CSS Kullanmanın Avantajları

Günümüzde bir web sitesi oluşturmak için 10.000’den fazla ücretsiz web şablonumuz var. Ancak bu şablonlar herhangi bir değişiklik uygulamak için çok kısıtlıdır. CSS öğrenerek, bu şablonları özelleştirebilirsiniz. Ayrıca, sıfırdan yepyeni bir web şablonu oluşturabilirsiniz.

Bu, CSS kullanmanın temel avantajlarından biridir. Ancak liste burada bitmiyor! Aşağıda dikkate almak isteyebileceğiniz bazı ek avantajlar bulunmaktadır:

CSS kullanarak, tüm web sayfaları için tek bir stil sayfası oluşturabilirsiniz. Bu nedenle, tüm web sitesini değiştirmeniz gerekirse, yalnızca o tek sayfayı değiştirmeniz yeterlidir.
CSS, kodları seçiminize göre düzenlemenize yardımcı olur. En değerli ve anahtar kelime odaklı içeriği en üste ekleyebilir ve daha az önemli olanları ana içeriğin altına kaydırabilirsiniz. Bu sayede, web sitenizin arama motorlarındaki sıralamasını artırabilirsiniz.
Web sitenizin çok çeşitli cihazlarla uyumlu olmasını sağlar.

HTML ve CSS Arasındaki Fark Nedir?

HTML ve CSS, bir web sitesi oluşturmak veya tasarlamak için yapı taşları olsa da, aslında farklıdırlar. İşte ikisi arasındaki bazı belirgin farklar:

CSS’i Çevrimiçi Öğrenebilir misiniz?

Bu kılavuz temel bilgileri kapsasa da, profesyonel bir web geliştiricisi olmak istiyorsanız öğrenmeniz gereken çok daha fazla şey var. Faik Yılmaz’ın portfolyo sitesinden veya Emeritus gibi platformlardan çevrimiçi kodlama kursları alarak web geliştirme alanında kariyer yapabilirsiniz.

Son Sözler

Anlayacağınız üzere, CSS web geliştirme dünyasında vazgeçilmez bir yere sahip. İster deneyimli bir geliştirici olun, ister bu alana yeni adım atıyor olun, CSS bilgisi ve becerisi size büyük avantaj sağlayacaktır. Web sitenizin görünümünü iyileştirmek, kullanıcı deneyimini zenginleştirmek ve projelerinizi hayata geçirmek için CSS’i öğrenmeye ve kullanmaya başlayın.

Unutmayın, sürekli öğrenmek ve gelişmek bu alanda başarılı olmanın anahtarıdır. CSS’in sunduğu olanakları keşfedin ve yaratıcılığınızı web projelerinize yansıtın. Başarılar dilerim!