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

Teknolojik gelişmelerle internetin hayatlarımızın bir parçası, gelir kaynaklarımıza katkısı olduğu gibi, bazılarımız için internet, tamamen gelir kaynağı olurken, bazılarımız içinse merakla kendini geliştirmek istediği bir alan oldu.

Bu yazımızda internet dendiğinde akla gelen web siteleri, internet sayfaları ile alakalı bir konu olan Cascading Style Sheets (CSS) bize eşlik ediyor. Peki, CSS tam olarak nedir ve ne gibi avantajlar sağlar? Birlikte keşfedelim.

CSS Nedir?

CSS (açılımı Cascading Style Sheets) “Basamaklı Stil Sayfaları” anlamına gelen bir web teknolojisidir. Bu web teknolojisi, tarayıcıya bir web sitesinin farklı öğelerini görüntülemek için bir stil sağlayan tamamlayıcı bir HTML dili mekanizmasıdır.

CSS, web sayfasının ögelerinin hangi yazı tipi ile oluşturulduğu, yazı boyutu rengi veya hizalaması ile ilgilenir.

CSS içeren ve içermeyen bir internet sayfası arasında oldukça büyük bir fark vardır. CSS’nin en önemli misyonunun internet sayfalarını daha iyi ve daha okunaklı hale getirmek olduğunu ifade edebiliriz.

Dolayısıyla bu teknoloji, web sitesine görünüm ve düzen açısından oldukça fazla katkı sağlamaktadır. Eğer CSS olmasaydı, beyaz arka plandan oluşan ve düz metinlerin yazılı olduğu platformlardan (web sitelerinden) bahsediyor olurduk.

CSS’in Kısaca Tarihçesi

CSS, 10 Ekim 1994 tarihinde CERN’de Tim Barnes-Lee’nin çalışma arkadaşı olan Hakon Wium Lie tarafından ortaya atılmıştır. Bu öneriyi takip eden süreçte W3W (Dünya Çapında Ağ Birliği), farklı forum ve e-posta çizelgelerinde yapılan birden fazla stil sayfası dili taslağını da göz önünde tutarak, 1996 senesinde birinci CSS fikrini sunmuştur (CSS1).

İnternetin giderek daha fazla insana ulaşması ve kullanımının yaygınlaşıp, kullanım amaçlarının çoğalmasıyla beraber, W3W 12 Mayıs 1998’de CSS2 önerisini sunmuştur. Bu öneriyi CSS3 takip etmiştir.

W3C CSS Nedir?

1996'da World Wide Web Consortium (W3C) tarafından CSS'nin geliştirilmesinden önce web sayfaları hem biçim hem de işlev açısından son derece sınırlıydı. Sayfalarda düzen eksikliği göze çarpıyor ve paragraflar tek bir sütun boyunca akıp gidiyordu.

Ancak CSS, web sayfası düzeninde aşağıdakiler gibi birkaç yeniliğe izin verdi:

  • Tarayıcı için varsayılandan farklı yazı tipleri
  • Metin ve bağlantıların rengini ve boyutunu belirtme
  • Arka planlara renk uygulama
  • Web sayfası öğelerini farklı biçimlerde gösterme
  • Bu biçimleri sayfadaki belirli konumlara taşıma

Böylece CSS dili ile göze hoş gelen ve daha kolay okunaklı internet sayfaları ve web projeleri ortaya çıktı. Özetle internet deneyimlerimizi iyileştiren bir programlama dili olarak varlığını sürdürdüğünü ifade edebiliriz.

CSS Ne işe yarar?

CSS işlevleri, web sayfası tasarımı ve bütünlüğüne harika katkılar sağlar. Web dizaynında standart bir estetiğin sınırlarını kaldıran Cascading Style Sheets, tasarımcılar için oldukça kapsamlı bir hareket alanı yaratmaktadır.

CSS ile metin boyutu, rengi, stili, yazı tipi, hizalama, bağlantı rengi, gölgeleme, tablo boyutu, madde işareti vb. tasarımları daha iyi hale getirmek mümkündür.

css ile neler yapılabilir

CSS ile neler yapılabilir, avantajları neler?

CSS kodları sanılanın aksine sadece estetik kaygı üzerine yazılan kodlar değildir. CSS, web sitesi ziyaretçileri için üst düzey bir kullanıcı deneyimi sunmaya yarayan birçok güçlü potansiyellerde özelliklere sahiptir. CSS yardımı ile arka plan resmi, renk, yazı boyutu, klasiğin dışında başlık stilleri, kenar süsleri, gölgelendirme, derinlik kazandırma, menü ekseni, sayfa mizanpajı bunlara ek olarak belirli bir nesneyi veyahut sayfanın konumunu ayarlayabilir, tanımlamasını oldukça etkili bir şekilde yapabilirsiniz.

  • Yazı efekti, yazmayı canlandırmanın ve web sitelerini daha şık hale getirmenin bir yolu olabilir. Özellikle CSS typewriter effect isimli bileşende son derece ilgi çekici tasarım ögelerinin olduğunu belirtelim.
  • Animasyon konusunda oldukça verimlidir. Cubic-bezier işlevi, geliştiricilerin CSS animasyonları üzerinde daha iyi kontrol sağlamasına olanak tanır.
  • Grid (ızgara çizgi biçimleri) mükemmel bir yaratıcılık ve tasarım aracıdır. Herhangi bir modern web sitesine harika bir görsel etki katarlar.
  • Statik bir konumu tutan öğeleri hizalamak için de son derece kullanışlıdır.
  • Pure CSS, ek HTML öğelerine veya JavaScript'e ihtiyaç duymadan araç ipuçlarının oluşturulmasına izin verir. CSS (tooltips) araç ipuçları basitleştirme konusunda harikadır.
  • Geliştiricilerin içeriğin görünümünü konumuna göre değiştirmelerine olanak tanır.
  • Cascading Style Sheets, bazı platformlarda arka plan filtresini kullanır ve geliştiricilerin bir öğenin arkasındaki her şeyi bulanık hale getirme etkisinin oluşmasına olanak tanır.

Style CSS Nedir?

Style CSS, belgelerin kullanıcılara nasıl sunulacağını ve nasıl biçimlendirildiklerini belirleyen bir dildir.

Web sayfaları için düzen yapma konusunda etkili sonuç veren bu bileşen, metin stillerini ve bir sayfanın HTML'sinde tanımlı olan internet sayfalarının diğer kısımlarını belirlemek amacıyla kullanılabilir. Style CSS, web geliştiricilerine web sayfalarının nasıl görüneceği konusunda kesin bir denetim yapma imkanı sağlar. Günümüzde çoğu web sayfasında kullanılmasının nedeni budur.

CSS Nasıl Kullanılır?

3 farklı kullanım şekli vardır. Bunlar;

Inline / Internal / External

Inline CSS: Inline CSS için her stil içeriği HTML öğelerindedir. Sınırlı bir bölüm için kullanılır. Yalnızca tek öğeleri etkiler. Bu CSS türü, her HTML etiketinde belirtilmelidir.

Internal CSS: Bu tarz bir CSS’de CSS'nin stili < head > etiketi arasında belirtilir. En sık kullanılan stil biçimidir. Bu tanımlama sayfa içerisindeki tüm öğeleri etkiler. Kullanış biçimi < link rel="stylesheet" type="text/css" "bu kısma kısayol tanımı gelir" /> şeklindedir.

External CSS: Bir web sitesindeki stillerin çok sayıda sayfaya uygulanacağı zaman kullanılan CSS türüdür. Web adresleri birden fazla olduğu takdirde uygulandığı sayfaların görünüm biçimlerini denetler.

CSS hangi kod ne işe yarar?

@font-face; bu özellik bilgisayarda hazır olan yazı tiplerinin dışında istediğimiz tipleri seçmemizi ve kullanmamızı sağlar.

Padding: objeler arasında iç boşluk vermenizi sağlar.

Margin: Objeneler arasında dış boşluk vermenizi sağlar.

Color: Fontlara renk vermek için kullanılır.

Background: Herhangi bir objeye resim, renk veya farklı şekillerde tanımlamalar yapmak için kullanılır.

Font; başka font özelliklerini tek CSS özelliği ile tanımlamamıza olanak sağlar.

Line-height; satır yüksekliğini ayarlamak için kullanılır.

word-spacing; kelimelerin arasındaki boşluğu azaltmak veya arttırmak için kullanılır.

animation-delay; animasyonu belirli bir süre sonra başlatmak için kullanılır.

CSS ile logo yerleşimi örneği:

#logo {

width: 300px; height:100px; position: absolute; left: 50px; top: 100px; }

Örneğin açılımı; Yüklenen sayfada ‘’logo’’ adlı ögeyi bul, enini 300 piksel boyunu ise 100 piksel yaparak, sayfanın sol üst tarafına, kenardan 50 piksel, yukarıdan 100 piksel arayla yerleştir.

HTML ve CSS İlişkisi

HTML komut dosyaları gezginlere metnin bazı bölümlerinin başlıklar, alt başlıklar, bağlantılar veya paragraflar olduğunu söylerken, Cascading Style Sheets ona diğer şeylerin yanı sıra bir sayfanın öğelerinin hangi yazı tipi, boyutu, rengi veya hizalamasına sahip olduğunu söyler.

Web sayfaları sunumunu açıklayan dil olan CSS, HTML'den bağımsızdır ve herhangi bir XML tabanlı biçimlendirme diliyle kullanılabilir. HTML, sayfanızın iskeletiyse, CSS dış görünümüdür.

HTML, işaretleyerek ham içeriğe anlam katmak içindir. CSS, içeriği biçimlendirmek içindir. HTML'yi bir web sayfasının arkasındaki soyut metin ve resimler, CSS'yi ise gerçekte görüntülenen sayfa olarak düşünebiliriz. HTML kendi başına var olabilir, CSS olamaz; ancak ikisi birlikte olduğunda kullanıcı odaklı ve verimli web sayfaları ortaya çıkar.

En İyi CSS Kütüphaneleri ve Avantajları

CSS Framework dilimizde CSS kütüphaneleri anlamını taşımaktadır. CSS kütüphaneleri, kodlama işlemlerinin daha kolay ve pratik bir şekilde yapılmasını sağlayan fazlasıyla gelişmiş araçlardır. CSS kütüphaneleri sayesinde, zamandan kazanç, ekip halinde kod yazmak ayrıca hata ihtimalini azaltmak gibi pek çok kazanç elde edilir.

CSS kütüphaneleri genel olarak belirli bir amaca yönelik geliştirilir. Responsive desing (duyarlı web tasarımı), ilgi çekici animasyon tasarımı, 3 boyutlu efekt, gelişmiş font gibi tercihlere yönelik farklı niteliklerde birçok CSS kütüphanesi bulunmaktadır. Global boyutta popüler ve başarılı birçok CSS kütüphanesi ücret talep etmenden ve açık kaynaklı kodlu bir halde insanların kullanımına sunulmaktadır.

Bunlara Bootstrap, Foundation harika birer örnektir.

  • Bootstrap: Tabii ki listenin ilk sırası yine Bootstrap’a ait. Çok gelişmiş yapısı, performans odaklılığı, kullanım kolaylığı, tasarım konseptinin yenilikçi ve çekici olması sebebiyle ilk sırayı fazlasıyla hak ediyor. Web tasarıma yeni bir boyut kazandıran kütüphanelerden biridir kendisi.
  • Foundation: Gelişmiş çerçeveler sunan bir kütüphanedir. Dikey zaman çizelgesi ve özelleştirilebilir yapısı ile dikkat çeker. Mobil uyumlu tasarımlar yapmak için de oldukça kullanışlı ve güçlü özelliklere sahiptir.
  • Hover CSS: Hareketli görüntülerin mouse aracılığıyla gerçekleşmesi isteniyorsa tercih edilen bir kütüphanedir. Kutu ve grafiklere mouse ile gelindiğinde animasyon oluşumunu sağlar.
  • Kite CSS: Daha esnek ve daha duyarlı web site şablonu için tercih edilir. Kullanıcı odaklıdır ve görselliğe katkı sağlayarak pratik ve kolay bir kullanım imkanı yaratır.
  • Paper CSS: Bileşenlerin elle çizilmiş, karikatür benzeri bir görünümü vardır. Kullanım örnekleri çocuklar için bir web sitesi, bir blog, bir oyun veya bir çizgi roman içerebilir. PaperCSS, bir flexbox ızgarası, rozetler, düğmeler, kartlar ve bazı etkileşimli saf CSS bileşenleri içerir.
  • Magic Animations: 3 boyutlu animasyonlar yaratan bir kütüphanedir. Görselliğin daha da dikkat çekici olmasını sağlar. İkon, nesne vb. ögeleri ön plana çıkarır.
  • Semantic: Atomik, görsel, davranışsal ve faydalı sınıflar semantik olmayan sınıfların tüm biçimleridir. Anlamsal sınıflar stillerini aktarmaz. CSS'de listelenen sınıfların her biri için benzersiz bir stil kümesi olması gerekmez. kelimelerin bağlam içinde anlamlı olduğu dile benzer şekilde, sınıf adları uyumlu, mobil uyumlu bileşenler oluşturmak için birlikte çalışır.
  • Animate CSS: En önemli özelliği içinde barındırdığı animasyonlardır. Zevke ve ihtiyaca uygun animasyon seçenekleri ile beklentileri karşılama konusunda iddialıdır.

Sonuç

CSS etkileyici bir web sitesi tasarımı için elzem olan basamaklardan biridir. Üstelik CSS anlaşılması ve öğrenilmesi çok zor olmayan bir dile sahiptir. HTML bilgisinin temeline sahip olmak başlamak için gereklidir. CSS kod yazımı için İngilizce kullanılmaktadır, kod yazılım içerisine eklenecek İngilizce kelimelere hâkim olmak yeterlidir.

CSS, HTML ile etiketlenmiş içeriğin görünüşünden sorumludur. Görsel yükü HTML’den alarak bunları birkaç dosyada depolar. Bu sadeye site güncellemeleri, site bakımı kolaylaşır. Görselleştirme stoku veri trafiğinden tasarruf sağlar. HTML’de sadece amacına odaklı olarak yüksek verimle işini yerine getirebilir.

Özetle CSS özen göstermeniz ve diğer basamaklarla uyum içerisinde çalışmasını sağlamanız gereken, önemli ve keyif verici bir basamaktır.

Son olarak; kullanıcıların da CSS teknolojisi ile hazırlanmış web sayfalarına ilgisi her geçen gün daha da artmaktadır. CSS'nin göze çarpan avantajları devam ettikçe, web tasarımcılar ve kullanıcılar için önemli işlevler barındırma potansiyelini her zaman sürdürecektir.