Belajar CSS Lengkap

CSS adalah singkatan dari Cascading Style Sheets, yaitu bahasa pemrograman web untuk membuat style atau tampilan web.

Kalau HTML adalah untuk membuat layout atau tata letak web, sedangkan CSS untuk membuat dekorasi tampilan web menjadi menarik.

Kalau dulu CSS hanya digunakan untuk pemrograman web saja, tapi saat ini CSS sudah dikembangkan untuk membuat style yang lain. Seperti: mobile app, dll.

Bahkan CSS juga bisa dikombinasikan dengan bahasa pemrograman lain, seperit react atau javascript.

Fungsi CSS

Seperti yang telah saya jelaskan, kegunaan CSS adalah untuk membuat tampilan web menjadi menarik.

Apa saja yang bisa dilakukan CSS?

  • Mengatur ukuran layout, misal berapa ukuran panjang, lebar, margin, dll.
  • Mengatur jenis huruf atau typografi
  • Membuat layout menjadi responsive (tampilan disesuaikan dengan device. Misal: tampilan web di smartphone beda dengan di laptop, dll

Masih banyak lagi yang bisa dilakukan CSS. Lebih jelasnya akan saya jelaskan di tutorial lain.

Mudahnya, HTML itu seperti tulang manusia. Sedangkan CSS kulit yang membungkusnya.

Jika tidak ada tulang, manusia tidak bisa berdiri tegak. Tapi, kalau tidak ada kulit manusia akan menyeramkan.

Kelebihan CSS adalah:

  • Fleksibel, karena ada banyak cara penggunaan jadi sangat kondisional (tidak kaku)
  • Konsisten, dengan menggunakan satu style yang sama. Kita hanya perlu mengedit satu sumber kode, dan semuanya sudah berubah
  • Hemat waktu, karena satu kode bisa digunakan berulang kali. Jadi sangat menghemat waktu.
  • Mudah, ya CSS adalah bahasa yang mudah dipahami.
  • Maintenance mudah, dengan fitur inspect element di setiap browser. Kita bisa mencari bug atau mengganti tampilan secara real time.

Cara Menggunakan CSS

Kalau HTML ditulis dengan awalan kode <html>...</html> sedangkan CSS berbeda.

Misal, kita ingin mengganti warna background halaman web, kita bisa mengganti style dari tag elemen <body>.

<style type="text/css">
	body{
		background: red
	}
</style>

Ada tiga cara memang untuk memanggil atau menggunakan kode CSS. Yaitu:

  • Inline CSS (satu baris dengan HTML)
  • Internal CSS (ditulis di tag <head>)
  • Eksternal CSS (ditulis di file terpisah)

Lebih jelasnya akan saya jelaskan di artikel yang lain.

Ada tiga cara menulis CSS yaitu inline CSS, internal CSS dan eksternal CSS. Ketiganya harus kamu pahami dan kuasai.
Artikel ini membahas sangat lengkap tentang syntax dan selector di CSS dan CSS3 dengan bahasa yang mudah dimengerti.
Atur background web dengan menggunakan CSS. Bisa diganti gambar, foto atau warna.
Membahas lengkap tentang style font seperti mengganti warna, ukuran, jenis font dan ketebalannya.
Artikel ini membahas lengkap mengenai text formatting menggunakan CSS beserta contoh valuenya.
Membahas cara mengatur style tampilan hyperlink html dengan css lengkap.
Mengatur tampilan list style dengan CSS dan menggantinya menggunakan gambar.
Supaya tampilan gambar keren, kamu bisa mengatur style dengan CSS. Seperti memberi border dan bayangan.
Tabel adalah element penting di html untuk menampilkan data, dengan CSS kita bisa memberi style keren supaya tampilan tidak membosankan.
Icon diperlukan supaya website menjadi lebih interaktif, dan pesan yang ingin disampaikan ke user lebih ngena.
Untuk membuat website dinamis diperlukan desain form yang keren, supaya user nyaman dalam menggunakan webnya.
CSS Box model adalah total ukuran box element html setelah ada: margin, padding dan border.
Outline itu ada diluar border dan tidak termasuk hitungan dalam css box-model.
Margin adalah jarak luar element, sedangkan padding adalah jarak dalam element dengan isi kontennya.
Membahas lengkap tentang styling border dengan menggunakan css.
Satuan web sangat penting untuk dipahami. Karena, jika kamu salah menggunakan satuan maka desain web akan berantakan.
Membahas cara mengatur position suatu elemen menggunakan CSS
Max-width digunakan untuk mengatur panjang maksimal dari suatu elemen.
Tampilan cursor dari mouse / touchpad bisa kamu edit sesuai dengan seleramu sendiri.
Overflow digunakan untuk mengatur apa yang terjadi jika konten melebihi ukuran box.
Display digunakan untuk mengatur bagaimana element ditampilkan
Visible digunakan untuk mendefinisikan element itu nampak atau tidak.
Selektor kombinator digunakan untuk membuat selektor element yang lebih kompleks.
Selektor CSS pseudo-class memungkinkan kamu memilih element dengan kondisi tertentu.
Pseudo-element digunakan untuk memilih bagian spesifik dari suatu element html.
Opacity penting digunakan untuk mengatur transparasi sebuah element.
Dropdown menu digunakan jika menu navigasinya banyak.
Untuk menambah hitungan suatu element dengan css.
Membahas cara membuat border rounded / radius / melengkung dengan menggunakan css3.
Jenis border bisa diganti dengan gambar, supaya tampilan lebih menarik.
Dengan CSS3 ada cara baru untuk menampilkan warna.
CSS3 gradient memungkin kamu untuk membuat warna gradasi tanpa gambar
3D transform memungkinkan kamu membuat element menjadi perspektif 3 dimensi.
Dengan webfont maka kita lebih leluasa mengambil font dari pihak luar.
Tooltips biasanya digunakan untuk menyisipkan informasi tambahan.
Property object fit ini digunakan untuk mengatur ukuran gambar atau video supaya proporsional.
Web responsive artinya web tersebut bisa diakses dari hp, tablet, laptop tapi tampilannya tidak rusak.