CSS

Daftar Isi Tutorial CSS Gurukomputer

CSS dan HTML merupakan bagian yang tak terpisahkan dari website modern. HTML dipakai untuk membuat isi dan struktur dari halaman website, sedangkan CSS dipakai untuk membantu mengatur tampilan dari website seperti warna background, dan font yang digunakan. Jika anda ingin membuat website lebih cantik, CSS adalah hal yang wajib anda kuasai.

Kali ini Gurukomputer membuat beberapa tutorial untuk mudahkan anda belajar CSS, mulai dari CSS Dasar, CSS Lanjutan, dan beberapa contoh kasus penggunaan CSS. Sebelum anda mulai Tutorial ini, ada baiknya jika anda sudah memahami dasar-dasar HTML.

Dalam halaman ini, saya mengumpulkan semua link tutorial dan artikel CSS di Gurukomputer:


Tutorial Dasar CSS

Tutorial dasar CSS dibuat untuk memudahkan anda memahami cara kerja CSS, mulai dari aturan penulisan, cara memasukkan CSS ke dalam halaman HTML serta aturan dasar CSS.

  • play
    Tutorial Belajar CSS Dasar
  • play
    CSS Tutorial 1 : Pengertian CSS
  • play
    CSS Tutorial 2 : Cara Memasukkan Kode CSS ke Halaman HTML
  • play
    CSS Tutorial 3 : Pengertian Selector, Property, dan Value dalam CSS
  • play
    CSS Tutorial 4 : Aturan dan Cara Pengulisan Kode CSS
  • play
    CSS Tutorial 5 : Jenis-Jenis Selector Dasar CSS
  • play
    CSS Tutorial 6 : Cara Menggunakan Selector CSS
  • play
    CSS Tutorial 7 : Urutan Prioritas Selector CSS (Cascading)
  • play
    CSS Tutorial 8 : Urutan Prioritas Selector CSS (Specificity)
  • play
    CSS Tutorial 9 : Sifat Penurunan Dalam CSS (Inheritance)
  • play
    CSS Tutorial 10 : Penulisan Kode Warna pada CSS
  • play
    CSS Tutorial 11 : Mengenal Satuan Nilai (Value) dalam CSS

Referensi Property CSS

Dalam Referensi Property CSS ini kita akan mempelajari cara penggunaan berbagai property pada CSS, dan juga tips dan trik untuk mengguankan property tersebut secara efisien. Semoga tutorial ini bisa menjadi bahan referensi untuk mempelajari CSS

  • play
    Belajar CSS : Cara Mengubah Jenis Font HTML dengan CSS (font-family)
  • play
    Belajar CSS : Cara Menggunakan Font External dengan CSS (font-face)
  • play
    Belajar CSS : Cara Menggunakan Google Font dengan CSS
  • play
    Belajar CSS : Cara Mengubah Ukuran Font HTML dengan CSS (font-size)
  • play
    Belajar CSS : Cara Mengatur Tinggi Baris dalam Paragraf HTML (line-height)
  • play
    Belajar CSS : Cara Memiringkan dan Menebalkan Huruf dengan CSS
  • play
    Belajar CSS : Cara Mengubah Tampilan Huruf Kapital (Case) Text HTML
  • play
    Belajar CSS : Cara Penulisan Singkat Property Font CSS
  • play
    Belajar CSS : Cara Membuat Teks Underline, Overline, dan Line-through
  • play
    Belajar CSS : Cara Mengubah Warna Teks (font) HTML dengan CSS (color)
  • play
    Belajar CSS : Cara Mengatur Lebar (spasi Antar Huruf dan Kata Text HTML
  • play
    Belajar CSS : Cara Mengatur Rata Text HTML dengan CSS (text-align)

CSS Box Model

CSS Box Model adalah salah satu konsep yang wajib dipelajari. Pada tutorial ini kita akan membahas CSS Box Model secara lebih dalam.

  • play
    Belajar CSS : Pengeritian CSS Box Model
  • play
    Belajar CSS : Cara Mengatur Lebar Element HTML (width)
  • play
    Belajar CSS : Cara Mengatur Tinggi Element HTML (height)
  • play
    Belajar CSS : Cara Membuat Garis Tepi pada HTML (border)
  • play
    Belajar CSS : Pengeritian Padding dan Fungsi Padding dalam CSS
  • play
    Belajar CSS : Pengertian Margin and Fungsi Margin dalam CSS
  • play
    Belajar CSS : Cara Menghitung Lebar dan Tinggi CSS Box Model
  • play
    Belajar CSS : Membuat Gallery Gambar dengan HTML dan CSS

Tutorial CSS Lanjutan

Pada Tutorial kali ini, kita akan membahas CSS Lanjutan untuk mempelajari bahan yang lebih advanced. Beberapa tutorial dari CSS dasar akan kita bahas kembali secara lebih dalam.

  • play
    Belajar CSS : Pengertian dan CAra Penulisan Kode Warna RGBA, HSL, dan HSLA
  • play
    Belajar CSS : Pengertian Atrribute Selector dalam CSS
  • play
    Belajar CSS : Pengertian Pseudo-class dan Pseudo-element CSS

Tutorial CSS3

CSS3 adalah fitur terbaru dari CSS. Banyak efek tampilan menarik yang ditambahkan kedalam versi CSS3, seperti transisi, animasi, efek bayangan, dan responsive web design. Dalam tutorial ini gurukomputer akan membahas property CSS3

  • play
    Belajar CSS3 : Pengeritian dan Cara Penulisan CSS Vendor Prefix
  • play
    Belajar CSS3 : Cara Membuat Bayangan Pada Teks Dengan CSS3
  • play
    Belajar CSS3 : Cara Membuat Efek Bayangan (Box Shadow)
  • play
    Belajar CSS3 : Cara Membuat sudut Melengkung (Rounded Corner) di CSS
  • play
    Belajar CSS3 : Cara Membuat Kolom Koran di HTML (multiple column)