Geçmişten bugüne insanlar çoğu zaman yapacakları işleri daha da kolaylaştırmak ve verimlerini yükseltme doğrultusunda işe koyulma taraftarı olmuştur. Bu yaklaşımın doğal bir getirisi olarak günümüzde de işlerin, ürünlerin, hizmetlerin ve markaların dijitalleşmesi yolunda büyük adımlar atılmıştır.
İnsanlar, gelişen teknoloji sayesinde bilgiye internet üzerinden web siteleri aracılığıyla rahat ve zamansız bir şekilde ulaşabilme fırsatına erişmiş, bu bağlamda birçok web teknolojisi ortaya çıkmış ve bunların her biri internet sayfalarının yapısını oluşturma sürecinde rol almaya başlamıştır.
İçerik, görselleştirme ve etkileşim katmanlarına sahip olan internet sitelerinin görsel olarak şekillendirilmesine olanak tanıyan bir CSS tanım dili bulunmaktadır. Web sitelerine yüksek bir kullanılabilirlik sunması açısından etkili CSS kullanımı oldukça önemlidir.
CSS Nedir?
CSS, açılımı Cascading Style Sheets ve Türkçesi Basamaklı Stil Sayfaları anlamına gelen bir kodlama dilidir. Farklı cihazlar ve ekran boyutları için tasarım, düzen ve gösterimdeki çeşitleri dahil olmak üzere web sayfalarında stiller tanımlamak için kullanılır.
Yapısal olarak incelendiğinde internet sayfalarının katmanlarından görselleştirme katmanını oluşturur. CSS, çok temel belge metni stili, düzen oluşturma, ayrıca animasyon gibi efektler için bile kullanılabilir. Web sayfanızın görüntüsünü CSS ile istediğiniz hale getirebilir, hatta daha iyi bir forma sokabilirsiniz.
İnternet kullanımının yaygınlaşması ve kullanım amaçlarının çeşitlenmesiyle doğan yeni ihtiyaçlarla CSS sürekli gelişmekte ve yeni özellikleri de kullanıma sunulmaktadır. CSS kullanımında, eski web sitelerini bozacak olan hiçbir şeyi değiştirmemek gibi bir kural bulunmaktadır.
Web sitesinde neyin, nerede ve nasıl görüntüleneceğini ayrıca tarif etmekte olan CSS dili, son zamanlarda güncel kodlama stratejilerine imkan sağlama yönüyle de popülaritesini arttırmıştır. Estetik görünüm günümüzde daha da önem kazandığı için bu doğrultuda CSS kullanımı bir şart haline gelmiştir ve CSS sayesinde web sitesinde görseller açısından daha fazla hareket alanı sağlanmıştır.
CSS Ne İşe Yarar?
Bir web sitesinin kullanıcıyla buluştuğu ilk noktalar genellikle düzen ve tasarımı oluyor. Birçok görsel tasarım unsurunu şekillendirmede ve değiştirmede CSS kullanılıyor.
- Metin boyutu, rengi, stili, yazı tipi belirlenmesinde kullanılır.
Öncesinde de bahsediliği üzere CSS kodları, web sitelerini daha görsel ve estetik bir görünüme kavuşturmada çok yardımcı olur. CSS ile arka planlarınızı renklendirebilir, metin yazılarını boyutlandırarak farklı renklere boyayabilirsiniz. Madde işareti stilleri ve girintiler de oluşturulabilir.
- Tablo boyutu, gölgelendirme, kenarlıklar ve hizalama yapılabilir.
Renkleri arka plana uygular, nesne boyutlarını düzenler. Web sayfasındaki görünümlere gölge katmak için yine CSS kullanılması gerekir. Ayrıca, web sitenizdeki bir görünümü değiştirdiğinizde bu ögenin özelliklerini CSS ile tekrar kullanabilirsiniz.
- Boyut kontrolü sağlar.
Sayfada görünür bir öge oluşturan neredeyse tüm HTML etiketlerine stil verebilir. Web sayfası ögelerini kutularda içerir ve bu kutuları sayfadaki belirli konumlara ve boyutlara göre kaydırır. Farklı ögelerdeki özelikleri aynı CSS kodunda belirterek web sitenizin boyutunu düşürmenizi sağlayabilirsiniz. Bu durum, SEO açısından da oldukça faydalı olacak, web sitesi trafiğini arttıracaktır.
- Web sitenizde istediğiniz şekilde görünümler yaratır.
Farklı arama motorları ya da mobil, masaüstü uygulamaları için farklı görünümler yaratma fırsatı sunar. HTML aracılığıyla yapılamayacak olan, sitenin herhangi bir sayfa içeriğinde herhangi bir ögeyi veya sayfanın konumunu CSS yardımıyla kolaylıkla tanımlayabilirsiniz. Yazı başlıklarına ve nesnelere detay katmak istemeniz noktasında gerekli düzenlemeleri sağlayabilirsiniz.
- Üst düzey web deneyimi sağlar.
Web sitesine gelen ziyaretçiler için güçlü özellikleri bulunur. Web sayfalarında sadece CSS kullanılarak işlemler sürdürülebilir fakat bunun yanında HTML ve JavaScript dillerini de kullanarak etkileyici sonuçlar elde edebilirsiniz. Bu sayede birçok üst düzey geçiş efekti, animasyon ve menü tasarımları ile daha gelişmiş bir web deneyimi fırsatı sunulur.
CSS Nasıl Kullanılır?
Inline (satıriçi/çevrimiçi stil sayfası), internal (iç stil sayfası) ve external (dış stil sayfası) olmak üzere üç çeşit CSS türü bulunmaktadır. CSS kodları HTML dökümanları üzerinde bu üç şekilde yerleştirilir. İç stil sayfası olarak HTML’de kodlanabilir veya dış stil sayfasında dışarıda tutulabilir. Stil çok sayıda sayfaya uygulanacaksa externaller, tek bir belge içinse internaller kullanılır. Inline stil ise tek bir sayfadaki tek bir unsuru kontrol etmek içindir.
CSS’in nasıl kullanıldığını detaylı olarak ele alacak olursak;
Bir tarayıcı bir belge görüntülediğinde, belgenin içeriğini stil bilgisiyle birleştirmesi gerekir. Tarayıcı öncelikle ağdan alarak HTML’yi yükler. HTML içeriğini ve CSS stilini yükledikten ve ayrıştırdıktan sonra, bunları birleştirme işlemi iki ayrı aşamada gerçekleşir. İlk olarak, tarayıcı HTML’yi bir belge nesne modeli olan DOM’a dönüştürür.
DOM, CSS’nin işlevselliğinde oldukça önemli bir role sahip olan düğümlerden oluşan ağaç benzeri yapılardır. Biçimlendirme dilindeki her metin, nitelik ve öge parçası kendi DOM düğümü olacaktır.
Her düğümün ilişkisi, alt düğümler, ana düğümler veya kardeş düğümler olabilen diğer DOM düğümleriyle nasıl bağlandığına göre tanımlanır, bu açıdan CSS’i korumak adına DOM oldukça işlevli ve önemlidir.
Tarayıcı daha sonra HTML belgesiyle bağlantılı olan, gömülü resimler ve videolar gibi kaynakların çoğunu ve bağlantılı CSS’yi getirir. Tarayıcı, getirilen CSS’yi ayrıştırır ve farklı kuralları seçici türlerine göre farklı kümelere ayırır.
Bulduğu seçicilere dayanarak, DOM’daki hangi düğümlere hangi kuralların uygulanması gerektiğini belirler ve işleme ağacı denilen bu ara adımda gerektiği şekilde bunlara stil ekler. İşleme ağacı, kurallar uygulandıktan sonra içinde görünmesi gereken yapıda düzenlenir.
Son aşama olan boyama aşamasında sayfanın görsel gösterimi ekrana yansıtılır.
CSS Kodları Nelerdir?
Web sayfasının tasarımına yön vermede belli başlı CSS kodları bulunmaktadır. Bu kodlar sayesinde istediğimiz düzene ulaşmakta da zorluk çekmemekteyiz.
Başlık (Heading)
Sitede görsel olarak belki de ilk dikkatimizi çeken unsurlardan biri olan başlıklar CSS kodları üzerinden oluşturulabiliyor. Bir metinle alakalı aradığımız noktaların ipucunu ilk olarak başlıklardan çıkarıyoruz, bu açıdan web sitesi düzeninde de heading kodlama olmazsa olmaz bir göreve sahiptir. Nitekim heading hiyerarşisinin doğru strateji ile kurgulanması, site içi SEO’nun en önemli çalışma alanlarından biridir.
Box (Çerçeve)
Box kodu bir nesneye çerçeve vermemizi sağlar. Görselliği arttırıcı kodlardan olan box, çerçeve kalınlığı, stili ve rengini oluşturur.
Çerçeveye dilediğiniz renk kodunu yazabilir, çizgi ve kalınlık seçeneklerden sitenize uygun olanı seçebilirsiniz. HTML elementi ve CSS kodu ile CSS Çerçeve kodu kullanılabilir, ayrıca kullanımı da oldukça kolaydır.
Font style (Yazı tipi)
Sayfadaki metnin görünümünü ve biçimini düzenlemek için kullanılan kodlardan biri olan font style, temel CSS kodlarından biridir. Başında font ifadesi ile kullanılır. İstenen stil ve boyutta yazı tipleri oluşturularak metin karakterleri kümesi elde edilir. Yazının tasarımlarına ve boyutlarına göre seçimler yapılır.
Background (Arka plan)
Etiketlere arka plan efektleri vermek için kullanılan background kodu; detaylı olarak arka plan renginde, arka plan görseli eklemede, arka plana eklenen görsel tekrarında, arka plan görselinin web sayfasındaki pozisyonunda ve yine arka plana konulan görselin kaydırma çubuğu ile hareket edip etmemesini sağlamada rol alır.
Text-align (Metin hizalama)
Hizalamada da etkin rol alan CSS kodlarının; text-align üzerinden metinlerin sağa, sola ve ortaya hizalanması gerçekleştirilir. Yani sayfadaki yazıların ögeler içindeki konumlarını belirlemede rol alır.
CSS Renk Kodları
CSS’in ayrıca renk kodlarından oluşan bir bölümü bulunmaktadır. Bildiğimiz üzere web tasarım, stili ve düzen gibi konularda renklerin önemi oldukça aşikar. Bu bağlamda CSS kodları üzerinden de renklendirmeler yapabilmemiz görsel açıdan tatmin edici olacak ve siteye kullanıcı çekecektir.
CSS renk kodları paleti; renk adları, hex kodu ve decimal kod (RGB) gibi üç format altında karşımıza çıkmaktadır. Bir metnin arka planını renklendirmek için kullanabileceğimiz bu kodda farklı renk skalaları bulunmaktadır. Ayrıca, metinlerin ve başlıkların da renklerini istediğiniz şekilde ayarlayabileceksiniz.
CSS, kısaca web görsellerinin düzenlenmesinde oldukça önemli rol oynayan bir kodlama çeşididir. HTML’nin de yapacağı iş yükünü azaltarak, asıl görevini sürdürmesine olanak sağlar. CSS web tasarımının tüm aşamalarına hakim kılar. Kullanım kolaylığı ve yalın dili sayesinde günümüzde de oldukça popüler bir kodlama dili haline gelmiştir. Bu ve benzeri işlevleri sayesinde de SEO’ya büyük hizmet eder konumdadır.
Konuyla İlgili;
https://www.w3schools.com/html/html_css.asp
https://www.tutorialrepublic.com/css-tutorial/css-get-started.php
https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_works
