Belajar CSS: Pengertian,Contoh dan Fungsi

Halo semuanya, pada artikel alafgani.web.id kita akan Belajar pengertian css dan contohnya mari kita simak penjelasannya.

Singkatnya CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dan gaya elemen-elemen dalam halaman web yang ditulis dengan HTML. CSS digunakan untuk memisahkan struktur atau konten halaman web dari tampilan atau gaya halaman tersebut. Dengan menggunakan CSS, Anda dapat mengubah warna, ukuran, jenis font, tata letak, dan banyak aspek visual lainnya dari elemen-elemen HTML.

Pengertian CSS

pengertain css dan contohnya
Logo CSS (source: vectorlogozone.com)

CSS, atau Cascading Style Sheets, adalah singkatan dari Cascading Style Sheet, dan digunakan untuk melengkapi file HTML. Tujuan utama CSS adalah untuk menetapkan aturan tampilan atau gaya yang akan digunakan pada sebuah website. Dengan menggunakan CSS, Anda dapat mengontrol tampilan elemen-elemen HTML, seperti warna, ukuran, jenis font, tata letak, dan banyak aspek visual lainnya.

Nama “Cascading” dalam CSS mengacu pada kemampuan CSS untuk menggabungkan aturan-aturan gaya dari berbagai sumber dan menerapkannya pada elemen-elemen HTML secara berurutan. Dalam CSS, aturan-aturan gaya dapat ditetapkan dalam urutan tertentu, dan aturan yang sama akan saling berdampingan (cascade), sehingga membentuk hubungan parent-child pada setiap style. Hal ini memungkinkan pengembang web untuk secara fleksibel mengontrol tampilan halaman web dengan menetapkan aturan-aturan gaya yang sesuai dengan hierarki elemen HTML.

CSS telah diperkenalkan untuk pengembangan website pada tahun 1996, dan sejak itu menjadi standar dalam tampilan dan gaya halaman web. Setelah CSS distandarisasi, browser-browser seperti Internet Explorer dan Netscape meluncurkan versi terbaru yang mendukung atau mendekati standar CSS.

CSS dapat menjadi dokumen yang berdiri sendiri dan disisipkan dalam kode HTML menggunakan elemen <style>, atau dapat juga digunakan sebagai referensi oleh HTML untuk mendefinisikan gaya. Selain itu, CSS juga memungkinkan pembuatan style baru dengan menggunakan kelas (class), di mana aturan-aturan gaya didefinisikan dengan pemilih (selector) yang sesuai dengan kelas tersebut.

Dengan menggunakan CSS, pengembang web dapat mencapai tampilan yang konsisten, fleksibel, dan terpisah dari struktur HTML, sehingga memudahkan pemeliharaan dan pengembangan website yang lebih kompleks.

Baca Juga : Pengertian HTML Lengkap dengan Fungsi, Struktur, dan Contoh Penerapannya

Fungsi CSS

pengertian css dan contohnya
Fungsi CSS (source: unsplash.com)

Mengontrol tampilan

Fungsi utama CSS adalah mengontrol tampilan elemen-elemen HTML. Dengan menggunakan CSS, Anda dapat mengubah warna, ukuran, jenis font, tata letak, dan banyak aspek visual lainnya dari elemen-elemen HTML. Hal ini memungkinkan Anda untuk menciptakan tampilan yang menarik, konsisten, dan sesuai dengan kebutuhan desain website Anda.

Pemisahan antara struktur dan tampilan

CSS memungkinkan Anda untuk memisahkan struktur atau konten halaman web dari tampilan atau gaya halaman tersebut. Dengan menggunakan CSS, Anda dapat menulis aturan gaya terpisah dalam file terpisah, yang kemudian dapat diterapkan pada banyak halaman HTML. Ini membuat pemeliharaan dan pengembangan website menjadi lebih efisien, karena perubahan gaya dapat dilakukan dengan mudah tanpa harus mengubah struktur HTML.

Reusabilitas

CSS memungkinkan Anda untuk mendefinisikan gaya sekali dan menggunakannya di berbagai elemen pada halaman web. Dengan menggunakan kelas (class) atau ID, Anda dapat mengaplikasikan aturan gaya yang sama ke banyak elemen yang berbeda. Hal ini memungkinkan Anda untuk mencapai konsistensi dalam tampilan, mengurangi duplikasi kode, dan membuat perubahan gaya menjadi lebih efisien.

Responsif dan fleksibel

CSS memungkinkan Anda untuk membuat tampilan website responsif dan fleksibel. Dengan menggunakan media queries, Anda dapat mengatur aturan gaya yang berbeda untuk perangkat dan ukuran layar yang berbeda. Hal ini memungkinkan website Anda menyesuaikan diri dengan berbagai perangkat seperti desktop, tablet, dan ponsel, memberikan pengalaman pengguna yang optimal.

Animasi dan transisi

CSS juga memungkinkan Anda untuk membuat animasi dan transisi yang menarik pada elemen-elemen HTML. Dengan menggunakan aturan gaya seperti transition dan keyframes, Anda dapat membuat perubahan tampilan elemen menjadi halus dan menarik. Hal ini memberikan interaksi yang lebih menarik dan dinamis pada website Anda.

Contoh CSS

Ilustrasi
Ilustrasi (source: unsplash.com)

Untuk melakukan uji coba pada perintah HTML dan CSS, buatlah file terlebih dahulu dengan nama file di texteditor dengan nama (index.html) dan (style.css)  dalam satu folder.

HTML

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1 class=”judul”>Ini adalah judul</h1>
<p class=”paragraf”>Ini adalah paragraf.</p>
</body>
</html>

CSS

.judul {
color: blue;
font-size: 24px;
}

.paragraf {
color: red;
font-weight: bold;
}

HASIL

pengertian css dan contohnya

Baca Juga : 6+ Contoh CSS Sederhana Untuk Pemula

Dalam contoh di atas, kita memiliki dua elemen dalam HTML, yaitu <h1> dengan atribut “class” bernilai “judul” dan <p> dengan atribut “class” bernilai “paragraf”.

Di file CSS (“style.css”), kita menggunakan pemilih (selector) “.judul” dan “.paragraf” untuk memilih elemen-elemen dengan kelas yang sesuai. Kemudian, kita mendefinisikan aturan gaya untuk masing-masing selector tersebut.

Dalam aturan gaya untuk “.judul”, kita mengubah warna teks menjadi biru (color: blue;) dan ukuran font menjadi 24 piksel (font-size: 24px;).

Sedangkan dalam aturan gaya untuk “.paragraf”, kita mengubah warna teks menjadi merah (color: red;) dan memberikan teks dengan gaya tebal (font-weight: bold;).

Dengan menghubungkan file CSS tersebut dengan file HTML menggunakan elemen <link> di dalam tag <head>, aturan-aturan gaya yang didefinisikan dalam file CSS akan diterapkan pada elemen-elemen HTML yang memiliki kelas yang sesuai.

Dalam contoh ini, judul akan ditampilkan dengan warna biru dan ukuran font 24 piksel, sedangkan paragraf akan ditampilkan dengan warna merah dan teks tebal.

Anda dapat mencoba mengganti nilai-nilai properti gaya dalam file CSS tersebut dan melihat perubahan tampilan yang terjadi pada elemen-elemen HTML. Ini adalah contoh sederhana yang dapat membantu Anda memahami dasar-dasar CSS.

Penutup

Demikian artikel kami tentang Belajar CSS: Pengertian CSS, Contoh dan Fungsi. Kami berharap Anda bisa belajar CSS dengan artikel yang kami buat dan terus semangat dalam belajar. Semoga bermanfaat.

Terimakasih sudah berkunjung!


YOUTUBE ALAFGANI

Apakah kamu ingin mempelajari dasar-dasar HTML, membangun halaman web yang menarik, atau mengembangkan keahlian dalam pengkodean web?

e-Book kami memberikan panduan langkah demi langkah yang mudah diikuti, dilengkapi dengan contoh kode dan penjelasan yang jelas.

Apa yang akan kamu dapatkan dari eBook ini:

  • Penjelasan mendalam tentang tag-tag HTML dan fungsinya.
  • Petunjuk praktis untuk membangun struktur dasar halaman web.
  • Cara mengatur tata letak dan gaya menggunakan CSS.
  • Teknik dasar untuk menambahkan gambar, tautan, dan multimedia ke dalam halaman web.
  • Tips dan trik untuk mengoptimalkan kode HTML Anda.

Jangan lewatkan kesempatan ini untuk meningkatkan pengetahuan dan keterampilan kamu dalam pengembangan Web. Unduh eBook “Panduan Pemula HTML: Menguasai Dasar-Dasar Pengembangan Web” secara gratis sekarang juga!

Download Disini

Leave a Comment