Belajar Warna Pada CSS


Pada kesempatan ini, kami akan melanjutkan seri Belajar CSS pada kalian. JogjaXploit kali ini akan membahas mengenai Belajar Warna pada CSS, Pembuatan atau pemberian warna pada CSS sangatlah mudah dan penting kalian lakukan. Untuk itu, pemahaman mengenai CSS Warna sangatlah penting. Jika kalian baru saja mempelajari CSS atau styling, jangan khawatir. Disini akan kita pelajari bersama-sama.

Bagi kalian yang belum membaca materi atau pembelajaran mengenai CSS sebelumnya, kalian dapat membaca nya terlebih dahulu.

Baca Juga -> Komentar Pada CSS

Warna CSS

Pemberian warna pada CSS bisa dengan beberapa cara, apa saja? kita simak di bawah ini.
  
Berdasarkan RGB ( Red, Green, Blue ).

Berdasarkan HEX ( 6 digit angka untuk mempresentastasikan jenis-jenis warna ).

Berdasarkan HSL ( High, Saturation, Lightness )

Berdasarkan RGBA ( Red, Green, Blue, Alpha )

Berdasarkan HSLA ( Hampir sama dengan HSL )

Atau kalian juga bisa memberikan atau menentukan warna CSS berdasarkan nama warna nya, seperti Red ( Merah ), Blue ( Biru ), Green ( Hijau ), dan nama warna lainnya.

Kita lanjut tentang cara menentukan atau memberikan warna pada CSS.

Dalam CSS, warna dapat ditentukan dengan menggunakan nama warna itu sendiri.

Contohnya :



<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

</body>
</html>

Dari contoh diatas, penentuan warna nya dapat kita lihat seperti Tomato untuk warna tomat, orange untuk warna orange, gray untuk warna abu-abu, dan sebagainya.

Untuk hasil dari pemberian warna diatas sebagai berikut.


Belajar Warna Pada CSS

Perlu kalian ketahui, CSS / HTML mendukung 140 nama warna standar. Jika kalian tidak hafal semua nya, kalian dapat menggunakan Tools pemilih warna JogjaXploit.

Tools pemilih warna

Warna latar belakang atau background

kalian dapat memberikan atau mengatur warna latar belakang atau background untuk sebuah elemen HTML.

Contohnya :



<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">JogjaXploit</h1>

<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

</body>
</html>


Hasil dari penulisan diatas seperti ini.


Belajar Warna Pada CSS  : latar belakang

Warna latar belakang pada contoh diatas di tentukan oleh kode "background-color:DodgerBlue;". Ganti teks yang kami tandai dengan tanda kuning dengan warna yang kalian inginkan.

Warna teks atau tulisan CSS

Kalian juga dapat memberikan warna pada teks atau tulisan kalian menggunakan CSS. Lihat contoh di bawah untuk lebih jelasnya.



<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">JogjaXploit</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Hasil dari penulisan kode di atas sebagai berikut.


Belajar Warna Pada CSS : Warna teks

Tulisan JogjaXploit pada contoh diatas berwarna tomat, berasal dari kode "color:Tomato;" , begitu juga dengan yang lainnya.

Warna border atau pembatas ( garis )

Kalian juga dapat menentukan atau memberikan warna pada border atau batas dengan CSS. Lebih jelasnya lihat contoh nya di bawah.



<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">JogjaXploit</h1>

<h1 style="border: 2px solid DodgerBlue;">JogjaXploit</h1>

<h1 style="border: 2px solid Violet;">JogjaXploit</h1>

</body>
</html>


Hasil dari penulisan diatas seperti ini.


Belajar Warna Pada CSS : Border

Warna border pada contoh diatas di tentukan oleh kode "border: 2px solid Tomato;" , dan juga sebagainya. Yang mana tebal dari border nya dapat kita rubah dengan selera atau keinginan kalian. Akan kita bahas pada materi selanjutnya.


Mungkin pembelajaran atau materi mengenai Belajar Warna pada CSS cukup sampai disini. Mudah bukan? kalian dapat memberi warna pada tulisan dan sebagainya hanya dengan mendefinisikan atau menuliskan nama warnanya.

Pada materi atau pembelajaran selanjutnya, kita akan mempelajari mengenai RGB, nilai HEX, nilai HSL, nilai RGBA, dan juga nilai HSLA.

Jika ada yang kurang paham, kalian dapat bertanya melalui kolom komentar. Terima kasih dan sampai jumpa.

Silahkan Bertanya atau Beri Tanggapannya, Terima Kasih

Posting Komentar

Silahkan Bertanya atau Beri Tanggapannya, Terima Kasih

Post a Comment (0)

Lebih baru Lebih lama

ads

ads