Pembelajaran CSS 02 Dalam 5 Menit Kuasai Contoh Penggunaan

Pada artikel sebelumnya kamu sudah diperkenalkan secara singkat mengenai css 3. Bagi kamu belum membaca artikel yang saya buat sebelumnya, maka kamu bisa membaca Pembelajaran CSS 01 Dalam 10 Menit Pengenalan Kilat CSS. Pada artikel kedua pembelajaran css 3 ini merupakan bahan pelengkap pada pembelajaran 1 untuk memahami kode atau script-script dari css 3.

Saya sudah menyiapkan sebuah file helo.html yang pernah digunakan pada pembelajaran khusus html 5 pemula. Tenang kamu tidak perlu menghafal semua kode cssnya sekaligus, perlahan tapi pasti selama kamu terus rajin membaca maka secara tidak langsung kamu bisa memahaminya.

helo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Alodospem | Pembelajaran CSS 02 Dalam 5 Menit Kuasai Contoh Penggunaan</title>
</head>
<body>
    <h1>Belajar CSS 3 Pembelajaran #02 Pemula dialodospem</h1>
    <p>
        Saya ingin belajar bahasa pemrograman <em> php, c++ dan javascript <em> di
        <strong> alodospem <strong>dengan mudah 
</body>
</html>

Kode pada helo.html hanya merupakan kode murni html saja yaitu berupa tag <html>, <head>,<p><h1> dan lain-lain. Jika kamu sudah mempelajari html yang saya pernah bahas Pembelajaran HTML 5 Khusus Pemula . maka tag-tag yang saya bilang itu sudah tidak asing buat kamu lagi. Ketika tag diatas dijalankan maka akan menampilkan pada web browser chrome sebagai berikut ini :

Gambar 1 helo.html

Dan hasilnya masih standar, tidak ada pewarnaan atau design background pada helo.html diatas alasannya karena memang masih html murni. Jadi disinilah fungsi dari css sebagai pewarna atau untuk mempercantik tampilan website kita.

Sekarang saya akan mencoba mengubah design halaman HTML diatas. Terdapat 2 alternatif, menggunakan tag HTML atau dengan CSS. Jika menggunakan tag HTML, saya bisa memodifikasinya menjadi seperti berikut ini:

helo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Alodospem | Pembelajaran CSS 02 Dalam 5 Menit Kuasai Contoh Penggunaan</title>
</head>
<body bgcolor="#F7F7F7"><!---kode css untuk menganti warna background-->
    <h1><font color="green">Belajar CSS 3 Pembelajaran #02 Pemula dialodospem</font></h1><!--kode css untuk merubah warna tulisan jadi biru langit-->
    <p><font face="verdana" size="4"> <!---kode css untuk membu-->
        Saya ingin belajar bahasa pemrograman <em> php, c++ dan javascript <em> di
        <strong> alodospem <strong>dengan mudah </font>
</body>
</html>

Kode html diatas sudah dilengkapi dengan kode-kode css sehingga baik background dan tulisan sudah berwarna. Berikut ini adalah hasilnya :

Gambar 2 helo.html

Berikut ini adalah penjelasan mengenai kode-kode css yang dipakai pada helo.html :

<body bgcolor="#F7F7F7"><!---kode css untuk menganti warna background-->

pada kode bgcolor="#F7F7F7" bertujuan untuk mengganti warna background yang standarnya berwarna putih menjadi warna dengan kode warna #F7F7F7. Kamu juga boleh menggunakan huruf untuk mengganti warna contohnya skyblue untuk mengubah warna menjadi warna biru langit dan lain lain. contohnya bgcolor="skyblue".

<font color="green">

color="skyblue" berfungsi dalam mengganti warna pada tulisan. kamu juga bisa mengganti warna dengan menggunakan kode warna. Tujuan penggunaan kode warna agar warna yang kita mau bisa sangat akurat. Mungkin kamu yang sudah biasa mendesign gambar atau edit foto di photoshop maka kamu sangat mudah dalam menentukan warna atau tidak asing lagi dengan kode pewarnaan.

Kesimpulan

Terdapat perbedaan tampilankan berkat css kan? dan ini hanya yang paling sederhannya saja. Tampilan alodospem.web.id juga menggunakan css sehingga memberikan kesan yang cukup nyaman dipandang. Oleh karena itu css sangatlah penting untuk membuat tampilan website kamu menjadi terkesan centik dan rapi

Pembelajaran Selanjutnya

Pada artikel selanjutnya akan saya membahas mengenai perbedaan antara css, css 2 dan css3 yang tentunya beda generasi. Jika kamu tertarik bisa membaca di link dibawah ini :

Pembelajaran CSS 03 Menemukan Rahasia Perbedaan CSS 1 CSS2 Dan CSS3

Pembaca yang baik selalu meninggalkan jejak atau hanya sekedar reaction pada kolom komentar, agar saya sebagai penulis juga semangat dalam melanjutkan artikel ini. Berkomentarlah dengan baik dan sopan dan saling menghargai

Bagikan ke media sosial :