CSS (Cascading Style Sheets), web sayfalarının görsel sunumunu kontrol eden stil dilidir. HTML yapıyı oluştururken, CSS tasarımı ve düzeni belirler. Profesyonel bir arayüz geliştirme sürecinde CSS; layout (yerleşim), tipografi, renk yönetimi, responsive tasarım ve kullanıcı deneyimi açısından kritik rol oynar.

Aşağıda görselde yer alan CSS konuları yazıya dökülmüş, sadeleştirilmiş ve profesyonel açıklamalarla geliştirilmiştir.

1️⃣ Selectors (Seçiciler)

CSS seçicileri, hangi HTML öğesine stil uygulanacağını belirler.

Temel Seçiciler

*               /* Tüm elementler */
div             /* Tüm <div> etiketleri */
div *           /* div içindeki tüm elementler */
div span        /* div içindeki span */
div, span       /* div ve span */
div > span      /* parent'ı div olan span */
div + span      /* div'den hemen sonra gelen span */
.class          /* class="class" */
div.class       /* class'ı class olan div */
#itemid         /* id="itemid" */
div#itemid      /* id'si itemid olan div */

Attribute (Öznitelik) Seçicileri

a[attr]             /* attr özelliğine sahip a */
a[attr="x"]         /* attr değeri x olan a */
a[class~="x"]       /* class listesinde x olan */
a[lang|="en"]       /* dili en ile başlayan */

Profesyonel İpucu:

• ID yerine mümkün olduğunca class kullanın.
• CSS özgüllük (specificity) kurallarını dikkate alın.

2️⃣ Pseudo-Selectors & Pseudo-Classes

:first-child
:first-line
:first-letter
:hover
:active
:focus
:link
:visited
:lang(var)
::before
::after

Açıklamalar:

• :hover → Üzerine gelince stil değişir.
• :focus → Input alanlarında UX için önemlidir.
• ::before ve ::after → Ekstra HTML yazmadan içerik üretmek için kullanılır.

Profesyonel kullanım:

button:hover {
  background-color: #333;
}

3️⃣ Sizes (Ölçü Birimleri)

Birimsiz

0  → Birim gerektirmez

Relative (Göreceli)

em
ex
%

Absolute (Mutlak)

px  → Piksel
cm  → Santimetre
mm  → Milimetre
in  → İnç
pt  → 1pt = 1/72in
pc  → 1pc = 12pt

Profesyonel öneri:

• Responsive tasarım için rem, %, vw, vh tercih edilmelidir.
• px sabit tasarımlarda kullanılmalıdır.

4️⃣ Text (Metin Özellikleri)

text-indent
word-spacing
text-align
text-transform
text-decoration
white-space
text-shadow
line-height
letter-spacing

Örnek:

p {
  text-align: justify;
  line-height: 1.6;
}

5️⃣ Boxes (Box Model)

CSS Box Model şunlardan oluşur:

• Content
• Padding
• Border
• Margin

Margin

margin
margin-top
margin-right
margin-bottom
margin-left

Padding

padding
padding-top
padding-right
padding-bottom
padding-left

Border

border
border-style
border-width
border-color
border-top
border-right
border-bottom
border-left

Profesyonel ipucu:

* {
  box-sizing: border-box;
}

Bu kullanım layout hesaplamalarını kolaylaştırır.

6️⃣ Positioning (Konumlandırma)

display
position
top
right
bottom
left
float
clear
z-index
overflow
visibility
clip
direction
unicode-bidi

Position Türleri:

• static
• relative
• absolute
• fixed
• sticky

Modern projelerde:

• flexbox
• grid

tercih edilmelidir.

7️⃣ Color / Background

color
background
background-color
background-image
background-repeat
background-position
background-attachment

Profesyonel öneri:

• HEX, RGB, RGBA, HSL kullanabilirsiniz.
• Opacity için rgba() tercih edin.

8️⃣ Fonts (Yazı Tipi)

font
font-weight
font-family
font-stretch
font-style
font-size
font-variant
font-size-adjust

Örnek:

body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
}

9️⃣ Dimensions (Boyutlandırma)

width
height
min-width
max-width
min-height
max-height
vertical-align

Responsive için:

img {
  max-width: 100%;
  height: auto;
}

🔟 Tables (Tablo Özellikleri)

caption-side
border-spacing
table-layout
empty-cells
border-collapse
speak-header

Profesyonel kullanım:

table {
  border-collapse: collapse;
}

1️⃣1️⃣ Paging (Yazdırma Ayarları)

size
marks
page-break-before
page-break-after
page-break-inside
orphans
widows

Genellikle print CSS içinde kullanılır:

@media print {
  body {
    font-size: 12pt;
  }
}

Profesyonel CSS Kullanım Tavsiyeleri

✅ BEM metodolojisi kullanın
✅ CSS değişkenleri (variables) kullanın
✅ Responsive tasarım için mobile-first yaklaşımı benimseyin
✅ Gereksiz !important kullanımından kaçının
✅ Performans için CSS dosyalarını minimize edin

Sonuç

CSS, yalnızca stil vermek değil; tasarım sistemleri oluşturmak, kullanıcı deneyimi tasarlamak ve ölçeklenebilir arayüzler geliştirmek için güçlü bir araçtır. Profesyonel projelerde CSS; planlı, modüler ve sürdürülebilir bir mimari ile kullanılmalıdır.