Panduan Memahami CSS: Syntax dan Konsep Dasar

Tutorial Belajar CSS Part 1 - Pengantar ke CSS: Memahami Syntax dan Konsep Dasar

10/16/2023
Yan Afriyoko
73

Tutorial Belajar CSS Part 1: Pengantar ke CSS - Memahami Syntax dan Konsep Dasar

Cascading Style Sheets (CSS) merupakan bahasa pemrograman yang digunakan untuk mengatur tampilan dan gaya elemen HTML di halaman web. Dalam tutorial ini, kita akan memulai dari dasar-dasar CSS, memahami sintaksis dasar, dan konsep penting yang menjadi dasar bagi styling web.

Pengenalan CSS

CSS mengontrol tampilan visual dari elemen-elemen HTML. Ini termasuk warna, tata letak, ukuran, jenis huruf, dan banyak aspek lain yang menentukan bagaimana halaman web Anda akan terlihat.

Penulisan CSS

Inline CSS

<p style="color: blue; font-size: 16px;">Contoh teks dengan warna biru dan ukuran font 16px</p>

Internal CSS

<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

External CSS

File style.css

p {
    color: blue;
    font-size: 16px;
}

Pada HTML:

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

Konsep Dasar CSS

Selector
- Memilih elemen yang akan diubah gayanya. Contohnya, p untuk semua paragraf, .class untuk semua elemen dengan kelas tertentu, dan #id untuk elemen dengan ID tertentu.
Properti
- Menentukan bagian dari elemen yang ingin diubah, seperti color, font-size, margin, dan sebagainya.
Nilai
- Nilai yang diberikan untuk properti tertentu, misalnya, red untuk warna, 20px untuk ukuran font, dan 10% untuk margin.
Kombinasi Selector
- Lebih dari satu selector dapat digabungkan untuk membatasi gaya tertentu pada elemen khusus.

Keuntungan Penggunaan CSS

Pemisahan Tata Letak dan Konten: Memisahkan struktur HTML dari tampilan.
Konsistensi: Memungkinkan konsistensi dalam tampilan di seluruh situs web.
Fleksibilitas: Kemudahan dalam memodifikasi tampilan dengan mengubah hanya file CSS.

Kesimpulan

Pemahaman dasar tentang CSS sangat penting untuk membangun dan mendesain halaman web. Dengan mengetahui sintaks dasar dan konsep utama, Anda dapat mulai mengatur dan memperindah tampilan halaman web dengan lebih mudah dan terorganisir. Di tutorial berikutnya, kita akan menjelajahi lebih lanjut tentang selektor, properti, dan nilai dalam CSS.