CSS yani Cascading Style Sheets türkçeye basamaklı stil şablonu olarak çevrilir. Özellikle Frontend Developer yetiştirme programı müfredatları hakkında bir fikriniz varsa CSS’in ne kadar önemli olduğunu biliyor olmalısınız. Web sayfalarındaki tüm öğelere CSS kullanarak stil verebilirsiniz. Stil vermek sadece estetik bir görünüm açısından değil kullanıcı deneyimi açısından da önemlidir. Web sayfalarının kullanılabilirliğini arttırır. HTML, JavaScript ve CSS web ön yüzünün ayrılmaz elementleridir. HTML ile oluşturulan öğelere CSS ile biçim JS ile etkileşim verilir. Sadece HTML ile de bir derece stil özellikleri vermeniz mümkün olsa da yapabilecekleriniz sınırlıdır. CSS boyutuna geldiğinizde ise stil anlamında yapabileceklerinizin bir sınırı yoktur. CSS’in tarihi ise 1994 yılına dayanır. W3C yani World Wide Web Konsorsiyumu tarafından geliştirilmiştir. Geliştirilmesinde Hakon Wium Lie ve Bert Bos’un son derece önemli rolleri vardır. Başlangıçta HTML’den stil öğelerini ayırarak daha sürdürülebilir bir şekilde kod yazmayı mümkün kılmak istediler. 1996 yılına gelindiğinde ise CSS1 yayınlanır. HTML öğelerini stil uygulamak için element, sınıf ve ID gibi öğelerden yararlanılıyordu. Bu öğeler HTML’de bulunan belirli öğeleri seçerek onlara özel stil tanımlamayı mümkün kılıyordu. CSS1 de sayfa yerleşimi için temel öğeler olan yazı padding, margin, yazı tipi, arka plan stili ve gibi öğeler de tanıtılmıştır. Padding web sayfasında yer alan herhangi bir öğe ile öğenin kendi sınırına olan boşlukları ifade eder. Margin ise bir öğenin diğer öğelerle arasındaki boşluğu ifade eder. Margin değeri ile öğenin diğer öğelerle yaklaşıp ve uzaklaşmasını sağlayabiliriz. Metin stilinde ise metin hizalama, metindeki harfleri büyük ya da küçük harf yapma ve satırlar arası boşluğu ayarlamak gibi şeyler mümkün olur. 1998 yılına gelindiğinde ise daha gelişmiş bir CSS bizi bekliyordu. CSS kullanımı CSS2 ile daha fonksiyonel bir hale gelmiştir. Gelişmiş seçiciler ile CSS2 de stilleri hedef öğelere daha hassas bir biçimde işlemek mümkün oldu. Farklı cihaz türlerine uyumlu kod yazabilmemizi sağlayan medya türleri özelliği de yine CSS2 ile beraber geldi. 2011 yılında yayınlanan CSS3 de ise CSS2’deki tutarsızlıklar ortadan kaldırıldı. Bu sürüm birçok tarayıcı tarafından desteklenir. CSS3 ise modüller halinde yayınlandı. Bugün bir Frontend geliştiricinin sayfayı özelleştirmek için kullandığı kapsamlı öğeler bu sürümde paylaşıldı. Seçiciler, kutu modeli, text efektleri, 2D ve 3D geçişler, animasyonlar, flexbox ve grid layout öne çıkan özellikler arasındadır. 2020’li yıllarda ise CSS hala gelişmeye devam eder. Eski sürümlerde olduğu gibi versiyonlar artık sayılandırılmıyor. Geliştiricilere stil verirken daha çok esneklik sağlamak için hala çalışmalar devam ediyor.
CSS Nedir?
CSS arka plandaki kodlara geçirdiğimiz bir deridir. CSS özellikleri sayesinde HTML’den başka bir dosyada tüm stil tanımlamanızı yaparak kodunuzun kalitesini ve okunabilirliğini arttırabilirsiniz. CSS sayfanın tasarım kısmından sorumludur. İçinde barındırdığı seçiciler sayesinde tek stil birden fazla öğeye uygulanabilir ve bunun sonucunda da kod tekrarı önlenmiş olur. CSS’in ne olduğunu daha iyi anlamak için bir insanı hayal edebilirsiniz. İnsanı oluşturan kemikleri, kasları ve deriyi düşünün. Kemikler yani iskelet tüm yapıyı üzerinde bulundurur. İskeleti HTML olarak değerlendirebiliriz. Kaslar ise hareket etmemizi mümkün kılarlar. Yani koda interaktiflik sağlayan JS ile ilişkilendirilebilir. Deri ise dış görünüşümüzü oluşturup arka plandaki öğeleri gizler. CSS yani deri kullanıcı deneyimini arttırır. Görüntünün kullanıcı deneyimi yani UX açsından ne kadar önemli olduğunu anlamak için de sadece beyaz bir background ve siyah standart bir fontta yazılardan oluşan bir web sitesi hayal edelim. Navbar’da gitmek istediğiniz sayfanın adı yazsa bile sizin o yazıyı diğer yazılardan ayırt etmek için zaman harcamanız gerekecektir. Bir alışveriş sitesinde de ürün kartlarının aralarında boşluk olmadan yüklendiğini ve ürün açıklamalarının da üst üste geldiğini düşünün. Böyle bir siteye girmek ister miydiniz? Tabiki HTML ile da bu temel karışıklıklar giderilebilecek olsada sürekli tercih ettiğimiz ve aradığınız şeyleri kolayca bulduğumuz sitelerin hepsinde son derece detaylı düşünülmüş stil kodları vardır.
CSS Kodları Nelerdir?
Yazının bu bölümünde de CSS kodları ve anlamları üzerinde duracağız. Kodları açıklamaya başlamadan önce CSS kodları nereye yazılır ve nasıl HTML dosyalarıyla bağlanır gibi soruları cevaplayalım. CSS kodlarını projenizde kullanmak için konumlandırabileceğiniz üç farklı yer vardır. Bunlardan biri ilgili etikete style diyerek stilleri tanımlamaktır. Sadece seçtiğiniz element için bu stil kodları geçerli olur. Bu yönteme Inline CSS denir ve genelde kodun okunabilirliğini düşürdüğü için tercih edilmez. HTML içine CSS eklemeyi içeren bir başka yöntem ise Internal yani dahili CSS’tir. Internal CSS’de stil kodlarınızı HTML kodlarınızın head bölümüne ekleyebilirsiniz. şeklindeki etiketlerin arasına öğeleriniz için gerekli olan tüm stil tanımlamalarını yazabilirsiniz. Bu yöntem Inline CSS ile kıyasladığımızda daha iyi olsa da farklı sayfalar için tekrar tekrar aynı CSS kodlarını yazmanıza sebep olacağı için yeterince iyi bir yöntem değildir. CSS kodlarını depolamak için kullanabileceğimiz son yöntem ise harici yani External CSS’dir. External CSS’de .css uzantılı bir dosya oluşturursunuz. Sonra oluşturduğunuz dosyanın bağlantısını head bölümüne koyarsınız. Bu şekilde ayrı bir dosyaya tanımladığınız stil kodları okunur ve daha temiz bir şekilde depolanmış olur. Bu bağlantı ekleme işlemini yaparken kullanacağınız kod genellikle budur. Kodunuz bu sayede yeniden kullanılabilir bir hale gelir. HTML’e bağladığınız gibi Js’e de bağlamanız mümkündür. HTML gibi doğrudan ilişkilendiremeseniz de DOM manipülasyonu, class ekleme ve styled-components gibi harici kütüphanelerden yararlanarak CSS’i konuzda işlevsel kılabilirsiniz. CSS kodları konusuna geldiğimizde ise karşımıza uzun bir liste çıkar. Özellik atamak için kullandığınız kelimeler çoğunlukla basittir. CSS kodları ve anlamları üzerinde hiç pratiğiniz olmasa bile çağrışım yaparak ne işe yaradıklarını hatırlayabilirsiniz. Örnek vermek gerekirse metininizin rengini değiştirmek istediğiniz varsayalım. Önce hangi özellik ile değiştirmek istediğinizi yazın. CSS de bu özellik colordır. color: red; şeklinde yazarsanız yazınızın rengi değişir. Arka plan ile ilgili bir değişiklik yapacağınız zaman da tahmin edebileceğiniz gibi background özelliğini kullanırsınız. Boyutlandırmada genişlik için width yükseklik için hight’a değer atayabilirsiniz. Atadığınız değeri CSS’de kullanılan birkaç ölçü birimi ile ifade edebilirsiniz. Bu ölçüler px yani piksel, santimetre için cm, milimetre için mm, point için pt ve pica için pc birimlerini kullanabilirsiniz. div { width: 300px; } bu şekilde div elemanınızın genişliğini 300 px yapabilirsiniz. Elementlerinizin boyutlarının diğer elementlere ya da sayfaya göre boyutlandırılmasını istediğinizde de yüzde yani % işaretini ya da parent elemente göre boyutlandıran em ölçü birimini kullanabilirsiniz. Elemenlerinizi sitenizde konumlandırırken de basit bir şekilde margin ve padding özelliklerinden yararlanabilirsiniz. Padding elementin kendi sınır çizgisi ile olan boşluğu ifade eder. Margin ise elementin diğer elementlere olan uzaklığını ifade eder. Şimdi yan yana iki kare hayal edin ve bu karelerin birinin içinde bir daire olsun. Karelerin birbirleri ile aralarındaki uzaklığı margin değeri vererek arttırıp azaltabilirsiniz. İkinci öğemizde içinde bir daire şekli bulunan karede ise daire ile kare arasındaki mesafe aslında paddingdir fakat sadece daireyi öğe olarak düşünmeniz gerekir. CSS kutu modeline göre her HTML elementinin sahip olduğu bir kutu vardır. Siz padding değerini arttırdığınızda elementin kapladığı yer genişleyeceği için etrafındaki diğer öğelerle olan boşluk otomatik olarak artmış görünecektir. Dikkat etmeniz gereken tek şey bu işlemi yaptığınızda aslında elementin boyutunu değil kapladığı yeri değiştirdiğinizdir. div { padding: 20px; } şeklinde CSS kodunuzu süslü parantezler arasına yazabilirsiniz. Sayfa düzenini daha detaylı bir şekilde değiştirmek yani bir çok elementi sağa ya da sola taşımaktan fazlasını yapmak istediğinizde ise kullanmanız gereken özellikler Flexbox ve Grid’dir
Neden CSS Kodları Kullanılır?
CSS web sayfalarına tasarım eklemek için kullanılır. Sayfadaki her bir öğenin düzenini ve stilini CSS kullanarak değiştirebilirsiniz. Web tasarımı ilkelerini CSS kullanarak uygulayarak sayfalarınızı kullanıcılar için daha çekici bir hale getirebilirsiniz. Sayfanızı görüntüsel olarak üst düzeye taşımak istiyorsanız CSS kullanmanız gerekir. CSS renk kodları ile sayfanızı renk paletinden seçebileceğiniz bütün renklere çevirebilirsiniz. Font, boyut ve şekil gibi aklınıza gelebilecek bütün öğeleri CSS komutları kullanarak farklılaştırabilirsiniz. Sayfada bulunan elementlerinizi CSS sayesinde istediğiniz konumlara taşıyabilirsiniz. CSS’in avantajlarından bir tanesi de her element için ayrı stil kodu yazmak zorunda olmamanızdır. Tekrarlayan öğeleriniz için basit bir şekilde aynı kodları tanımlayabilirsiniz. Tablet ve bilgisayar gibi farklı cihaz türlerine uyumlu tasarımları da hayata geçirebilmek için CSS’e ihtiyacınız vardır. Saydığım bu özellikler projelerde CSS kullanılmasının önemli sebeplerindendir. Son yıllarda popülerleşen mesleklerden biri olan Frontend geliştirme ile ilgileniyorsanız ve henüz yazılım nedir sorusunu soracak kadar yabancıysanız HTML’den sonra öğrenmeniz gereken ilk şeyin CSS olduğunu bilmeniz gerekir. Bir yazılım eğitimi alarak ilerlemeyi düşünüyorsanız da CSS konseptini detaylı bir şekilde göreceğinizden emin olabilirsiniz.
En Çok Kullanılan CSS Kodları ve İşlevleri
CSS Kutu Modeli
CSS kutu modelinde her öğenin etrafında ayrı ayrı kutlar olduğunu düşünürüz. Bu bağlamda öğenin iç boşluğunu ifade etmek için padding, kutunun sınır çizgilerinden bahsetmek için border ve diğer öğeler arasındaki boşluktan bahsetmek için de margin kullanılır.
div { width: 200px; height: 150px; border: 1px solid black; padding: 10px; margin: 20px; }
Bu kodda div elementinin border genişliğinin 1px ve siyah olarak ayarlandığını, iç boşluğunun 10px olduğunu ve diğer öğelerle arasındaki mesafenin 20px olduğunu görebilirsiniz. Bu kodları değerleri isteğiniz doğrultusunda değiştirerek div elementini tekrar boyutlandırabilirsiniz.
Renklendirme
CSS üzerinde öğelerinizi farklı yöntemlerle renklendirebilirsiniz. Bu yöntemlerden arasında doğrudan rengin adını yazmak, Hexadecimal bir değer kullanmak, RGBA değerleri vererek renk seçmek ya da HLS değerlerinden yararlanmak vardır. h1 { font-size: 3rem; font-weight: bold; color: #007bff; }
Yukarıdaki kod örneğinde h1 elementine 3rem boyutunda, bold ve Hex koduna göre açık mavi renginde bir renk tanımlaması yapılmıştır. Yukarıdaki gibi basit bir kod ile text öğelerinize stil tanımlaması yapabilirsiniz.
Kaynakça GeeksforGeeks. (2024, Ekim 6). CSS history and versions. https://www.geeksforgeeks.org/css-history-versions/ Vikipedi. (2024, Mayıs 28). CSS. https://tr.wikipedia.org/wiki/CSS