HTML dan CSS sudah menjadi bagian tak terpisahkan dari website modern. HTML digunakan untuk membuat konten atau kerangka logis dari halaman web, sedangkan CSS digunakan untuk mengatur tampilan dari website seperti warna background dan font yang digunakan. Jika anda ingin belajar web design, CSS adalah hal yang wajib dikuasai.
Kali ini duniailkom mencoba membuat beberapa tutorial untuk dapat menguasai CSS, mulai dari Tutorial CSS Dasar, Tutorial CSS Lanjutan dan Beberapa contoh kasus penggunaan CSS. Sebelum mulai belajar CSS, setidaknya anda sudah memahami dasar-dasar HTML.
Dalam halaman ini, saya akan menyatukan seluruh link tutorial dan artikel CSS di duniailkom:
eBook CSS Uncover Duniailkom
Apabila anda serius ingin mempelajari CSS dan membutuhkan tutorial CSS yang lebih lengkap, Duniailkom telah menerbitkan eBook CSS Uncover.
Dengan total 680 halaman A4, buku CSS Uncover akan memandu rekan-rekan untuk menguasai luar dalam tentang CSS. Materi dalam buku ini mulai dari perkenalan dengan CSS, membahas berbagai selector dan property CSS, hingga materi terbaru CSS3 seperti media query, 2D transform, transisi, dan animasi. Di akhir buku akan dijelaskan cara membuat layout web responsive (responsive web design).
CSS Uncover bisa didapat dengan donasi Rp. 60.000. Untuk pemesanan silahkan kirim email ke [email protected]. Penjelasan lebih lanjut bisa ke: CSS Uncover.
Tutorial CSS Dasar
Tutorial CSS dasar dirancang untuk memahami cara kerja CSS, mulai dari aturan penulisan, cara menginput CSS ke dalam halaman HTML serta aturan-aturan dasar CSS.
- Tutorial Belajar CSS Dasar
- Tutorial Belajar CSS Part 1: Pengertian CSS, Apa yang dimaksud dengan CSS?
- Tutorial Belajar CSS Part 2: Cara Menginput Kode CSS ke Halaman HTML
- Tutorial Belajar CSS Part 3: Pengertian Selector, Property dan Value pada CSS
- Tutorial Belajar CSS Part 4: Aturan dan Cara Penulisan Kode CSS
- Tutorial Belajar CSS Part 5: Mengenal Jenis-jenis Selector Dasar CSS
- Tutorial Belajar CSS Part 6: Cara Penggunaan Selector CSS
- Tutorial Belajar CSS Part 7: Urutan Prioritas Selector CSS (Cascading)
- Tutorial Belajar CSS Part 8: Urutan Prioritas Selector CSS (Specificity)
- Tutorial Belajar CSS Part 9: Mengenal Sifat Penurunan Dalam CSS (Inheritance)
- Tutorial Belajar CSS Part 10: Penulisan Kode Warna pada CSS
- Tutorial Belajar CSS Part 11: Mengenal Satuan Nilai (Value) dalam CSS
Referensi Property CSS
Dalam Referensi Property CSS ini kita akan membahas cara penggunaan berbagai property CSS, serta tips dan trik untuk menggunakan property tersebut secara efisien. Diharapkan tutorial ini bisa menjadi bahan referensi untuk mempelajari CSS,termasuk CSS3.
Property Teks CSS:
- Tutorial Belajar CSS: Cara Merubah Jenis Font HTML dengan CSS (font-family)
- Tutorial Belajar CSS: Cara Menggunakan Font External dengan CSS (@font-face)
- Tutorial Belajar CSS: Cara Menggunakan Google Font dengan CSS
- Tutorial Belajar CSS: Cara Mengubah Ukuran Font HTML dengan CSS (font-size)
- Tutorial Belajar CSS: Cara Mengatur Tinggi Baris dalam Paragraf HTML (line-height)
- Tutorial Belajar CSS: Cara Memiringkan dan Menebalkan Huruf dengan CSS
- Tutorial Belajar CSS: Cara Mengubah Tampilan Huruf Kapital (Case) Teks HTML
- Tutorial Belajar CSS: Cara Penulisan Singkat Property Font CSS
- Tutorial Belajar CSS: Cara Membuat Teks Underline, Overline, dan Line-through
- Tutorial Belajar CSS: Cara Merubah Warna Teks (font) HTML dengan CSS (color)
- Tutorial Belajar CSS: Cara Mengatur Lebar (spasi) Antar Huruf dan Kata Teks HTML
- Tutorial Belajar CSS: Cara Mengatur Rata Teks HTML dengan CSS (text-align)
CSS Box Model
Salah satu konsep dasar yang wajib dipahami di dalam CSS adalah CSS Box Model. Dalam tutorial ini kita akan membahas lebih dalam apa itu CSS Box Model.
- Tutorial Belajar CSS: Pengertian CSS Box Model
- Tutorial Belajar CSS: Cara Mengatur Lebar Element HTML (width)
- Tutorial Belajar CSS: Cara Mengatur Tinggi Element HTML (height)
- Tutorial Belajar CSS: Cara Membuat Garis Tepi pada HTML (border)
- Tutorial Belajar CSS: Pengertian Padding dan Fungsi Padding dalam CSS
- Tutorial Belajar CSS: Pengertian Margin dan Fungsi Margin dalam CSS
- Tutorial Belajar CSS: Cara Menghitung Lebar dan Tinggi CSS Box Model
- Tutorial Belajar CSS: Membuat Gallery Gambar dengan HTML dan CSS
Tutorial CSS Lanjutan
Dalam bagian ini, akan dibahas tentang tutorial CSS lanjutan untuk pembahasan yang lebih advanced. Beberapa tutorial dasar akan kita bahas kembali secara lebih mendalam.
- Tutorial Belajar CSS: Pengertian dan Cara Penulisan Kode Warna RGBA, HSL, dan HSLA
- Tutorial Belajar CSS: Pengertian Attribute Selector dalam CSS
- Tutorial Belajar CSS: Pengertian Pseudo-class dan Pseudo-element CSS
Tutorial CSS3
CSS3 merupakan fitur terbaru dan yang paling 'wah' di dalam CSS. Banyak efek tampilan menarik ditambahkan ke dalam versi ini, seperti efek bayangan, rounding corner, transisi, animasi, dan responsive web design. Dalam sesi ini Duniailkom akan membahas cara penggunaan berbagai property CSS3.
- Tutorial Belajar CSS3: Pengertian CSS Vendor Prefix dan Cara Penulisannya
- Tutorial Belajar CSS3: Cara Membuat Efek Teks Berbayang dengan CSS3
- Tutorial Belajar CSS3: Cara Membuat Efek Bayangan (Box Shadow)
- Tutorial Belajar CSS3: Cara Membuat Sudut Melengkung (Rounded Corner) di CSS
- Tutorial Belajar CSS3: Cara Membuat Kolom Koran di HTML (multiple column)