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.
Css dibagi menjadi 2 yaitu class ( . ) dan id ( # ).
Untuk lebih jelasnyo tentang penggunaan css agar website lebih menarik simak dibawah ini :
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.
<link href="css.css" rel="stylesheet"/>
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
<style>
.hijau{color:#0C3;}
.biru{color:#03C;}
.merah{color:#F00;}
.kuning{color:#FF0;}
<style/>
<div><span class="hijau">HIJAU</span><span class="biru">BIRU</span><span class="merah">MERAH</span><span class="kuning">KUNING</span></div>
Demo
HIJAUBIRUMERAHKUNING
.hijau{color:#0C3;}
.biru{color:#03C;}
.merah{color:#F00;}
.kuning{color:#FF0;}
<style/>
<div><span class="hijau">HIJAU</span><span class="biru">BIRU</span><span class="merah">MERAH</span><span class="kuning">KUNING</span></div>
Demo
HIJAUBIRUMERAHKUNING
Membuat background warna dengan css
<style>
.hijau{background-color:#0C3;}
.biru{background-color:#03C;}
.merah{background-color:#F00;}
.kuning{background-color:#FF0;}
<style/>
<div><span class="hijau">HIJAU</span><span class="biru">BIRU</span><span class="merah">MERAH</span><span class="kuning">KUNING</span></div>
Demo
HIJAU BIRU MERAH KUNING
.hijau{background-color:#0C3;}
.biru{background-color:#03C;}
.merah{background-color:#F00;}
.kuning{background-color:#FF0;}
<style/>
<div><span class="hijau">HIJAU</span><span class="biru">BIRU</span><span class="merah">MERAH</span><span class="kuning">KUNING</span></div>
Demo
HIJAU BIRU MERAH KUNING
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> DemoIni dia font Verdana, Geneva, sans-serifIni dia font Georgia, "Times New Roman", Times, serifIni dia font "Courier New", Courier, monospaceIni 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> DemoWarna text berubahBackground 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> DemoSentuh text iniSentuh text iniSentuh text iniSentuh text ini
Membuat lingkaran dengan css
Lingkaran
Masih banyak sebetulnya yang mau saya bahas, tetapi waktu berbicara,Nanti saya lanjutkan tutorialnya ,,semoga bermanfaat
Related Post