Web Tasarım | Web Sitesi Tasarımı | Profesyonel Web Sitesi | Web Tasarım Fiyatları

CSS nedir diye sorulan bir soruya kelime açılı olarak “Cascading Style Sheets” (Türkçe karşılığı “Basamaklı Biçim Sayfaları”) denilmektedir. Genel ve bilinen kısaltması olan CSS ile telaffuz edilmektedir. CSS bir markup (işaretleme) dilidir.

CCS’ in tarihini, çeşitlerini, kullanım amacını ve faydalarını anlatmaya başlayalım.

CSS Nedir? CSS ile neler yapılır?

CSS bir web sayfasının görsel tasarımını, renk uyumunu, nesne stilleri ve efektlerini kullanmamızı sağlar. Resimler hariç siteyi oluşturan yüksek oranda tüm tasarımlar CSS kodları ile yapılmaktadır. Sitenin arka planına renk vermek, herhangi bir renkte buton yapmak, bu butonun üstüne geldiğinizde farklı rengin çıkması ya da tıkladığınız andaki rengini değiştirme veya bir sayfada o menüde aktif duruyorsanız onun bile rengini biçimlendirmenizi sağlar.

Kısacası CSS harika bir işaretleme dilidir. Karıştırmayalım ki CSS asla bir programlama dili değildir. Bu yüzden sadece belirli kodlar ile tasarım geliştirebilirsiniz. Bir proje geliştiremezsiniz. Sadece projenin bir tasarımını oluşturabilirsiniz. Daha özetle belirtmek gerekirse CSS size 2+2 sonucunu hesaplamaz. Ama PHP, Java, Asp.Net, C#, C++, Python ve benzeri yazılım dilleri ise bu hesaplamayı rahatlıkla yapabilmektedir. HTML ve CSS arasındaki farkı anlayabilmeniz için yaptığımız örneği inceleyebilirsiniz.

CSS Nedir dedik ve açıkladık. CSS’ ten tek başına bir site yapamazsınız. Muhakkak HTML dili de kullanmanız gerektiği bu ikilinin ayrılmaz bir bütün olduğunu göstermektedir.
CSS Nedir dedik ve açıkladık. CSS’ ten tek başına bir site yapamazsınız. Muhakkak HTML dili de kullanmanız gerektiği bu ikilinin ayrılmaz bir bütün olduğunu göstermektedir.

CSS’ in Tarihi

CSS, 1999 yılında HTML’ nin 4.01 sürümü ile karşımıza çıkmıştır. Web’ in doğum tarihi olarak anılan bu yılda kullanıcıya odaklanan çok renkli siteler ortaya çıkmıştır.

Peki, bu CSS nerede ve nasıl kullanılır?

CSS kullanımının 3 farklı aşaması vardır. Bu aşamalar CSS kodlarını web yazılım programları ile birlikte kullanma imkânı tanır.

1.Aşama İç Kullanım (internal)

Tanımı: CSS kodlarımızı HTML <head> <head/> tagının içine <style> tagı içinde kullandığımız bölümdür.

Kullanım Örneği:

<html>
<head>
<title>Sayfa</title>
<style type=”text/css”>
.ornekCerceve {
padding:10px;
border:solid 1px black;
}
</style>
</head>
<body>

<p class=”ornekCerceve”>Burası CSS ile biçimlendirilmiş örnek bir paragraftır.</p>

</body>
</html>

Uygulama Çıktısı

CSS Nedir ? Uygulama 1 - İç Kullanım (internal)
CSS Nedir ? Uygulama 1 – İç Kullanım (internal)

2.Aşama Dış Kullanım (external)

Tanımı: CSS kodlarımızı HTML <head> <head/> tagının içine <link> tagı ile çağırdığımız biçimdir. Belirli bir internet kaynağında olan (sunucuda başka klasörde veya başka bir sitenin kaynağında bulunan) bağlantı yardımı ile çağırabileceğimiz seçenektir.

Biz ilk örnekteki <style> kodları aynı şekilde yazıp Notepad++ programından “style.css” olarak kaydettik ve aşağıda sitemizdeki bir bağlantı gibi dosyamıza dahil ettik. Satır arasına kalabalık yapıp sitenin açılmasını zorlaştırmadığı için arama motorları bu yöntemi önermektedir.

Önerimiz bu yöntemin kullanılmasından yanadır.

Kullanım Örneği:

<html>
<head>
<title>Sayfa</title>
<link href=”dosya-adresi/style.css” rel=”stylesheet”>
</style>
</head>
<body>

<p class=”ornekCerceve”>Burası CSS ile biçimlendirilmiş örnek bir paragraftır.</p>

</body>
</html>

Uygulama Çıktısı

CSS Nedir ? Uygulama 2 - Dış Kullanım (external)
CSS Nedir ? Uygulama 2 – Dış Kullanım (external)

3.Aşama Satır Kullanım (in-line)

Tanımı: CSS kodlarının HTML kodlarının aralarına yazıldığı bir yöntemdir. Nadiren kullanılmaktadır. Arama motorları siteleri indekslerken her şeyin olması gerektiği gibi kriterlere bağlı kalmasını ister. Bu yüzden site performansında düşüklük ve kod çakışmaları yaşanabilir.

Size önerimiz, tercihinizi her zaman 2. aşamada bulunan dış kullanım (external) modelini kullanmanız olacaktır.

Kullanım Örneği:

<html>
<head>
<title>Sayfa</title>
</head>
<body>

<p style=”padding:10px; border: solid 1px black;” >Burası CSS ile biçimlendirilmiş örnek bir paragraftır.</p>

</body>
</html>

Uygulama Çıktısı

CSS Nedir ? Uygulama 3 – Satır İçi Kullanım (in-line)

CSS’ in Kullanım Amacı?

CSS’in kullanımı ilk başlarda bahsettiğimiz gibi HTML 4.0 ile hayatımıza girmiş olmasıdır. CSS tasarımın bir web sayfasının tasarım temelidir. Bu yüzden günümüz teknolojisi için her web sayfası yapan kişi veya kurumlar CSS kullanmak zorundandır.

CSS’ in Faydaları Nelerdir?

Bir HTML etiketine devamlı olarak style atamanıza gerek kalmaz. CSS dosyamızda <p> tagı için yazı boyutunu 15px olarak düzenlersek sitenizdeki her <p> tagı otomatik olarak 15px’lik yazı boyutu ile yazılır.

Zamandan tasarruf diye buna denir!

Evrensel CSS kullanımı ile ilgili W3 School kaynağına bakabilirsiniz.

TIKLA ARA
WhatsApp