CSS, HTML ve diğer işaretleme dilleriyle birlikte kullanılan bir stil dilidir. Web sayfalarına görsel düzen ve stil kazandırmak için kullanılır. CSS’nin temelini oluşturan syntax (sözdizimi) kuralları, belirli öğelerin nasıl tasarlanacağını belirler. İşte CSS syntax’ı hakkında temel bilgiler ve örnek kod blokları:
Temel CSS Syntax:
CSS syntax’ı genelde şu şekildedir:
selector {
property: value;
}
- Selector (Seçici): HTML belgesinde stil uygulanacak öğeyi seçer. Örneğin,
h1seçici, tüm başlık 1 öğelerini seçer. - Property (Özellik): Seçilen öğeye uygulanacak stil özelliğini belirler. Örneğin,
colorözelliği, metnin renk özelliğini kontrol eder. - Value (Değer): Belirlenen stil özelliğine atanacak değeri ifade eder. Örneğin,
color: blue;ifadesinde “blue” değeri, metin rengini belirler.
Örnek Kod Blokları:
1. Metin Rengini Değiştirmek:
h1 {
color: red;
}
Bu kod bloğu, tüm <h1> başlıklarının metin rengini kırmızıya ayarlar.
2. Arka Plan Rengini Değiştirmek:
body {
background-color: #f0f0f0;
}
Bu kod bloğu, sayfanın arka plan rengini gri tonlarında bir renk kodu olan #f0f0f0 olarak belirler.
3. Kenarlık Eklemek:
img {
border: 1px solid #333;
}
Bu kod bloğu, tüm resimlere 1 piksel kalınlığında, siyah renkte bir kenarlık ekler.
CSS Syntax İpuçları:
- Her özellik-değer çifti sona erdikten sonra noktalı virgül (
;) eklenmelidir. - Birden fazla stil kuralı arasında boşluklar bırakılabilir.
- CSS dosyaları genellikle
.cssuzantılı olarak kaydedilir ve HTML belgesine<link>elementiyle eklenir.
CSS syntax’ını anlamak, web sayfalarını estetik ve düzenli bir şekilde tasarlamanın ilk adımıdır. Bu basit örnekler, CSS’nin temel syntax’ını kavramanıza yardımcı olabilir. İlerledikçe daha karmaşık seçiciler, pseudo-class’lar ve diğer CSS konseptleriyle tanışabilir ve sayfalarınızı daha profesyonel bir görünüme kavuşturabilirsiniz.