CSS ile yazının rengi nasıl değiştirilir?

CSS ile bir yazının rengini, arka plan rengi değiştirmek oldukça kolaydır. Fakat renk yapılarının kendi içerisinde birden çok kullanımı bulunmaktadır. Bu nedenle CSS Renk Yapıları başlığı içerisinde bulunan renk yapılarının ne olduğunu bilmeniz sizin için yeterli olacaktır.

Eğer CSS Renk Yapıları yazısını okuduysanız bu durumda yapmanız gereken tek şey seçili olan elementin color veya background-color değerine etki etmek olacaktır.

CSS "color" komutu nedir? Ne işe yarar?

color değeri seçili olan elementin içerisindeki yazının rengini doğrudan değiştirmek için kullanılmaktadır.

.text{
  color: #DEF9C4; /* Hexadecimal renk kodu DEF9C4*/
}

CSS "background-color" komutu nedir? Ne işe yarar?

CSS background-color değeri nedir? Sadece seçili olan yazının değil, HTML içerisinde bulunan neredeyse (boyutlandırılmamış "inline" elementler vb. hariç) bütün elementler için arka plan rengini temsil etmektedir.

.text{
  backgroun-color: rgb(54, 194, 206); /*CSS RGB Fonksiyon Rengi*/
}

Her ikisini aynı anda kullanıp, seçilen ".text" class isimli HTML elementinin hem rengini, hem de arka plan rengini değiştirmek için:

.text{ 
  color: orange; /* Ön Tanımlı Renk */
  background-color: lightblue; /* Ön Tanımlı Renk */
}

Yukarıdaki gibi yazılabilir. Böylelikle yazıların rengini dilediğiniz gibi değiştirebilirsiniz 😊

Form Elementlerinin Özel Seçicileri

Form elementlerinin özel seçicileri, CSS ile form elemanlarını özelleştirmek için kullanılan yapılardır. Bu seçiciler "form" elemanlarından input, select ve textarea elementleri için ortak olarak bulunmaktadırlar.

1) CSS ":checked" seçicisi nedir?

":checked" seçicisi, bir form elemanının seçili (checked) durumunu hedef alır. Özellikle checkbox ve radio button gibi input elemanlarında kullanılır.

<form action="">
  <input type="radio" checked="checked" value="male" name="gender"> Male<br>
  <input type="radio" value="female" name="gender"> Female<br>
  <input type="checkbox" checked="checked" value="Bike"> I have a bike&...

CSS Pseudo-element (Sözde Element) Seçiciler

Pseudo, kelime anlamı ile sahte manasına gelmektedir. Bu nedenle aslında var olan bir elementin üzerinden türetilen CSS özellikleridir. Doğrudan HTML elementleri incelendiğinde sayfa içerisinde bulunan harici bir element değillerdir.

Pseudo-class (Sözde Sınıf) yapıları ile arasındaki en belirgin fark; Pseudo-class yapıları CSS'te ":" ile gösterilirken, Pseudo-element yapıları CSS'te "::" işareti ile gösterilmektedir.

Toplamda 7 farklı Pseudo-element yapısı bulunmaktadır. Bunlar: ::after, ::before, ::first-letter, ::first-line, ::marker, ::placeholder, ::selection şeklindedir.

1) CSS "::after" seçicisi nedir?