CSS Nedir? Nerelerde Kullanılır? Ne İşimize Yarar? Nasıl Yazılır?
CSS (Cascading Steel Sheets), HTML, PHP gibi yazı dilleriyle birlikte kullanılan bir dildir. CSS elementlerin boyutlarını, nasıl görünmek istediğiniz gibi ayarlamalarda yardımcı olur. Birçok web tasarımcı ve ön uç geliştirici CSS’i kullanır. CSS asla bir programlama dili değildir. Bu aslında şu demektir. CSS de bir form oluşturup o formadaki çıktıları sunucuya gönderemez yani CSS de asla veri işleyemezssiniz. Yani sizler CSS’de bir form oluşturursunuz ve bu formu CSS yardımıyla boyutunu, imajını, görünümü, arka planını ayarlarsınız. CSS ile şöyle örnek verilir HTML oluşumu CSS görünümü oluşturur.
Stylesheet CSS’ler genelde bu sayfanın içine yazılır ve sayfaya
<link href=”~/still.css” rel=”stylesheet” /> olarak çağrılır bu çağrılan komut <head> içine yapıştırılır ve çağırınılan sayfada yazılan CSS’ler o sayfada artık geçerli olur. CSS’i öğrenmeden önce HTML öğrenmelisiniz. Yoksa aşşağıdaki fotoraftada göründüğü gibi insanın sadece görüntüsü olur ama iskeleti olmaz.
CSS Ne İşimize Yarar
CSS HTML de oluşturduğumuz bir siteyi nasıl gözükmesini istiyorsanız öyle tasarlamaktır. Bu konudaki tek engel sizlerin hayal güçleridir. CSS’i sadece Web tasarımcılar kullanmaz ön uç geliştiriciler tasarımla uğraşan kişiler vs. bir çok kişi kullanılır. CSS bizlerde tasarımın nasıl gözükmesini istiyorsanız o tasarımı yapmak için kullanılır. Tasarımlar da gerekli gerekli renklendirmeler, konumlandırmalar, animasyonlar vb. işlerde gerekmektedir.
Resimdede görüldüğü gibi HTML ve CSS birleşimi vardır. HTML oluşum CSS görünümdür.
CSS Nerelerde Kullanılır?
CSS aslında bir çok yerde kullanılır. örneğin bir kutunun boyutunu, arka planını, kenar yumuşaklığı vb. yerlerde kullanılır. CSS de boyutlandırmak için ise ” width= uzunluk ve height= yükseklik ” demektir. bunları kullanarak örnek bir resimin boyutunu ayarlayabilirsiniz.
CSS’i sadece boyut deyil form arka planı yazı renkleride değiştirmek içinde kullanılır.
Bağzı CSS Kodları ve Ne İşe Yaradıkları
| color | yazılan yazının rengini deyiştirir. |
| background-color | Arka plan rengini deyiştirmek için kullanılır. |
| font-family | Yazılan yazının tipini belirler. |
| font-size | Yazılan yazının boyutunu ayarlar. |
| font-weight | Metinin kalınlığını ayarlamak için kullanılır. |
| font-style | Yazılan yazının italik, normal vs. olduğunu belirler. |
| text-align | Yazılan metinin hizalamasını belirler. |
| border | Kenar özelliğini belirler. |
| Padding | Padding özelliği etrafındaki nesnelerle boşluk oluşturur. |
| Margin | Oluşturduğunuz nesneleri auto özelliğini kullanarak ortalamak için kullanılır |
| width | kutunun genişliğini belirler |
| height | kutunun yükseliğini belirler |
HTML ile CSS’i Birleştirme
Sayfaya yazadığınız CSS’i eklemek istiyorsanız eğer aşağıdaki örnek gibi olmalıdır. “<head>” içine “<link href=”~/still.css” rel=”stylesheet” />” ve artık o sayfada yazdığınız CSS’leri görür ve uygular burada tarama olacağı için CSS yazarken sırayla yapmanız daha doğudur. Ancak Sadece eklediğiniz sayfada bu yazdığınız CSS gözükür.
Aşşağıdaki Örnek gibi kodunuza ekleyebilir yazdığınız CSS’i çekebilirsiniz:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″
<title>NOVASTA TASARIM & DİJİTAL PAZARLAMA CSS</title>
<link href=”still.css” rel=”stylesheet” />
</head>
<body>
</body>
</html>
CSS’i HTML’in İçinde Kullanma
CSS’i HTML’in içinde kullanmak istersek eğer hangi cümleyi değiştiriceksiniz o cümlenin HTML tagının içinde “<style>” açarak istediğiniz değişikliği yaparsınız ancak yaptığınız değişikler sadece “<style>” yazdığınız html tagına aittir.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″
<title>CSS</title>
</head>
<body>
<div style=”background-color:#b6d343; color:black”>Bu Bir HTML’in İçinde CSS Kullanımına Aittir.</div>
</body>
</html>
yukarıda yazılan örnek basit bir css örneğidir. Bu örnekte “background-color” div’in arka plan rengini yeşil rengine dönüştürür. “color” ise burada div’in içindeki yazının rengini siyah renk ile deyiştirir.
Yazılan Kodunun Gösterimi;
CSS Yazarken En Çok Nelere Dikkat Edilir.
- Doğru Selektör Kullanımı: CSS yazarken yazılan selektörler çok önemlidir çünkü artık o selektöre belirli komutlar verilir bu konuda çok dikkatli ve seçici olmalısınız.
- Modüler Tasarım: Modlülleriniz bölerek CSS yazmayı daha kolay bir hale getirilebilir.
- Responsive Tasarım: CSS yazarken bir diğer en önemli konu ise Responsive Tasarımdır(Mobil Uyumlu Tasarımlar). Belirli bir pixel büyüklüğüne geldiğinde tasarımlarınız daha güzel bir görünüm elde etmek için yapılan CSS dir.
- Sürdürülebilirlik: Yazılan CSS lerinizi düzenli bir şekilde tutmalısınız. aksı halde kodlarınız sıralamaya göre gittiği için sürekli başka yerler yüklenir Sürdürülebilirilk için öncelik vermelisiniz.
- Geçerlilik ve Doğruluk: Yazdığınız CSS kodlarınızın doğrulunu teyit etmelisiniz. Yazdığınız CSS’leri tarayıcı ile uyumluğunu aratabilirsiniz.
CSS Kütüphaneleri ve Sağladığı Avantajlar
CSS’in yazılımını içiresinde tutan kütüphaneler ile artık daha kolay bir şekilde kodlama yapılabilirsiniz. bu kütüphaneler Web geliştiricileri tarafından en çok kullanılır. bu sayede zaman tasarufu, ekip çalışmaları gibi işleri dah hızlı ve hata oranını azaltmaya faydası bulunmaktadır. Dünya üzerinde CSS kütüphaneleri ücretsiz ve açık kaynak kodlu olarak sunuluyor. İhtiyacınız olan kütüphaneleri kolaylıkla faydalanabilirsiniz. Ancak bu kütüphaneler belirli ihtiyaclara yardımcı olacak şekilde yapılmışlardır. Örneğin animasyon kütüphaneleri yazdığınız kodlarda 3D boyutlu animasyonlar ile kolayca yerleştirebilirsiniz.
Günümüzdeki En Popüler CSS Kütüphaneleri
Ulkit: Ulkit, hızlı arayüzler ve hızlı bir performans arayüzleri geliştirmek için kullanılır. Modüler ve hafif bir front-end yapısına sahip olan kütüphane hazır araç ve özelleştirme seçeneği ile sizlerin önüne çıkar. bu kütüphanede modüler arayüzler oluşturur ve artık kolayca sizlerlerin dostu erb sayfaları tasarlayabilirsiniz.
Materyalize CSS: Google şirketi tarafından 2014 yılında kullanıma sunululan bu CSS kütüphanesi Güçlü bir front-end yapısı ile kolayca ve güzel bir web tasarım yapılmasını sağlar. Bu kütüphanelerde kullanıma hazır araçlar ve android web uygulamaları için kullanılır.
Bootstrap: Bootstrap günümüzde en çok kullanılan ve en gözde olan CSS kütüphaneleri arasında yer alır. Bu kütüphaneleri kullanarak cep telefonu, tablet ve bilgisiyar gibi ekranlarda rahatlıkla görüntülebilir. Oldukça Geniş olan bir araç sklasına sahip olan Bootstrap CSS kütüphanesi Artık daha kolay ve daha etkili bir kullanıcı deneyimini sizlere sunuyor.
Foundation: Foundation küreselleşen dünyada sıkça kullanılan bir kütühanedir. Bootstrap CSS kütüphanesi gibi duyarlı web sayfaları düzenleyebilirsiniz. Foundation, esnek ve kolay yapısı ile web sitesi yapımında kolaylık sağlar. Bu drum Web geliştiricilerini destek olur.
CSS ile Neler Yapılabilir
Küreselleşen bu dünyada daha henüz yazılıma yeni başlayan insanlar ve hiçbir deneyimi olmayan kişiler bu kodların sadece oluşturduğunuz web sayfasının güzel ve estetik sayfalar oluşturmak olduğunu düşünülebilir. Yazılım yaparken yaptığınız web sitelerinde ziyaretçilerin daha üst düzey bir deneyim yaşaması için yapılması ve geliştirilmesi gereken işlevsellikler vardır. Bu yazılım ile birlikte HTML ve Javascript dillerini kullanarak web sitenizi ziyaret eden kişiler için güzel verimli sayfalar oluşturabilirsiniz. Henüz giriş sevisiyesindeyseniz eğer tek sayfalık tanıtım amaçlı web siteleri daha tercih içerisindesiniz. Kendinizi geliştirdikçe E-Ticaret siteleri gibi her türlü siteler yapabilirsiniz.
CSS Nasıl Yazılır?
CSS yazarken önemli olan yazılacak olan kodun akışını bilmektir. Eğer yazıcağınız kodun akışını bilmeden sağlıklı bir döngü yapılamaz. CSS yazarken “<head>” ın içine “<style>” açarak yazılır “.” (nokta) HTML’e çağırılırken “class” olarak getirilir “#”(kare) ise HTML’e “id” olarak çağırılır. Artık yazdığınız CSS çağırdığınız HTML tagının içine gelmiş olur ve artık o HTML tagında uygular.
Aşşağıdaki Basit Bir CSS Yazma Örneğidir:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″
<title>CSS</title>
<style>.baslik1{color: red;}#baslik2{color:#b6d343;}</style>
</head>
<body>
<div class=”baslik1″>Bu Bir CSS Yazma Örneğidir. </div>
<div id=”baslik2″>Bu Bir CSS Yazma Örneğidir. </div>
</body>
</html>
Yukarıdaki Kod Yazıldığında Sayfada Aşşağıdaki Gibi Görünür.
Bu Bir CSS Yazma Örneğidir.
Bu Bir CSS Yazma Örneğidir.
Bu tip CSS kodları giriş seviyesindedir. Eğer kodlamada kendinizi daha fazla ilerletirseniz daha iyi daha estetik bir tarzda web siteleri çıkarmanız da mümkündür.
