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.
CSS'nin Önemi
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"nin önemi daha iyi anlaşılıyor.
CSS Kod Yapısı
Seçici : HTML yapısında css kodları etkileyeceğimiz kısmı belirler. Seçiciler bir html etiketi, id veya class değeri olabilir.
ifadeler : Seçiciyle uygulayacağımız etkiyi belirlediğimiz alandır ve birden fazla ifade yazmak için noktalı virgül ile ayırabiliriz.
Özellik ve Değer : İfadeleri tanılamak için kullanılır.
Kısacası genel yapımız, ilk önce hangi html elemanını stilini değiştirmek istiyorsak seçici kısmına yazıyor sonra süslü parantezler ile bir kod bloğu oluşturuyoruz. Bu kod blokları arasında seçinin etkileneceği ifadeleri özellik ve değer şeklinde yazıyoruz. Birden fazla ifade için noktalı virgül kullanıyoruz.
CSS Syntax Örneği :
Yukarıda ki CSS kodu, sitedeki tüm "p" yani paragraf etiketlerine yazı rengini mavi ve metni ortalama özelliği getirdi. Bu örnekte :
- p bir seçici,
- "color" özellik "blue" değer,
- "text-align" özellik ve "center" ise değerdir.
