CSS Nedir?
CSS (Cascading Style Sheets), en temel haliyle HTML sayfalardaki başlık, metin, resim, video gibi öğelerin görsel özelliklerinin yanı sıra, sayfa yerleşimi ve bu yerleşimin farklı ekranlarda, cihazlarda, ekran, kağıt ya da diğer ortamlarda nasıl değişeceği bilgisini içerir.
Tarihi
CSS ilk kez 10 Ekim 1994 tarihinde, CERN’de Tim Barners-Lee ile birlikte çalışmakta olan Hakon Wium Lie tarafından önerilmiştir. Bunun ardından W3C (World Wide Web Consortium), çeşitli forum ve eposta listelerinde yapılan birkaç farklı stil sayfası dili taslağını da göz önünde bulundurarak, 1996 yılında ilk CSS önerisini sunmuştur (CSS 1).
İnternet kullanımının yaygınlaşması ve kullanım amaçlarının çeşitlenmesiyle doğan yeni ihtiyaçlar, W3C’nin 12 Mayıs 1998’de CSS 2 önerisini sunmasıyla sonuçlanmıştır. Hemen ardından 1999 yılında çalışmalarına başlanan CSS 3 ise, çeşitli özellikleri tanımlayan geniş bir özellik olan CSS 2'den farklı olarak, CSS 3 "modüller" olarak adlandırılan birkaç ayrı belgeye ayrılmıştır. Her modül, geriye dönük uyumluluğu koruyarak yeni özellikler ekler veya CSS 2'de tanımlanan özellikleri genişletir. CSS 3 günümüzde de geliştirilmeye devam etmektedir.
CSS Kullanmanın Yararları
- Görünüme dair tasarım özellikleri birden fazla öğede tekrar tekrar kullanılabilir. (Bir buton öğesine ait yazı boyutunu ve/veya rengini CSS ile ayarladıktan sonra, aynı özellikleri bir başka öğede yer alan textbox içinde de kullanabiliriz)
- Aynı ögeler üzerinde farklı özellikler uygulanabilir.
- Oluşturulan bir .css dosyası ile görsel özellikleri derli toplu tutarak, sabit bir HTML yapısındaki görselliğe ait değişiklikler yalnızca bir dosyayı düzenleyerek sağlanabilir.
- Farklı internet tarayıcı (browser) türleri ve mobil ya da masaüstü uygulamadan girişin tespiti ile farklı bir görünümler sunma imkanı yakalanabilir.
Nasıl Kullanılır?
CSS web sayfalarına ait özelliklerin tek tek ya da toplu olarak kontrol edilmesini sağlayan oldukça esnek ve kullanışlı bir yapıya sahiptir. CSS’de harici stil sayfası, dahili stil sayfası ve etiket içine yazılan stiller olmak üzere 3 farklı yöntemle kullanılır. Her bir yöntemin kullanım amacına ve yerine göre sahip olduğu çeşitli avantajlar vardır.
-
Inline CSS
<body>
<p style="color: blue;">This is a paragraph.</p>
</body>Belirli bir HTML etiketi için kullanılır. Bu seçenekte her HTML elementinin tek tek stil uygulanması gerektiği için bu şekilde CSS kullanımı önerilmez. Ancak yalnızca tek bir öğe için stil uygulamak zorunda olunan durumlarda bu seçenek yararlı olabilir.
-
Internal CSS
<head>
<style type="text/css">
body { background-color:blue; }
p { color: yellow; }
</style>
</head>İhtiyaç duyulan CSS kodlarının HTML sayfa içerisindeki <head></head> etiketi içerisinde kullanılan yazım biçimidir.
-
External CSS
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>Herhangi bir metin düzenleyici ile (Notepad++ vb.) hazırlanan ve .css uzantılı bir doküman olarak kaydedilen dosyayı link etiketi ile HTML içerisinde çağırılarak kullanılan yazım biçimidir.
