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 Nasıl Kullanılır?

CSS kullanımı temelde 3'e ayrılmaktadır. Bunlar Satır içi (inline) CSS, Dahili (internal) CSS ve Harici (External) CSS şeklindedir.

Satır içi (inline) CSS

Satır içi CSS kullanımında yapılması gereken tek şey ilgili elementin içerisine girip yeni bir "attribute" değeri tanımlamak olacaktır.

<!DOCTYPE html>
<html lang="tr">
  <body>
    <h1 style="color: orange; font-size:30px;" ></h1>
   </body>
</html>

Yukarıdaki örnekte "h1" elementine satır içi CSS uygulanarak; rengi turuncuya, yazı boyutu ise 30px değerine çekilmiştir.

Satır içi CSS yapıları, doğrudan ...

Devamını görüntüle

CSS İle 'a' Elementinin Seçicileri Nelerdir?

Bu yazımız CSS seçicileri yazısının son yazısıdır. Bu yazı <a href=''></a> elementini seçmek üzerine hazırlanmış bir yazıdır. Fakat örneğin ":active" yapısı Pseudo-class Seçiciler başlığı altında tanımlanmış bir özelliktir. Fakat neticesi itibariyle en çok kullanıldığı alan <a href=''></a> elementi olması nedeniyle bu yazıda sadece <a href=''></a> elementi için nasıl kullanılıyor bunu görmeye çalışacağız.

CSS ":active" Seçicisi:

Elementin tıklanıldığı anı temsil etmektedir. Sadece "a" elementine özel değildir. Fakat en çok "a" elementi için kullanılmaktadır.

Devamını görüntüle