CSS (Cascading Style Sheets), yani Basamaklı Stil Şablonları, bir web sayfasının görünümünü ve düzenini kontrol eden bir dildir. HTML ile birlikte kullanılarak web sayfalarının yapısal içeriğine stil uygulanır ve bu içeriklerin nasıl görüntüleneceğini belirler. CSS, bir web sitesinin sadece metin veya görüntü olarak değil, aynı zamanda estetik ve kullanılabilirlik açısından nasıl şekilleneceğini sağlar.
CSS’in Temel Amacı
CSS’in ana amacı, HTML tarafından tanımlanan bir web sayfasının görünümünü şekillendirmektir. HTML sadece bir web sayfasının içeriğini tanımlar (metinler, başlıklar, görseller vs.), ancak bu içeriklerin nasıl görüneceğini (renk, yazı tipi, arka plan, düzenleme) belirlemez. CSS, bu boşluğu doldurarak HTML’yi görsel olarak şekillendirir.
CSS’in Avantajları
- Tasarım ve İçeriği Ayırma: HTML içeriği ve CSS stili birbirinden ayrılır. Bu, kodun daha temiz ve düzenli olmasını sağlar. Stil dosyaları ayrı tutulduğunda, aynı stil kuralları birden fazla sayfa için uygulanabilir.
- Tutarlılık: Bir web sitesinde birçok sayfa olabilir ve CSS ile tüm sayfalara tutarlı bir stil uygulanabilir. Bir değişiklik yapılması gerektiğinde, CSS dosyasındaki stil değiştirilerek tüm site güncellenebilir.
- Daha Az Kod: Aynı HTML sayfasına farklı stiller uygulamak için her öğeye stil vermek yerine CSS ile merkezi bir kontrol sağlanır. Böylece daha az kod yazılır.
- Bakım Kolaylığı: Tasarımı değiştirmeniz gerektiğinde, her sayfadaki HTML ile uğraşmak yerine sadece bir CSS dosyasında düzenleme yaparak tüm siteyi güncelleyebilirsiniz.
CSS’in Yapısı
CSS, HTML belgelerinde kullanılan elementlere stiller uygulamak için kurallar tanımlar. Her bir CSS kuralı üç ana bileşenden oluşur: Seçici (Selector), Özellik (Property) ve Değer (Value).
Temel CSS Söz Dizimi (Syntax)
seçici {
özellik: değer;
}
- Seçici (Selector): Stil uygulanacak olan HTML öğesini tanımlar. Örneğin, bir paragraf öğesine (
<p>
) stil uygulamak istiyorsanız,p
seçicisini kullanırsınız. - Özellik (Property): Hangi stil özelliğinin ayarlanacağını belirler. Örneğin, metnin rengini belirlemek için
color
özelliği kullanılır. - Değer (Value): Stil özelliğine hangi değerin atanacağını belirtir. Örneğin,
color
özelliği içinred
değeri atanabilir.
Örnek CSS Kuralı
p {
color: blue;
font-size: 16px;
}
Yukarıdaki CSS kuralı, sayfadaki tüm paragraf (<p>
) öğelerine şu iki stil özelliğini uygular:
- Yazı rengi mavi olur.
- Yazı boyutu 16 piksel olur.
CSS Uygulama Yöntemleri
CSS’i bir web sayfasına eklemenin birkaç yolu vardır:
- Satır İçi Stil (Inline Style):
Stil doğrudan HTML öğesinin içinde tanımlanır. Bu yöntem, genellikle sadece küçük değişiklikler için tercih edilir.
<p style="color: red;">Bu kırmızı renkli bir paragraf.</p>
- Dahili Stil (Internal Style):
CSS kuralları, sayfanın<head>
bölümünde tanımlanır. Bu, sadece o sayfada geçerli olur.
<head>
<style>
p {
color: green;
}
</style>
</head>
- Harici Stil (External Style):
Stil kuralları ayrı bir CSS dosyasında tanımlanır ve HTML dosyasına link verilerek bağlanır. Bu yöntem en yaygın ve önerilen yöntemdir, çünkü sitenin stilini tek bir dosyada yönetmeyi sağlar.
<head>
<link rel="stylesheet" href="styles.css">
</head>
- Bu durumda,
styles.css
dosyasında tüm stil kuralları tanımlanır.
CSS Seçiciler
Seçiciler, HTML öğelerini hedeflemek ve onlara stil uygulamak için kullanılır. CSS’de birçok farklı türde seçici vardır:
- Tip Seçici (Type Selector):
HTML öğesinin adını kullanarak belirli bir öğeye stil uygulamak. Örneğin, tüm<p>
etiketlerine stil uygulamak için:
p {
color: blue;
}
- Sınıf Seçici (Class Selector):
Aynı sınıfa sahip birden fazla öğeye stil uygulamak için kullanılır. Sınıflar.
ile tanımlanır:
.highlight {
background-color: yellow;
}
Bu sınıfı HTML’de şu şekilde kullanabilirsiniz:
<p class="highlight">Bu vurgulanmış bir paragraf.</p>
- ID Seçici (ID Selector):
Belirli bir öğeye stil uygulamak için kullanılır. Bir sayfa içinde benzersiz olan öğeler için ID kullanılır. ID’ler#
ile tanımlanır:
#header {
background-color: lightblue;
}
Bu ID’yi HTML’de şu şekilde kullanabilirsiniz:
<div id="header">Başlık</div>
- Evrensel Seçici (Universal Selector):
Sayfadaki tüm öğelere stil uygulamak için kullanılır:
* {
margin: 0;
padding: 0;
}
- İlişkisel Seçiciler:
Belirli bir HTML yapısı içindeki öğeleri hedef almak için kullanılır. Örneğin, bir sınıf içindeki<p>
etiketlerine stil vermek:
.container p {
color: red;
}
CSS Box Model
CSS’de her öğe, bir kutu modeline dayanır. Bu model, her öğeyi bir dikdörtgen kutu olarak düşünür ve öğenin çevresindeki boşlukları ve sınırları yönetir.
- İçerik (Content): Öğenin içeriği; metin veya görsel olabilir.
- Dolgu (Padding): İçerik ile sınır arasındaki boşluktur.
- Kenarlık (Border): Öğeyi çevreleyen sınırdır.
- Dış Boşluk (Margin): Kenarlık ile çevredeki diğer öğeler arasındaki boşluktur.
Responsive (Duyarlı) Tasarım
CSS, ekran boyutlarına göre stil uygulayarak web sitelerinin farklı cihazlarda (masaüstü, tablet, telefon) iyi görünmesini sağlar. Media Queries bu amaçla kullanılır. Örneğin, küçük ekranlar için farklı bir düzen belirlemek için şunu kullanabilirsiniz:
@media only screen and (max-width: 600px) {
body {
background-color: lightgrey;
}
}
Sonuç
CSS, web tasarımında olmazsa olmaz bir teknolojidir ve bir web sayfasının görünümünü kontrol ederek sayfaların estetik ve fonksiyonel olmasını sağlar. HTML, sayfanın içeriğini tanımlarken, CSS bu içeriğin nasıl görüntüleneceğini belirler ve bir web sitesine profesyonel bir görünüm kazandırır.
İçerikler ChatGPT ile oluşturulmuş ve teyide muhtaç bilgilerdir.Sorun veya önerinizi iletişim sayfasından yazabilirsiniz.
Yorum Yap