Rama.

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.