CSS (Cascading Style Sheets), web sayfalarının görsel tasarımını ve düzenini kontrol eden stil dilidir. HTML yapıyı oluştururken, CSS bu yapının renklerini, boyutlarını, konumunu, yazı tiplerini ve responsive davranışını belirler. Modern web geliştirmede CSS; kullanıcı deneyimi (UX), performans ve erişilebilirlik açısından kritik rol oynar.
Aşağıda görselde yer alan CSS özet içeriği yazıya dökülmüş, teknik olarak düzenlenmiş ve profesyonel şekilde geliştirilmiştir.
1️⃣ Selectors (Seçiciler)
CSS seçicileri, hangi HTML öğesine stil uygulanacağını belirler.
Temel Seçiciler
| Seçici | Açıklama |
|---|---|
* | Tüm elementler |
div | Tüm <div> elementleri |
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” olan element |
div.class | class=”class” olan <div> |
#itemid | id=”itemid” olan element |
div#itemid | id=”itemid” olan <div> |
Attribute (Öznitelik) Seçicileri
| Seçici | Açıklama |
|---|---|
a[attr] | attr attribute’üne sahip <a> |
a[attr="x"] | attr değeri “x” olan <a> |
a[class~="x"] | class listesinde “x” olan <a> |
| `a[lang | =”en”]` |
2️⃣ Pseudo-Classes & Pseudo-Elements
Pseudo-Class
| Seçici | Açıklama |
|---|---|
:first-child | İlk çocuk element |
:hover | Mouse üzerine gelince |
:active | Tıklanırken |
:focus | Odaklanınca |
:link | Ziyaret edilmemiş link |
:visited | Ziyaret edilmiş link |
:lang(x) | Belirli dildeki element |
Pseudo-Element
| Seçici | Açıklama |
|---|---|
::first-line | İlk satır |
::first-letter | İlk harf |
::before | Elementten önce içerik |
::after | Elementten sonra içerik |
3️⃣ Box Model (Kutu Modeli)
CSS Box Model şu bileşenlerden oluşur:
Margin → Border → Padding → Content
Margin (Dış Boşluk)
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
Padding (İç Boşluk)
- padding
- padding-top
- padding-right
- padding-bottom
- padding-left
Border (Kenarlık)
- border
- border-width
- border-style
- border-color
- border-top / right / bottom / left
- border-top-width vb.
4️⃣ Positioning (Konumlandırma)
| Özellik | Açıklama |
|---|---|
| display | block, inline, flex, grid |
| position | static, relative, absolute, fixed, sticky |
| top / right / bottom / left | Konum değerleri |
| z-index | Katman sırası |
| float | Sola/sağa hizalama |
| clear | Float temizleme |
| overflow | Taşma kontrolü |
| visibility | Görünürlük |
| clip | Kırpma |
5️⃣ Color & Background
- color
- background
- background-color
- background-image
- background-repeat
- background-position
- background-attachment
6️⃣ Text Özellikleri
- text-align
- text-indent
- text-transform
- text-decoration
- word-spacing
- letter-spacing
- line-height
- white-space
- text-shadow
7️⃣ Font Özellikleri
- font
- font-family
- font-size
- font-style
- font-weight
- font-variant
- font-stretch
- font-size-adjust
8️⃣ Dimensions (Boyutlandırma)
- width
- height
- min-width
- min-height
- max-width
- max-height
- vertical-align
9️⃣ Tables
- caption-side
- border-spacing
- table-layout
- empty-cells
- border-collapse
🔟 Sizes (Birimler)
Relative Units
- em
- ex
- %
- rem (modern kullanım)
Absolute Units
- px
- cm
- mm
- in
- pt (1pt = 1/72 inch)
- pc (1pc = 12pt)
Profesyonel Değerlendirme
Bu özet, CSS’in temel yapı taşlarını kapsayan kompakt bir referans rehberidir. Ancak modern CSS geliştirmede ayrıca şu konular kritik önemdedir:
- Flexbox
- CSS Grid
- Responsive Design (Media Queries)
- CSS Variables (Custom Properties)
- Animations & Transitions
- Modern layout teknikleri
Günümüzde CSS, yalnızca stil verme aracı değil; güçlü bir layout ve tasarım motorudur.
