CSS Nedir? Seçicilerden Responsive Tasarıma Uygulamalı Rehber

Bir CSS kuralı gerçekte hangi üç parçadan oluşur?

CSS'in en küçük çalışma birimi bir kural kümesidir. Bir CSS kuralı seçici ile süslü parantez içindeki bildirim bloğundan oluşur. Her bildirim, özellik ve değer çiftidir; örnekteki color: navy ve font-size: 1rem iki ayrı bildirimdir:

p {
  color: navy;
  font-size: 1rem;
}

Burada p seçicidir ve tüm paragraf öğelerini hedefler. color ile font-size özellik adlarıdır; navy ve 1rem ise bu özelliklerin değerleridir. Süslü parantez içindeki her bildirim noktalı virgülle ayrılır.

Seçici, stilin hangi öğelere uygulanacağını belirler. h1 tüm birinci düzey başlıkları, .uyari sınıfı bu sınıfa sahip öğeleri, #ana-baslik ise belirli bir kimliğe sahip öğeyi hedefler. HTML tarafında aynı sınıf birden fazla öğede kullanılabilir; id ise bir sayfada tekil bir öğeyi tanımlamak amacıyla kullanılır.

CSS üç biçimde eklenebilir: HTML öğesinin style niteliğinde satır içi olarak, HTML belgesinin head bölümündeki style bloğunda veya ayrı bir .css dosyasında. Birden fazla sayfada ortak tasarım kullanılacaksa harici CSS dosyası daha düzenli bir yaklaşımdır. Böylece ortak bir renk, boşluk ya da yazı kuralı tek bir yerde değiştirilebilir.

CSS bildirimi yazmak, özelliği bilmek kadar geçerli değer seçmeyi de gerektirir. Örneğin color metin rengini belirler; öğenin arka planını değiştirmek için background-color kullanılır. margin öğenin dışındaki boşluğu, padding ise içerik ile kenarlık arasındaki iç boşluğu ifade eder. Bu iki boşluk aynı değildir; yerleşim sorunu çözerken hangisinin değiştirildiği sonucunu doğrudan etkiler.

Aynı öğeye iki kural geldiğinde cascade nasıl karar verir?

CSS adındaki 'cascading' kavramı, aynı öğe için birden fazla stil kuralı bulunduğunda hangi bildirimin uygulanacağını açıklamak için kullanılır. Sonuç tek bir özelliğin metindeki son görünüşünden ibaret değildir. Önce öğeyle eşleşen bildirimler; önem, kaynak/katman, özgüllük ve kaynak sırası gibi ölçütlerle değerlendirilir. Öğeye uygulanabilir bir değer bulunmadığında veya özellik kalıtıma açık olduğunda kalıtım devreye girebilir.

Örneğin şu kuralların ikisi de aynı paragrafı hedeflesin:

p { color: blue; }
.metin { color: green; }

HTML öğesi <p class="metin">Deneme</p> ise sınıf seçicisi, yalnızca öğe adıyla yapılan seçime göre daha özgül olduğundan yeşil renk kuralı öne çıkar. Aynı özgüllükte iki kural varsa genellikle kaynakta daha sonra tanımlanan bildirim geçerli olur. !important gibi öncelik değiştiren kullanımlar bu değerlendirmeyi farklılaştırabilir; bu nedenle bir çakışmayı çözmenin ilk yolu rastgele !important eklemek değil, seçicileri ve kural sırasını kontrol etmektir.

Kalıtım da sık karıştırılan bir konudur. Bazı metinle ilgili özellikler üst öğeden alt öğeye aktarılabilir; ancak her CSS özelliği otomatik olarak kalıtılmaz. Bir body öğesine verilen yazı rengi, içerideki birçok metin öğesini etkileyebilirken kutu boyutu veya dış boşluk aynı mantıkla alt öğelere taşınmaz. Bir değerin neden göründüğünü anlamak için tarayıcının geliştirici araçlarında ilgili öğeyi, üstü çizili kuralları ve hesaplanmış değerleri incelemek yararlıdır.

Bu nedenle CSS'te 'kuralı yazdım ama çalışmadı' sorusunun cevabı yalnızca yazım hatası olmayabilir. Seçici öğeyi hedeflemiyor, başka bir kural daha özgül, özellik kalıtılmıyor veya değer o özellik için geçersiz olabilir.

Kutu modeli: width değeri neden görünen toplam genişlik olmayabilir?

HTML'deki çoğu öğe tarayıcı tarafından bir kutu olarak değerlendirilir. Bu kutunun merkezinde içerik alanı bulunur; onun çevresinde padding, border ve margin yer alır. İçerik alanı yazı ya da görseli taşır. padding, içerikle kenarlık arasındaki iç mesafedir. border, kutunun çizgisidir. margin, kutu ile komşu öğeler arasındaki dış boşluktur.

Örneğin bir öğede width: 300px, yatayda toplam padding: 20px ve toplam border: 2px kullanıldığında, varsayılan kutu modeli yaklaşımında görünen dış genişlik 300 pikselden büyük olur; çünkü genişlik içerik alanına uygulanır. Bu sonucu hesaplarken yatay padding ve yatay kenarlıklar ayrıca dikkate alınır. box-sizing: border-box kullanıldığında ise belirtilen genişliğe içerik, padding ve border birlikte dahil edilir. Tasarımda sabit genişliklerle çalışırken bu farkı bilmemek taşma sorunlarına yol açabilir.

Dikey ölçülerde de benzer bir ayrım vardır. height, varsayılan yaklaşımda içerik alanını ifade edebilir; içerik miktarı kutunun yüksekliğini aşarsa taşma oluşabilir. Bu yüzden sabit yükseklik verilen kart veya butonlarda metnin farklı uzunluklarda olabileceği hesaba katılmalıdır.

margin ile padding arasındaki karar kuralı basittir: İçeriğin kutu kenarından uzaklaşması isteniyorsa padding, kutunun diğer öğelerden uzaklaşması isteniyorsa margin düşünülür. Arka plan rengi padding alanında görünür; margin alanı öğenin kendi arka planının parçası değildir. Bu ayrım, özellikle kart, menü ve buton tasarımlarında sonucu değiştirir.

Flexbox ve Grid ile öğeleri yan yana veya ızgara halinde düzenleme

CSS'te yerleşim için yalnızca position kullanmak zorunlu değildir. Flexbox, tek boyut ağırlıklı düzenlerde; Grid ise satır ve sütunların birlikte planlandığı düzenlerde kullanışlıdır.

Bir kapsayıcıya display: flex verildiğinde içindeki doğrudan çocuklar esnek düzenin parçası olur. flex-direction ana eksenin yatay mı dikey mi olacağını belirler. justify-content ana eksen boyunca, align-items ise karşı eksen boyunca hizalamayı kontrol eder. Bu nedenle bir öğeyi tam ortaya almak için yalnızca tek bir hizalama özelliği yetmeyebilir; kapsayıcının eksen yönü ve iki hizalama özelliği birlikte değerlendirilir.

.alan {
  display: flex;
  justify-content: center;
  align-items: center;
}

gap, komşu flex veya grid öğeleri arasındaki boşluğu ifade eder. Bu özellik, her çocuğa ayrı ayrı margin verme ihtiyacını azaltabilir. Ancak kapsayıcının genişliği yetersizse öğeler sıkışabilir veya taşabilir; flex-wrap bu durumda öğelerin yeni satıra geçmesine izin verebilir.

Grid, örneğin ürün kartlarının sütunlar ve satırlar halinde düzenlenmesinde tercih edilebilir. grid-template-columns sütunların yapısını, gap satır ve sütun aralıklarını tanımlar. Flexbox'ın ana amacı bir eksen üzerinde hizalamak iken Grid iki boyutlu yerleşimi daha açık biçimde tarif eder. İkisini aynı sayfada kullanmak mümkündür; seçim, düzenin tek eksenli mi yoksa satır-sütun ilişkili mi olduğuna göre yapılmalıdır.

position: absolute gibi konumlandırma yöntemleri, bir öğeyi normal belge akışından çıkarabilir. Bu yöntem, bir simgeyi kartın köşesine yerleştirmek gibi belirli durumlarda işe yarar; ancak bütün sayfa düzenini sabit koordinatlarla kurmak, farklı ekran genişliklerinde uyumu zorlaştırabilir.

Responsive tasarımda medya sorgusu neyi değiştirir?

Responsive tasarım, aynı içeriğin farklı ekran genişliklerinde uygun yerleşim ve okunabilirlikle sunulmasını amaçlar. CSS bunu çoğunlukla medya sorguları ve esnek ölçülerle sağlar. Bir medya sorgusu belirli koşul sağlandığında içindeki kuralları etkinleştirir:

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

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

Bu örnekte üç sütunlu düzen, görüntü alanı 700 piksel veya daha dar olduğunda tek sütuna dönüşür. 700 piksel evrensel bir eşik değildir; örneğin içeriğin genişliği, yazı boyutu ve tasarım hedefi incelenerek seçilmelidir. Önemli olan, medya sorgusunun rastgele cihaz adlarına değil, içeriğin artık rahat görünmediği koşula bağlanmasıdır.

Esnek genişliklerde yüzde, rem, em, vw ve fr gibi birimler kullanılabilir. Bu birimlerin anlamı aynı değildir: fr Grid içindeki kullanılabilir alanın payını, vw görüntü alanı genişliğinin oranını, rem ise kök yazı boyutuna bağlı ölçüyü ifade eder. Sabit piksel değerleri bazı ayrıntılar için yararlı olsa da tüm yerleşimi piksele kilitlemek küçük ekranlarda taşma riskini artırabilir.

Responsive olmak yalnızca kutuları küçültmek değildir. Metin satırlarının aşırı uzamaması, butonların dokunulabilir kalması, görsellerin kapsayıcıyı taşırmaması ve navigasyonun kullanılabilir olması da kontrol edilmelidir. Bir kural masaüstünde doğru görünse bile daha dar ekranda taşma, üst üste binme veya okunabilirlik kaybı yaratabilir.

Çözümlü örnekler: kuralı yazmaktan sonucu okumaya

Örnek 1: Bir butonu yatay ve dikey ortalama

Verilenler: .buton-alani kapsayıcısının içinde tek bir buton var. Butonun hem yatay hem dikey ortalanması isteniyor.

Çözüm adımları:

1. Hizalama özelliklerinin çalışacağı bir flex kapsayıcı oluşturmak için display: flex yazılır.
2. Yatay doğrultudaki hizalama için ana eksen varsayılan olarak yatay olduğundan justify-content: center kullanılır.
3. Dikey hizalama için align-items: center eklenir.
4. Dikey ortalamanın görülebilmesi için kapsayıcının belirli bir yüksekliği olmalıdır. Yükseklik verilmezse kapsayıcı yalnızca içeriği kadar olabilir ve ortalama etkisi fark edilmeyebilir.

.buton-alani {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 160px;
}

Sonuç: Buton, 160 pikselden az olmayan kapsayıcı yüksekliği içinde iki eksende ortalanır. min-height yerine içerik yüksekliği değişkense sabit height kullanmanın taşma ihtimali oluşturabileceği unutulmamalıdır.

Örnek 2: Kartların mobilde tek sütuna geçmesi

Verilenler: .kartlar kapsayıcısında üç kart bulunuyor. Geniş ekranda kartlar üç sütun, 700 piksel ve altında tek sütun olacak.

Çözüm adımları:

1. Kapsayıcı display: grid ile Grid düzenine alınır.
2. Geniş görünüm için grid-template-columns: repeat(3, 1fr) yazılır. Bu, kullanılabilir alanı üç eşit sütuna böler.
3. Kartlar arasında boşluk için gap: 16px eklenir.
4. @media (max-width: 700px) içinde sütun tanımı 1fr yapılır.

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

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

Sonuç: Geniş görünümde üç eşit sütun ve aralarında 16 piksellik boşluk oluşur; medya sorgusunun koşulu sağlandığında her kart satırın tamamına yayılan tek sütun düzenine geçer. Bu örnekteki 700px tasarım gereksinimidir; tüm siteler için değişmez bir standart olarak alınmamalıdır.

Sık yapılan hatalar ve karıştırılan kavramlar

HTML ile CSS'in görevlerini karıştırmak: HTML başlık, paragraf ve bağlantı gibi yapısal içeriği tanımlar; CSS bunların görünüşünü ve yerleşimini düzenler. CSS tek başına HTML dosyasındaki öğeleri biçimlendirmek için kullanılmaz; fakat CSS'in yalnızca HTML'e özgü olduğu da söylenmemelidir. CSS, web ortamındaki farklı işaretleme yapılarının sunumunda da kullanılabilir. Başlangıç düzeyinde doğru model, HTML yapısı ile CSS sunumunu ayrı düşünmektir.

margin ile paddingi aynı sanmak: Kartın içindeki yazıyı kenardan uzaklaştırmak için padding, kartı komşu karttan ayırmak için margin veya kapsayıcı düzenindeki gap değerlendirilir. Yanlış özelliği değiştirmek arka planın göründüğü alanı ve toplam kutu boyutunu değiştirir.

width: 100% ile taşmayı gözden kaçırmak: Bir öğe yüzde 100 genişlik alıp ayrıca padding ve border kullanıyorsa kutu modeli ayarına bağlı olarak kapsayıcıyı aşabilir. box-sizing davranışı ve toplam yatay ölçüler birlikte kontrol edilmelidir.

Özgüllük sorununu yeni kurallarla bastırmak: Stil uygulanmadığında aynı özelliği tekrar tekrar yazmak yerine seçicinin öğeyi hedefleyip hedeflemediği, daha özgül bir kural ve !important kullanımı incelenmelidir. Geliştirici araçlarında üzeri çizili bildirimler hangi kuralın elendiğini gösterir.

Flexbox'ı Grid sanmak: Flexbox özellikle tek eksenli hizalamalarda, Grid satır ve sütunların birlikte planlandığı düzenlerde daha anlaşılırdır. Birini diğerinin zorunlu alternatifi gibi kullanmak, karmaşık CSS'e yol açabilir.

Responsive tasarımı yalnızca ekranı küçültmek sanmak: Sütun sayısının azalması tek başına yeterli değildir. Metin taşması, görsel boyutu, boşluklar ve kullanıcı etkileşimi de dar ekran koşulunda test edilmelidir.

CSS ile JavaScript'i aynı görevde görmek: :hover gibi görsel durumlar CSS ile tanımlanabilir; ancak sunucudan veri çekmek, bir sayacın mantığını yürütmek veya kullanıcı işlemine göre veri değiştirmek CSS'in görevi değildir.