CSS - Memilih Warna

Di dalam CSS kita dapat menggunakan jumlah warna yang sangat besar selama kita mengerti cara format penulisan warna yang benar, pada praktek ini siswa akan diajarkan format dasar penulisan kode warna, tempat yang dapat dijadikan referensi dalam memilih warna serta pada prakteknya siswa akan mulai diajarkan memilih warna untuk layout web yang akan kita buat

Memilih warna dengan CSS

  • untuk merubah warna dapat menggunakan nama (sangat terbatas jumlahnya)
  • menggunakan kode hexadesimal #000000 - #FFFFFF
  • Beberapa hal cara mengingat kode warna
    • #RGB (Red, Green, Blue)
      • 2 digit pertama mewakili banyak warna merah
      • 2 digit berikutnya banyak warna hijau
      • 2 digit terakhir banyak warna biru
    • jadi untuk menghasilkan warna benar-benar merah menggunakan #FF0000
      • Ingat kalau di hexadesimal nilai tertinggi bukanya angka 9 tetapi F
      • urutan angka di hexa desimal adalah 0 - 9, A, B, C, D, E, F
    • Bila kita tulis nilai warna #FFFF00 akan menghasilkan warna kuning
      • seperti kita ketahui apabila ada cat air kita mencampur warna merah dan hijau akan menjadi kuning
    • bila kita tulis nilai warna #888888 akan menjadi warna Abu-abu
    • Bila kita gabungkan semua warna merah, hijau dan biru, akan menghasilkan warna putih, sehingga kode warna putih adalah #FFFFFF, sedangkan kode warna hitam dianggap tanpa ada warna sama sekali sehingga menjadi #000000
    • untuk melihat contoh warna mana yang ingin anda pilih sangat saya sarankan untuk melihat website www.colourlovers.com
      • pilih menu browse, palettes

Praktek Siswa

  • Jalankan program Brackets
  • pilih menu File, Open Folder, pilih tempat folder anda bekerja di praktek sebelumnya
    • misalnya di "My Documents\HTML-CSS"
  • Buka file index.html
  • pada bagian area tambahkan link ke file css dengan kode berikut:
    • ketik link, kemudian tekan tab kemudian beri nama file css style.css
    • akan menjadi tag seperti berikut:
  <link rel="stylesheet" type="text/css" href="style.css">
  • Pilih menu File, New,
    • simpan dengan menekan Ctrl + S, dan beri nama style.css
  • Pilih menu View, Horizontal Split
    • pindahkan style.css ke bagian bawah
    • copy isi ketikan berikut dan masukkan ke dalam file style.css
    • coba buka website colourlovers.com
    • Pilih tema warna yang akan anda gunakan untuk website anda
    • ubah 8 warna berikut
/* Warna

1. Judul web = #
2. Menu      = #
3. Background header = #
4. Background Article = #
5. Background Footer = #
6. Judul Article = #
7. Paragraf
8. Text Footer = #

*/

h1 {
    color: #Warna Judul Web;
}

header a {
    color: #Warna menu;
    text-decoration: none;
}

header {
    background-color: #Warna Background Header;
}
article {
    background-color: #Warna Background Artikel;
    color: #Warna Tulisan Artikel;
}

article h3 {
    color: #Warna Judul Artikel;
}

footer {
    background-color: #Warna background Footer;    
}

footer a {
    color: #Warna Tulisan pada Footer;
    text-decoration: none;
}
  • Simpan dan perhatikan hasilnya