Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde HTML'de Stil konusuna yani CSS konusuna giriş yapıyor olacağız. Web dünyasında HTML ile oluşturduğumuz sabit sayfaları şık ve düzenli hale getirmek için Cascading Style Sheets , kısaltması CSS türkçesi ise "Basamaklı Stil Şablonu" olan betik bir dil kullanırız.Daha önce HTML derslerimizde "Stil" tanımının ne olduğunu anlatmıştık, HTML Dersleri 7 - Stiller (Styles) bu adresten derse ulaşabilirsiniz. Orada öğrendiğimiz stil tanımına daha geniş bir yelpaze ile bakacağız.
CSS Nedir ?
CSS, HTML sayfalarının ekranlarda (mobil,masaüstü,tablet), diğer ortamlarda nasıl görüntüleneceğini tanımlar. HTML dili gibi betik bir dil olan CSS ile web sayfalarının stilleri oluşturulur. Örneğin bir websitesinde, logonun nerede duracağını, site içindeki yazıların fontlarını, sitenin arkaplan rengi gibi göze hitap eden her durumla CSS ilgilenir.
Aşağıda örnek bir CSS kodu görmektesiniz.
body {
background-color: red;
}
h1 {
color: yellow;
text-align: center;
}
p {
font-family: verdana;
font-size: 14px;
}
Neden CSS Kullanırız ?
CSS, farklı cihazlar ve ekran boyutları için tasarım, düzen ve görüntü varyasyonları dahil olmak üzere web sayfalarınız için stilleri tanımlamak için kullanılır. Bu sayede bir sitenin mobil ekranda daha minimal bir tasarımı yapılırken, aynı site büyük ekranlar için farklı tasarlanabilir. Oluşturduğumuz web sitelerinin kullanıcılarla etkileşime gireceğini düşünürsek, iyi bir kullanıcı deneyimi için "CSS"in önemini daha iyi anlaşılıyor.
