Benimle Öğrenin: CSS-1

Ceren Nisanur Özbilge

31 Ekim 2025

Genelde herkes HTML’den başlar, ama ben önce sayfaların nasıl görselleştirildiğini anlamak istedim. Bu yüzden CSS ile yola çıkıyorum. Gelin, birlikte web tasarımın görsel tarafını keşfedelim!

CSS öğrenirken aklımda kalan önemli notları sadeleştirip burada sizinle paylaşıyorum. Bu yazıyı, temel bilgileri hızlıca hatırlayabileceğiniz küçük bir özet sayfa gibi düşünebilirsiniz. Derin konulara geçmeden önce göz atabileceğiniz bu içeriğin, CSS temellerini anlamanızda size fayda sağlayacağını umuyorum. 🌿

CSS Nedir?

CSS (Cascading Style Sheets), bir web sayfasının görünümünü düzenlemek için kullanılan bir dildir. HTML sayfa yapısını oluşturur, CSS ise o yapının görünümünü güzelleştirir. CSS sayesinde bir sitedeki tüm sayfaların görünümünü tek bir dosyadan değiştirebilirsiniz. Bu dosyanın uzantısı .css‘dir.

Örneğin:

HTML ile bir paragraf oluşturabilirsiniz.
CSS ile o paragrafın yazı rengini, boyutunu ve arkaplan rengini ayarlayabilirsiniz.

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS Nasıl Yazılır?

Bir CSS kuralı iki bölümden oluşur:

selector {
  property: value;
}

selector (seçici): Hangi HTML elemanına stil vereceğini belirtir. Örneğin p → tüm <p> etiketleri.
property (özellik): Ne değiştireceğini söyler (örneğin renk, yazı boyutu).
value (değer): Özelliğin nasıl olacağını söyler.

Örnek:

p {
  color: red;
  font-size: 16px;
}

Bu kod:
Tüm <p> (paragraf) etiketlerinin yazı rengini kırmızı yapar ve yazı boyutunu 16 piksel ayarlar.

CSS Nasıl Eklenir?

External CSS (Harici)

Ayrı bir .css dosyasında yazılır, HTML’ye <link> etiketiyle bağlanır. Tüm sayfanın görünümünü tek dosyadan kontrol edilebilir.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">   /* Link etiketi */
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

mystyle.css ise şöyle görünür:

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Internal CSS (Dahili)

HTML’nin <head> kısmında <style> etiketiyle yazılır. Sadece o sayfayı etkiler.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Inline CSS (Satır içi)

Stil doğrudan HTML etiketinin içine yazılır. Sadece o tek öğeyi etkiler. Bu yöntem en az tercih edilendir, çünkü kod karışabilir.

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

CSS Yorum Satırları

Yorumlar CSS’te /* ... */ arasına yazılır.

/* Bu bir yorum satırıdır */
p { color: red; }

Renkler

Renkler birkaç farklı şekilde yazabilir:

color: red;            /* Renk adı */
color: #ff0000;        /* HEX kodu */
color: rgb(255, 0, 0); /* RGB değeri */

Arkaplan

background-color: Arkaplan rengi ayarlar.
background-image: Arkaplana resim ekler.
background-repeat: Resim sayfada tekrar etsin mi, etmesin mi onu belirler.
background-attachment: Sayfa aşağı yukarı kayarken arkaplan resmi hareket etsin mi, yoksa sabit mi kalsın?

Örnek:

body {
  background-color: lightblue;
  background-image: url("clouds.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Tüm bu özellikleri tek satırda da yazabiliriz Buna shorthand denir.

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

Kenarlıklar

Kenarlık, bir kutunun (örneğin bir paragrafın, butonun veya görselin) çevresini çerçeveleyen çizgidir. Kenarlığın stili, rengi ve kalınlığı ayarlanabilir.

p {
  border-style: solid;
  border-color: black;
  border-width: 2px;
}

Tümü tek satırda da yazabilir:

p {
  border: 2px solid black;
}

Margin

Bir kutunun kenarıyla diğer öğeler arasındaki boşluğu ayarlar.

div {
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 5px;
  margin-left: 10px;
}

Padding

Kutunun iç kısmındaki metin ile kenar arasındaki boşluğu ayarlar. Margin dıştan boşluk verir, padding içten.

div {
  padding: 10px;
}

Yazı Rengi ve Hizalama

color: yazı rengi
text-align: hizalama

h1 {
  color: navy;
  text-align: center;
}

Yazı Dekorasyonu

p {
  text-decoration: underline;
  text-decoration-style: wavy;
}

Harf Dönüşümü

h2 {
  text-transform: uppercase;  /* Tümünü büyük yapar */
}

Harf Aralığı

h1 { letter-spacing: 3px; }

Satır Yüksekliği

p { line-height: 1.5; }

Bu yazıyla CSS’in temellerine kısa bir giriş yaptık. Serinin bir sonraki bölümünde, konunun devamına hep birlikte göz atacağız. Takipte kalın, sevgiyle! 💻💚

KAYNAKÇA

https://yoodigital.co/tr/css-nedir-ne-ise-yarar/
https://www.w3schools.com/css/default.asp

Ceren Nisanur Özbilge

<trgis.dev/>