Kişisel web tasarım ve kodlama blogu. Web tasarımı ve kodlama araçları ile ilgili bilgiler ve yardımcı dökümanlar.

Kod yazmak sanattır...

gokhankr.com

Blogger tarafından desteklenmektedir.

CSS etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
CSS etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Bootstrap - 12 yerine 24'lü Izgara Yapısı


Son yaptığım projemi Figma'da tasarımladıktan sonra HTML üzerine dökerken çok enteresan bir durumla karşılaştım. Yatay eksende 3 bölüme ayırdığım bir Section içerisinde sol ve sağ bloklar içerisinde tasarımlamış olduğum kartlarım ile orta bölüme de dikey olarak attığım ufak bir çizgi Bootstrap'ın grid yapısına uymadı. 

İçeriği orantılı bir şekilde ortalamam için sağa ve sola .col-5, .col-5 i ve orta bölüme de kalan .col-2 yi vermem gerekiyordu. Yani örnekteki gibi:

 

Tahmin edebileceğiniz üzere bir tane çizgi için orta bölüm aşırı geniş durdu ve tasarımın görünümünde biçimsizliğe neden oldu:

Dolayısıyla CSS üzerinden bir çözüm arayışına giriştim.

Çözümüm

Çok ta uğraştırıcı bir çözümü yoktu tabi. Sağ ve sol karta width:108%; verdim ve sağ tarafa da margin-left:-8%; verip mobilde de bunu sıfırlayınca sütunlar üzerinde herhangi bir değişiklik yapmadan meseleyi çözmüş oldum. Ancak tasarım düzeninde biraz oynama yapmak durumunda kaldım.

Sonuç

Peki bu ızgara sisteminin hep klasik web sayfaları ortaya koymak olduğunu gören bir tek ben miyim ? Hayır. Bu sistemin tasarımı sabit bir ızgara sistemine bağımlı kıldığını söyleyen çok insan var. Ancak nasılsa bu durum halen Bootstrap 5 üzerinde de devam etmekte. Aslında benim rahatsız olduğum tek mesele bu da değil. Bootstrap Container boyutu genişliği de var. Nedendir bilmem ama bir ekran neden 1140px içerisinde sabitlenmek zorunda ? 

Farklı düşünenler var mıdır bilemem ama, Bootstrap Container içerisine bulunan bir web sitesini en az 22" bir LCD üzerine çektiğim zaman kısa tabiriyle cücük gibi duruyor. En azından son zamanların Flex Layout düzeni ile kodlanan Bulma CSS bu konuda biraz daha elini genişletmiş ve Container boyutunu 1152px'e çekmiş. Deneme yaptığımda tabiki de Bootstrap'a göre daha ferah bir görünüm sağlıyor. 12px ne kadar etkili olabilir düşüncesinde olabilirsiniz ama evet gerçekten görünüme çok etki ediyor kesinlikle deneyin. Ayrıca 1488px ve üzeri için de 1344px lik bir Container genişliği belirlemiş.

Bulma İçin: https://bulma.io/

Yazımın sonuna geldiğimde ızgara konusuda artık bireysel bir çözüm üretme araşıyışına giriştim ve kendim için 24'lük ızgara mantığı ile yeni bir yapı ürettim. Üstelik bunu varsayılan Bootstrap class'larının üzerine bastırarak uyguladım. Şu anki aşamada ilk olarak kendi blog sayfamda kullanıyorum ancak ufak denemelerim sonucunda biraz daha bunu genişleterek 32 veya 54'e çıkarabilirim diye düşünüyorum. Ayrıca blog sayfamın Content alanının genişliğini de bir nebze olsun genişleterek şimdiden kendi ızgaram ile kendi görünümümü özelleştirebildim. 

24'lük Izgara CSS Kodu

Uygulamış olduğum 24 lük grid CSS'ini minify olarak alabilirsiniz. İlerde daha detaylı olarak Github üzerinden yayınlamayı düşünüyorum.

*{box-sizing:border-box}body{margin:0}[class^=col]{flex-shrink:0;padding-left:17px;padding-right:17px}.col-1{flex-basis:4.166666667%;max-width:4.166666667%}.col-2{flex-basis:8.333333334%;max-width:8.333333334%}.col-3{flex-basis:12.500000001%;max-width:12.500000001%}.col-4{flex-basis:16.666666668%;max-width:16.666666668%}.col-5{flex-basis:20.833333335%;max-width:20.833333335%}.col-6{flex-basis:25%;max-width:25%}.col-7{flex-basis:29.166666667%;max-width:29.166666667%}.col-8{flex-basis:33.333333334%;max-width:33.333333334%}.col-9{flex-basis:37.500000001%;max-width:37.500000001%}.col-10{flex-basis:41.666666668%;max-width:41.666666668%}.col-11{flex-basis:45.833333335%;max-width:45.833333335%}.col-12{flex-basis:50%;max-width:50%}.col-13{flex-basis:54.166666667%;max-width:54.166666667%}.col-14{flex-basis:58.333333334%;max-width:58.333333334%}.col-15{flex-basis:62.500000001%;max-width:62.500000001%}.col-16{flex-basis:66.666666668%;max-width:66.666666668%}.col-17{flex-basis:70.833333335%;max-width:70.833333335%}.col-18{flex-basis:75%;max-width:75%}.col-19{flex-basis:79.166666667%;max-width:79.166666667%}.col-20{flex-basis:83.333333334%;max-width:83.333333334%}.col-21{flex-basis:87.500000001%;max-width:87.500000001%}.col-22{flex-basis:91.666666668%;max-width:91.666666668%}.col-23{flex-basis:95.833333335%;max-width:95.833333335%}.col-24{flex-basis:100%;max-width:100%}.container{margin-left:auto;margin-right:auto}.row{display:flex;flex-wrap:wrap}@media screen and (min-width:768px){.container{max-width:720px}.col-sm-1{flex-basis:4.166666667%;max-width:4.166666667%}.col-sm-2{flex-basis:8.333333334%;max-width:8.333333334%}.col-sm-3{flex-basis:12.500000001%;max-width:12.500000001%}.col-sm-4{flex-basis:16.666666668%;max-width:16.666666668%}.col-sm-5{flex-basis:20.833333335%;max-width:20.833333335%}.col-sm-6{flex-basis:25%;max-width:25%}.col-sm-7{flex-basis:29.166666667%;max-width:29.166666667%}.col-sm-8{flex-basis:33.333333334%;max-width:33.333333334%}.col-sm-9{flex-basis:37.500000001%;max-width:37.500000001%}.col-sm-10{flex-basis:41.666666668%;max-width:41.666666668%}.col-sm-11{flex-basis:45.833333335%;max-width:45.833333335%}.col-sm-12{flex-basis:50%;max-width:50%}.col-sm-13{flex-basis:54.166666667%;max-width:54.166666667%}.col-sm-14{flex-basis:58.333333334%;max-width:58.333333334%}.col-sm-15{flex-basis:62.500000001%;max-width:62.500000001%}.col-sm-16{flex-basis:66.666666668%;max-width:66.666666668%}.col-sm-17{flex-basis:70.833333335%;max-width:70.833333335%}.col-sm-18{flex-basis:75%;max-width:75%}.col-sm-19{flex-basis:79.166666667%;max-width:79.166666667%}.col-sm-20{flex-basis:83.333333334%;max-width:83.333333334%}.col-sm-21{flex-basis:87.500000001%;max-width:87.500000001%}.col-sm-22{flex-basis:91.666666668%;max-width:91.666666668%}.col-sm-23{flex-basis:95.833333335%;max-width:95.833333335%}.col-sm-24{flex-basis:100%;max-width:100%}}@media screen and (min-width:1024px){.container{max-width:960px}.col-md-1{flex-basis:4.166666667%;max-width:4.166666667%}.col-md-2{flex-basis:8.333333334%;max-width:8.333333334%}.col-md-3{flex-basis:12.500000001%;max-width:12.500000001%}.col-md-4{flex-basis:16.666666668%;max-width:16.666666668%}.col-md-5{flex-basis:20.833333335%;max-width:20.833333335%}.col-md-6{flex-basis:25%;max-width:25%}.col-md-7{flex-basis:29.166666667%;max-width:29.166666667%}.col-md-8{flex-basis:33.333333334%;max-width:33.333333334%}.col-md-9{flex-basis:37.500000001%;max-width:37.500000001%}.col-md-10{flex-basis:41.666666668%;max-width:41.666666668%}.col-md-11{flex-basis:45.833333335%;max-width:45.833333335%}.col-md-12{flex-basis:50%;max-width:50%}.col-md-13{flex-basis:54.166666667%;max-width:54.166666667%}.col-md-14{flex-basis:58.333333334%;max-width:58.333333334%}.col-md-15{flex-basis:62.500000001%;max-width:62.500000001%}.col-md-16{flex-basis:66.666666668%;max-width:66.666666668%}.col-md-17{flex-basis:70.833333335%;max-width:70.833333335%}.col-md-18{flex-basis:75%;max-width:75%}.col-md-19{flex-basis:79.166666667%;max-width:79.166666667%}.col-md-20{flex-basis:83.333333334%;max-width:83.333333334%}.col-md-21{flex-basis:87.500000001%;max-width:87.500000001%}.col-md-22{flex-basis:91.666666668%;max-width:91.666666668%}.col-md-23{flex-basis:95.833333335%;max-width:95.833333335%}.col-md-24{flex-basis:100%;max-width:100%}}@media screen and (min-width:1216px){.container{max-width:1152px}.col-lg-1{flex-basis:4.166666667%;max-width:4.166666667%}.col-lg-2{flex-basis:8.333333334%;max-width:8.333333334%}.col-lg-3{flex-basis:12.500000001%;max-width:12.500000001%}.col-lg-4{flex-basis:16.666666668%;max-width:16.666666668%}.col-lg-5{flex-basis:20.833333335%;max-width:20.833333335%}.col-lg-6{flex-basis:25%;max-width:25%}.col-lg-7{flex-basis:29.166666667%;max-width:29.166666667%}.col-lg-8{flex-basis:33.333333334%;max-width:33.333333334%}.col-lg-9{flex-basis:37.500000001%;max-width:37.500000001%}.col-lg-10{flex-basis:41.666666668%;max-width:41.666666668%}.col-lg-11{flex-basis:45.833333335%;max-width:45.833333335%}.col-lg-12{flex-basis:50%;max-width:50%}.col-lg-13{flex-basis:54.166666667%;max-width:54.166666667%}.col-lg-14{flex-basis:58.333333334%;max-width:58.333333334%}.col-lg-15{flex-basis:62.500000001%;max-width:62.500000001%}.col-lg-16{flex-basis:66.666666668%;max-width:66.666666668%}.col-lg-17{flex-basis:70.833333335%;max-width:70.833333335%}.col-lg-18{flex-basis:75%;max-width:75%}.col-lg-19{flex-basis:79.166666667%;max-width:79.166666667%}.col-lg-20{flex-basis:83.333333334%;max-width:83.333333334%}.col-lg-21{flex-basis:87.500000001%;max-width:87.500000001%}.col-lg-22{flex-basis:91.666666668%;max-width:91.666666668%}.col-lg-23{flex-basis:95.833333335%;max-width:95.833333335%}.col-lg-24{flex-basis:100%;max-width:100%}}@media screen and (min-width:1408px){.container{max-width:1344px}.col-xl-1{flex-basis:4.166666667%;max-width:4.166666667%}.col-xl-2{flex-basis:8.333333334%;max-width:8.333333334%}.col-xl-3{flex-basis:12.500000001%;max-width:12.500000001%}.col-xl-4{flex-basis:16.666666668%;max-width:16.666666668%}.col-xl-5{flex-basis:20.833333335%;max-width:20.833333335%}.col-xl-6{flex-basis:25%;max-width:25%}.col-xl-7{flex-basis:29.166666667%;max-width:29.166666667%}.col-xl-8{flex-basis:33.333333334%;max-width:33.333333334%}.col-xl-9{flex-basis:37.500000001%;max-width:37.500000001%}.col-xl-10{flex-basis:41.666666668%;max-width:41.666666668%}.col-xl-11{flex-basis:45.833333335%;max-width:45.833333335%}.col-xl-12{flex-basis:50%;max-width:50%}.col-xl-13{flex-basis:54.166666667%;max-width:54.166666667%}.col-xl-14{flex-basis:58.333333334%;max-width:58.333333334%}.col-xl-15{flex-basis:62.500000001%;max-width:62.500000001%}.col-xl-16{flex-basis:66.666666668%;max-width:66.666666668%}.col-xl-17{flex-basis:70.833333335%;max-width:70.833333335%}.col-xl-18{flex-basis:75%;max-width:75%}.col-xl-19{flex-basis:79.166666667%;max-width:79.166666667%}.col-xl-20{flex-basis:83.333333334%;max-width:83.333333334%}.col-xl-21{flex-basis:87.500000001%;max-width:87.500000001%}.col-xl-22{flex-basis:91.666666668%;max-width:91.666666668%}.col-xl-23{flex-basis:95.833333335%;max-width:95.833333335%}.col-xl-24{flex-basis:100%;max-width:100%}}

İlerleyen zamanlarda nasıl düşünürüm bilmiyorum ancak muhtemelen bu gidişle bu yapının çok daha dışına çıkabilirim diye düşünüyorum. Zaman ayırdığınız için teşekkürler.

.map dosyaları nedir, ne işe yarar ?


Web sayfanıza bir Javascript kütüphanesi eklediğinizde aşağıdaki gibi bir uyarıyı gözlemleyebilirsiniz. Çünkü sizden .min.x.js eklemesi yaptığınızda sonu .map uzantılı bir dosya isteyecektir.

Web üzerinde .map dosyaları Javascript, CSS ve Typescript dosyaları için kullanılmaktadır. Bu dosyalar kaynak haritaları olarak adlandırılırlar. Peki ne amaçla kullanılmaktadırlar.

Angular.js gibi bir kütüphane dosyasını minify ettiğinizde, elinizdeki düzenli kodu verip yerine okunamayacak biçimde yani sözdeyimi çirkin hale getirilmiş boşluklarından arındırılmış biçimini alırsınız. Uygulamanız üretim modunda yani projenin sunum halinde bir hata oluştuğunda kaynak haritası minify edilmiş dosyanızı otomatik olarak alacak ve kodun orjinal sürümünü görmenize izin verecektir. Bunu görmek için bir örnek uygulamakta fayda var.

.map Dosyasını Kullanmak

Örnek vermek gerekirse sitemizde Bootstrap kullanıyor olalım. Bootstrap içerisinde bootstrap.min.js ve bootstrap.min.js.map dosyalarını dist/js içerisinden site dizinimize atalım. İndirdiğiniz arşiv içerisindeki js/src altındaki dosyaları site dizininizde bir /maps klasörü oluşturun ve içerisine atın. Ardından .map dosyanızı editörde açın ve içerisindeki "../../js/src/" kaynak yollarının hepsini oluşturduğunuz /maps dizini yolu ile değiştirin.

Şimdi bootstrap.min.js dosyamızı <script> etiketi ile çağıralım. Siteyi açtığınızda Console altında .map dosyası için bir hata ile karşılaşmayacaksınız çünkü tarayıcı .min.js ile aynı dizinde olan .map dosyasını otomatik olarak tespit edecektir.

Ardından Geliştirici Araçlarının,  Sources panelinden bootstrap.min.js dosyasını bulup açtığınızda dosya içerisinde şöyle bir uyarı ile karşılaşacaksınız.

"Source Map detected". Yani .map dosyası tespit edildi. Bu uyarıyı gördüğünüze göre şimdi Ctrl+P ile dosya denetleyicisi penceresini açın ve oradan bir Bootstrap dosyası olan modal.js dosyasını açın. Dosyayı açtığınızda artık debug yapmak istediğinizde, buradan sorunun tam olarak nerede olduğunu dosyanın orjinali üzerinden tespit edebileceksiniz.

Aynı durum CSS için de geçerlidir. SASS ve SCSS dosyalarımızın kaynak haritasını da çıkartarak bu işlemi uygulayabiliriz.

Bir geliştirici bu işlemi nasıl uygulayabilir ?

Bir üretim uygulamasında hata ayıklamak için kullanırsınız. Geliştirme modunda, Angular'ın tam sürümünü kullanabilirsiniz. Üretimde, minify edilmiş sürümü kullanırsınız.

Kaynak haritası kullanmak zorunda mıyım ?

Üretim kodunda daha kolay hata ayıklamayı önemsiyorsanız, evet, yapmalısınız.

Map dosyası ile ilgili açıklamalar bu kadardı, bir sonraki makalede görüşmek üzere.

CSS Conic Gradient Kullanımı


Giriş
Diğer bir çok gradient efekti gibi henüz yeni sayılabilecek farklı bir gradient özelliği. Conical Gradient henüz tarayıcıları çoğu tarafından desteklenmese de popüler tarayıcılar arasında kullanılabilecek bir özellik.

Örneklerle gösterelim,
İstediğiniz kadar renk atayabilirsiniz. Soldan başlayarak en son renk paletine kadar dairesel bir şekil ile karşımıza çıkmakta.




Sözdizimi
Conic Gradient aşağıdaki şekilde parametre alır.

conic-gradient() = conic-gradient(

 [ from <açı> ]? [ at <pozisyon> ]?, <renkler> 
)


Aşağıda en basit haliyle kullanımı örnek gösterilmiştir

.conic-gradient { 
background: conic-gradient(#fff, #000); 
}

from <açı> yani örnek olarak from 0deg veya from 30deg şeklindeki değerler ile renklerin hangi açıdan itibaren başlayacağını belirtiriz.

at <pozisyon> yani örnek olarak at 50% 50% dediğimiz zaman soldaki yatay eksende sağdaki de dikey eksende merkezi noktanın konumunu belirler.

Aşağıda tüm örnekleri görüntüleyebilirsiniz.

.conic-gradient {
/* Basit hali */
background-image: conic-gradient(#fff, #000); 
/* Başlangıç konumunu belirle */ 
background: conic-gradient(at 50% 50%, #fff, #000); 
/* Başlangıç açısını belirle */ 
background: conic-gradient(from 0deg, #fff, #000); 
/* Başlangıç noktası ve başlangıç konumunu bir arada belirle */ 
background: conic-gradient(from 0deg at center, #fff, #000); 
/* Renklerin açılarını yüzde olarak belirle */ 
background: conic-gradient(#fff 0%, #000 100%); 
/* Başlangıç ​​renginin açısını derece cinsinden ve bitiş rengini dairenin tam bir dönüşü ile bitir */
background: conic-gradient(#fff 0deg, #000 1turn); 
}

Eğer açı değeri girmezsek 0 dan 360 dereceye kadar keskin bir çizgi oluşturur. Burada daha yumuşak bir görüntü elde etmek için başlangıç ve bitiş renklerini aynı yapabilirsiniz. Böylece örneğin yukarıdan bakınca koni görünümü veren bir görüntü elde edebilirsiniz.

Aşağıdaki örnekteki gibi bir görüntü elde edip animasyon ile döndür komutu vererek bir Mac efekti verebilirsiniz.

.conic-gradient { 
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); 
}




Renkler arasında sabitleme sayısal değerleri girerek daha keskin görünümler elde edebilirsiniz.

.conic-gradient { 
background: conic-gradient(lime 40%, yellow 0 70%, red 0); 
}



Conic gradient 'in tarayıcı desteği listesine aşağıdan ulaşabilirsiniz.
https://caniuse.com/#search=conic%20gradient

Daha deylı bilgi için W3C resmi sayfasına gözatabilirsiniz.
https://www.w3.org/TR/css-images-4/#conic-gradients

CSS Nasıl Kullanılır ?


Tarayıcı içinde bir stil dosyası tanımladığınızda, tarayıcı içeriği o dosyaya göre biçimlendirecektir. CSS kodlarını sayfa içerisinde kullanmanın üç farklı yöntemi mevcuttur.

1. HTML etiketi içerisine doğrudan stil girmek.

Herhangi bir HTML etiketinin başlangıç etiketi içerisine “style” özelliği ekleyerek CSS kodlarının yazılmasıdır.

Kod:

<p style="color:red;"> mavitasarimofisi.com </p>

Yukarıdaki “p” etiketine stil atadık.

2. <head> etiketi içerisinde <style> etiketi kullanımı.

Sayfa içerisindeki herhangi bir nesneye stil ataması yapmak için <style> CSS kodları </style> HTML etiketini kullanırız.

Kod:<head>
<style>
p {

color:red;

}
</style>
</head>

Bu etiket normal olarak <head> etiketi içerisinde kullanılır. Ancak sayfa içerisinde herhangi bir yerde de kullanılırsa da çalışır ama W3 standartlarına uymaz, yinede tarayıcı bunu hata olarak algılasa da hatayı bastırır. En doğru olanı standarda uygun kullanmak ya da 3. yöntemi uygulamak.

3. <head> etiketi içerisinde çağırılması.

Bir CSS dosyasının “head“ etiketi içerisinde çağrılmasıdır ve yöntem olarak en uygun olanı budur.
Aşağıdaki kodu;
<link href="css/style.css" rel="stylesheet" type="text/css">
<head> etiketinin içerisine yerleştirirsiniz.

Örnek Kod:
<head>

<link href="css/style.css" rel="stylesheet" type="text/css">

</head>

Böylece sayfa içerisinde css dizinindeki “style.css” dosyasını çağırmış oluyoruz.


CSS Söz dizimi ve Seçiciler


Söz Dizimi

Söz dizimleri bir seçiciden ve bir bildirim bloğundan oluşur.

CSS selector


Element Seçiciler

Yukarıdaki görsele baktığımızda h1 etiketi seçilmiş ve köşeli parantez açılarak, bu etikete bazı değerler girilmiş.
Verilecek değerler her zaman köşeli parantezler içine yazılır.

Örnek kullanımı 

h1 {
değerler...
}


Bu yöntem ile bir sayfa içerisindeki tüm h1 etiketlerine otomatik olarak değer atamış oluyoruz. Yani bu bir Genel Seçicidir. Tüm HTML etiketilerine bu şekilde değer atayabiliriz. Aynı zamanda bir özelliği birden fazla HTML etiketi üzerinde de gruplama yaparak uygulayabiliriz.

h1, h2, p {
değerler...
}


İşte bu da Grup Seçicileri olarak adlandırılır.

ID ve Class(Sınıf) Seçicileri

Genel ve Grup seçicileri öğrendikten sonra. Şimdi ise sırada ID ve Class seçicileri var. Bu seçicilerin özelliklerini sırasıyla başlıklar halinde anlatalım.

ID Seçicileri

ID Seçiciler bir sayfa içerisinde daima bir defa kullanılmaktadır. Yani bir etikete vermiş olduğunuz bir ID, yalnızca o etikete aittir. Bu yüzden ID 'ler bir sayfa içerisinde yalnızca bir defa çağırılmaktadır.

#yenielement {
    degerler...
}


gördüğünüz gibi yeni bir ID oluşturduk ve adını "yenielement" koyduk. İstediğiniz isimi koyabilirsiniz. ID tanımlarken başına "#" işareti koyuyoruz ve adını yazıyoruz. İşte bu kadar kolay.
Dikkat edilmesi gereken yer Türkçe Karakter kullanılmaması gerektiğidir.

HTML içinde kullanımı

<h1 id="yenielement"> Merhaba </h1>

Bu örnek bir ID kullanımı.

Class(Sınıf) Seçicileri

Class seçicileri ID 'den farklı olarak istenildiği kadar bir sayfa üzerinde kullanılabilir.

.yenielement {
    degerler...
}


Bu da bir Class oluşturma örneği. Sınıf oluşturmak için başına "." işareti koyuyor ve adını yazıyoruz. Hepsi bu kadar.

Yine bir etikete ID veya Class ataması yapmak için o etiketin içerisine ne tanımlayacağımızı yazıyoruz ve tanımın içine tanımladığımız ismi yazıyoruz.

Class kullanımı da ID ile aynı mantıktadır.

<h1 class="yenielement"> Merhaba </h1>

İlave olarak çeşitli ön izleme siteleri ile akılda kalıcı örnekler yapabilir kendinizi geliştirebilirsiniz.

CSS Yorumlar

CSS içerisinde bir değerin kullanılmamasını sağlayabilir veya isteğe bağlı yorum belirtebilirsiniz. Bir CSS yorumu eklemek için /* ve */ işaretleri kullanılır. Bu işaretler içerisinde kullanılan kısım yorum kısmıdır.

p {
    degerler...
   /* Burası yorum kısmıdır. */
}
/* Ve ya sayfanın herhangi bir alana yorum yazabilirsiniz. */

CSS Giriş


CSS 3 'e ait Logo


CSS Nedir ?

CSS, açılımı Cascading Style Sheets 'tir. Web sayfalarının özelleştirilmesi için geliştirilmiş bir kodlama dilidir.

Bu dil ile HTML etiketlerini özelleştirebilir ve Web Sayfalarını istediğimiz gibi özelleştirebiliriz.
Şu an CSS 3 ile bu dil pek çok farklı özelliği de beraberinde getirmiş ve geçmişte Javascript ile yapılabilen çeşitli özellikleri de kullanılabilir hale getirmiştir.

CSS 'nin bu gelişimi bazı tarayıcılarda yeni özellikleri destekleme konusunda sıkıntı çıkarsa da, geçen zamanda bir çok tarayıcı da bu gelişmeye ayak uydurarak yeni özellikleri de desteklemeye başlamışlardır.


İyi de Neden CSS Kullanalım ?

CSS, Web Sayfalarınızın farklı cihazlara uyumunu, sayfa için tasarımını, yerleşim ve daha pek çok özelleştirmeyi yapmanıza olanak sağlar.

Şuan HTML üzerinde sayılı özelleştirmelerin haricinde, ileri seviyede bir sayfa tasarlama söz konusu değildir. CSS gibi bir sayfa tasarlama hem daha kolay hem de sayfa içi etiketler daha yönetilebilirdir.

Eskiden HTML etiketi içerisinde bulunan font özelliği kullanımı adeta bir kabustu. Nedeni her sayfada ve her etikette bu özelliği ayrı ayrı kullanılmak zorunda olunmasıydı. Ancak CSS ile bir sayfa içerisindeki istediğiniz elemanlara özellik ataya bilir ve isterseniz tüm etiketleri tek seferde özelleştirebilirsiniz.

Bundan sonraki yazılarımda CSS 'ye ait tüm özellikleri anlatmaya çalışacağım.