Memahami CSS dari Dasar hingga Keterampilan Mahir

Apa itu CSS? 

Css adalah singkatan dari Cascading Style Sheet yang dipergunakan untuk menentukan tampilan dan format pada sebuah website. Artinya, dengan adanya CSS bisa mengatur mulai dari font, warna tulisan dan latar belakang pada website tersebut. 

Fungsi Cascading Style Sheet (CSS) 

Setelah mengerti pengertiannya, maka Anda juga harus paham dengan fungsinya. Ada beberapa fungsi yang harus Anda ketahui pada saat menggunakan Cascading Style Sheet (CSS), yaitu:

  1. Mempercepat Loading Pada Halaman Website
  2. Memudahkan Dalam Pengelolaan Kode
  3. Memberikan Banyak Penawaran Variasi Tampilan
  4. Membuat Website Enak untuk Dipandang
  5. Mendukung Responsifitas dan Penyesuaian Tampilan pada Berbagai Perangkat
  6. Memungkinkan Pengaturan Tata Letak (Layout) yang Fleksibel dan Mudah Diubah
  7. Memisahkan Struktur Konten dari Presentasi Visual, Meningkatkan Pemeliharaan Kode
  8. Menyediakan Kemudahan dalam Menerapkan Efek Animasi dan Transisi

Hubungan CSS dan HTML

HTML (hypertext mark up language) merupakan bahasa pemrograman yang paling sering digunakan dalam pembuatan website. HTML merupakan sesuatu yang berada di balik layar tampilan halaman web yang sehari-hari diakses oleh pengguna. Tanpa kehadiran HTML, tampilan web tentunya akan berantakan.
CSS dan HTML memiliki keterikatan satu sama lain. CSS merupakan kode-kode yang dipakai untuk mendesain laman HTML. Bila diibaratkan dengan bahasa awam, HTML dapat dikatakan sebagai handphone dan CSS adalah casing yang akan membuat handphone terlihat semakin cantik.
CSS berfungsi untuk membantu para web designer agar dapat mengubah dan menambahkan, baik teks, gambar, hingga latar belakang sebuah halaman HTML. Biasanya, keberadaan CSS dapat langsung terlihat dengan adanya perbedaan pada warna teks.

Jenis CSS

CSS dibagi menjadi beberapa macam tergantung fungsi penggunaannya, namun ada tiga macam jenis yang paling sering digunakan para programer yaitu

  1. Inline Style CSS merupakan kode yang dituliskan di dalam file HTML dan menggunakan elemen spesifik yang memuat tag <style>.
  2. Internal CSS merupakan kode yang dituliskan pada bagian header file HTML.
  3. External CSS merupakan kode CSS yang diletakkan di luar dokumen HTML sebagai file .css.

Cara Kerja CSS
CSS bekerja dengan HTML untuk mengubah tampilan halaman web. Prosesnya dimulai dengan browser membuat model objek dokumen (DOM) dari HTML. Kemudian, browser menampilkan konten dari DOM dan menggabungkannya dengan gaya yang ditentukan oleh CSS. CSS melakukan parsing pada dokumen HTML untuk menempatkan gaya di DOM, sehingga halaman web dapat ditampilkan dengan lengkap.

Berikut adalah penjelasan singkat tentang setiap bagian dari kode CSS yang diberikan:

  1. CSS Comments: Komentar CSS digunakan untuk memberikan penjelasan atau catatan di dalam kode CSS. Mereka dimulai dengan /* dan diakhiri dengan /. Contoh: / Ini adalah komentar CSS */.
  2. CSS Color: CSS menyediakan berbagai cara untuk menentukan warna, baik menggunakan nama warna seperti “red” atau menggunakan nilai RGB, HEX, atau HSL. Contoh: color: #fff; (putih).
  3. CSS Background: Properti background digunakan untuk mengatur latar belakang elemen. Ini dapat berupa warna, gambar, atau efek lainnya. Contoh: background-color: #333; (latar belakang berwarna abu-abu gelap).
  4. Border: Properti border digunakan untuk menambahkan garis tepi pada elemen. Ini dapat memiliki ketebalan, warna, dan gaya yang berbeda. Contoh: border: 1px solid #ccc; (garis tepi 1 piksel tebal, solid, warna abu-abu muda).
  5. Margin: Properti margin digunakan untuk menentukan ruang antara elemen dan elemen lain di sekitarnya. Contoh: margin-bottom: 20px; (ruang bawah 20 piksel).
  6. Padding: Properti padding digunakan untuk menentukan ruang di sekitar isi elemen di dalam batasnya. Contoh: padding: 20px; (ruang dalam 20 piksel).
  7. Height and Width: Properti height dan width digunakan untuk menentukan tinggi dan lebar elemen. Contoh: width: 200px; height: auto; (lebar 200 piksel, tinggi otomatis sesuai proporsi).
  8. Box Model: Model kotak adalah konsep dasar CSS yang merangkum bagaimana setiap elemen HTML diperlakukan sebagai kotak dengan properti yang mencakup padding, border, margin, dan konten.
  9. Outline: Properti outline digunakan untuk menambahkan garis luar pada elemen, terpisah dari border. Ini sering digunakan untuk menyorot elemen.
  10. Form: CSS dapat digunakan untuk mempercantik tampilan formulir HTML, termasuk mengatur tata letak, warna, dan gaya elemen formulir seperti input, textarea, dan tombol.
  11. Dropdown: CSS dapat digunakan untuk membuat dropdown menu dengan gaya tertentu, termasuk mengatur tata letak dan warna.
  12. Image: CSS dapat digunakan untuk mengatur tampilan gambar, seperti ukuran, margin, dan border.
  13. Float: Float adalah properti CSS yang digunakan untuk mengatur posisi elemen di sekitar elemen lainnya dalam layout halaman web.
  14. Navigation Bar: CSS dapat digunakan untuk mendesain navigasi bar, termasuk mengatur tata letak, warna, dan efek saat digulir atau dihover.
  15. Table: CSS dapat digunakan untuk mengatur tampilan tabel HTML, termasuk mengatur batas, warna, dan tata letak.
  16. List: CSS dapat digunakan untuk mengatur tampilan daftar HTML, termasuk mengatur jenis marker, tata letak, dan warna.
  17. Inline-block: Inline-block adalah tipe tata letak CSS yang memungkinkan elemen untuk ditempatkan secara inline satu sama lain, tetapi masih mempertahankan kemampuan untuk menentukan lebar, tinggi, margin, dan padding.

kemudian seperti inilah kodingan sederhana css yang ditujukan agar kalian dapat memahami css secara singkat dan mudah belajar dengan efektif

Untuk Tampilan html nya

Source code htmlnya

Kesimpulan

CSS adalah singkatan dari Cascading Style Sheet yang digunakan untuk menentukan tampilan dan format pada sebuah website. Fungsinya meliputi mempercepat loading halaman website, memudahkan pengelolaan kode, memberikan variasi tampilan, membuat website menarik, mendukung responsifitas pada berbagai perangkat, memungkinkan pengaturan layout yang fleksibel, memisahkan struktur konten dan presentasi visual, serta menyediakan kemudahan dalam menerapkan animasi dan transisi.

CSS bekerja dengan HTML untuk mengubah tampilan halaman web dengan proses yang dimulai dari pembuatan model objek dokumen (DOM) dari HTML oleh browser. Kemudian, konten dari DOM ditampilkan dan digabungkan dengan gaya yang ditentukan oleh CSS. CSS melakukan parsing pada dokumen HTML untuk menempatkan gaya di DOM sehingga halaman web dapat ditampilkan dengan lengkap.

Subscribe

Related articles

Memahami Microservices dengan Laravel

Microservices adalah pendekatan dalam pengembangan perangkat lunak di mana...

Tailwind CSS: Panduan Lengkap dan Keunggulannya

Tailwind CSS adalah salah satu framework CSS yang semakin...

Bagaimana sih cara menjadi Web Developer?

Memulai Karier sebagai Web Developer Meskipun sudah mengetahui berbagai keterampilan...

Laravel 11 : Send Mail by Gmail SMTP

Mengirim Email Menggunakan Gmail SMTP di Laravel 11 Mengirim email...

Cara mendapatkan Kredensial token email

Mendapatkan Credential Token Email di Laravel Dalam aplikasi web modern,...

LEAVE A REPLY

Please enter your comment!
Please enter your name here