HTML ile bir web sayfasının yapısını oluşturduk. Şimdi ise bu yapıyı daha estetik hale getirecek ve kullanıcı dostu bir hale getirecek olan CSS'e (Cascading Style Sheets) göz atalım. CSS, web sayfalarının görünümünü düzenleyen bir stil sayfası dilidir. HTML, içerik ve yapı sağlarken, CSS ise bu içeriğin nasıl görüneceğini belirler.
CSS Neden Gereklidir?
HTML yalnızca metin, resim ve diğer içeriklerin yerleşimini tanımlar. Ancak bu içeriklerin nasıl görüneceğini (renkler, fontlar, düzenler vb.) belirlemek için CSS gereklidir. CSS, web sayfalarının görsel tasarımını kolayca değiştirebilmemizi sağlar. Aynı HTML yapısı farklı CSS stilleriyle tamamen farklı görünümler elde edebilir.
CSS Kullanmanın Avantajları
- Sayfa düzenini kolayca değiştirme imkanı sağlar.
- Web sayfalarının daha hızlı yüklenmesini sağlar (ayrı dosya olarak yüklenir).
- Yönetimi daha kolaydır. Web sitesinin tüm stilini tek bir dosya ile kontrol edebilirsiniz.
- Çeşitli cihazlarda uyumlu tasarımlar yapmamıza olanak tanır (responsive design).
CSS’in Son Gelişmiş Versiyonu
CSS’in en son geliştirilmiş versiyonu CSS3’tür. CSS3, önceki sürümlere göre çok daha fazla özellik sunar. Animasyonlar, geçişler (transitions), flexbox ve grid gibi modern düzen özellikleri CSS3 ile tanıtıldı. CSS3, mobil uyumlu (responsive) ve dinamik web sayfaları oluşturmak için gerekli araçları içerir.
HTML İçinde CSS Kullanımı
CSS, HTML dosyasının içinde yerleşik olarak da kullanılabilir. Bu yöntemde <style> etiketi kullanılır ve stil kuralları doğrudan HTML dosyasına yazılır. Bu yöntem, küçük projelerde ya da hızlıca denemeler yapmak için uygundur.
<html>
<head>
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS İçinde HTML Örneği</h1>
<p>Bu bir pargraf örneğidir.</p>
</body>
</html>
Yukarıdaki örnekte, sayfa arka plan rengi ve başlık rengi CSS ile belirlenmiştir.
HTML Dışında CSS Kullanımı
Bir diğer yaygın kullanım şekli, CSS'i dış bir dosyada tutmaktır. Bu yöntem, stil kurallarının tek bir dosyada toplanarak, sayfa yükleme sürelerini iyileştirir ve yönetimi kolaylaştırır. Dış stil dosyası, <link> etiketiyle HTML sayfasına bağlanır.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>CSS Dış Dosyası Örneği</h1>
<p>Bu bir pargraf örneğidir.</p>
</body>
</html>
Ve dış CSS dosyasının içeriği şöyle olabilir:
body {
background-color: lightgreen;
font-family: 'Verdana', sans-serif;
}
h1 {
color: purple;
text-align: center;
}
Bu örnekte, dış bir CSS dosyasından stil kuralları alınarak HTML sayfası stilize edilmiştir.
CSS Temel Seçicileri
CSS ile belirli HTML öğelerini seçerek stil vermek için seçiciler (selectors) kullanılır. İşte birkaç temel seçici türü:
- Element Seçici: Doğrudan bir HTML etiketine stil uygular. Örneğin, tüm
<p>etiketlerine stil ekler.
p {
color: red;
}#header {
background-color: #333;
color: white;
}.button {
padding: 10px 20px;
background-color: blue;
color: white;
}<div> içindeki <p> öğesi.div p {
font-size: 14px;
}CSS ile Renk ve Yazı Tipi Düzenlemeleri
CSS, sayfanın metin rengini, arka planını, yazı tipini ve diğer görsel özelliklerini değiştirebilir. İşte birkaç örnek:
body {
background-color: #f4f4f4;
color: #333;
font-family: 'Helvetica', sans-serif;
}
h2 {
color: #008080;
}
p {
line-height: 1.6;
}
Bu kurallar sayfanın genel görünümünü değiştirecek, metinlerin rengi, fontu ve satır aralıkları gibi detayları yönetecektir.
Özet
CSS, web sayfalarının görsel tasarımını ve düzenini yönetmek için temel bir araçtır. HTML ile sayfanın yapısını oluştururken, CSS ile bu yapıya stil ekleriz. CSS'in son versiyonu olan CSS3, modern web tasarımında çok güçlü araçlar sunar. CSS'in içinde ve dışında kullanımını öğrendik ve temel stil kurallarıyla ilgili örnekler gördük. Web sayfalarınızda CSS kullanarak çok daha estetik ve kullanıcı dostu tasarımlar oluşturabilirsiniz.
Bir sonraki bölümde, CSS'in daha gelişmiş özellikleri ve tekniklerine odaklanarak web sayfalarınızı daha interaktif hale getireceğiz!
Yorumlar
Henüz yorum yapılmamış. İlk yorumu siz yapın!