CSS, web sayfalarının görsel tasarımını oluşturmak için kullanılan güçlü bir dildir. CSS, sayfadaki metin, görsel ve öğelerin stilini belirler. CSS’in temel özelliklerini, tanımlarını ve nasıl kullanıldıklarını ayrıntılı olarak açıklayalım.

Metin Stil Özellikleri

font-family

• Bu özellik, bir öğenin yazı tipini belirler. Genellikle birincil yazı tipi ile birlikte, bir yedek yazı tipi de belirtilir. Eğer birinci yazı tipi yüklenemezse, yedek yazı tipi devreye girer.
• Örnek:

  
  p {
  font-family: 'Arial', sans-serif;
  }

font-size

• Bu özellik, yazı boyutunu belirler. px, em, rem, % gibi birimler kullanılarak belirlenebilir. px sabit piksel değerini, em ise bir öğenin font boyutuna bağlı olarak orantılı bir değeri ifade eder.
• Örnek:

  
  p {
  font-size: 16px;
  }

font-weight

• Yazının kalınlık seviyesini belirler. Değer olarak normal, bold gibi anahtar kelimeler kullanılabilir, ayrıca 100 ile 900 arasında sayı kullanarak daha hassas kalınlık ayarları yapılabilir.
• Örnek:

  
  p {
  font-weight: bold;
  }

font-style

• Yazının stilini belirler. normal (varsayılan), italic (italik) ve oblique (eğimli) gibi değerler alabilir.
• Örnek:

  
  p {
  font-style: italic;
  }

line-height

• Satır yüksekliğini belirler. Bu, metnin daha okunabilir olmasını sağlamak için kullanılır.
• Örnek:

  
  p {
  line-height: 1.5;
  }

text-align

• Metnin yatay hizalamasını belirler. Değer olarak left, right, center, justify gibi seçenekler kullanılır.
• Örnek:

  
  p {
  text-align: center;
  }

text-transform

• Metnin harflerini değiştirme işlevini görür. uppercase, lowercase, ve capitalize gibi değerler kullanılarak metnin harfleri dönüştürülür.
• Örnek:

  
  p {
  text-transform: uppercase;
  }

text-decoration

• Metne alt çizgi, üst çizgi, ortalama gibi süslemeler ekler. underline, line-through, overline, none gibi değerler alabilir.
• Örnek:

  
  p {
  text-decoration: underline;
  }

Arka Plan Özellikleri

background-color

• Bir öğenin arka plan rengini ayarlamak için kullanılır.
• Örnek:

  
  div {
  background-color: #f0f0f0;
  }

background-image

• Bir öğenin arka planına bir resim ekler. Resim URL’si belirtilerek, öğenin arka planına görsel eklenir.
• Örnek:

  
  div {
  background-image: url('background.jpg');
  }

background-repeat

• Arka plan resminin tekrar edip etmeyeceğini belirler. repeat, no-repeat, repeat-x, repeat-y gibi değerler kullanılabilir.
• Örnek:

  
  div {
  background-repeat: no-repeat;
  }

background-size

• Arka plan resminin boyutunu ayarlamak için kullanılır. cover (resim boyutu öğeyi tamamen kaplar) ve contain (resim öğenin tamamına sığacak şekilde ölçeklenir) gibi anahtar kelimeler kullanılır.
• Örnek:

  
  div {
  background-size: cover;
  }

background-position

• Arka plan resminin konumunu belirler. top, center, bottom gibi değerlerle birlikte daha hassas bir konumlama yapılabilir.
• Örnek:

  
  div {
  background-position: center;
  }

Kenarlık (Border) Özellikleri

border

• Öğenin kenar çizgilerini belirler. border: [width] [style] [color]; formatında kullanılır.
• Örnek:

  
  div {
  border: 2px solid #000;
  }

border-radius

• Öğenin köşelerini yuvarlatır. px veya em birimleriyle köşe yuvarlama değeri belirlenebilir.
• Örnek:

  
  div {
  border-radius: 10px;
  }

border-width

• Kenar çizgisinin kalınlığını belirtir.
• Örnek:

  
  div {
  border-width: 3px;
  }

border-style

• Kenarın çizgi stilini belirler. solid, dashed, dotted, double gibi değerler alır.
• Örnek:

  
  div {
  border-style: dashed;
  }

border-color

• Kenarın rengini ayarlamak için kullanılır.
• Örnek:

  
  div {
  border-color: red;
  }

Kutulama Modeli (Box Model)

CSS kutulama modeli, her HTML öğesinin dıştan içe doğru dört bölüme ayrıldığını belirtir: margin (dış boşluk), border (kenar çizgisi), padding (iç boşluk) ve content (içerik).

margin

• Öğenin dış kenarındaki boşluğu belirtir. Öğeler arasındaki boşlukları düzenlemek için kullanılır.
• Örnek:

  
  div {
  margin: 20px;
  }

padding

• Öğenin iç kenarındaki boşluğu belirler. İçerik ile kenar çizgileri arasındaki mesafeyi artırmak için kullanılır.
• Örnek:

  
  div {
  padding: 10px;
  }

width & height

• Öğenin genişliğini ve yüksekliğini belirler.
• Örnek:

  
  div {
  width: 100px;
  height: 50px;
  }

box-sizing

• Kutunun boyutlarının nasıl hesaplandığını belirler. Varsayılan olarak content-box kullanılır, fakat border-box ile border ve padding dahil edilir.
• Örnek:

  
  div {
  box-sizing: border-box;
  }

Flexbox ve Grid Yapısı

Flexbox

• Flexbox, öğeleri esnek bir düzen içinde hizalamak için kullanılır. Öğeler arasındaki boşlukları kontrol edebilir ve öğeleri yatay ya da dikey olarak hizalayabilirsiniz. display: flex; özelliği ile başlatılır.

CSS Grid

• Grid, daha karmaşık düzenler oluşturmak için kullanılır. Öğeler, satırlara ve sütunlara göre hizalanabilir. Grid ile daha kontrollü ve esnek tasarımlar yapılabilir.

CSS ile web tasarımınızı şekillendirebilir ve sayfanın her yönünü özelleştirebilirsiniz. Bu tanımlar, temel CSS özelliklerinin nasıl kullanıldığını ve hangi işlevleri yerine getirdiğini anlatmaktadır.