Dasar Penggunaan CSS - Dicoding Blog

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

💻 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.
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.
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.

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.

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.

The Cascade
CSS

1
2
3
4
5
6
7

h1 {
color: green;
}

h1 {
color: red;
}

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.
Specificity
Pada konsep ini, selector yang paling spesifik akan lebih dulu menerapkan styling, dibandingkan dengan selector yang dideklarasikan terlebih dahulu.

Specificity

1
2
3
4
5
6
7
8
9
10
11

body h1 {

color: green;

}

h1 {

color: red;

}

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

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.

<!DOCTYPE html>

<html>

<head>

<title>Website Pertama</title>

<style>

body {

font-family: Arial;

}

</style>

</head>

<body>

<h1>Halo Indonesia 👋</h1>

</body>

</html>

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.

<!DOCTYPE html>

<html>

<head>

<title>Website Pertama</title>

<style>

h1, p {

color: blue;

}

</style>

</head>

<body>

<h1>Halo Indonesia 👋</h1>

<p>Belajar CSS</p>

</body>

</html>

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.