📌 1. CSS Nedir?

CSS (Cascading Style Sheets) web sayfalarının görünümünü belirleyen stil dilidir.
HTML yapıyı oluşturur, CSS ise görünümü düzenler.

Örnek:

<p style="color:red;">Merhaba Dünya</p>

Açıklama: Yazının rengini kırmızı yapar.

📌 2. CSS Nasıl Eklenir?

1. Inline (Etiket içinde)

<p style="color:blue;">Metin</p>

2. Internal (Sayfa içinde, <style> etiketiyle)

<style>

p { color: blue; }

</style>

3. External (Harici .css dosyası)

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

En profesyonel yöntem budur.

📌 3. Temel CSS Seçiciler (Selectors)

Etiket seçici

p { color: green; }

Class seçici

<p class="yazi"></p>

<style>

.yazi { color: red; }

</style>

ID seçici

#baslik { font-size: 24px; }

Evrensel seçici

* { margin: 0; padding: 0; }

📌 4. Yazı (Typography) Ayarları

p {

  font-size: 18px;

  font-family: Arial;

  font-weight: bold;

  color: #333;

  text-align: center;

}

Açıklama:

• font-size: Yazı boyutu

• font-family: Yazı tipi

• font-weight: Kalınlık

• color: Renk

• text-align: Hizalama

📌 5. Renk Kullanımı

İsim

color: red;

Hex

color: #ff0000;

RGB

color: rgb(255, 0, 0);

RGBA (şeffaf)

color: rgba(255, 0, 0, 0.5);

📌 6. Arka Plan (Background)

div {

  background-color: yellow;

  background-image: url("resim.jpg");

  background-size: cover;

  background-repeat: no-repeat;

}

📌 7. Kenarlık (Border)

div {

  border: 2px solid black;

  border-radius: 10px;

}

📌 8. Kutulama Modeli (Box Model)

Tüm HTML elemanları şu kutulardan oluşur:

• Content (İçerik)

• Padding (İç boşluk)

• Border (Kenarlık)

• Margin (Dış boşluk)

Örnek:

div {

  width: 200px;

  padding: 20px;

  border: 3px solid blue;

  margin: 10px;

}

📌 9. Display (Blok, Inline, Flex)

Block

div { display: block; }

Inline

span { display: inline; }

Inline-block

img { display: inline-block; }

📌 10. Flexbox (Modern düzenleme)

.container {

  display: flex;

  justify-content: center;

  align-items: center;

}

Açıklama:

• Yatay ve dikey ortalama sağlar → HARİKA bir özellik.

📌 11. CSS Grid (En güçlü layout sistemi)

.container {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

}

📌 12. Animasyon

div {

  animation: hareket 2s infinite;

}

@keyframes hareket {

  from { transform: translateX(0); }

  to   { transform: translateX(100px); }

}

📌 13. Hover Efekti

button:hover {

  background: black;

  color: white;

}

📌 14. Responsive (Mobil uyumlu)

@media (max-width: 600px) {

  body { background: pink; }

}

📌 15. Değişkenler (CSS Variables)

:root {

  --ana-renk: #3498db;

}

p {

  color: var(--ana-renk);

}

📌 16. Gölgelendirme (Shadow)

box-shadow: 0 0 10px rgba(0,0,0,0.3);

text-shadow: 2px 2px 2px gray;

📌 17. Transition (Yumuşak geçiş)

button {

  transition: 0.3s;

}

📌 18. Position (Konumlandırma)

div {

  position: absolute;

  top: 50px;

  left: 80px;

}

📌 19. Z-index (Katmanlama)

div { z-index: 100; }

📌 20. Overflow

div { overflow: scroll; }