CSS Nedir?
Cascading Style Sheets, kısaca CSS. Web tasarımın vazgeçilmezi haline gelmiş, webe estetik bir görünüm kazandırmayı amaçlayan bir tasarım dili.
CSS Kim Tarafından Geliştirilmiştir?
CSS, World Wide Web’in yaratıcısı, HTML’in geliştirilmesine katkı sağlayan ve İsviçre'deki CERN Araştırma Enstitüsünde bir fizikçi olarak çalışan “Tim Berners-Lee”nin önderliğini yaptığı “World Wide Web Consortium (W3C)” adındaki bir organizasyon içerisindeki “CSS Working Group” tarafından geliştiriliyor.
Tim Berners-Lee
Tim Berners-Lee (Fotoğraf: w3.org)
Kısa Bir Bakış
css
Webin temellerinin atılmasının ardından geliştirilen web sayfaların basit HTML içeriklerden ibaret olduğunu görüyoruz. Tabii ki insanların estetik zevklerine hitap etmeyen bu yapı, web sayfa geliştiricilerinin de isteği üzerine bir takım yeniliklere ihtiyaç duymuş ve bunun için birçok çözüm düşünülmüş fakat en sonunda CSS’in kullanılması uygun görülmüştür.
CSS, HTML gibi birçok XML tabanlı markup dilleriyle uyumlu bir şekilde kullanılabildiği için geliştiricilere mükemmel kolaylıklar ve olanaklar sağlamıştır.
Hadi birlikte bakalım… Varsayalım ki bir paragraf oluşturmak ve onu dizayn etmek istiyorsunuz. Peki CSS’te bunu nasıl yapabilirsiniz? Basit bir şekilde inceleyelim.
p etiket stili
Öncelikle body etiketimiz içerisinde bir p (paragraf) etiketi oluşturarak tasarımımıza başlıyoruz. Daha sonra head etiketi içerisine, internal olarak stiller oluşturmamızı sağlayan style etiketimizi yazıyoruz. Bundan sonraki aşamada stil vermek istediğimiz HTML etiketini belirtmek, bu örnekte p’yi kullandık.
Biz bu işleme selector (seçici) belirtme diyoruz. Evet bu noktaya kadar geldiysek çok bir şey kalmadı. Paragrafa ilk önce iç boşluk verme ile başlayabiliriz, bize bunu yaparken padding tanımlaması yardımcı olacak. Tercih olarak 2em yani 32px kadarlık bir iç boşluk veriyoruz. Gel gelelim paragrafın genişliğine. width: 25% ile tanımlanmış ifade ile paragrafın anlık olarak kullandığımız web tarayıcının 25% genişliğine sahip olmasını istedik. Ee, tabi yazı denince akla ilk font geliyor. Yazımızı şekillendirmek için font tanımlaması yardımı ile 1em boyutunda Arial yazı tipine sahip bir paragraf elde ediyoruz. Ben yazımı kalınlaştırmak istiyorum, ne yapmalıyım diyorsanız burada devreye font-weight giriyor. Yukarıdaki kodlarda da görüldüğü üzere paragrafı bold yani kalın yaptık ve bununla birlikte color ile de yazının rengini mavi yaptık. Daha önce bir yerde duymuş olmayabilirsiniz ama CSS’te HTML elemanlarına kenarlık verebiliyoruz, bunu yaparken de border tanımlamasından yaralanacağız. Biz paragrafımızın 0.1em kalınlığında, solid bir başka deyişle düz çizgi şeklinde ve siyah renge sahip bir kenarlığa sahip olmasını istedik.
Evet... Şimdi kodumuzu bir web tarayıcısında çalıştırıp yaptıklarımızın yansımasını görelim.
İşte bu kadar...
Hello World!
CSS Standartlarını Kimler Koyuyor?
Tüm web teknoloji standartları (HTML, CSS, Javascript, vs.) “specs” olarak adlandırılan dokümanlarda belirtiliyor. Bu standartlar W3C, WHATWG, ECMA ya da Khronos adlarındaki organizasyonlar tarafından düzenlenip bizlere sunuluyor.
w3c
Web Tarayıcı Uyumsuzlukları
CSS kendi içerisinde gelişirken web tarayıcı geliştiren şirketlerin bu yeniliklere ürünlerini adapte etmeleri gerekmektedir. Fakat bu şirketler benzer zamanlarda bu gelişmelere ayak uyduramadığı için bir takım uyumsuzluklar veya bir başka deyişle desteklenmeyen özellikler ortaya çıkıyor. Bu ve bunun gibi sebeplerden dolayı web tasarım yapan kişilerin veya firmaların web tarayıcı bazında iyileştirmeler yapmaları gerekmektedir.
web tarayıcıları
CSS’e Yeni Bir Özellik Geldi, Uyumsuz Web Tarayıcılar Nasıl Tepki Verir?
Yeni bir özellikle karşı karşıya kaldıysak ve kullandığımız web tarayıcı o geliştirmeye daha adapte olmamışsa web tarayıcınız sizin yazdığınız o kodu görmezden gelerek işlemler uygular, bu bizlere web tasarım yaparken büyük kolaylıklar sağlar. Eğer web tarayıcılar adapte olmadıkları özelliklerden dolayı hatalar veriyor olsaydı işimiz iyice zora girecekti.
warning
Sor Bakalım
Satir içi (İnline) CSS nasıl tanımlanır?
Html etiketlerine style="css stil kodları" eklenerek inlice css tanımlanır.
Dahili (İnternal) CSS nasıl tanımlanır?
Genellikle head etiketi içerisinde bir style etiketi açarak CSS yazmaya başlayabilirsiniz.
Harici (External) CSS dosyalarını nasıl dahil edebilirim?
HTML etiketlerinden link yardımı ile external (harici) CSS dosyalarını sayfamıza dahil edebiliriz.
Bunun haricinde bir CSS dosyası içerisine başka bir CSS dosyasını da dahil edebilirsiniz.
@import “dosya_adi.css”;
Cascading Style Sheets, kısaca CSS. Web tasarımın vazgeçilmezi haline gelmiş, webe estetik bir görünüm kazandırmayı amaçlayan bir tasarım dili.
CSS Kim Tarafından Geliştirilmiştir?
CSS, World Wide Web’in yaratıcısı, HTML’in geliştirilmesine katkı sağlayan ve İsviçre'deki CERN Araştırma Enstitüsünde bir fizikçi olarak çalışan “Tim Berners-Lee”nin önderliğini yaptığı “World Wide Web Consortium (W3C)” adındaki bir organizasyon içerisindeki “CSS Working Group” tarafından geliştiriliyor.
Tim Berners-Lee
Tim Berners-Lee (Fotoğraf: w3.org)
Kısa Bir Bakış
css
Webin temellerinin atılmasının ardından geliştirilen web sayfaların basit HTML içeriklerden ibaret olduğunu görüyoruz. Tabii ki insanların estetik zevklerine hitap etmeyen bu yapı, web sayfa geliştiricilerinin de isteği üzerine bir takım yeniliklere ihtiyaç duymuş ve bunun için birçok çözüm düşünülmüş fakat en sonunda CSS’in kullanılması uygun görülmüştür.
CSS, HTML gibi birçok XML tabanlı markup dilleriyle uyumlu bir şekilde kullanılabildiği için geliştiricilere mükemmel kolaylıklar ve olanaklar sağlamıştır.
Hadi birlikte bakalım… Varsayalım ki bir paragraf oluşturmak ve onu dizayn etmek istiyorsunuz. Peki CSS’te bunu nasıl yapabilirsiniz? Basit bir şekilde inceleyelim.
p etiket stili
Öncelikle body etiketimiz içerisinde bir p (paragraf) etiketi oluşturarak tasarımımıza başlıyoruz. Daha sonra head etiketi içerisine, internal olarak stiller oluşturmamızı sağlayan style etiketimizi yazıyoruz. Bundan sonraki aşamada stil vermek istediğimiz HTML etiketini belirtmek, bu örnekte p’yi kullandık.
Biz bu işleme selector (seçici) belirtme diyoruz. Evet bu noktaya kadar geldiysek çok bir şey kalmadı. Paragrafa ilk önce iç boşluk verme ile başlayabiliriz, bize bunu yaparken padding tanımlaması yardımcı olacak. Tercih olarak 2em yani 32px kadarlık bir iç boşluk veriyoruz. Gel gelelim paragrafın genişliğine. width: 25% ile tanımlanmış ifade ile paragrafın anlık olarak kullandığımız web tarayıcının 25% genişliğine sahip olmasını istedik. Ee, tabi yazı denince akla ilk font geliyor. Yazımızı şekillendirmek için font tanımlaması yardımı ile 1em boyutunda Arial yazı tipine sahip bir paragraf elde ediyoruz. Ben yazımı kalınlaştırmak istiyorum, ne yapmalıyım diyorsanız burada devreye font-weight giriyor. Yukarıdaki kodlarda da görüldüğü üzere paragrafı bold yani kalın yaptık ve bununla birlikte color ile de yazının rengini mavi yaptık. Daha önce bir yerde duymuş olmayabilirsiniz ama CSS’te HTML elemanlarına kenarlık verebiliyoruz, bunu yaparken de border tanımlamasından yaralanacağız. Biz paragrafımızın 0.1em kalınlığında, solid bir başka deyişle düz çizgi şeklinde ve siyah renge sahip bir kenarlığa sahip olmasını istedik.
Evet... Şimdi kodumuzu bir web tarayıcısında çalıştırıp yaptıklarımızın yansımasını görelim.
İşte bu kadar...
Hello World!
CSS Standartlarını Kimler Koyuyor?
Tüm web teknoloji standartları (HTML, CSS, Javascript, vs.) “specs” olarak adlandırılan dokümanlarda belirtiliyor. Bu standartlar W3C, WHATWG, ECMA ya da Khronos adlarındaki organizasyonlar tarafından düzenlenip bizlere sunuluyor.
w3c
Web Tarayıcı Uyumsuzlukları
CSS kendi içerisinde gelişirken web tarayıcı geliştiren şirketlerin bu yeniliklere ürünlerini adapte etmeleri gerekmektedir. Fakat bu şirketler benzer zamanlarda bu gelişmelere ayak uyduramadığı için bir takım uyumsuzluklar veya bir başka deyişle desteklenmeyen özellikler ortaya çıkıyor. Bu ve bunun gibi sebeplerden dolayı web tasarım yapan kişilerin veya firmaların web tarayıcı bazında iyileştirmeler yapmaları gerekmektedir.
web tarayıcıları
CSS’e Yeni Bir Özellik Geldi, Uyumsuz Web Tarayıcılar Nasıl Tepki Verir?
Yeni bir özellikle karşı karşıya kaldıysak ve kullandığımız web tarayıcı o geliştirmeye daha adapte olmamışsa web tarayıcınız sizin yazdığınız o kodu görmezden gelerek işlemler uygular, bu bizlere web tasarım yaparken büyük kolaylıklar sağlar. Eğer web tarayıcılar adapte olmadıkları özelliklerden dolayı hatalar veriyor olsaydı işimiz iyice zora girecekti.
warning
Sor Bakalım
Satir içi (İnline) CSS nasıl tanımlanır?
Html etiketlerine style="css stil kodları" eklenerek inlice css tanımlanır.
Dahili (İnternal) CSS nasıl tanımlanır?
Genellikle head etiketi içerisinde bir style etiketi açarak CSS yazmaya başlayabilirsiniz.
Harici (External) CSS dosyalarını nasıl dahil edebilirim?
HTML etiketlerinden link yardımı ile external (harici) CSS dosyalarını sayfamıza dahil edebiliriz.
Bunun haricinde bir CSS dosyası içerisine başka bir CSS dosyasını da dahil edebilirsiniz.
@import “dosya_adi.css”;
