Skip to content Skip to sidebar Skip to footer
Home / CSS

Belajar Dasar CSS (Cascading Style Sheets)

by Ilham Maulana Post a Comment

 

Belajar CSS Dasar

Pendahuluan

Cascading Style Sheets (CSS) adalah bahasa pemrograman yang digunakan untuk menggambarkan tampilan dan format dari dokumen yang ditulis dalam bahasa markup seperti HTML. CSS adalah salah satu teknologi dasar dari World Wide Web, bersama dengan HTML dan JavaScript. Dalam artikel ini, kita akan membahas konsep dasar CSS, cara menggunakannya, dan beberapa teknik penting yang perlu diketahui oleh pemula.

 Apa Itu CSS?

CSS memungkinkan pengembang web untuk memisahkan konten dari tampilan. Dengan menggunakan CSS, Anda dapat mengubah warna teks, gaya huruf, spasi antar paragraf, ukuran dan tata letak kolom, gambar atau warna latar belakang, dan banyak lagi. Ini membuat proses desain web lebih efisien dan seragam.

Sejarah CSS

CSS pertama kali diperkenalkan oleh Håkon Wium Lie pada tahun 1994. Versi pertama CSS (CSS1) diselesaikan pada tahun 1996, diikuti oleh CSS2 pada tahun 1998. CSS3, yang merupakan kumpulan modul CSS, diperkenalkan secara bertahap mulai dari awal 2000-an.

Menulis CSS

CSS dapat ditulis dalam tiga cara utama: inline, internal, dan eksternal. Masing-masing memiliki kegunaan dan kelebihan tersendiri.

CSS Inline

CSS inline diterapkan langsung pada elemen HTML menggunakan atribut `style`. Ini adalah cara tercepat tetapi paling tidak fleksibel karena setiap perubahan harus dilakukan pada setiap elemen secara individu.

CSS Internal

CSS internal ditulis dalam tag `<style>` di dalam bagian `<head>` dari dokumen HTML. Ini berguna untuk halaman tunggal di mana gaya khusus diperlukan.

CSS Eksternal

CSS eksternal ditulis dalam file terpisah dengan ekstensi `.css`. File ini kemudian dihubungkan ke dokumen HTML menggunakan tag `<link>` di dalam bagian `<head>`. Pendekatan ini adalah yang paling efisien untuk situs web besar karena memungkinkan gaya diterapkan secara konsisten di banyak halaman.

File `styles.css`:

 

Selektor CSS

Selektor CSS digunakan untuk memilih elemen HTML yang ingin kita gaya. Ada berbagai jenis selektor yang dapat digunakan, termasuk selektor elemen, kelas, dan ID.

Selektor Elemen

Selektor elemen memilih semua elemen dari tipe tertentu. Misalnya, selektor `p` akan memilih semua elemen `<p>`.

Selektor Kelas

Selektor kelas memilih elemen yang memiliki atribut `class` tertentu. Kelas ditandai dengan titik (`.`).

Penggunaan di HTML:

Selektor ID

Selektor ID memilih elemen dengan atribut `id` tertentu. ID ditandai dengan tanda pagar (`#`).

Penggunaan di HTML:

Properti dan Nilai CSS

CSS terdiri dari properti dan nilai yang menentukan gaya elemen HTML. Misalnya, properti `color` digunakan untuk mengatur warna teks, sementara properti `font-size` digunakan untuk mengatur ukuran teks.

Properti Warna

CSS menyediakan beberapa cara untuk menentukan warna: nama warna, nilai heksadesimal, nilai RGB, dan nilai HSL.

Properti Font

Properti font digunakan untuk mengatur gaya teks, termasuk jenis huruf, ukuran huruf, tebal huruf, dan tinggi baris.

Properti Latar Belakang

Properti latar belakang digunakan untuk mengatur latar belakang elemen, termasuk warna, gambar, posisi, dan pengulangan.

Box Model CSS

Model kotak CSS adalah konsep fundamental dalam CSS yang menggambarkan bagaimana elemen HTML ditempatkan di halaman. Model kotak terdiri dari margin, border, padding, dan konten.

Konten

Konten adalah area di mana teks dan gambar ditampilkan.

Padding

Padding adalah ruang di dalam border elemen, antara border dan konten.

Border

 Border adalah garis yang mengelilingi padding dan konten.

Margin

Margin adalah ruang di luar border elemen, antara border dan elemen tetangga.

Layout CSS

Mengatur tata letak halaman web adalah salah satu tugas utama dari CSS. Ada beberapa teknik yang dapat digunakan untuk membuat tata letak yang responsif dan fleksibel.

Float

Properti `float` digunakan untuk mengatur elemen agar mengambang di sebelah kiri atau kanan wadahnya.

Penggunaan di HTML:

Flexbox

Flexbox adalah model tata letak satu dimensi yang memungkinkan elemen untuk disusun dalam satu arah (baris atau kolom) dan mendistribusikan ruang di antara elemen secara fleksibel.

Penggunaan di HTML:

Grid

CSS Grid adalah model tata letak dua dimensi yang memungkinkan pengaturan elemen dalam baris dan kolom.

Penggunaan di HTML:

Responsivitas

Responsivitas adalah kemampuan situs web untuk menyesuaikan tampilannya berdasarkan ukuran layar dan perangkat pengguna. CSS menyediakan beberapa teknik untuk membuat situs web responsif.

Media Queries

Media queries digunakan untuk menerapkan gaya berbeda berdasarkan karakteristik perangkat seperti lebar layar, tinggi layar, dan orientasi.

Unit Relatif

Menggunakan unit relatif seperti persen (`%`), em, dan rem membuat elemen dapat menyesuaikan ukuran mereka berdasarkan konteksnya.

Kesimpulan

CSS adalah alat yang sangat kuat untuk mengatur tampilan dan tata letak halaman web. Dengan memahami dasar-dasar CSS, seperti selektor, properti, model kotak, dan teknik tata letak, Anda dapat mulai membuat desain web yang menarik dan responsif. Seiring dengan perkembangan teknologi web, CSS juga terus berkembang dengan fitur-fitur baru yang memudahkan pengembang dalam menciptakan pengalaman pengguna yang lebih baik. Teruslah berlatih dan eksplorasi berbagai teknik CSS untuk meningkatkan keterampilan Anda dalam desain web.

Post a Comment for "Belajar Dasar CSS (Cascading Style Sheets)"