Cascading Style Sheets (CSS), web sayfalarının görünümünü ve düzenini kontrol etmek için kullanılan bir stil dilidir. HTML’in yanında kullanılan bir teknoloji olan CSS, web geliştiricilerine web sayfalarını daha çekici ve estetik hale getirme imkanı sağlar. Bu makalede, CSS’in ne olduğunu ve nasıl kullanıldığını anlatacağım.
CSS’in Temel İşlevi
CSS’in temel amacı, HTML veya diğer belge biçimlendirme dilleriyle oluşturulan içeriğin görsel sunumunu kontrol etmektir. Bir web sayfasını düzenlemek, fontları, renkleri, arka planları, hizalamaları ve diğer stil özelliklerini değiştirerek yapılır. CSS, web sayfalarını daha tutarlı, erişilebilir ve kullanıcı dostu hale getirir.
CSS Kullanımı
CSS kullanmak için üç farklı yöntem vardır: Dahili Stil, Gömülü Stil ve Harici Stil.
Dahili Stil:
Dahili stil kullanarak CSS kodunu HTML belgesi içine yerleştirebilirsiniz. HTML etiketleri arasında <style> etiketi kullanarak CSS kurallarını belirtirsiniz. Örneğin:
<html>
<head>
<title>CSS Örneği</title>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<h1>Merhaba, CSS!</h1>
</body>
</html>Gömülü Stil:
Gömülü stil kullanarak CSS kodunu bir HTML etiketi içinde belirtebilirsiniz. <style> etiketini <head> bölümüne ekleyerek stil kodlarınızı tanımlayabilirsiniz. Örneğin:
<html>
<head>
<title>CSS Örneği</title>
</head>
<body>
<h1 style="color: blue; font-size: 24px;">Merhaba, CSS!</h1>
</body>
</html>Harici Stil:
Harici stil kullanarak CSS kodunu ayrı bir CSS dosyasında tanımlayabilir ve HTML belgesine bağlantı yapabilirsiniz. CSS dosyasını oluşturduktan sonra, <link> etiketini kullanarak HTML belgesiyle ilişkilendirebilirsiniz. Örneğin:
<html>
<head>
<title>CSS Örneği</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h1>Merhaba, CSS!</h1>
</body>
</html>Yukarıdaki örneklerde kullanılan CSS kuralları, <h1> başlığının mavi renkte ve 24 piksel büyüklüğünde olmasını sağlar. CSS, HTML etiketlerine uygulanacak stilleri seçiciler ve deklarasyonlar aracılığıyla belirtir. Seçiciler, hangi HTML elemanlarına stil uygulanacağını belirtirken, deklarasyonlar stil özelliklerini ve değerlerini içerir.
Örneğin, h1 seçici, tüm <h1> başlıklarını hedeflerken, color deklarasyonu mavi renkte bir metin sağlar.
CSS Kuralı Örnekleri:
h1 {
color: blue;
font-size: 24px;
}
p {
color: #333333;
font-family: Arial, sans-serif;
}Yukarıdaki örnek, h1 başlıklarını mavi ve 24 piksel büyüklüğünde, <p> paragraflarını ise #333333 renginde ve Arial fontunda gösterir.
CSS, web sayfalarının görünümünü kontrol etmek ve düzenlemek için güçlü bir araçtır. Dahili stil, gömülü stil ve harici stil olmak üzere farklı kullanım yöntemleri vardır. CSS kullanarak web sayfalarınızı daha estetik, erişilebilir ve kullanıcı dostu hale getirebilirsiniz. CSS hakkında daha fazla bilgi edinmek için CSS kaynaklarından yararlanabilir veya deneyerek kendinizi geliştirebilirsiniz.
