CSS, "Stil" vurgulanmış Basamaklı Stil Sayfaları anlamına gelir. HTML bir web belgesini yapılandırmak için kullanılırken (başlıklar, paragraflar gibi şeyleri tanımlayarak ve görüntüleri, videoları veya diğer medyaları katıştırmanıza izin verir), CSS yazı ve belgenizin stilini belirtir. Sayfa düzenleri, renkler ve yazı tiplerinin tümü CSS ile belirlenir. CSS ile tasarım yapabilirsiniz. CSS bilgisi normal kodlamalara göre o kadar zor değildir ve kolaylıkla öğrenilebilir. Sayfanızın "layout"u olarak da bilinen, görünen kısmının tasarımını CSS bilginiz ile kolayca halledebilirsiniz. CSS'den önce HTML'in de iyice kavranması anlaşılması gerekmektedir. Bu ikisi bağlantılır.
CSS Nasıl Çalışır?
CSS, HTML öğeleriyle etkileşim kurarak web sayfalarınıza stil katar. Öğeler, bir web sayfasının bağımsız HTML bileşenleridir. Örneğin bir paragraf HTML'de şuradaki gibi görünebilir:
Bu benim paragrafım!
Web sayfanızı bir web tarayıcısı üzerinden görüntüleyen kişilere bu paragrafın kırmızı ve kalın görünmesini istiyorsanız, şuna benzeyen CSS kodunu kullanırsınız:
p {color: red; font-weight: bold; }
Bu durumda, "p" (paragraf) "seçici" olarak adlandırılır. CSS kodunun, CSS stilinin hangi HTML öğesini etkileyeceğini belirleyen kısmıdır. CSS'de seçici, ilk küme parantezinin soluna yazılır.
Küme parantezleri arasındaki bilgilere bildirim denir, seçiciye uygulanan özellikleri ve değerleri içerir. Özellikler yazı tipi boyutu, rengi ve kenar boşlukları gibi şeylerdir, değerler ise bu özellikler için ayarlardır. Yukarıdaki örnekte, hem "renk" hem de "yazı tipi ağırlığı" özellikleri "kırmızı" ve "kalın" olarak kullanılmıştır. Tam parantez içine alınmış etkilenen: { kırmızı renk; yazı tipi ağırlığı: kalın; } CSS görünüm için kullanılır diyebiliriz kısaca.
Harici, Dahili veya Satır İçi CSS Nedir?
Yine de bu CSS kodunun aslında HTML içeriğine nasıl uygulandığını merak ediyor olabilirsiniz. HTML'ye çok benzer şekilde, CSS de bilgisayarınızdaki bir metin düzenleyici veya kelime işlemci aracılığıyla basit, düz metin olarak yazılır ve bu CSS kodunu HTML sayfalarınıza eklemenin üç ana yolu vardır. CSS kodu (Stil Sayfaları) harici, dahili veya satır içi olabilir. Harici stil sayfaları .css dosyaları olarak kaydedilir ve tek bir dosya aracılığıyla tüm bir web sitesinin görünümünü belirlemek için kullanılabilir (ayarlamak istediğiniz her HTML öğesine ayrı ayrı CSS kodu örnekleri eklemek yerine).
Harici bir stil sayfası kullanmak için, .html dosyalarınızın harici stil sayfasına bağlamamıza yarayan gerekli kodlarınının header üzerinde içermesi gerekir:
<link rel=stylesheet" href="cssdosyası.css">
Bu sayede .html dosyasını harici stil sayfanıza bağlar ve bu dosyadaki tüm CSS talimatları, bağlantılı .html sayfalarınıza uygulanır. Dahili stil sayfaları, doğrudan belirli bir .html sayfasının başlığına yazılan CSS talimatlarıdır. Bu, özellikle bir sitede benzersiz bir görünüme sahip tek bir sayfanız varsa kullanışlıdır.
