Belajar CSS Lengkap Untuk Pemula

Css adalah sebuah script / perintah yang berfungsi untuk memperindah sebuah tampilan website/ blog.
Dalam penempatan css didalam website maupun diluar website dengan menempatkan link eksternal, Seperti yang dikatakan oleh pakar seo, bahwa css lebih baik memakai link eksternal karena selain lebih ringan saat website dibuka , css eksternal juga baik bagi seo.

Diatas merupakan contoh penempatan css, biasanya kode tersebut ditempatkan di dalam <head> </head>.
Css dibagi menjadi 2 yaitu class ( . ) dan id ( # ).

Apa itu class dalam css ?

Class dalam css merupakan sebuah induk kode ,yang dimana class bisa ditempatkan di bebrapa element dalam satu halaman.

Apa itu id dalam css ?

Id dalam css merupakan sebuah induk kode ,yang dimana Id hanya bisa dipasang disatu elemen dalam satu halaman.
Untuk lebih jelasnyo tentang penggunaan css agar website lebih menarik simak dibawah ini :

Kode Css Warna pada text

Membuat background warna dengan css

Font family dengan css

Untuk font di css saya memberi contoh 4 font css, sebenarnya masih banyak font css yang bisa anda terapkan.

Kode css
<style>
.satu{font-family:Verdana, Geneva, sans-serif;}
.dua{font-family:Georgia, "Times New Roman", Times, serif;}
.tiga{font-family:"Courier New", Courier, monospace;}
.empat{font-family:"Comic Sans MS", cursive;}
</style>
Penerapan kode
<div class="satu">Ini dia font Verdana, Geneva, sans-serif</div>
<div class="dua">Ini dia font Georgia, "Times New Roman", Times, serif</div>
<div class="tiga">Ini dia font "Courier New", Courier, monospace</div>
<div class="empat">Ini dia font "Comic Sans MS", cursive</div>
Demo
Ini dia font Verdana, Geneva, sans-serif
Ini dia font Georgia, "Times New Roman", Times, serif
Ini dia font "Courier New", Courier, monospace
Ini dia font "Comic Sans MS", cursive

Warna text/background berubah ketika disentuh cursor dengan css

Untuk membuat warna text atau background berubah ketika disentuh ,kita menggunakan kode hover, hover merupakan sebuah kode css yang mana kode tersebut berfungsi ketika element tersebut tersentuh oleh kursor, untuk lebih jelasnya mari kita praktekan.

Kode css
<style>
.hov1{color:#0FF;}
.hov2{background-color:#FFFFFF;}
.hov1:hover{color:#33FF33;}
.hov2:hover{background-color:#CCFF33;}
</style>
Penerapan kode
<div class="hov1">Warna text berubah</div>
<div class="hov2">Background berubah</div>
Demo
Warna text berubah
Background berubah

Merubah cursor dengan css

Jika anda pernah memperhatikan sebuah website ketika disentuh cursor berubah menjadi tangan,jendela terbuka dll, itu semua bisa dilakukan dengan css, mari kita simak:

Kode css
<style>
.cursor1{cursor:pointer;}
.cursor2{cursor:all-scroll;}
.cursor3{cursor:cell;}
.cursor4{cursor:progress;}
</style>

Penerapan kode
<div class="cursor1">Sentuh text ini</div>
<div class="cursor2">Sentuh text ini</div>
<div class="cursor3">Sentuh text ini</div>
<div class="cursor4">Sentuh text ini</div>

Demo
Sentuh text ini
Sentuh text ini
Sentuh text ini
Sentuh text ini

Membuat lingkaran dengan css

Lingkaran

Masih banyak sebetulnya yang mau saya bahas, tetapi waktu berbicara,Nanti saya lanjutkan tutorialnya ,,semoga bermanfaat

About Blogger

Market Uang

Belajar CSS Lengkap Untuk Pemula

Si ade