www.WarungProgram.com
Tempat Belajar Bahasa Pemrograman Dari Dasar
Tempat Belajar Bahasa Pemrograman Dari Dasar
Penulis : Zulfikar Kategori : Belajar CSS
Disini kita akan Belajar Coding Dasar CSS. Ini adalah tutorial seri kedua dari Tutorial Belajar CSS Dari Dasar
Di Tutorial seri kedua ini kita akan berkenalan dengan Selector, dan selanjut nya yaitu cara menggunakan CSS untuk mempercantik tampilan sebuah web yang di buat dengan HTML.
Sebelum lanjut ke materi Coding Dasar CSS anda harus sudah mengenal terlebih dahulu bahasa dasar untuk membuat website yaitu html, bagi yang belum, bisa mempelajari nya di sini Belajar HTML
Di sini kita akan berkenalan dahulu dengan Coding Dasar CSS, setelah anda paham materi selanjutnya adalah cara menggunakan CSS di html.
Ada beberapa aturan untuk menulis coding atau code program CSS diantaranya :
Contoh Coding CSS nya seperti ini :
h1 {
color : blue;
}
pada contoh coding dasar css di atas untuk memberi warna biru dapat kita analisa :
Selain menggunakan html tag sebagai selector css juga menyediakan beberapa tipe selector lain diantaranya :
Selector CSS ID
Selector ini menggunakan attribut ID yang di berikan pada html tag, contoh coding nya :
Coding pada HTML
<div id='header'></div>
Coding pada CSS
#header {
color:blue;
}
mari kita bedah koding nya, pada koding html terdapat tag div yang biasanya digunakan untuk membuat layout dasar sebuah website.
pada html tag div tersebut di berikan attribut id yang berisi nilai header
Untuk memberi sentuhan CSS pada selector tersebut, kita bisa menggunakan CSS Selector ID dengan aturan :
# di awal sebagai penanda bahwa akan menggunakan ID Selector
Selector CSS Class
Selector ini mirip dengan Selector ID hanya perbedaan nya attribut yang di gunakan di html nya adalah class
contoh coding nya :
coding html
<div class='siderbar'></div>
coding css
.sidebar {
color:red;
}
terlihat bahwa perbedaan nya adalah untuk Selector CSS class menggunakan . (titik) di awal sebelum nama selector nya.
Selector CSS Universal
Selector ini menggunakan tanda bintang * dan style css dari selector ini di aplikasikan atau berdampak pada seluruh element dalam website.
contoh coding :
* {
font-family: Arial, Helvetica, sans-serif;
}
coding css di atas akan merubah tampilan font website.
Group Selector CSS
Selector ini bisa anda gunakan untuk beberapa html tag sekaligus, contoh coding :
h1, h2 {
color:blue;
}
coding css di atas akan memberikan style css pada 2 tag html, anda bisa menggunakan lebih dari 2 tag html pada Group Selector CSS. Pada Group Selector CSS ini setiap html element yang akan di berikan style CSS dipisahkan oleh koma ,
anda juga bisa menggunakan group selector css untuk Selector ID, contoh coding :
#header, #sidebar {
color:blue;
}
Selector CSS Turunan
Selector ini memberikan style untuk html elemen turunan nya, contoh coding :
coding html
<body> <h1>Ini Judul</h1> </body>
coding css
body h1 {
color red;
}
dari contoh coding di atas terlihat bahwa elemen html h1 adalah turunan dari elemen html body.
dan kita memberikan style css pada elemen html h1 yang menjadi turunan dari elemen html body.
Saya rasa materi saat ini cukup untuk mengenal coding dasar css, di seri tutorial belajar css selanjutnya kita akan belajar cara menyisipkan coding css ke dalam html.
Tutorial Selanjutnya :
