Latihan Dasar Membuat Warna Text Dengan Kode CSS

Latihan Dasar Membuat Warna Text Dengan Kode CSS
Latihan Dasar Membuat Warna Text Dengan Kode CSS
Pada kesempatan kali ini, yang akan menjadi pembahasan kita adalah tentang coding. Apakah sobat pernah kenal dengan yang namanya CSS ? Pasti sebagian besar akan menjawab "IYA", saya yakin itu. Sebelumnya apa sih CSS itu? CSS merupakan singkatan dari Cascading Style Sheet, dengan adanya CSS ini dapat mempermudah kita dalam pengeditan/ pembuatan suatu program seperti HTML. Tetapi saya akan share ulang materi-materi dasar terlebih dahulu tentang mengganti warna text pada program HTML ke CSS !

Latihan Dasar Membuat Warna Text Dengan Kode CSS  Part 1

Oke, kita akan mulai dengan contoh yang mudah terlebih dahulu. Sebelumnya biar lebih jelas, saya akan membuatkan contoh HTML nya terlebih dahulu. Kenapa? Agar sobat bisa lebih paham dan bisa membandingkan antara HTML biasa dan CSS. Lihat kode dibawah ini :

<HTML>
<HEAD>
</HEAD>
<BODY>

TEST : Saya sedang latihan <font color="red"><B>sesuatu</B></font> tentang CSS dasar !
<P>TUST : Oke kalau begitu, silahkan Sobat belajar <font color="blue"><I>sesuatu</I></font> !
<P><font color="red"><U>Selamat Belajar !</U></font>

</BODY>
</HTML>

Kode diatas merupakan salahsatu contoh kode/program HTML biasa alias belum diubah ke CSS. Sebelumnya saya jelaskan terlebih dahulu jenis dan fungsi kode diatas!

Keterangan Kode :
<P> "Merupakan kode untuk membuat suatu paragraf"
<B> "Merupakan  kode untuk menebalkan kata/ Bold"
<I>  "Merupakan  kode untuk memiringkan kata/ Italic"
<U> "Merupakan  kode untuk menggarisbawahi kata/ Underline"
<font color="red"> Merupakan kode untuk warna text yang kemudian ditutup dengan kode <font color="red">

Memang agak rumit jika sobat menggunakan dengan kode HTML semua, oke selanjutnya akan kita ubah/ kita tambahkan dengan kode CSS ! Lihat kode dibawah :

<HTML>
<HEAD>

          <STYLE TYPE="text/css">
               B,U { color : red }
               I { color : blue }
          </STYLE>

</HEAD>
<BODY>

TEST : Saya sedang latihan <B>sesuatu</B> tentang CSS dasar !
<P>TUST : Oke kalau begitu, silahkan Sobat belajar <I>sesuatu</I> !
<P><U>Selamat Belajar !</U>

</BODY>
</HTML>

Keterangan Kode :

Jika kita lihat pasti ada kode yang hilang dan ada juga yang nambah, nah kode html yang dihilangkan yaitu kode font color, dan kode (Bold, Italic, Underline) tadi. Kemudian diganti dengan kode CSS yang berfungsi sebagai selector dan declaration. Kode tersebut diletakkan diantara <HEAD> Letak code </HEAD>

Baca Juga Lanjutan Artikel Ini : "Latihan Dasar Mengganti Jenis Text Dengan Kode CSS"

Nah, bagaimana ..., Apakah sobat sudah paham dan sudah bisa membedakan antara HTML dan CSS ? Okelah saya yakin pasti sobat sudah mulai lebih paham. Untuk mengetesnya sobat bisa mencobanya di notepad, dreamweaver, atau aplikasi lainya. Sekian dulu dari saya, semoga dapat bermanfaat untuk sobat semua. Terimakasih~
Advertisement