Pengantar CSS: Dasar-dasar dan Penerapannya dalam Web Development

Apa Itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan tata letak elemen dalam sebuah halaman web. Dengan CSS, pengembang dapat mengubah warna, font, margin, padding, dan berbagai aspek visual lainnya agar website terlihat lebih menarik dan responsif sesuai www.atnetstudio.com .

Sejarah Singkat CSS

CSS pertama kali diperkenalkan oleh W3C (World Wide Web Consortium) pada tahun 1996. Seiring waktu, CSS terus berkembang dengan berbagai versi, yaitu:

  • CSS1 (1996): Versi pertama yang mendukung dasar format teks dan elemen HTML.
  • CSS2 (1998): Menambahkan fitur seperti posisi, z-index, dan media types.
  • CSS3 (2011 – sekarang): Menghadirkan fitur canggih seperti animasi, transformasi, flexbox, dan grid.

Cara Kerja CSS

CSS bekerja dengan menyeleksi elemen HTML dan menerapkan gaya tertentu pada elemen tersebut. Ada tiga cara utama dalam menambahkan CSS ke dalam sebuah halaman web:

  1. Inline CSS – Ditulis langsung dalam atribut elemen HTML.<p style="color: red; font-size: 16px;">Teks ini berwarna merah.</p>
  2. Internal CSS – Ditulis dalam tag <style> di dalam dokumen HTML.<style> p { color: blue; font-size: 18px; } </style>
  3. External CSS – Ditulis dalam file terpisah dengan ekstensi .css dan dihubungkan ke dokumen HTML dengan tag <link>.<link rel="stylesheet" href="styles.css">p { color: green; font-size: 20px; }

Selektor dalam CSS

CSS memiliki berbagai macam selektor untuk memilih elemen HTML tertentu:

  • Selektor Elemen: Menerapkan gaya berdasarkan nama elemen.p { color: black; }
  • Selektor ID: Menggunakan simbol # untuk menargetkan elemen dengan atribut id tertentu.#judul { font-size: 24px; }
  • Selektor Kelas: Menggunakan simbol . untuk menargetkan elemen dengan atribut class tertentu..highlight { background-color: yellow; }
  • Selektor Gabungan: Mengkombinasikan beberapa selektor untuk lebih spesifik.div p { color: red; }

Properti CSS Populer

Beberapa properti CSS yang sering digunakan meliputi:

  • Warna dan Latar Belakang: color, background-color, opacity
  • Teks dan Font: font-size, font-family, text-align
  • Margin dan Padding: margin, padding, box-sizing
  • Layout: display, position, flexbox, grid

CSS Responsif

CSS memungkinkan desain yang responsif menggunakan media queries untuk menyesuaikan tampilan di berbagai perangkat.

@media (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

Kesimpulan

CSS adalah teknologi penting dalam pengembangan web yang memungkinkan desain yang fleksibel dan menarik. Dengan menguasai CSS, seorang pengembang web dapat menciptakan tampilan website yang tidak hanya estetis tetapi juga responsif dan mudah digunakan oleh pengguna di berbagai perangkat.

Scroll to Top