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 😊

CSS Kombine veya Kompleks Seçiciler

CSS konusuna hakim kişilerin işini kolaylaştıran müthiş yapılardır. Sürekli ID veya Class değeri kullanmak yerine (HTML içerisinde belirtmek yerine) CSS tarafında yapılan küçük müdahaleler ile istenilen elemente doğrudan erişim sağlayabilmektedir. Kendi içerisinde 5 farklı maddeden oluşmaktadır. Bunlar: Gruplandırma, Alt Öğe (Descendant), Doğrudan Alt Öğe (child), Bitişik Kardeş Tekil (Adjancent Sibling), Genel Kardeş Çoğul (General Sibling) şeklindedir.

1) Gruplandırma:

Aynı CSS özellikleri birden çok HTML elementine verilmek isteniyorsa "class", "id", "element" fark etmeksizin "," işareti ile gruplandırılabilir.

<span class='output'></span...

CSS Temel Seçiciler || CSS Basic Selectors

CSS içerisinde en çok kullanılan seçim (erişim) yöntemidir. Kendi içerisinde 4 farklı başlıktan oluşmaktadır. Bunlar. Class seçiciler, ID seçiciler, Universel * seçici ve Element seçicilerdir.

1) CSS ile ".class" seçiciler:

CSS .class değeri ile bir elemente erişmek istediğimizde öncelikli olarak erişilmek istenilen HTML elementinin "class" değeri tespit edilmelidir. HTML "class" değerleri birden çok elemente verilebilmektedir. Bu nedenle "id" yapısı ile keskin bir farkı vardır.

<h1 class='title'>This is a my title</h1>
<h2 class='title'>This is a my title</h2>

Erişim sağlanmak istenen elementin "class" değeri te...