CSS Ne Demek?

CSS (Cascading Style Sheets) Nedir?

CSS (Cascading Style Sheets), web sayfalarının görünümünü ve düzenini belirlemek için kullanılan bir stil dilidir. HTML, bir sayfanın içeriğini tanımlar, ancak CSS sayfanın görsel sunumunu yönetir. CSS ile renkler, yazı tipleri, hizalamalar, düzenler ve daha fazlası gibi stil özellikleri kontrol edilir.

CSS'in Temel Özellikleri

1. Sayfa Düzeni ve Tasarım: CSS, web sayfalarının düzenini belirler. Sayfa öğelerinin yerleşimi, kenar boşlukları, hizalamalar ve boyutlar CSS ile düzenlenebilir.

2. Renk ve Stil: CSS, metin renklerini, arka plan renklerini, yazı tipi stillerini ve diğer stil özelliklerini ayarlamak için kullanılır.

3. Responsive (Duyarlı) Tasarım: CSS, farklı ekran boyutları ve cihazlar için uyumlu sayfalar oluşturmayı sağlar. Bu, mobil uyumlu ve çoklu cihazlarda doğru görünen sayfalar tasarlamayı mümkün kılar.

4. Dinamik Stil Yönetimi: CSS, öğelere hover (fare ile üzerine gelme), odaklanma, tıklama gibi durumlar için stil değişiklikleri uygulanmasına izin verir.

CSS Temel Söz Dizimi

CSS, seçiciler ve özellikler ile çalışır. Seçici, hangi HTML öğelerine stil uygulanacağını belirtir, özellik ise hangi stilin uygulanacağını belirler.

Örnek

selector {  property: value;}

• Selector: Stil uygulanacak HTML öğesini tanımlar (örneğin, <h1>, <p>, .class, #id).
• Property: Uygulanacak stil özelliği (örneğin, renk, yazı tipi, boyut).
• Value: Belirli bir stilin değeri (örneğin, red, 16px, bold).

Örnek CSS Kodu

h1 {  color: blue;  font-size: 24px;}
p {  font-family: Arial, sans-serif;  line-height: 1.6;}

Bu örnekte, h1 başlıklarının rengi mavi yapılmış ve font boyutu 24px olarak belirlenmiş; p paragraflarının yazı tipi Arial ve satır yüksekliği 1.6 olarak ayarlanmış.

CSS Seçiciler

CSS'de farklı tiplerde seçiciler kullanarak stil uygulanacak öğeler belirlenir. İşte bazı temel seçiciler:

1. Eleman Seçicisi: Belirli bir HTML elemanına stil uygular.

   p {  color: red;}

2. Sınıf Seçicisi (.class): Belirli bir sınıfa sahip öğelere stil uygular.

   .header {  font-size: 20px;}

3. Kimlik Seçicisi (#id): Belirli bir ID'ye sahip öğelere stil uygular.

   #main-header {  text-align: center;}

4. Genel Seçici (*): Sayfadaki tüm öğelere stil uygular.

   * {  margin: 0;
     padding: 0;}

5. Çocuk Seçici (>): Bir öğenin doğrudan alt öğesine stil uygular.

   div > p {  color: green;}

6. Evrensel Seçici (*): Sayfadaki tüm öğelere stil uygular.

   * {  font-family: Arial, sans-serif;}

7. Öznitelik Seçici: Belirli bir özniteliğe sahip öğelere stil uygular.

   input[type="text"] {  border: 1px solid #ccc;}

CSS Özellikleri

1. Renkler ve Arka Plan:

   • color: Metin rengini belirler.
   • background-color: Arka plan rengini belirler.

   h1 {  color: #333;
     background-color: #f0f0f0;}

2. Yazı Tipi ve Boyutları:

   • font-family: Yazı tipi ailesini belirler.
   • font-size: Yazı boyutunu belirler.
   • font-weight: Yazı kalınlığını belirler.

   p {  font-family: 'Arial', sans-serif;
     font-size: 16px;
     font-weight: bold;}

3. Mekansal Düzen:

   • margin: Öğelerin dışındaki boşluğu belirler.
   • padding: Öğenin içindeki boşluğu belirler.
   • width ve height: Öğelerin genişlik ve yüksekliğini belirler.

   div {  margin: 10px;
     padding: 20px;
     width: 300px;}

4. Kutu Modeli (Box Model): Her HTML öğesi bir kutu olarak kabul edilir ve bu kutunun dış, iç boşlukları, kenarlıkları ve boyutları CSS ile kontrol edilebilir.

5. Dönüşüm (Transform): Öğelerin şekil ve pozisyonlarını değiştirmek için kullanılır.

   div {  transform: rotate(45deg);}

6. Yerleşim (Positioning): Öğelerin sayfa üzerindeki yerini kontrol etmek için static, relative, absolute, fixed ve sticky gibi konumlandırma özellikleri kullanılabilir.

   .box {  position: absolute;
     top: 20px;
     left: 50px;}

CSS ile Duyarlı Tasarım (Responsive Design)

CSS, farklı cihaz ve ekran boyutlarına göre web sayfasının düzenini değiştirebilmek için media queries (medya sorguları) kullanılarak duyarlı tasarımlar oluşturulmasını sağlar. Bu, sayfanın masaüstü bilgisayar, tablet ve mobil cihazlarda farklı şekilde görüntülenmesini sağlar.

Örnek Media Query

@media screen and (max-width: 600px) {  body {    background-color: lightblue;  }
  h1 {    font-size: 20px;  }}

Bu örnekte, ekran genişliği 600px ve daha küçük olan cihazlarda body arka planı maviye döner ve başlık boyutu küçülür.

CSS'in Avantajları

1. Web Sayfası Performansı: CSS ile sayfa stilinin ayrılması, sayfa yüklenme hızını artırır çünkü HTML içeriği ve stil ayrı dosyalar olarak sunulabilir.
2. Tasarımda Esneklik: CSS, bir web sayfasının görünümünü kolayca değiştirmeye imkan tanır. Tasarım değişiklikleri birkaç satır kodla yapılabilir.
3. Duyarlı Web Tasarımı: CSS ile, sayfanın çeşitli cihazlar ve ekran boyutlarında uyumlu görünmesini sağlayan esnek düzenler oluşturulabilir.
4. Bakım Kolaylığı: CSS, stilin HTML içeriğinden ayrılmasını sağlar, bu da sayfanın bakımını ve güncellenmesini kolaylaştırır.

Sonuç

CSS, web tasarımının temel taşlarından biridir ve HTML ile birlikte kullanılarak web sayfalarının görsel düzenini ve stilini belirler. Kullanıcı deneyimini iyileştirmek, sayfa yüklenme hızını artırmak ve çoklu cihazlarda uyumlu tasarımlar oluşturmak için CSS çok önemli bir rol oynar.