Tamer Çelenk

CSS (Cascading Style Sheets), web sayfalarının görünümünü düzenlemeye yarayan bir dil olup, HTML ile oluşturulmuş içeriğe stil ve biçim kazandırmak için kullanılır. CSS, web tasarımının temel taşlarından biridir ve her web geliştiricisinin öğrenmesi gereken bir araçtır. Bu yazıda, temel CSS özelliklerini ve bunların nasıl kullanıldığını ayrıntılı bir şekilde inceleyeceğiz. Renk, font, margin, padding gibi yaygın CSS özellikleri üzerinden örnekler vererek, stil verme işleminin temelini atacağız.

1. CSS Nedir ve Neden Kullanılır?

CSS, HTML veya XML gibi işaretleme dillerine stil eklemek için kullanılır. Bu stil özellikleri; renkler, yazı tipleri, kenar boşlukları, hizalama ve çok daha fazlasını kapsar. CSS’in başlıca avantajı, içerik ile tasarımı birbirinden ayırmasıdır. HTML, içeriği tanımlar, CSS ise bu içeriğin nasıl görüneceğini belirler.

CSS kullanarak bir web sayfasının daha estetik hale gelmesini sağlayabiliriz. Örneğin, yazı tipini değiştirebilir, bir öğeyi ortalayabilir veya bir sayfada farklı renk şemaları kullanabiliriz.

2. Temel CSS Özellikleri

2.1. Renk (Color)

Web tasarımında renklerin önemi büyüktür. CSS ile yazı, arka plan ve diğer öğelerin renklerini değiştirebiliriz. Renkler, genellikle color (yazı rengi) ve background-color (arka plan rengi) özellikleri ile belirlenir.

Örnek:

/* Yazı rengini kırmızı yapma */
h1 {
  color: red;
}

/* Arka plan rengini mavi yapma */
body {
  background-color: lightblue;
}

Renkler, CSS’te çeşitli formatlarda belirtilebilir:

• Renk adı (red, blue, green, vb.)
• HEX kodu (#FF0000, #00FF00, vb.)
• RGB değeri (rgb(255, 0, 0), rgb(0, 255, 0), vb.)
• RGBA (şeffaflık dahil) (rgba(255, 0, 0, 0.5), vb.)

2.2. Font (Yazı Tipi)

CSS ile metinlerin fontunu, boyutunu, kalınlığını ve diğer özelliklerini değiştirebiliriz. font-family, font-size, font-weight gibi özellikler, metin stilini değiştirmemizi sağlar.

Örnek:

/* Yazı tipi Arial, font büyüklüğü 20px, yazı kalınlığı normal */
p {
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: normal;
}

/* Başlıkları büyük yapmak */
h1 {
  font-family: 'Times New Roman', serif;
  font-size: 36px;
  font-weight: bold;
}

CSS’te yaygın olarak kullanılan font tipleri arasında serif, sans-serif, monospace gibi seçenekler bulunur. Ayrıca, dışarıdan font yüklemek için Google Fonts gibi kaynaklardan faydalanabilirsiniz.

2.3. Margin ve Padding

Margin ve padding, öğelerin etrafındaki boşlukları düzenler. Aralarındaki farkı anlamak önemlidir:

• Margin: Bir öğenin dışındaki boşluktur, yani öğenin çevresindeki alanı belirler.
• Padding: Bir öğenin içindeki boşluktur, yani öğenin içeriği ile kenarları arasındaki alanı belirler.

Örnek:

/* Bir öğeye dış boşluk ekleme (margin) */
div {
  margin: 20px;
}

/* Bir öğeye iç boşluk ekleme (padding) */
div {
  padding: 15px;
}

Margin ve padding değerleri, tek bir değer (tüm kenarlara eşit), dört farklı değer (her kenar için farklı) ya da alt, üst, sağ ve sol gibi kombinasyonlarla belirtilebilir.

/* Üst 20px, sağ 15px, alt 10px, sol 5px */
div {
  margin: 20px 15px 10px 5px;
}

2.4. Border (Kenar Çizgisi)

CSS ile öğelere sınır ekleyebiliriz. border özelliği ile sınırın kalınlığını, türünü ve rengini belirlemek mümkündür.

Örnek:

/* 2px kalınlığında, siyah renkli bir sınır */
div {
  border: 2px solid black;
}

Ayrıca border-radius özelliği ile köşeleri yuvarlayabilirsiniz:

/* Yuvarlak köşeler */
div {
  border-radius: 10px;
}

2.5. Text Align (Metin Hizalama)

Metni hizalamak, sayfa düzenini güzelleştirir. text-align özelliği, metnin yatay olarak nasıl hizalanacağını belirler.

Örnek:

/* Metni ortalamak */
h1 {
  text-align: center;
}

/* Metni sağa yaslamak */
p {
  text-align: right;
}

2.6. Width ve Height (Genişlik ve Yükseklik)

Bir öğenin genişliğini ve yüksekliğini ayarlamak için width ve height özellikleri kullanılır. Bu, özellikle resimler, kutular ve diğer öğelerin boyutlarını belirlerken faydalıdır.

Örnek:

/* Bir öğenin genişliğini 200px, yüksekliğini ise 100px yapmak */
div {
  width: 200px;
  height: 100px;
}

2.7. Display ve Position

Bir öğenin sayfadaki konumunu ve düzenini belirlerken display ve position özellikleri kullanılır.

• display: Öğenin nasıl gösterileceğini belirler. Örneğin, block, inline, flex, grid gibi değerlerle öğe yerleşimi ayarlanabilir.
• position: Öğenin sayfadaki konumunu değiştirmek için kullanılır (örneğin, relative, absolute, fixed, sticky).

Örnek:

/* Flexbox ile öğe yerleşimi */
.container {
  display: flex;
  justify-content: center; /* Ortalamak */
  align-items: center; /* Ortalamak */
}

/* Konumlandırma: Sayfada sabit bir konumda kalacak */
.fixed-box {
  position: fixed;
  top: 10px;
  right: 10px;
}

3. CSS ile Stil Verme İpuçları

• Dışarıdan Stil Dosyası Kullanımı: CSS kodlarını, HTML dosyasına <link> etiketi ile bağlamak, stil ve içerik arasında bir ayrım sağlar. Bu, sayfanın yüklenme hızını artırır ve düzenlemeyi kolaylaştırır.

<link rel="stylesheet" href="styles.css">

• CSS Seçiciler: CSS’te seçiciler (selectors), hangi öğelere stil vereceğimizi belirler. ID, sınıf, element seçicileri gibi çeşitli türleri vardır. Örneğin, .class, #id veya div gibi.
• Responsive Tasarım: Mobil cihazlarda düzgün görüntülenen bir site için @media sorgularını kullanarak farklı ekran boyutlarına özel stiller uygulayabilirsiniz.

@media (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

4. Sonuç

CSS, web tasarımında çok güçlü bir araçtır. Temel CSS özelliklerini öğrenmek, sitenizin tasarımını özelleştirmenize yardımcı olur. Renk, font, margin, padding, border ve daha pek çok özellik ile web sayfanızın görsel tasarımını dilediğiniz gibi şekillendirebilirsiniz. İleri seviye özellikler ve teknikler öğrenerek, web sitenizin profesyonel bir görünüme kavuşmasını sağlayabilirsiniz.

Unutmayın, CSS ile stil vermek sadece sayfanın görünümünü güzelleştirmekle kalmaz, aynı zamanda kullanıcı deneyimini iyileştirir. Tasarımın ne kadar iyi olursa, ziyaretçilerin sitenizde geçirdiği zaman da o kadar uzun olur.