Dasar Penggunaan CSS

Dasar Penggunaan CSS

Pada artikel sebelumnya, kita telah mempelajari cara membuat web sederhana dengan HTML. Nah, pada artikel kali ini, kita akan mempelajari lebih dalam mengenai pembuatan dan konsep CSS. CSS merupakan bahasa yang sangat penting pada pembuatan aplikasi berbasis website.

Sebelumnya, kita telah mempelajari tentang HTML, mulai dari cara menggunakannya, manfaatnya, dan praktik pembuatan sebuah halaman website. Kali ini, kita akan melanjutkan pembelajaran dari artikel sebelumnya. Jika kamu belum membaca atau sudah lupa dengan artikel sebelumnya, silakan baca kembali ya.

Pengertian CSS

Kode CSS

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Sebelumnya, apakah kalian tahu, apa itu CSS? Itu adalah singkatan dari Cascading Style Sheets, artinya sebuah bahasa sederhana yang digunakan untuk menambahkan gaya/styling (misalnya, font, warna, spasi) ke sebuah halaman website. Jika diibaratkan, HTML merupakan sebuah kerangka, CSS ini bertindak sebagai kulit/penutup dari kerangka tersebut.
CSS sebagai kulit dari sebuah kerangka

Perlu diingat ya, CSS bukan sebuah bahasa pemrograman sehingga tidak bisa menjalankan logika-logika yang secara umum ada di bahasa pemrograman.

Cara Membuat CSS

Sebelum kita melihat hasil dari kode CSS, kita harus memiliki kode HTML terlebih dahulu. CSS ini tidak akan bekerja tanpa adanya file HTML. Ada tiga cara dalam menggunakan CSS pada file HTML.

  • Inline
    Metode ini digunakan dengan cara memasukkan file css ke dalam tag HTML secara langsung.
    Cara memasukkan CSS secara inline
  • Internal
    Metode ini menggunakan CSS dengan tag <style> pada file html. Dengan ini, kita bisa memisahkan antara tag html dengan kode css tetapi masih dalam satu file yang sama.
    Cara memasukkan CSS secara internal
  • External
    Metode ini digunakan dengan cara memisahkan file html dan juga file css. Untuk memasukkan file css ke dalam html bisa menggunakan kode html seperti berikut.
    Cara memasukkan CSS secara external

    Cara memasukkan CSS secara external
    Dengan metode ini, kita bisa memasukkan beberapa file css ke dalam satu file html saja.

Anatomi CSS

Dalam membuat kode CSS, ada beberapa format yang harus diikuti.

Anatomi CSS

  • Selector: Bagian penanda elemen yang akan diubah style-nya.
  • Declaration: Kumpulan dari pasangan properti dan nilainya.
  • Property: Karakteristik elemen yang akan diubah.
  • Value: Nilai dari karakteristik tersebut.

Konsep dalam CSS

  • The Cascade (Rule Order)
    Pada konsep ini, artinya aturan styling mengalir dari atas ke bawah. Jadi, jika terdapat selector dan properti yang sama, maka properti terakhir yang akan di-apply menjadi sebuah styling. Contohnya seperti ini.


    Bisa dilihat bahwa kode di atas memiliki dua selector dan atribute yang sama. Perhatikan bahwa value yang diterapkan pada halaman website adalah value yang terakhir.Hasil dari penerapan The Cascade
  • Specificity
    Pada konsep ini, selector yang paling spesifik akan lebih dulu menerapkan styling, dibandingkan dengan selector yang dideklarasikan terlebih dahulu.


    Berdasarkan kode di atas, selector body h1 akan diimplementasikan karena lebih spesifik dibandingkan dengan selector h1 saja.

    Hasil dari penerapan specificity

  • Inheritance
    CSS dapat mewarisi properti style tertentu pada elemen yang dikandungnya. Misalnya, style yang ditembakkan untuk elemen body akan diterapkan ke semua elemen HTML secara turun-temurun, seperti properti font-family, color, dan font-size.


    Artinya, CSS akan diterapkan pada anak dari sebuah elemen, meskipun elemen tersebut tidak memiliki value yang diatur oleh CSS.
    Hasil dari penerapan inheritance
  • Group Selector
    Dengan group selector, kita bisa menggabungkan aturan yang sama untuk beberapa selector yang berbeda. Kita dapat meminimalkan penulisan kode berulang dengan menggunakan tanda koma (,) sebagai pemisah antar selector.


    Bisa dilihat di bawah bahwa elemen h1 dan p memiliki font berwarna biru.
    Hasil dari penerapan group selector

Nah, jadi itulah beberapa konsep yang ada pada CSS. Dengan pemahaman konsep dasar ini, seharusnya kita sebagai developer menjadi semakin lebih mudah dalam menggunakan CSS untuk membuat sebuah website. Untuk belajar lebih lanjut mengenai CSS kamu dapat mempelajari salah satu kelas yang ada di dicoding, yaitu kelas Belajar Dasar Pemrograman Web. Semoga materi kali ini bermanfaat, ya, sampai bertemu lagi di artikel selanjutnya.


Belajar Pemrograman Gratis
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.
Dibuka: Pendaftaran Bangkit 2023

Program kesiapan karier eksklusif dari Google ini menawarkan pelatihan intensif di bidang teknologi, softskills, dan bahasa Inggris.

Gratis. Daftar sekarang!