Index Tutorial Belajar CSS

Posted on

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 kami 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.

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.

  1. Tutorial Belajar CSS Part 1: Pengertian CSS, Apa yang dimaksud dengan CSS?
  2. Tutorial Belajar CSS Part 2: Cara Menginput Kode CSS ke Halaman HTML
  3. Tutorial Belajar CSS Part 3: Pengertian Selector, Property dan Value pada CSS
  4. Tutorial Belajar CSS Part 4: Aturan dan Cara Penulisan Kode CSS
  5. Tutorial Belajar CSS Part 5: Mengenal Jenis-jenis Selector Dasar CSS
  6. Tutorial Belajar CSS Part 6: Cara Penggunaan Selector CSS
  7. Tutorial Belajar CSS Part 7: Urutan Prioritas Selector CSS (Cascading)
  8. Tutorial Belajar CSS Part 8: Urutan Prioritas Selector CSS (Specificity)
  9. Tutorial Belajar CSS Part 9: Mengenal Sifat Penurunan Dalam CSS (Inheritance)
  10. Tutorial Belajar CSS Part 10: Penulisan Kode Warna pada CSS
  11. 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.

  1. Tutorial Belajar CSS: Cara Merubah Jenis Font HTML dengan CSS (font-family)
  2. Tutorial Belajar CSS: Cara Menggunakan Font External dengan CSS (@font-face)
  3. Tutorial Belajar CSS: Cara Menggunakan Google Font dengan CSS
  4. Tutorial Belajar CSS: Cara Mengubah Ukuran Font HTML dengan CSS (font-size)
  5. Tutorial Belajar CSS: Cara Mengatur Tinggi Baris dalam Paragraf HTML (line-height)
  6. Tutorial Belajar CSS: Cara Memiringkan dan Menebalkan Huruf dengan CSS
  7. Tutorial Belajar CSS: Cara Mengubah Tampilan Huruf Kapital (Case) Teks HTML
  8. Tutorial Belajar CSS: Cara Penulisan Singkat Property Font CSS
  9. Tutorial Belajar CSS: Cara Membuat Teks Underline, Overline, dan Line-through
  10. Tutorial Belajar CSS: Cara Merubah Warna Teks (font) HTML dengan CSS (color)
  11. Tutorial Belajar CSS: Cara Mengatur Lebar (spasi) Antar Huruf dan Kata Teks HTML
  12. 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.

  1. Tutorial Belajar CSS: Pengertian CSS Box Model
  2. Tutorial Belajar CSS: Cara Mengatur Lebar Element HTML (width)
  3. Tutorial Belajar CSS: Cara Mengatur Tinggi Element HTML (height)
  4. Tutorial Belajar CSS: Cara Membuat Garis Tepi pada HTML (border)
  5. Tutorial Belajar CSS: Pengertian Padding dan Fungsi Padding dalam CSS
  6. Tutorial Belajar CSS: Pengertian Margin dan Fungsi Margin dalam CSS
  7. Tutorial Belajar CSS: Cara Menghitung Lebar dan Tinggi CSS Box Model
  8. 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.

  1. Tutorial Belajar CSS: Pengertian dan Cara Penulisan Kode Warna RGBA, HSL, dan HSLA
  2. Tutorial Belajar CSS: Pengertian Attribute Selector dalam CSS
  3. 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 akan membahas cara penggunaan berbagai property CSS3.

  1. Tutorial Belajar CSS3: Pengertian CSS Vendor Prefix dan Cara Penulisannya
  2. Tutorial Belajar CSS3: Cara Membuat Efek Teks Berbayang dengan CSS3
  3. Tutorial Belajar CSS3: Cara Membuat Efek Bayangan (Box Shadow)
  4. Tutorial Belajar CSS3: Cara Membuat Sudut Melengkung (Rounded Corner) di CSS
  5. Tutorial Belajar CSS3: Cara Membuat Kolom Koran di HTML (multiple column)