CSS Nedir? Ne İşe Yarar ve Nasıl Kullanılır?

Bir web sayfasında bulunan başlıkların rengi, butonların tasarımı, menülerin yerleşimi, görsellerin boyutu ve sayfanın mobil cihazlardaki görünümü büyük ölçüde CSS kullanılarak belirlenir.

HTML, web sayfasının temel yapısını oluştururken CSS bu yapının nasıl görüneceğini düzenler. Bu nedenle CSS, modern web tasarımının temel teknolojilerinden biridir.

CSS, İngilizce “Cascading Style Sheets” ifadesinin kısaltmasıdır. Türkçede Basamaklı Stil Sayfaları olarak adlandırılır.

CSS sayesinde:

• Yazı renkleri değiştirilebilir.
• Yazı tipleri ve boyutları belirlenebilir.
• Sayfa arka planları düzenlenebilir.
• Butonlar tasarlanabilir.
• İçerikler yan yana veya alt alta yerleştirilebilir.
• Mobil uyumlu sayfalar hazırlanabilir.
• Animasyon ve geçiş efektleri oluşturulabilir.
• Aynı tasarım kuralları birden fazla sayfada kullanılabilir.
• Web sitesinin görsel bütünlüğü korunabilir.

CSS yalnızca web sitesini güzel göstermek için kullanılmaz. Doğru CSS yapısı; kullanılabilirlik, erişilebilirlik, mobil uyumluluk ve site performansı açısından da önemlidir.

CSS Açılımı Nedir?

CSS’nin açılımı Cascading Style Sheets şeklindedir.

İngilizce İfade	Türkçe Karşılığı
Cascading	Basamaklı veya öncelik sıralı
Style	Stil
Sheets	Sayfalar

“Cascading” ifadesi, bir HTML öğesine birden fazla CSS kuralı uygulandığında hangi kuralın öncelikli olacağını belirleyen sistemi anlatır.

Bir öğeye:

• Tarayıcının varsayılan stili
• Tema stili
• Harici CSS dosyası
• Sayfa içi stil
• Doğrudan öğeye yazılan stil

aynı anda uygulanabilir. Tarayıcı, öncelik kurallarına göre hangi stilin kullanılacağına karar verir.

CSS Ne İşe Yarar?

CSS, HTML ile oluşturulan içeriklerin görünümünü ve sayfa içerisindeki konumunu düzenler.

CSS ile aşağıdaki işlemler yapılabilir:

• Metinlerin renk ve boyutunu belirlemek
• Başlık ve paragraf aralıklarını düzenlemek
• Menü tasarlamak
• Butonlara renk ve efekt eklemek
• Görselleri boyutlandırmak
• Kart tasarımları oluşturmak
• İçerikleri sütunlara ayırmak
• Sayfayı mobil cihazlara uyarlamak
• Form alanlarını düzenlemek
• Açılır menüler oluşturmak
• Hover efektleri eklemek
• Animasyonlar hazırlamak
• Karanlık mod tasarlamak
• Yazdırma görünümü oluşturmak

CSS kullanılmayan bir HTML sayfası içerikleri gösterebilir ancak sayfa genellikle tarayıcının varsayılan görünümüyle açılır. CSS, bu yapının marka kimliğine ve kullanıcı ihtiyaçlarına uygun hâle getirilmesini sağlar.

CSS Neden Önemlidir?

CSS, bir web sitesinin görünümü ve kullanım kolaylığı üzerinde doğrudan etkilidir.

CSS’nin önemli olmasının başlıca nedenleri şunlardır:

• Web sitesinin profesyonel görünmesini sağlar.
• Marka renklerinin tutarlı kullanılmasına yardımcı olur.
• Mobil uyumlu tasarım oluşturur.
• Sayfa içerisindeki içeriklerin düzenlenmesini sağlar.
• Kullanıcıların menü ve butonları daha kolay kullanmasına yardımcı olur.
• Aynı tasarımın farklı sayfalara uygulanmasını kolaylaştırır.
• Tasarım değişikliklerini merkezi olarak yönetmeyi sağlar.
• HTML kodunun daha düzenli kalmasına yardımcı olur.
• Erişilebilir ve okunabilir sayfalar hazırlanmasını destekler.
• Web geliştirme sürecini hızlandırabilir.

Bir web sitesinde içerikler kaliteli olsa bile yazılar okunamıyor, butonlar görünmüyor veya mobil görünüm bozuksa kullanıcı deneyimi olumsuz etkilenebilir.

CSS ile Neler Yapılabilir?

CSS oldukça geniş bir kullanım alanına sahiptir.

Renkler Düzenlenebilir

CSS ile:

• Metin rengi
• Arka plan rengi
• Kenarlık rengi
• Buton rengi
• Bağlantı rengi
• Gölge rengi

belirlenebilir.

Örnek:

h1 {
    color: #1a237e;
}

p {
    color: #333333;
}

Yazı Tipleri Belirlenebilir

CSS ile yazı tipi ailesi, boyutu, kalınlığı ve satır aralığı düzenlenebilir.

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

Yazı tiplerinin web tasarımındaki kullanımını font nedir? içeriğimizden inceleyebilirsiniz.

Sayfa Düzeni Oluşturulabilir

İçerikler:

• Yan yana
• Alt alta
• Ortalanmış
• Sütunlara ayrılmış
• Sabit genişlikte
• Ekrana göre değişen genişlikte

yerleştirilebilir.

Responsive Tasarım Hazırlanabilir

CSS medya sorguları kullanılarak sayfanın telefon, tablet ve masaüstü cihazlarda farklı biçimde görüntülenmesi sağlanabilir.

Animasyon ve Geçişler Eklenebilir

Butonların üzerine gelindiğinde renk değiştirmesi veya bir öğenin yumuşak biçimde hareket etmesi CSS ile yapılabilir.

.button {
    background-color: #1a237e;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #3949ab;
}

HTML, CSS ve JavaScript Arasındaki Fark Nedir?

HTML, CSS ve JavaScript web geliştirmede birlikte kullanılan temel teknolojilerdir.

Teknoloji	Temel Görevi	Örnek
HTML	Sayfanın yapısını oluşturur	Başlık, paragraf, form
CSS	Sayfanın görünümünü düzenler	Renk, boyut, yerleşim
JavaScript	Sayfaya etkileşim kazandırır	Açılır menü, hesaplama, bildirim

Basit bir benzetmeyle:

• HTML, binanın iskeletidir.
• CSS, binanın boya, dekorasyon ve yerleşimidir.
• JavaScript, kapıların, asansörlerin ve etkileşimli sistemlerin çalışmasını sağlar.

HTML Örneği

<button class="teklif-butonu">Teklif Al</button>

CSS Örneği

.teklif-butonu {
    background-color: #1a237e;
    color: #ffffff;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
}

HTML butonu oluştururken CSS butonun nasıl görüneceğini belirler.

CSS Nasıl Çalışır?

CSS kuralları genel olarak üç bölümden oluşur:

• Seçici
• Özellik
• Değer

Örnek:

h2 {
    color: blue;
}

Bu örnekte:

• h2 seçicidir.
• color özelliktir.
• blue değerdir.

CSS kuralı, sayfadaki bütün h2 başlıklarının mavi görünmesini sağlar.

CSS Sözdizimi

secici {
    ozellik: deger;
}

Bir öğeye birden fazla özellik eklenebilir:

h2 {
    color: #1a237e;
    font-size: 32px;
    margin-bottom: 20px;
}

Her CSS özelliğinin sonunda noktalı virgül kullanılması, kodun düzenli ve hatasız çalışması açısından önemlidir.

CSS Kullanım Yöntemleri Nelerdir?

CSS, HTML sayfasına üç temel yöntemle eklenebilir:

• Inline CSS
• Internal CSS
• External CSS

Inline CSS Nedir?

Inline CSS, stil kurallarının doğrudan HTML öğesinin style özelliğine yazılmasıdır.

Örnek:

<p style="color: red; font-size: 18px;">
    Bu bir paragraftır.
</p>

Inline CSS Avantajları

• Tek bir öğeye hızlı stil uygulanabilir.
• Küçük testler için kullanılabilir.
• Harici dosyaya ihtiyaç duymaz.

Inline CSS Dezavantajları

• Kod tekrarına neden olur.
• Yönetimi zorlaştırır.
• HTML yapısını karmaşıklaştırır.
• Büyük projelerde bakım maliyetini artırır.
• Aynı stili çok sayıda öğeye uygulamak zordur.

Inline CSS, kalıcı ve büyük tasarım çalışmaları için genellikle uygun değildir.

Internal CSS Nedir?

Internal CSS, CSS kodlarının HTML dosyasının <head> alanındaki <style> etiketi içerisinde yazılmasıdır.

<head>
    <style>
        body {
            background-color: #f5f5f5;
        }

        h1 {
            color: #1a237e;
        }
    </style>
</head>

Internal CSS Avantajları

• Tek sayfalık projelerde hızlıdır.
• Ek CSS dosyası gerektirmez.
• Sayfaya özel stiller hazırlanabilir.

Internal CSS Dezavantajları

• Aynı stil farklı sayfalarda tekrar yazılabilir.
• Büyük kodlarda sayfa karmaşıklaşır.
• Merkezi tasarım yönetimini zorlaştırır.

External CSS Nedir?

External CSS, stillerin ayrı bir .css dosyasında tutulmasıdır.

HTML bağlantısı:

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

CSS dosyası:

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #1a237e;
}

External CSS Avantajları

• Aynı dosya birden fazla sayfada kullanılabilir.
• Kod tekrarını azaltır.
• Tasarım değişiklikleri merkezi olarak yapılabilir.
• HTML yapısını daha düzenli tutar.
• Tarayıcı önbelleğinden yararlanabilir.
• Büyük projelerde yönetimi kolaylaştırır.

External CSS Dezavantajları

• CSS dosyası yüklenmezse sayfa stilsiz görünebilir.
• Çok sayıda ve büyük CSS dosyası performansı etkileyebilir.
• Dosya yolu yanlış yazılırsa stil uygulanmaz.

CSS Kullanım Yöntemleri Karşılaştırması

Özellik	Inline CSS	Internal CSS	External CSS
Kullanım yeri	HTML öğesi	Sayfa içi style etiketi	Ayrı CSS dosyası
Tekrar kullanım	Çok düşük	Sayfa ile sınırlı	Yüksek
Yönetim kolaylığı	Düşük	Orta	Yüksek
Büyük projeye uygunluk	Düşük	Sınırlı	Yüksek
Hızlı test	Uygun	Uygun	Daha fazla hazırlık gerekir
Kod düzeni	Karmaşıklaşabilir	Orta	Daha düzenli
Önbellek avantajı	Yok	Sınırlı	Bulunabilir

Genel olarak kurumsal ve çok sayfalı web sitelerinde external CSS tercih edilir.

CSS Seçicileri Nelerdir?

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

Başlıca seçici türleri:

• Etiket seçicisi
• Sınıf seçicisi
• ID seçicisi
• Evrensel seçici
• Özellik seçicisi
• Alt öğe seçicisi
• Pseudo-class
• Pseudo-element

Etiket Seçicisi

Belirli bir HTML etiketine stil uygular.

p {
    color: #333333;
}

Bu kural bütün paragraf etiketlerini etkiler.

Sınıf Seçicisi

Sınıf seçicisi nokta işaretiyle başlar.

HTML:

<p class="uyari">Önemli açıklama</p>

CSS:

.uyari {
    color: red;
    font-weight: bold;
}

Aynı sınıf birden fazla öğede kullanılabilir.

ID Seçicisi

ID seçicisi # işaretiyle başlar.

HTML:

<section id="iletisim">
    İletişim alanı
</section>

CSS:

#iletisim {
    background-color: #f5f5f5;
}

Bir sayfada aynı ID’nin birden fazla öğede kullanılmaması gerekir.

Evrensel Seçici

Sayfadaki bütün öğeleri seçer.

* {
    box-sizing: border-box;
}

Bu kullanım, kutu modelinin daha kolay yönetilmesini sağlayabilir.

Birden Fazla Seçici Kullanımı

Aynı stil birden fazla öğeye uygulanabilir.

h1,
h2,
h3 {
    font-family: Arial, sans-serif;
    color: #1a237e;
}

Alt Öğe Seçicisi

Belirli bir alan içerisindeki öğeleri seçer.

.menu a {
    color: #ffffff;
}

Bu kural yalnızca .menu sınıfı içerisindeki bağlantıları etkiler.

Doğrudan Çocuk Seçicisi

.kart > p {
    margin-bottom: 10px;
}

Bu kural yalnızca .kart öğesinin doğrudan altında bulunan paragraflara uygulanır.

Özellik Seçicisi

HTML özelliklerine göre seçim yapılabilir.

input[type="email"] {
    border: 1px solid #cccccc;
}

Pseudo-Class Nedir?

Pseudo-class, bir öğenin belirli durumuna stil uygulamak için kullanılır.

Örnekler:

• :hover
• :focus
• :active
• :first-child
• :last-child
• :checked

a:hover {
    color: red;
}

Kullanıcı bağlantının üzerine geldiğinde renk değişir.

Pseudo-Element Nedir?

Pseudo-element, bir öğenin belirli bölümünü veya sanal bir içeriği biçimlendirmek için kullanılır.

Örnekler:

• ::before
• ::after
• ::first-letter
• ::selection

.baslik::before {
    content: "✓ ";
    color: green;
}

Class ve ID Arasındaki Fark Nedir?

Özellik	Class	ID
CSS işareti	.	#
Tekrar kullanım	Birden fazla öğede kullanılabilir	Genellikle tek öğede kullanılır
HTML kullanımı	class=""	id=""
Öncelik	Daha düşük	Daha yüksek
Genel kullanım	Bileşen ve tasarım grupları	Benzersiz alanlar

Çoğu tasarım öğesinde class kullanımı daha esnek ve sürdürülebilirdir.

CSS Cascade Nedir?

Cascade, bir öğeye uygulanan birden fazla CSS kuralı arasından hangisinin geçerli olacağını belirleyen öncelik sistemidir.

Tarayıcı genel olarak şu unsurları değerlendirir:

• Kuralın kaynağı
• !important kullanımı
• Seçicinin özgüllüğü
• Kodun yazılma sırası
• Kalıtım

Örnek:

p {
    color: blue;
}

.aciklama {
    color: green;
}

HTML:

<p class="aciklama">Örnek metin</p>

Sınıf seçicisi daha özgül olduğu için metin yeşil görünebilir.

CSS Specificity Nedir?

Specificity, CSS seçicilerinin öncelik değeridir.

Genel öncelik sırası şu şekildedir:

1. Inline stil
2. ID seçicisi
3. Class, özellik ve pseudo-class seçicileri
4. Etiket ve pseudo-element seçicileri

Örnek:

p {
    color: blue;
}

.metin {
    color: green;
}

#ozel-metin {
    color: red;
}

ID seçicisi diğerlerinden daha yüksek önceliğe sahiptir.

Çok karmaşık ve uzun seçiciler kullanmak CSS yönetimini zorlaştırabilir. Bu nedenle mümkün olduğunca sade ve tekrar kullanılabilir class yapıları tercih edilmelidir.

!important Nedir?

!important, bir CSS kuralının önceliğini artırmak için kullanılır.

p {
    color: red !important;
}

Bu ifade gerektiğinde yararlı olabilir ancak sık kullanılması önerilmez.

Aşırı !important kullanımı:

• Stil kurallarının üzerine yazılmasını zorlaştırır.
• CSS bakımını karmaşıklaştırır.
• Tema ve eklenti çakışmalarına neden olabilir.
• Responsive düzenlemeleri zorlaştırabilir.

Öncelik sorunları mümkünse doğru seçici yapısı ve CSS sıralamasıyla çözülmelidir.

CSS Kalıtım Nedir?

Kalıtım, bazı CSS özelliklerinin üst öğeden alt öğelere aktarılmasıdır.

Örneğin:

body {
    color: #333333;
    font-family: Arial, sans-serif;
}

Sayfadaki birçok metin öğesi bu özellikleri doğrudan devralabilir.

Ancak:

• margin
• padding
• border
• width
• height

gibi bütün özellikler otomatik olarak kalıtılmaz.

CSS Box Model Nedir?

CSS box model, her HTML öğesinin dikdörtgen bir kutu olarak değerlendirilmesini sağlayan yapıdır.

Bir kutu şu bölümlerden oluşur:

• Content
• Padding
• Border
• Margin

Bölüm	Açıklama
Content	Metin veya görselin bulunduğu alan
Padding	İçerik ile kenarlık arasındaki boşluk
Border	Kutunun kenarlığı
Margin	Kutunun diğer öğelerle arasındaki dış boşluk

Örnek:

.kart {
    width: 300px;
    padding: 20px;
    border: 1px solid #cccccc;
    margin: 30px;
}

box-sizing Nedir?

Varsayılan kutu modelinde genişliğe padding ve border değerleri ayrıca eklenebilir.

Bu durumu daha kolay yönetmek için:

* {
    box-sizing: border-box;
}

kullanılabilir.

border-box sayesinde belirtilen genişliğin içerisine padding ve border değerleri de dahil edilir.

Margin ve Padding Arasındaki Fark

Özellik	Margin	Padding
Konumu	Öğenin dışında	Öğenin içinde
Arka plan rengi	Etkilemez	Arka plan alanına dahildir
Amaç	Öğeler arasında boşluk	İçerik ile kenar arasında boşluk
Kenarlık ilişkisi	Kenarlığın dışında	Kenarlığın içinde

CSS Ölçü Birimleri Nelerdir?

CSS içerisinde farklı ölçü birimleri kullanılabilir.

Piksel

font-size: 16px;

px, sabit bir ölçü birimidir.

Yüzde

width: 80%;

Öğenin genişliği üst öğeye göre belirlenir.

EM

padding: 1.5em;

Genellikle öğenin mevcut yazı boyutuna göre hesaplanır.

REM

font-size: 1.25rem;

Kök HTML öğesinin yazı boyutuna göre hesaplanır.

VW ve VH

width: 100vw;
min-height: 100vh;

• vw, ekran genişliğine göre
• vh, ekran yüksekliğine göre

hesaplanır.

CSS Birimleri Karşılaştırması

Birim	Tür	Kullanım
px	Sabit	Kenarlık ve küçük detaylar
%	Göreceli	Genişlikler
em	Göreceli	Bileşen içi ölçüler
rem	Göreceli	Yazı ve genel boşluk sistemi
vw	Ekrana bağlı	Genişlik ve büyük başlıklar
vh	Ekrana bağlı	Tam ekran alanları
fr	Grid birimi	Sütun dağılımı

Responsive ve erişilebilir tasarımlarda göreceli birimler önemli avantaj sağlayabilir.

CSS Display Özelliği Nedir?

display, bir öğenin sayfa içerisindeki yerleşim davranışını belirler.

Yaygın değerler:

• block
• inline
• inline-block
• none
• flex
• grid

Block

Öğe bulunduğu satırın genişliğini kullanabilir ve yeni satırdan başlar.

div {
    display: block;
}

Inline

Öğe metin akışı içerisinde yer alır.

span {
    display: inline;
}

Inline-Block

Öğe satır içerisinde kalırken genişlik ve yükseklik alabilir.

.button {
    display: inline-block;
}

None

Öğe sayfada gösterilmez.

.gizli {
    display: none;
}

CSS Position Özelliği Nedir?

position, bir öğenin konumlandırma yöntemini belirler.

Başlıca değerler:

• static
• relative
• absolute
• fixed
• sticky

Static

Varsayılan konumlandırma yöntemidir.

Relative

Öğenin normal konumu korunurken belirli bir yönde hareket ettirilmesini sağlar.

.kutu {
    position: relative;
    top: 10px;
}

Absolute

Öğe normal belge akışından çıkarılır ve konumlandırılmış üst öğeye göre yerleştirilir.

.rozet {
    position: absolute;
    top: 10px;
    right: 10px;
}

Fixed

Öğe tarayıcı ekranına sabitlenir.

.whatsapp-butonu {
    position: fixed;
    right: 20px;
    bottom: 20px;
}

Sticky

Öğe belirli bir kaydırma noktasına ulaştığında sabitlenebilir.

.menu {
    position: sticky;
    top: 0;
}

Z-Index Nedir?

z-index, üst üste gelen öğelerin hangi sırada görüneceğini belirler.

.menu {
    position: relative;
    z-index: 100;
}

z-index sorunları genellikle konumlandırma ve stacking context yapısıyla birlikte değerlendirilmelidir.

Flexbox Nedir?

Flexbox, öğeleri tek boyutlu olarak satır veya sütun içerisinde düzenlemeyi kolaylaştıran CSS yerleşim sistemidir.

Örnek:

.kartlar {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
}

Flexbox ile:

• Öğeler yatay veya dikey sıralanabilir.
• Aralarındaki boşluk düzenlenebilir.
• Dikey ve yatay hizalama yapılabilir.
• Öğelerin sırası değiştirilebilir.
• Ekran daraldığında alt satıra geçmeleri sağlanabilir.

Flexbox Temel Özellikleri

Özellik	Görevi
display: flex	Flex düzenini başlatır
flex-direction	Satır veya sütun yönünü belirler
justify-content	Ana eksende hizalama yapar
align-items	Çapraz eksende hizalama yapar
gap	Öğeler arasındaki boşluğu belirler
flex-wrap	Öğelerin alt satıra geçmesini sağlar
flex-grow	Boş alanın paylaşımını belirler

Responsive Flexbox Örneği

.kartlar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.kart {
    flex: 1 1 300px;
}

Bu yapı, kartların ekran genişliğine göre yan yana veya alt alta yerleşmesini sağlayabilir.

CSS Grid Nedir?

CSS Grid, satır ve sütunlardan oluşan iki boyutlu sayfa düzenleri hazırlamak için kullanılır.

Örnek:

.urun-listesi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

Bu kod üç eşit sütun oluşturur.

Grid Temel Özellikleri

Özellik	Görevi
display: grid	Grid sistemini başlatır
grid-template-columns	Sütunları belirler
grid-template-rows	Satırları belirler
gap	Hücreler arasındaki boşluğu belirler
grid-column	Öğenin kaplayacağı sütunları belirler
grid-row	Öğenin kaplayacağı satırları belirler
place-items	Öğeleri hizalar

Responsive Grid Örneği

.urun-listesi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

Bu yapı, ekran genişliğine göre uygun sayıda sütun oluşturabilir.

Flexbox ve Grid Arasındaki Fark

Özellik	Flexbox	Grid
Düzen yapısı	Tek boyutlu	İki boyutlu
Temel kullanım	Satır veya sütun	Satır ve sütun birlikte
Menü	Çok uygun	Kullanılabilir
Kart düzeni	Uygun	Çok uygun
Karmaşık sayfa yapısı	Sınırlı	Daha güçlü
İçerik hizalama	Güçlü	Güçlü
Responsive yapı	Kolay	Kolay

Flexbox ve Grid birbirinin alternatifi olmak zorunda değildir. Aynı projede birlikte kullanılabilir.

Responsive Tasarım Nedir?

Responsive tasarım, web sitesinin farklı ekran boyutlarına otomatik olarak uyum sağlamasıdır.

Responsive bir web sitesinde:

• Metinler ekrana sığar.
• Görseller taşmaz.
• Menü mobil cihazlarda kullanılabilir.
• Butonlar dokunmaya uygun boyutta olur.
• Sütunlar gerektiğinde alt alta geçer.
• Kullanıcı yatay kaydırma yapmak zorunda kalmaz.

Media Query Nedir?

Media query, belirli ekran koşullarında farklı CSS kuralları uygulamayı sağlar.

Örnek:

.kartlar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .kartlar {
        grid-template-columns: 1fr;
    }
}

Bu örnekte masaüstünde üç sütun, 768 pikselin altında ise tek sütun kullanılır.

Mobile First Tasarım Nedir?

Mobile first, tasarımın önce küçük ekranlar için hazırlanması, ardından büyük ekranlara göre geliştirilmesidir.

Örnek:

.baslik {
    font-size: 28px;
}

@media (min-width: 768px) {
    .baslik {
        font-size: 40px;
    }
}

Mobile first yaklaşımı:

• Daha sade başlangıç stilleri oluşturabilir.
• Mobil kullanıcı deneyimine öncelik verir.
• Gereksiz masaüstü kurallarının mobilde üzerine yazılmasını azaltabilir.
• Performans odaklı geliştirmeyi destekleyebilir.

CSS Değişkenleri Nedir?

CSS değişkenleri, sık kullanılan değerlerin merkezi olarak tanımlanmasını sağlar.

:root {
    --ana-renk: #1a237e;
    --vurgu-renk: #07fd9f;
    --metin-rengi: #333333;
    --bosluk: 20px;
}

Kullanımı:

.button {
    background-color: var(--ana-renk);
    color: #ffffff;
    padding: var(--bosluk);
}

CSS Değişkenlerinin Avantajları

• Marka renkleri merkezi olarak yönetilir.
• Aynı değer tekrar tekrar yazılmaz.
• Tasarım güncellemeleri kolaylaşır.
• Karanlık mod hazırlanabilir.
• Kod tutarlılığı artar.

CSS Gradient Nedir?

Gradient, iki veya daha fazla renk arasında geçiş oluşturur.

.hero {
    background: linear-gradient(
        135deg,
        #1a237e,
        #3949ab
    );
}

Gradient kullanılırken metin okunabilirliği ve renk kontrastı kontrol edilmelidir.

CSS Gölge Özellikleri

Box Shadow

.kart {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

Text Shadow

.baslik {
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

Aşırı gölge kullanımı sayfanın eski ve karmaşık görünmesine neden olabilir.

Border Radius Nedir?

border-radius, kutuların köşelerini yuvarlatır.

.kart {
    border-radius: 12px;
}

Tam yuvarlak görsel:

.profil-gorseli {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

Overflow Nedir?

overflow, içerik kutunun sınırlarını aştığında ne olacağını belirler.

Değerler:

• visible
• hidden
• scroll
• auto

.kutu {
    overflow: hidden;
}

Yanlış overflow: hidden kullanımı açılır menülerin veya gölgelerin görünmemesine neden olabilir.

CSS Animasyonları Nasıl Yapılır?

CSS animasyonları @keyframes ile oluşturulabilir.

@keyframes yukari-cik {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kart {
    animation: yukari-cik 0.6s ease;
}

Animasyonlar:

• Kullanıcı dikkatini yönlendirmek
• Durum değişikliğini göstermek
• Sayfa geçişlerini yumuşatmak
• Mikro etkileşim oluşturmak

için kullanılabilir.

Ancak aşırı animasyon:

• Kullanıcıyı yorabilir.
• Sayfa performansını etkileyebilir.
• Erişilebilirlik sorunları oluşturabilir.
• İçeriğin okunmasını zorlaştırabilir.

CSS Transition ile Animation Arasındaki Fark

Özellik	Transition	Animation
Başlangıç	Durum değişimi gerekir	Otomatik başlayabilir
Karmaşıklık	Daha basit	Daha gelişmiş
Keyframes	Kullanılmaz	Kullanılır
Hover efekti	Çok uygun	Kullanılabilir
Çok aşamalı hareket	Sınırlı	Uygun

CSS ile Karanlık Mod Nasıl Yapılır?

CSS değişkenleri ve medya sorguları kullanılarak karanlık mod hazırlanabilir.

:root {
    --arka-plan: #ffffff;
    --metin: #222222;
}

@media (prefers-color-scheme: dark) {
    :root {
        --arka-plan: #121212;
        --metin: #f5f5f5;
    }
}

body {
    background-color: var(--arka-plan);
    color: var(--metin);
}

Karanlık modda:

• Kontrast
• Görsel uyumu
• Logo görünümü
• Form alanları
• Buton renkleri

ayrıca test edilmelidir.

CSS ve Web Sitesi Erişilebilirliği

CSS yalnızca estetik değil, erişilebilirlik açısından da önemlidir.

Dikkat edilmesi gerekenler:

• Metin ve arka plan kontrastı yeterli olmalıdır.
• Yazı boyutları okunabilir olmalıdır.
• Klavye odağı görünür olmalıdır.
• Bağlantılar yalnızca renkle ayrılmamalıdır.
• Butonlar dokunmaya uygun boyutta olmalıdır.
• Hareketli öğeler kullanıcıyı rahatsız etmemelidir.
• İçerik CSS kapalıyken de anlamlı bir sırada olmalıdır.

Focus Stili Örneği

button:focus-visible,
a:focus-visible {
    outline: 3px solid #ff9800;
    outline-offset: 3px;
}

Focus stillerinin tamamen kaldırılması, klavye kullanan ziyaretçilerin sayfada gezinmesini zorlaştırabilir.

CSS SEO’yu Etkiler mi?

CSS doğrudan bir anahtar kelime sıralama yöntemi değildir. Ancak kullanıcı deneyimi ve teknik performans üzerinden SEO çalışmalarını dolaylı biçimde etkileyebilir.

Yanlış CSS kullanımı:

• İçeriklerin mobilde taşmasına
• Metinlerin okunamamasına
• Butonların kullanılamamasına
• Sayfa kaymalarına
• Büyük CSS dosyalarına
• Ana içeriğin geç görüntülenmesine
• Gereksiz kod yüküne

neden olabilir.

Doğru CSS yapısı ise:

• Responsive tasarımı
• İçerik okunabilirliğini
• Görsel kararlılığı
• Sayfa performansını
• Kullanıcı etkileşimini

destekleyebilir.

Web sitesinin genel teknik performansını değerlendirmek için site hızı testi ve optimizasyonunun önemi içeriğimizi inceleyebilirsiniz.

CSS Site Hızını Nasıl Etkiler?

CSS dosyalarının büyüklüğü ve yüklenme biçimi sayfa performansını etkileyebilir.

Performans sorunlarına neden olabilecek durumlar:

• Çok büyük CSS dosyaları
• Kullanılmayan stiller
• Çok sayıda harici CSS isteği
• Karmaşık seçiciler
• Tekrar eden kurallar
• Sayfayı bloke eden dosyalar
• Gereksiz animasyonlar
• Eklentilerden gelen çakışan CSS kodları

CSS Dosyaları Nasıl Optimize Edilir?

Kullanılmayan CSS Kodlarını Kaldırın

Tema veya eklentiler yüzlerce kullanılmayan stil içerebilir.

Ancak otomatik kaldırma araçları:

• Açılır menüleri
• Mobil öğeleri
• Form stillerini
• Sonradan yüklenen içerikleri

yanlışlıkla etkileyebilir. İşlem sonrasında bütün sayfalar test edilmelidir.

CSS Kodlarını Küçültün

CSS minify işlemi:

• Boşlukları
• Satır sonlarını
• Yorumları
• Gereksiz karakterleri

kaldırarak dosya boyutunu azaltabilir.

Önce:

.button {
    background-color: blue;
    color: white;
}

Küçültülmüş:

.button{background-color:blue;color:white}

Dosya Sayısını Kontrol Edin

Çok sayıda küçük CSS dosyası ek ağ isteği oluşturabilir. Ancak bütün dosyaları kontrolsüz biçimde birleştirmek de önbellek ve sayfa bazlı yükleme avantajlarını azaltabilir.

Kritik CSS Kullanın

Sayfanın ilk görünen alanı için gerekli CSS kodlarının öncelikli yüklenmesi ana içeriğin daha hızlı görüntülenmesine yardımcı olabilir.

Önbelleklemeden Yararlanın

Harici CSS dosyaları tarayıcı önbelleğinde saklanabilir.

Önbellekleme sistemlerinin çalışma yapısı için cache nedir? içeriğimizi inceleyebilirsiniz.

CDN Kullanın

CSS dosyaları CDN üzerinden farklı bölgelerdeki kullanıcılara daha yakın sunuculardan ulaştırılabilir.

Ayrıntılı bilgi için CDN nedir ve ne işe yarar? rehberimizi inceleyebilirsiniz.

CSS Dosyası Neden Yüklenmez?

CSS’nin çalışmamasına neden olabilecek yaygın sorunlar şunlardır:

• Dosya yolunun yanlış olması
• Dosya adının hatalı yazılması
• Önbellekte eski sürümün kalması
• CSS sözdizimi hatası
• Seçicinin HTML ile eşleşmemesi
• Başka stilin daha yüksek önceliğe sahip olması
• Dosya izinleri
• CDN önbelleği
• HTTPS ve HTTP kaynaklarının karışması
• Tema veya eklenti çakışması

Dosya Yolu Kontrolü

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

Dosyanın gerçekten bu dizinde bulunup bulunmadığı kontrol edilmelidir.

Önbellek Temizleme

Değişiklik yapıldığı hâlde eski stil görünüyorsa:

• Tarayıcı önbelleği
• WordPress önbelleği
• Sunucu önbelleği
• CDN önbelleği

temizlenebilir.

Tarayıcı Geliştirici Araçları

Tarayıcı geliştirici araçlarıyla:

• CSS dosyasının yüklenip yüklenmediği
• Hangi kuralın geçersiz kılındığı
• Hangi seçicinin uygulandığı
• Hata mesajları
• Dosya yolu

incelenebilir.

CSS Hataları Nasıl Bulunur?

Yaygın CSS hataları:

• Eksik noktalı virgül
• Kapanmayan süslü parantez
• Yanlış özellik adı
• Geçersiz değer
• Hatalı class adı
• Aşırı özgül seçici
• Çakışan medya sorguları
• Yanlış position kullanımı
• Hatalı z-index
• Mobil taşmalar

Örnek hatalı kod:

.kart {
    color: red
    padding: 20px;
}

Düzeltilmiş kod:

.kart {
    color: red;
    padding: 20px;
}

WordPress’te CSS Nasıl Eklenir?

WordPress sitelerinde CSS farklı yöntemlerle eklenebilir:

• Tema stil dosyası
• Alt tema
• Özelleştirici içerisindeki ek CSS alanı
• Sayfa oluşturucunun özel CSS alanı
• Eklenti
• Kod yönetim sistemi
• Blok bazlı stil alanları

WordPress Ek CSS Alanı

Tema destekliyorsa görünüm özelleştirme alanındaki Ek CSS bölümü kullanılabilir.

Örnek:

.site-header {
    background-color: #1a237e;
}

Bu yöntem küçük ve genel tasarım değişiklikleri için kullanılabilir.

Tema Dosyasına CSS Eklemek

CSS kodları doğrudan tema dosyasına eklenebilir. Ancak tema güncellendiğinde değişikliklerin kaybolma riski vardır.

Bu nedenle özel değişikliklerde alt tema veya güvenli kod yönetim yöntemleri tercih edilebilir.

WordPress’in web sitesi projelerindeki kullanım alanları için neden WordPress? içeriğimizi inceleyebilirsiniz.

Elementor’da CSS Nasıl Eklenir?

Elementor kullanılan sitelerde CSS şu alanlardan eklenebilir:

• Widget ayarları
• Bölüm veya container ayarları
• Site ayarları
• Tema özelleştirici
• Özel CSS alanı
• Harici stil dosyası

Elementor tarafından otomatik oluşturulan sınıfların sürüm veya yapı değişikliklerinde farklılaşabileceği unutulmamalıdır. Mümkünse kullanıcı tarafından verilen özel class adları kullanılmalıdır.

Özel Class Örneği

Elementor gelişmiş ayarlarında CSS sınıfı:

ozel-teklif-butonu

CSS:

.ozel-teklif-butonu .elementor-button {
    background-color: #1a237e;
    border-radius: 8px;
}

WordPress’te CSS Değişiklikleri Neden Görünmez?

Olası nedenler:

• Önbellek
• CSS dosyasının yeniden oluşturulmaması
• Yanlış seçici
• Tema önceliği
• !important kullanımı
• Mobil ve masaüstü farklı stilleri
• CSS dosyasının yüklenmemesi
• CDN önbelleği
• Tarayıcı önbelleği

WordPress performans ve önbellek ayarları için WordPress hızlandırma ve optimizasyon adımları içeriğimizi inceleyebilirsiniz.

CSS Framework Nedir?

CSS framework, sık kullanılan tasarım bileşenlerini ve yerleşim sistemlerini hazır olarak sunan CSS kütüphanesidir.

Frameworkler şunları sunabilir:

• Grid sistemi
• Butonlar
• Formlar
• Menü
• Kartlar
• Modal pencereler
• Uyarılar
• Responsive yardımcı sınıflar
• Renk ve boşluk sistemi

CSS Framework Avantajları

• Geliştirme süresini kısaltabilir.
• Tasarım tutarlılığı sağlar.
• Responsive bileşenler sunabilir.
• Ekip çalışmalarını kolaylaştırabilir.
• Tekrar kullanılabilir yapılar sağlar.

CSS Framework Dezavantajları

• Kullanılmayan çok sayıda stil içerebilir.
• Sitelerin birbirine benzemesine neden olabilir.
• Öğrenme süreci gerektirebilir.
• Özelleştirme karmaşıklaşabilir.
• Dosya boyutunu artırabilir.

Framework seçimi projenin büyüklüğüne ve ekip yapısına göre yapılmalıdır.

CSS Preprocessor Nedir?

CSS preprocessor, standart CSS yazımını değişken, fonksiyon ve iç içe yapı gibi gelişmiş özelliklerle destekleyen araçlardır.

Bu sistemlerde yazılan kod daha sonra normal CSS’ye dönüştürülür.

Sağlayabileceği özellikler:

• Değişkenler
• İç içe seçiciler
• Fonksiyonlar
• Dosya parçalama
• Tekrar kullanılabilir kodlar
• Hesaplama işlemleri

Günümüzde standart CSS de değişkenler ve gelişmiş yerleşim sistemleri sunduğu için her projede preprocessor kullanmak zorunlu değildir.

CSS Modules ve Utility Yaklaşımları

Büyük projelerde CSS sınıflarının çakışmasını ve kod tekrarını azaltmak için farklı metodolojiler kullanılabilir.

Yaklaşımlar:

• BEM
• CSS Modules
• Utility-first
• Component-based CSS
• Scoped CSS

BEM Örneği

.kart {
}

.kart__baslik {
}

.kart--one-cikan {
}

Bu isimlendirme, öğenin yapısını ve durumunu daha anlaşılır hâle getirebilir.

İyi CSS Nasıl Yazılır?

İyi bir CSS yapısı:

• Anlaşılır olmalı
• Tekrar kullanılabilir olmalı
• Gereksiz kod içermemeli
• Mobil uyumlu olmalı
• Erişilebilirliği desteklemeli
• Kolay güncellenebilir olmalı
• Tutarlı isimlendirme kullanmalı
• Tasarım sistemiyle uyumlu olmalı
• Performansı gereksiz yere düşürmemelidir

CSS Yazarken Dikkat Edilmesi Gerekenler

Anlamlı Class İsimleri Kullanın

Uygun:

.urun-karti

Uygun olmayan:

.mavi-kutu-2

Tasarım değiştiğinde “mavi-kutu” adı anlamsız hâle gelebilir.

Aşırı Uzun Seçicilerden Kaçının

Karmaşık:

body main .content .section .card .header h3 span {
    color: red;
}

Daha yönetilebilir:

.kart-basligi {
    color: red;
}

Tekrar Eden Kodları Azaltın

Ortak değerler tek sınıfta veya değişkende toplanabilir.

Tasarım Sistemi Oluşturun

Şu değerler merkezi olarak belirlenebilir:

• Renkler
• Yazı boyutları
• Boşluklar
• Kenar yuvarlaklıkları
• Gölge değerleri
• Buton stilleri
• Form alanları

Yorum Satırları Ekleyin

/* Ana menü stilleri */
.site-menu {
    display: flex;
}

Yorumlar büyük dosyalarda bölümleri bulmayı kolaylaştırabilir.

CSS Yazarken Yapılan Hatalar

Her Sorunu !important ile Çözmek

CSS öncelik yapısı karmaşıklaşır.

Sabit Genişlikleri Aşırı Kullanmak

Mobil ekranlarda taşma oluşabilir.

.kutu {
    width: 1200px;
}

Bunun yerine:

.kutu {
    width: 100%;
    max-width: 1200px;
}

kullanılabilir.

Mobil Görünümü Test Etmemek

Masaüstünde düzgün görünen tasarım küçük ekranlarda bozulabilir.

Aşırı Animasyon Kullanmak

Kullanıcı deneyimi ve performans olumsuz etkilenebilir.

Class İsimlerini Görünüme Göre Vermek

Tasarım değiştiğinde isimler anlamsızlaşabilir.

Kullanılmayan Kodları Biriktirmek

CSS dosyası büyür ve bakım zorlaşır.

Tema Dosyasını Doğrudan Düzenlemek

Güncellemelerde değişiklikler kaybolabilir.

Tarayıcı Uyumluluğunu Kontrol Etmemek

Bazı özellikler farklı tarayıcılarda farklı davranabilir.

Görünmez İçerikle SEO Yapmaya Çalışmak

Metni kullanıcıdan gizleyip arama motorlarına göstermeye çalışmak doğru bir yöntem değildir.

Focus Stillerini Kaldırmak

Klavye kullanıcıları sayfada hangi öğede olduklarını anlayamaz.

CSS Güvenlik Açısından Risk Oluşturur mu?

CSS doğrudan sunucu tarafında çalışan bir programlama dili değildir. Ancak kontrolsüz kullanıcı girdileri veya harici dosyalar bazı güvenlik ve gizlilik sorunları oluşturabilir.

Dikkat edilmesi gerekenler:

• Güvenilmeyen kaynaklardan CSS dosyası yüklememek
• Harici font ve kaynak isteklerini kontrol etmek
• Tema ve eklentileri güncel tutmak
• CSS üzerinden yüklenen dosyaların kaynaklarını incelemek
• Kullanıcıların kontrolsüz stil eklemesini engellemek
• Yönetim paneli erişimlerini sınırlandırmak

Web sitesinin genel güvenlik yapısı için web sitesi güvenliği için en iyi uygulamalar içeriğimizi inceleyebilirsiniz.

CSS ve Tarayıcı Uyumluluğu

CSS özellikleri farklı tarayıcı ve sürümlerde farklı biçimde desteklenebilir.

Test edilmesi gereken ortamlar:

• Masaüstü tarayıcılar
• Mobil tarayıcılar
• Android cihazlar
• iPhone ve iPad
• Farklı ekran boyutları
• Dokunmatik cihazlar
• Yüksek çözünürlüklü ekranlar

Tarayıcı uyumluluğu için:

• Standart CSS özellikleri tercih edilmeli
• Gerekli durumlarda yedek stiller hazırlanmalı
• Gerçek cihaz testleri yapılmalı
• JavaScript bağımlı tasarımlar kontrol edilmeli
• Form ve menüler farklı tarayıcılarda denenmelidir

CSS Öğrenmeye Nereden Başlanmalıdır?

CSS öğrenme sırası şu şekilde planlanabilir:

1. HTML temelleri
2. CSS sözdizimi
3. Seçiciler
4. Renkler ve yazı tipleri
5. Margin ve padding
6. Box model
7. Display
8. Position
9. Flexbox
10. Grid
11. Responsive tasarım
12. Media query
13. Pseudo-class ve pseudo-element
14. Transition ve animation
15. CSS değişkenleri
16. Performans ve erişilebilirlik

CSS öğrenirken yalnızca kodları ezberlemek yerine küçük projeler geliştirmek daha faydalıdır.

Örnek projeler:

• Profil kartı
• Navigasyon menüsü
• Ürün kartları
• İletişim formu
• Fiyatlandırma tablosu
• Blog sayfası
• Responsive landing page
• Karanlık mod tasarımı

Basit CSS Sayfa Örneği

HTML:

<section class="hizmet-karti">
    <h2 class="hizmet-karti__baslik">SEO Danışmanlığı</h2>

    <p class="hizmet-karti__aciklama">
        Web sitenizin organik görünürlüğünü geliştirmeye
        yönelik analiz ve strateji hizmeti.
    </p>

    <a class="hizmet-karti__buton" href="#">
        Detaylı Bilgi
    </a>
</section>

CSS:

.hizmet-karti {
    max-width: 420px;
    padding: 32px;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.hizmet-karti__baslik {
    margin-top: 0;
    margin-bottom: 16px;
    color: #1a237e;
    font-size: 28px;
}

.hizmet-karti__aciklama {
    margin-bottom: 24px;
    color: #444444;
    line-height: 1.6;
}

.hizmet-karti__buton {
    display: inline-block;
    padding: 12px 20px;
    background-color: #1a237e;
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    transition: transform 0.2s ease;
}

.hizmet-karti__buton:hover {
    transform: translateY(-2px);
}

CSS Kontrol Listesi

Kontrol	Durum
CSS dosyası doğru bağlandı mı?	☐
Class isimleri anlaşılır mı?	☐
Aynı ID birden fazla kullanılmıyor mu?	☐
Box model doğru yapılandırıldı mı?	☐
box-sizing kontrol edildi mi?	☐
Margin ve padding tutarlı mı?	☐
Sabit genişlikler mobil taşma oluşturuyor mu?	☐
Flexbox ve Grid doğru kullanıldı mı?	☐
Mobil medya sorguları hazır mı?	☐
Telefon ve tablet görünümü test edildi mi?	☐
Yazı boyutları okunabilir mi?	☐
Renk kontrastı yeterli mi?	☐
Focus stilleri görünür mü?	☐
Butonlar dokunmaya uygun mu?	☐
Görseller kutudan taşıyor mu?	☐
Açılır menüler doğru çalışıyor mu?	☐
z-index sorunları kontrol edildi mi?	☐
Gereksiz !important kullanımı var mı?	☐
Kullanılmayan CSS kodları incelendi mi?	☐
CSS dosyaları küçültüldü mü?	☐
Önbellek temizlendi mi?	☐
Farklı tarayıcılarda test yapıldı mı?	☐
Animasyonlar kullanıcıyı rahatsız ediyor mu?	☐
Site hızı tekrar ölçüldü mü?	☐
WordPress güncellemesinde kodlar korunuyor mu?	☐

CSS Hakkında Sıkça Sorulan Sorular

CSS nedir?

CSS, HTML ile oluşturulan web sayfalarının renk, yazı tipi, yerleşim, boyut ve responsive görünümünü düzenleyen stil dilidir.

CSS açılımı nedir?

CSS, “Cascading Style Sheets” ifadesinin kısaltmasıdır. Türkçede Basamaklı Stil Sayfaları olarak adlandırılır.

CSS ne işe yarar?

Web sayfalarının tasarımını, renklerini, yazı boyutlarını, boşluklarını, yerleşimini ve mobil görünümünü düzenler.

CSS bir programlama dili midir?

CSS genel olarak bir stil veya biçimlendirme dili olarak tanımlanır. Web sayfasının görünümünü belirler.

CSS öğrenmek zor mu?

Temel CSS kuralları kısa sürede öğrenilebilir. Responsive tasarım, Grid, Flexbox ve büyük proje yönetimi daha fazla uygulama gerektirir.

CSS kullanmak için HTML bilmek gerekir mi?

CSS’nin hangi öğeye uygulanacağını anlayabilmek için temel HTML bilgisi gerekir.

CSS ile web sitesi yapılabilir mi?

CSS tek başına içerik yapısı oluşturmaz. HTML ile birlikte kullanılarak web sayfası tasarlanabilir.

CSS dosya uzantısı nedir?

CSS dosyaları .css uzantısına sahiptir.

Inline CSS nedir?

CSS kodunun doğrudan HTML öğesinin style özelliğine yazılmasıdır.

Internal CSS nedir?

CSS kodunun HTML sayfasındaki <style> etiketi içerisinde yazılmasıdır.

External CSS nedir?

CSS kodlarının ayrı bir .css dosyasında tutulması ve HTML sayfasına bağlanmasıdır.

En iyi CSS kullanım yöntemi hangisidir?

Çok sayfalı ve büyük projelerde harici CSS dosyaları genellikle daha düzenli ve yönetilebilir bir yapı sağlar.

CSS class nedir?

Bir veya daha fazla HTML öğesine ortak stil uygulamak için kullanılan seçicidir.

CSS ID nedir?

Genellikle sayfadaki benzersiz bir öğeyi seçmek için kullanılan tanımlayıcıdır.

CSS box model nedir?

Bir HTML öğesinin içerik, padding, border ve margin alanlarından oluşan kutu yapısıdır.

Flexbox nedir?

Öğeleri satır veya sütun yönünde hizalamayı kolaylaştıran tek boyutlu CSS yerleşim sistemidir.

CSS Grid nedir?

Satır ve sütunlardan oluşan iki boyutlu yerleşimler hazırlamayı sağlayan CSS sistemidir.

Flexbox mı Grid mi kullanılmalıdır?

Tek boyutlu hizalamalarda Flexbox, satır ve sütunlu karmaşık düzenlerde Grid kullanılabilir. İkisi birlikte de kullanılabilir.

Responsive CSS nedir?

Web sitesinin telefon, tablet ve masaüstü ekranlara uyum sağlaması için kullanılan CSS kurallarıdır.

Media query nedir?

Belirli ekran boyutu veya cihaz özelliğine göre farklı CSS kuralları uygulayan yapıdır.

CSS site hızını etkiler mi?

Büyük, kullanılmayan veya çok sayıda CSS dosyası sayfa yüklenmesini etkileyebilir. Doğru optimizasyon performansı geliştirebilir.

CSS değişiklikleri neden görünmüyor?

Önbellek, yanlış seçici, dosya yolu, öncelik veya tema çakışması nedeniyle değişiklikler görünmeyebilir.

WordPress’e CSS nasıl eklenir?

Tema dosyası, alt tema, Ek CSS alanı, sayfa oluşturucu veya harici stil dosyası kullanılabilir.

Elementor özel CSS nasıl eklenir?

Widget veya container’a özel class verilerek tema ya da özel CSS alanından stil uygulanabilir. Kullanılabilir alanlar Elementor sürümüne göre değişebilir.

CSS SEO için önemli mi?

CSS doğrudan sıralama sağlamaz. Ancak mobil uyumluluk, okunabilirlik, sayfa hızı ve kullanıcı deneyimini etkileyerek SEO çalışmalarını destekleyebilir.

CSS ile animasyon yapılabilir mi?

Evet. Transition ve @keyframes özellikleriyle animasyon ve geçiş efektleri oluşturulabilir.

CSS Framework nedir?

Grid, buton, form ve diğer bileşenleri hazır olarak sunan CSS kütüphanesidir.

CSS, HTML ile oluşturulan web sayfalarının görünümünü ve yerleşimini düzenleyen temel web teknolojilerinden biridir.

CSS sayesinde:

• Renkler ve yazı tipleri belirlenebilir.
• Sayfa boşlukları düzenlenebilir.
• Buton ve formlar tasarlanabilir.
• Öğeler yan yana veya alt alta yerleştirilebilir.
• Flexbox ve Grid ile gelişmiş düzenler hazırlanabilir.
• Mobil uyumlu tasarım oluşturulabilir.
• Animasyon ve geçişler eklenebilir.
• Aynı tasarım kuralları çok sayıda sayfada kullanılabilir.
• Marka kimliği bütün web sitesine uygulanabilir.

CSS kullanırken yalnızca görsel tasarıma odaklanılmamalıdır.

Hazırlanan stillerin:

• Mobil cihazlarda düzgün çalışması
• Metinleri okunabilir tutması
• Kullanılabilirliği desteklemesi
• Klavye erişimini engellememesi
• Gereksiz kod içermemesi
• Sayfa performansını olumsuz etkilememesi
• Farklı tarayıcılarda test edilmesi
• Güncellemesi kolay bir yapıda hazırlanması

gerekir. Doğru yapılandırılmış CSS kodları, web sitesinin yalnızca daha güzel görünmesini değil; daha hızlı, erişilebilir, mobil uyumlu ve yönetilebilir bir kullanıcı deneyimi sunmasını sağlar.