CSS Nedir?
CSS Nedir? Cascading Style Sheets kelimelerinin baş harflerinden oluşan CSS, Basamaklı Stil Şablonları veya Basamaklı Biçim Sayfaları anlamına gelmektedir. HTML belgelerine stil verme ve HTML belgelerine ek olarak metin ve format biçimlendirme alanında fazladan imkanlar sunan bir işaretleme dildir. CSS, HTML öğelerinin ekranda veya diğer ortamlarda nasıl görüntüleyeceğini belirler.
CSS birçok konuda zaman tasarrufu ve performans sağlar, mesela bir web sayfasında birbiriyle uyumlu birkaç renk ve birkaç yazı tip kullanılır bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS ile bir seferde tanımlayıp bütün web sayfalarında ortak kullanılır. Bu sayede web sayfasının hafıza boyutu küçüleceğinde güncelleme işlemleri de daha kolay olacaktır. Fakat CSS çıkmadan önce hazırlanan her bir HTML etiketi için ayrı ayrı stil tanımlamak gerekiyordu.
Neden CSS
- İçerisinde birçok stil özelliği bulunmaktadır.
- HTML de stil vermek için her bir stil için ayrı eleman eklemek gerekmektedir. Fakat CSS ise tek bir eleman ile yapılabilmektedir.
- HTML de her etikete yeni bir özellik eklemek için başka bir özellik yada etiket eklemek gerekir. Fakat CSS de ise aynı işlem için kısa bir kod oluşturmak yeterlidir.
- HTML de stil eklemek için uzun kodlar yazmak ciddi bir zaman kaybı oluşturmaktadır. Fakat CSS is çok kısa zamanda yapıldığından kullanıcılara çok ciddi zaman kazandırır.
- HTML de çok sayıda kod kullanımı sayfa boyutunu büyüteceğinden performans sıkıntısı da oluşturmaktadır. CSS ise kısa kod kullanımı sayfa boyutunu büyütmez ve çok performanslı web sayfaları oluşturulabilmektedir.
- Tüm siteleriniz tek bir CSS dosyası ile çok rahat bir şekilde yönetilebilmektedir. Buda kullanıcılara zaman kazandıran ayrı bir faydasıdır.
- Tek bir CSS dosyası kullanılması sayesinde web sayfaları aynı düzende sunum yapacağından ziyaretçilerinize birbirleriyle uyumlu ve tutarlı yayın yapacaktır.
CSS tümleşik bir standart da olması onu çok daha kullanışlı ve önemli yapmaktadır. HTML göre daha kullanışlı bir kodlama geliştirildiğinde CSS ‘nin uyumlu altyapısı ile birleştiğinde çok daha kaliteli ve etkili web sayfaları oluşacağı düşünülmektedir.
CSS Sözdizimi
CSS’nin sözdizimi kuralı, bir seçici ve bir bildirim bloğundan oluşmaktadır.
Seçici: Stil vermek istenen HTML öğesini işaret eder.
Bildirim alanı: Örnekte de gördüğünüz gibi noktalı virgülle ayrılan bir veya daha çok bildirim içerirler. Her bildirim iki nokta üst üste ile ayrılmış bir CSS özelliği adı ve bir değer içermektedir. Birden çok CSS bildirimi noktalı virgülle ayrılır ve bildirim blokları kaşlı ayraçlarla çevrilir.
CSS kullanım alanları
CSS kodları HTML kodlarının içine yazıla bildiği gibi harici bir CSS dosyası oluşturularak da eklenebilmektedir. Bir stil sayfası eklemenin harici CSS, dahili CSS, satır içi CSS olmak üzere üç yolu bulunmaktadır.
Örnekler;
Harici CSS
Harici bir CSS dosyasını basit bir şekilde aşağıdaki gibi yazılıp eklenebilirsiniz.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Örnek Başlık</h1>
<p>Örnek paragraf</p>
</body>
</html>Ayrıca harici bir stil sayfası herhangi bir metin düzenleyicide yazılabilmektedir ve .CSS uzantısıyla kaydedilmelidir.
Harici bir stil sayfasının en önemli farklarından biride güncelleme yapılacağı zaman anlaşılmaktadır. Stil sayfasında tek tek metin formatı veya renk değiştirme vs. ile uğraşmaya gerek kalmamaktadır. Bunun yerine harici stil dosyasında güncelleme yapılıp tek seferde sayfa stilleri kolaylıkla değiştirilebilmektedir. Ayrıca stil verilerinin tek bir dosyadan gelmesi sayfaların daha sistemli ve birbirleri ile düzenli ve renk olarak daha uyumlu çalışmasını sağlamaktadır. Bu sayede harici stil sayfaları zaman kazancı ve kolaylık sağlamaktadır.
Dahili CSS
CSS kodlarının HTML kodlarının içerisinde kullanımıdır. CSS kodu HTML sayfasının bölümünün içerisindeki öğesi içerisine tanımlanmaktadır. Ayrıca HTML içerisinde kullanılmasından gömülü CSS olarak adlandırılmaktadır.
Dahili CSS örnek;
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
}
h1 {
color: red;
margin-left: 40px;
}
p {
color: yellow;
margin-left: 20px;
}
</style>
</head>
<body>
<h1>mytoworld.com</h1>
<p>Hoş geldiniz.</p>
</body>
</html>
Satır içi CSS
Satır içi CSS, tek bir öğeye benzersiz bir stil uygulamak için kullanılabilir. HTML belgelerine stil eklemek için kullanılır. Eklenmek istenen stil herhangi bir CSS özelliğini içerebilir.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red;text-align:center;">mytoworld.com</h1>
<p style="color:black;text-align:center">Hoş geldiniz.</p>
</body>
</html>
Bir yanıt bırakın