CSS Kodları Nelerdir?

CSS, yani Cascading Steel Sheets, HTML elementlerinde renk, boyut ve arka plan gibi noktalarda değişiklik yapmanızı sağlamaktadır. Bir çeşit biçimlendirme dili olarak da tanımlanmaktadır. Birden fazla uç geliştirici ve tasarımcı web sitelerin gelişimi sırasında bu dili kullanmaktadır. Bir programlama dili olmamasının yanında, CSS ile beraber bir form oluşturup, o formun çıktıklarını sunucuya göndermek mümkün değildir. Aynı zamanda veri işlemek de mümkün değildir. CSS kullanımı ile oluşturduğunuz formun gönder butonundaki boyutu, marjını veyahut arka plan rengini değiştirebilirsiniz. HTML elementlerini şekillendirmek için kullanmak istiyor da olabilirsiniz. O zaman öncelikli olarak HTML nedir, temel elementleri nelerdir bilmeniz önemlidir. Yazımız içerisinde de tüm bu detaylara yer verdik. Dilerseniz yazımızı okumaya devam ederek çok daha kapsamlı bir bilgi sahibi olabilirsiniz.

HTML Nedir? Sık Kullanılan HTML Elementleri Hangileridir?

Hypertext Markup Lnnguage (HTML) yani “Hiper Metin İşleme Dili”, sitelerin görselleşmesi ve aktarılması için tarayıcılar tarafından okunmakta olan bir dildir. İnternet içerisinde okumuş olduğunuz paragraf, HTML elementi ile size aktarılmaktadır. Bunun yanı sıra birçok başlık için de HTML başlık etiketleri kullanılmaktadır. Sizler bir web sitesi içerisinde basit bir tabloda bile bu elementlere rastlayabilirsiniz. Kullanmakta olduğunuz tarayıcı ise bu elementler ile içerikleri size en doğru şekilde aktarmaktadır.

HTML içerisindeki elementler sıraladığımız bu seçeneklerle de sınırlı kalmaz. Alıntılar için de kullanımı söz konusudur. Aynı zamanda etiketler, web sitelerin sabit başlıkları ve daha pek çok noktada kullanımı söz konusudur. Elbette tüm bu elementlerin nasıl görünmesine karar vereceğiniz zaman da devreye CSS girmektedir.

Bilgisayarınızda sağ tıklayıp bir metin üzerinde “incele” kısmına bastığınızda, tarayıcıda metin HTML versiyonu görülecektir. Bu ekran pek çok kişi tarafından, birden fazla kez yanlışlıkla açılmaktadır. Ancak çoğu kişi açılan bu ekranın ne olduğunu anlamadan hızlıca kapatmaktadır. Ancak sizler, şimdi bilinçli bir şekilde açıp ekranı kapatmadan inceleyebilirsiniz. Yani CSS ne işe yarar öğrenebilirsiniz.

CSS Nasıl Kullanılır?

CSS uygulamalarının nasıl yapılacağı konusunda pek çok kişi araştırma yapmaktadır. Örnekler üzerinden ilerlemek gerekirse de yalnızca bir başlığa uygulamak istediğinizde farklı iki yol kullanabilirsiniz. Bunlardan birisi HTML elementi içerisinde CSS yazmaktır. İkincisi ise HTML elementinde benzersiz bir kimlik atamaktır. Bu şekilde söz konusu kimliğe CSS yazabilirsiniz. Kullanacağınız bu iki kol da kullanma yolları arasında bulunan üç seçenekten ikisini oluşturmaktadır. Detaylandırmak gerekirse de;

1. İnline CSS, yazımızda yer verdiğimiz gibi HTML elementi içerisinde CSS yazma yöntemi olarak geçmektedir. Uygulanmakta olan bu değişiklik yalnızca uygulanan elementler için geçerlidir. Sizler, bir sayfa içerisinde sağ tıklayarak incele butonuna bastiğiniz zaman Element sayfasını yeniden açabilirsiniz. Element içerisinde “style” tanımlaması da yapabilirsiniz. Bu şekilde de CSS yazmış olursunuz. Söz konusu noktada değişiklik yapmak istediğinizde de çift tıklayarak etiket içerisine eklemeler yapabilirsiniz. Bu da başlığın rengini değiştirmenize yardımcı olacaktır. Ancak yapmış olduğunuz değişiklik yazdığınız element üzerine uygulanmaktadır. Sayfanın geneline baktığınız zaman var olan diğer başlıkların renginin değiştiğini göremezsiniz. Söz konusu işlemi HTML elementi içerisine de yazabilirsiniz. Hatta bu işlem de oldukça kolaydır.
2. Kullanılan ikinci metot, External CSS olarak tanımlanmaktadır. Öncelikli olarak en ilk kısımda kullanılan metot olarak bilinmektedir. HTML elementinin içerisinde değil, dışında tanımlanmaktadır. Fakat element içerisine kod yazacağınız zaman bunu yapmanıza gerek yoktur. Buna sebep olarak da tarayıcının HTML elementinin içerisinde CSS seçeneğinin öncelikli olarak seçilmesidir. Ayrıca bu önceliği belirleme noktasında birden fazla yol da bulunmaktadır. Kullanabileceğiniz en temiz yol olarak ise ID kullanmak gösterilmektedir.
3. Üçüncü metot ise Genel CSS olarak geçmektedir. Oldukça kolay bir yöntem olmasının yanında “style” tanımını bu yöntemle yapmak mümkündür. Bu yöntemde etiket kullanımı yapılmaktadır. Ayrıca doküman içerisindeki etiketin içerisine de ekleme yapılmaktadır. Elementler bölümünün en başında yer alan etiketi açıp kaydırdığınız zaman da diğer etiketleri görebilirsiniz. Böylece external metodu kullanarak yazdığınız CSS kodunu da buraya yazdığınız zaman değişikliğin tekrardan uygulanması mümkündür.

CSS Kodları Nedir?

CSS kodlarının neler olduğundan tek bir yazı içerisinde söz etmek mümkün değildir. Ancak yazımız içerisinde sıkça kullanılmakta olan CSS Kodlarını örneklendirebiliriz.

• Color kodu, element renginin belirlenmesi amacıyla kullanılmaktadır. HTML renk kodlarıyla beraber kullanımı söz konusudur.
• Display kodu, elementlerin görüntülenip görüntülenmeyeceğiniz, nasıl görüntüleneceğini anlamanıza yardımcı olmaktadır. İçerisinde “block”, “flex” gibi kullanımlara da yer verilmektedir.
• Font-weight kodu, yazı tipinin inceliği ve kalınlığı konusunda karar vermeniz amacıyla kullanılmaktadır.
• Font-size kodu, yazı tipinin boyutunun belirlenmesi amacıyla kullanılmaktadır. “px” ve “em” ölçüleri yardımıyla kullanımı söz konusudur.
• background-color kodu, elementin arka plan renginin belirlenmesi amacıyla kullanılmaktadır. Bu aşamada HTML renk kodlarından da yardım alarak değerlendirilmektedir.
• Margin kodu, elementin diğer elementler ile arasında bulunan boşluğu ayarlamanıza yardımcı olmaktadır.
• Border kodu, kenarlıkların belirlenmesinde rol oynamaktadır. Farklı kodlarla nasıl bir kenarlık elde edeceğinizi belirleyebilirsiniz.
• Padding kodu, element içerisinde boşlukların ayarlanması için kullanılmaktadır.
• Height kodu, element yüksekliği için uygulanmaktadır.
• Width kodu ise element genişliğinin ayarlanmasında rol oynamaktadır.