Setelah belajar HTML, bahasa berikutnya yang harus kita pelajari agar menjadi web developer adalah CSS. Pemahaman tentang CSS sangat penting, jika kamu ingin fokus pada front-end web development. Kalau back-end, yaa sekedar tahu aja sudah cukup. Tugas front-end developer biasanya akan membuat halaman web berdasarkan desain dari desainer. Tanpa menggunakan CSS, kita tidak mungkin akan bisa membuat web berdasarkan desain yang ditentukan desainer. Karena itu, belajar CSS sangatlah penting. Pada tutorial ini, kita akan belajar CSS dari dasar, mempelajari sejarahnya, hingga nanti bisa membuat CSS sendiri.

Apa itu CSS

CSS (Cascade Style Sheet) adalah sebuah bahasa untuk mengatur tampilan web sehingga terlihat lebih menarik dan indah. Dengan CSS, kita dapat mengatur layout (tata letak), warna, font, garis, background, animasi, dan lain-lain. Tanpa CSS, website apapun itu akan terlihat jelek dan tidak tertata. Sedangkan jika menggunakan CSS, tampilannya jadi lebih bagus dan rapi.

Sejarah dan Perkembangan CSS

Sebelum adanya CSS, tidak ada bahasa yang dipakai untuk memberikan style pada dokumen (web). Tampilan web terasa hambar dan kurang tertata. Ide awal tentang style sheet di browser bukan sesuatu yang baru. Pada tahun 1990, Tim Berners-Lee membuat web browser bernama NeXT browser/editor. Pada browser ini, kita bisa membuat style sheet. Akan tetapi, sintaks style sheet-nya tidak ia publikasikan. Lalu pada akhirnya, di tanggal, 10 Oktober 1994. Håkon Wium Lie membuat draft proposal bahasa CSS dan mengirimnya ke mailist www-talk dan www-html. Wium Lie mempresentasikan draft proposal bahasa CSS (Cascading HTML Style Sheets) di acara Web Conference di Chicago. Orang pertama yang merespon proposal ini adalah Bert Bos. Ia saat itu sedang mengembangkan browser bernama Argo. Kemudian ia memutuskan untuk bergabung dengan Wium Lie untuk mengembangkan CSS.

Pada April 1995, Draft bahasa CSS dipresentasikan lagi pada acara WWW Conference. Pada acara ini Wium Lie bertemu langsung dengan Bert Bos. Bert Bos membawakan presentasi tentang dukungan CSS pada Argo dan Wium Lie menampilkan demo Arena Browser yang sudah ia modifikasi agar mendukung penggunaan CSS. Lalu pada Mei 1995, Implementasi bahasa CSS mulai dikerjakan. Pada bulan ini mail list (group) baru bernama www-style dibuat. Mai list menjadi tempat diskusi pengembangan CSS. Pada 17 Desember 1996, CSS versi pertama atau CSS 1 akhirnya dirilis. Pada Mei 1998, CSS versi kedua atau CSS 2 dirilis. Pada versi ini ditambahkan dukungan media output.

Perkembangan Versi CSS

Sejak awal dirilis, CSS memiliki beberapa versi:

  • CSS 1 (1996): adalah versi pertama (17 Desember 1996)
  • CSS 2 (1998): adalah versi kedua (Mei 1998)
  • CSS 2.1 (2011): dirilis pada 7 juni 2011
  • CSS 3 (2012): versi yang banyak digunakan saat ini.

Sintaks dasar di tiap versi sama. Hanya saja ada beberapa perbedaan properti. Ada yang ditambahkan, ada yang dikurangi atau dihapus.

Contoh: Pada CSS 2, kita tidak bisa menggunakan properti animation karena properti ini belum ada di versi 2. Adanya di CSS 3.

Tips Belajar CSS

Ada beberapa tips yang ingin penulis bagikan untuk membantu kalian belajar CSS:

Tips 1: Cara Menghafal Kode CSS

Ada ratusan properti CSS yang harus diingat. Apakah kita mampu menghafal semuanya? Tergantung kebutuhan, Jika kamu sering mengetik kode CSS tanpa copas, bisa jadi ingatanmu terhadap kode atau properti CSS akan semakin kuat. Penulis sendiri tidak bisa menghafal semua properti CSS, tetapi penulis ingat properti yang sering dipakai. Kalau tidak ingat ya, tinggal googling aja atau manfaatkan Inspect Element.

Tips 2: Gunakan Inspect Element

Inspect elemen ada di setiap browser. Bisa dibuka dengan Klik kanan, lalu pilih Inspect Element. Di inspect element, kita bisa menulis kode CSS secara langsung dan hasilnya pun bisa kita lihat secara langsung. Inspect elemen bisa kamu gunakan sebagai tempat eksperimen. Jadi, daripada ngoding CSS-nya di teks editor. Menulis kodenya aja dulu menggunakan editor inspect element. Nanti kalau udah jadi, baru deh disalin ke teks editor.

Tips 3: Gunakan VS Code

Selain menulis code CSS di Inspect element, saya merekomendasikan menggunakan teks editor VS Code. Mengapa? Karena teks editor mendukung kode CSS dengan sangat baik. Misalnya, saat kita memilih warna. VS Code memberikan beberapa saran serta tampilan visual warnanya.

Tips 4: Gunakan Cheat Sheet

Cheat Sheet adalah halaman yang berisi contekan kode CSS. Kamu bisa mencari cheat sheet CSS di Google dengan kata kunci “CSS Cheat Sheet”. Ada banyak CSS Cheat Sheet di sana.

Nah itulah beberapa tips belajar CSS yang bisa kamu coba. Apa Selanjutnya? Oke, kita sudah mengenal apa itu CSS dan sejarahnya. Serta tau tips-tips belajar CSS yang benar.

Cara menulis CSS di dalam HTML

Pada tutorial sebelumnya, kita sudah berkenalan dengan CSS. Berikutnya, kita akan belajar gimana cara menulis CSS di HTML.

Ada tiga cara menulis CSS di HTML:

  • Internal CSS –> ditulis di dalam tag style;
  • External CSS –> ditulis di file CSS terpisah dengan HTML;
  • Inline CSS –> ditulis di atribut elemen HTML.

Internal CSS

Internal CSS adalah kode CSS yang ditulis di dalam tag style pada HTML. Internal CSS juga dikenal dengan sebutan Embedded CSS. Tag style bisa ditulis di dalam tag head, bisa juga ditulis di dalam tag body. Namun kebanyakan orang menulisnya di dalam head.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
  <title>Contoh Internal CSS</title>
  <!-- penulisan internal css dalam tag head -->
  <style type="text/css">
    p{
      font-family: serif;
      line-height: 1.75em;
      font-size: 18px;
    }
    i { 
      font-family: sans;
      color: orange;
    }
  </style>
</head>

<body>
  <!-- penulisan internal css dalam tag body -->
  <style type="text/css">
    h2 { 
      font-family: sans;
      color: #333;
    }
  </style>
  <h2>Ini judul artikel</h2>
  <p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

Penulisan css di dalam tag head akan lebih dahulu dibaca dibandingkan di body. Karena lebih dahulu dibaca, style yang akan dipakai adalah yang terakhir. Misalnya kita punya style seperti ini di dalam tag head:

1
p { color: red }

Lalu di body kita buat lagi seperti ini:

1
p { color: blue }

Maka yang akan dipakai adalah yang terakhir, yakni yang color: blue. Karena itu, biar konsisten dan tidak bentrok. sebaiknya tulis CSS hanya dalam satu tempat saja. Misal di tag head saja.

Eksternal CSS

Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS ditulis di dalam file khusus yang berekstensi .css. Contoh, Kita akan membuat sebuah file bernama style-ku.css yang di dalamnya berisi kode CSS.

Berikut ini isinya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}

Untuk menggunakan CSS ini, kita harus menghubungkannya dengan HTML. Ada dua cara yang bisa kita lakukan:

  • Menggunakan tag link
  • Menggunakan @import

Contoh:

Cara 1: menggunakan tag link

1
<link rel="stylesheet" type="text/css" href="style-ku.css">

Cara 2: menggunakan @import

1
2
3
<style type="text/css">
@import "style-ku.css";
</style>

Jika kita menggunakan Cara 1, maka kode lengkap HTMLnya akan menjadi seperti ini:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <title>Contoh Eksternal CSS</title>
    <link rel="stylesheet" type="text/css" href="style-ku.css">
</head>

<body>
    <h2>Ini judul artikel</h2>
    <p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

CSS eksternal biasanya digunakan saat kita ingin menggunakan kembali style yang sudah dibuat. Misalnya ada lima halaman HTML, dan semua halaman ini membutuhkan CSS yang sama. Maka sebaiknya kita menggunakan eksternal CSS agar tidak menulis ulang kode CSS di setiap file HTML.

Eksternal CSS di dalam Folder

Jika file eksternal CSS berada di dalam folder yang berbeda, maka kita bisa tulis alamat path-nya di tag link. Contoh, Misalnya kita punya struktur folder project web. File style.css akan kita pakai di index.html, tapi dia berada di dalam folder css. Maka kita bisa tuliskan seperti ini:

1
<link rel="stylesheet" href="css/style.css" />

Namun, sekarang bagaimana kalau file HTML-nya berada di folder yang berbeda. Bagaimana cara pakai style.css yang berada di folder css dan menggunakannya di file about.html yang berada di folder about? Kita hanya perlu naik satu level dengan ../ kemudian menuliskan css/style.css setelahnya.

Contoh:

1
<link rel="stylesheet" href="../css/style.css" />

Jika file HTML-nya berada di dalam folder lagi, dan di dalam folder lagi, dan di dalam folder lagi, dan di dalam folder lagi.. 😄 gimana tuh? Ya tinggal naik beberapa level, misalnya dia berada di dalam folder level ke 3, maka naiknya menjadi 3 level seperti ini:

1
<link rel="stylesheet" href="../../../css/style.css" />

Perhatikan ../ artinya naik satu level, karena ada tiga ../ maka kita naik 3 level. Jika kamu paham sistem path di Linux, maka kamu akan mudah memahami ini. Oh iya, selain cara ini, kita bisa juga menggunakan / untuk mewakili root folder dari project atau nama domain.

Contoh:

1
<link rel="stylesheet" href="/css/style.css" />

Ini akan membuatnya konsisten, karena / nantinya akan mewakili nama domain. Jadi di mana pun kita akan menggunakan file CSS-nya tidak perlu ribet naik level.

Eksternal CSS dari Internet (CDN)

Selain menggunakan eksternal CSS yang ada di satu folder dengan project, kita juga bisa gunakan CSS yang sudah ada di internet atau domain lain. Contoh, Misalnya file CSS-nya berada di: https://mineversal.com/assets/css/style.css. Maka kita bisa menggunakannya di HTML seperti ini:

1
<link rel="stylesheet" href="https://mineversal.com/assets/css/style.css" />

Inline CSS

Inline CSS adalah kode CSS yang ditulis langsung pada atribut style di elemen HTML. Kode CSS ditulis langsung tanpa menggunakan kurung kurawal{ … }. Kemudian properti tetap dipisah dengan titik koma.

Contoh:

1
<h2 style="color:red; font-family: sans;">Ini judul artikel</h2>

Contoh lengkap:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
  <title>Contoh Inline CSS</title>
</head>

<body>

  <h2 style="color:red;font-family:sans">Ini judul artikel</h2>
  <p style="color:maroon">Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

Inline CSS biasanya digunakan untuk memberikan style pada satu elemen saja. CSS pada inline akan lebih diprioritaskan dibandingkan dengan internal dan eksternal. Akan tetapi, Inline CSS jarang digunakan pada proyek-proyek besar, karena cukup menyulitkan mengelola kode jika sudah terlalu banyak menggunakan inline. Gunakanlah seperlunya dan seadanya. Jangan terlalu banyak, biar kodemu lebih rapi.

Apa Selanjutnya? Kita sudah belajar cara menulis CSS di HTML. Ada tiga cara yang digunakan, yakni Internal CSS, Eksternal CSS, dan Inline CSS. Gunakanlah sesuai pada tempatnya dan pastikan hanya menggunakan satu saja biar konsisten.

Sintaks Dasar CSS

CSS punya sintaks atau tata cara penulisan kode yang harus diikuti. Jika kita salah tulis, bisa jadi CSS yang kita buat tidak akan menghasilkan apa-apa di tampilan web. Karena itu, kita wajib memahami sintaks dasar CSS agar tidak salah tulis.

Struktur Dasar CSS

Struktur kode CSS terdiri dari tiga bagian:

  • Selektor;
  • Blok Deklarasi;
  • Properti dan nilainya.

Selektor

Selektor adalah kata kunci untuk memilih elemen HTML yang akan kita beri style.

Contohnya:

1
2
3
h1 {
    color: red;
}

Artinya: Kita memilih semua elemen h1, lalu diberikan warna teks red (merah). Selektor dapat berupa nama tag, class, id, dan atribut.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* Selektor dengan nama tag */
h2 {
    color: blue
}

/* Selektor dengan class */
.bg-yellow {
    background-color: yellow;
}

/* selektor dengan ID elemen */
#header {
    background: grey;
}

/* Selektor dengan Atribut */
input[type=text]{
    background: yellow;
}

Pembahasan lebih mendalam tentang selektor akan kita bahas di materi selanjutnya.

Blok Deklarasi

Blok deklarasi adalah tempat kita menuliskan atribut atau properti CSS yang akan diberikan ke pada elemen yang telah diseleksi.

Contoh:

1
2
3
p {
    font-size: 18px;
}

Artinya, kita akan mengatur ukuran font dari tag p sebesar 18px. Blok deklarasi dimulai atau dibuka dengan tanda kurung { lalu ditutup dengan }. Satu blok deklarasi, bisa dipakai oleh lebih dari satu selektor.

Contohnya:

1
2
3
h1, h2, h3, h4, h5, h6 {
  color: teal;
}

Ini artinya kita memberikan warna sama untuk semua tag h1 sampai h6.

Bisa juga ditulis seperti ini:

1
2
3
4
5
6
7
8
h1,
h2, 
h3, 
h4, 
h5, 
h6 {
  color: teal;
}

Intinya, penulisan setiap selektornya dipisah dengan koma.

Properti dan Nilainya

Properti adalah sekumpulan aturan yang akan diberikan kepada elemen yang dipilih. Format penulisan properti seperti ini:

1
properti: "nilai";

Setiap properti harus diakhiri dengan titik koma (;). Apabila hanya terdapat satu properti, boleh tidak menggunakan titik koma. Properti harus ditulis di dalam blok deklarasi.

Contoh: ✅

1
2
3
blockquote {
    background: pink;
}

Jangan tulis seperti ini: ❌

1
2
3
4
5
background: pink;

p {

}

Nilai untuk properti kadang diapit tanda petik, kadang juga tidak. Biasanya yang diapit dengan tanda petik adalah nilai yang berupa teks/string.

Contohnya:

1
font-family: "Times new roman";

Mengapa ini diapit dengan tanda petik? Karena ada spasi di nama Times new roman. Nilai properti juga bisa kita berikan lebih dari satu.

Contoh:

1
font-family: "Times new roman", Georgia, Roboto;

Ini bisanya kita pakai untuk memberikan nilai opsional. Misalnya font Times new roman tidak ada maka yang akan dipakai adalah Georgia, begitu juga seterusnya.

Penulisan Komentar di CSS

Komentar biasanya dipakai untuk memberikan informasi tambahan di kode CSS. Cara menulis komentar di CSS dilakukan dengan tanda /* dan diakhiri dengan */.

Contoh:

1
2
3
4
5
6
7
/* ini adalah komentar */

/*
  ini juga komentar
  yang ditulis lebih dari
  satu baris
*/

Selain untuk memberikan informasi tambahan, kita juga bisa menggunakan komentar untuk menonaktifkan beberapa kode tertentu.

Contoh:

1
2
3
4
p {
  /* color: red; */
  font-family: "Times new roman";
}

Properti color: red tidak akan dipakai, karena dia berada di dalam komentar.

Selector dalam CSS

Setelah memahami struktur dasar CSS dan cara menulis CSS di HTML, berikutnya, kita akan pelajari lebih dalam tentang selektor. Hal dasar yang harus kita ketahui setelah memahami cara menulis HTML di CSS adalah selektor. Selektor adalah katakunci dan simbol yang digunakan pada CSS untuk menyeleksi atau memilih elemen HTML.

Ada 6 macam selektor di CSS:

  • Selektor Tag
  • Selektor Class
  • Selektor ID
  • Selektor Atribut
  • Selektor Universal
  • Selektor Pseudo

Selektor Tag

Selektor Tag disebut juga Type Selector. Selektor ini akan memilih elemen berdasarkan nama tag.

Contoh:

1
2
3
p {
    color: blue;
}

Artinya: Pilih semua elemen p lalu atur warna teksnya menjadi biru.

Kalau misalnya kita punya struktur HTML seperti ini:

1
2
3
4
<div>Halo apa kabar, saya sedang belajar CSS</div>
<p>Materi yang sedang kita bahas adalah Selektor</p>
<div>Saat ini sedang dibahas tentang selektor tag</div>
<p>Selektor tag adalah selektor untuk memilih elemen HTML berdasarkan nama tagnya</p>

Maka semua elemen p berwarna biru, sedangkan elemen div tidak.

Selektor Class

Selektor class adalah selektor yang memilih elemen berdasarkan nama class yang diberikan. Selektor class dibuat dengan tanda titik di depannya.

Contoh:

1
2
3
4
5
.pink {
  color: white;
  background: pink;
  padding: 5px;
}

Kita memiliki selektor class bernama .pink. Nah cara menggunakan selektor ini di HTML adalah dengan menambahkan atribut class di dalamnya.

Contoh:

1
<p>Saya sedang belajar <b class="pink">CSS</b> di binus.</p>

Selektor class dapat kita gunakan pada elemen yang kita inginkan. Dan juga, sebuah elemen HTML dapat menggunakan satu atau lebih class.

Contoh:

1
2
3
4
5
6
7
.text-white {
    color: white;
}

.bg-teal {
    background: teal;
}

Lalu di HTML kita gunakan kedua class tersebut pada satu elemen:

1
<h2 class="text-white bg-teal">Tutorial CSS untuk Pemula</h2>

Selektor ID

Selektor ID hampir sama dengan class. Bedanya, ID bersifat unik. Hanya boleh digunakan oleh satu elemen saja. Selektor ID ditandai dengan tanda pagar (#) di depannya.

Contoh:

1
2
3
4
5
6
#header {
    background: teal;
    color: white;
    height: 100px;
    padding: 50px;
}

Lalu pada kode HTML:

1
2
3
<header id="header">
    <h1>Selamat Datang di Website Saya</h1>
</header>

Selektor Atribut

Selektor atribut adalah selektor yang memiliki elemen berdasarkan atribut. Selektor ini hampir sama seperti selektor Tag.

Contoh selektor Atribut:

1
2
3
4
5
6
input[type=text] {
    background: none;
    color: cyan;
    padding: 10px;
    border: 1px solid cyan;
}

Artinya kita akan memilih semua elemen input yang memiliki atribut type=’text’.

Contoh kode HTML:

1
<input type="text" placeholder="ketik sesuatu..." />

Selektor Universal

Selektor universal adalah selektor yang digunakan untuk menyeleksi semua elemen pada jangkauan (scope) tertentu.

Contoh:

1
2
3
* {
    border: 1px solid grey;
}

Artinya semua elemen akan memiliki garis solid dengan ukuran 1px dan berwarna grey. Selektor universal bisanya digunakan untuk me-reset CSS. Kenapa harus di-reset? Pada halaman HTML, ada beberapa CSS bawaan browser seperti padding dan margin pada elemen tertentu. Reset bertujuan untuk menghilangkan padding dan margin tersebut.

Contoh CSS reset:

1
2
3
4
* {
    padding: 0;
    margin: 0;
}

Maka semua elemen tidak akan memiliki padding dan margin.

Pseudo Selektor

Pseudo selektor adalah selektor untuk memilih elemen semu seperti state pada elemen, elemen before dan after, elemen ganjil, dan sebagainya.

Ada dua macam pseudo selektor:

  • pseudo-class selektor untuk state elemen;
  • pseudo-element selektor untuk elemen semu di HTML.

Pseudo-class

Pseudo-class adalah selektor untuk memilih state pada elemen. Contohnya seperti elemen saat diklik, saat fokus, saat disentuh, dan lain sebagainya. Nah, dengan selektor ini kita bisa menentukan tampilan dari elemen pada state tersebut. Format penulisan pseudo-class menggunakan titik dua setelah elemen.

Format:

1
2
3
selektor:psudo-class {
  /* definisi properti di sini*/
}

Contoh:

1
2
3
a:hover {
  color: green;
}

Artinya, Kita akan memberikan warna hijau pada elemen a saat dia di-hover atau disentuh pointer. Selain :hover ada beberapa selektor pseudo-class lainnya:

  • :link untuk memlih link yang belum dikunjungi;
  • :visited untuk memlih link yang sudah dikunjungi;
  • :active untuk memilih elemen yang sedang aktif, seperti saat diklik;
  • :focus untuk memlih elemen yang sedang dalam keadaan fokus, misal teks lagi diinput.
  • :checked untuk memilih elemen yang dicentang pada checkbox.

Masih banyak lagi, list lengkapnya bisa kamu cek di Pseudo Class.

Pseudo-element

Pseudo-element adalah selektor untuk memilih elemen semu. Elemen semu yang saya maksud di sini adalah elemen yang seolah-olah kita tambahkan di HTML. Hmm. pasti bingung ya 🤔. Oke kalau begitu kita pakai contoh. Misalnya kita punya elemen paragraf seperti ini:

1
2
3
4
5
<p>ini adalah paragraf yang cukup panjang. Sengaja dibuat panjang agar bisa
  dipakai sebagai contoh untuk selektor pseudo-elemen. Pseudo-element adalah 
  selektor untuk memilih elemen semu. Elemen semu yang saya maksud di sini 
  adalah elemen yang seolah-olah kita tambahkan di HTML.
</p>

Lalu kita ingin memberikan style hanya pada baris pertama saja. Gimana caranya? Tanpa pseudo-element, kita bisa tambahkan elemen di baris pertama menjadi seperti ini.
1
2
3
4
5
<p><span>ini adalah paragraf yang cukup panjang.</span>
  Sengaja dibuat panjang agar bisa dipakai sebagai contoh untuk selektor pseudo-elemen. 
  Pseudo-element adalah selektor untuk memilih elemen semu. Elemen semu yang saya maksud di sini 
  adalah elemen yang seolah-olah kita tambahkan di HTML.
</p>

Kemudian memilih elemen span tersebut di CSS seperti ini:
1
2
3
p span {
  color: magenta;
}

Cara ini sebenarnya tidak disarankan, karena kita harus membuat elemen baru di dalam paragraf. Belum lagi, jika paragrafnya cukup panjang baris pertama akan tambah panjang pula. Maka di sinilah kita bisa pakai selektor pseudo-element ::first-line. Sehingga tanpa menambahkan elemen , kode CSS-nya akan menjadi seperti ini.
1
2
3
p::first-line {
  color: magenta;
}

Bedanya dengan pseudo-class apa? Selektor pseudo-element menggunakan tanda titik dua ganda (::) sedangkan pseudo-class pakai satu titik dua (:). Berikut ini beberapa contoh selektor pseudo-element:

  • ::before untuk memilih elemen semu sebelum elemen;
  • ::after untuk memilih elemen semu setelah elemen;
  • ::marker untuk memilih marker pada list;
  • ::placeholder untuk memilih teks placeholder pada elemen input teks;

List lengkap pseudo-element bisa kamu cek di Pseudo Element.

Apa Selanjutnya? Kita mempelajari 6 jenis selektor di CSS. Berikutnya kita tinggal pelajari properti-properti untuk melakukan styling di CSS.