CSS Dasar

00. Sebelum Belajar

Sebelum belajar pastikan sudah memahami:
  • Belajar HTTP
  • HTML Dasar
  • HTML Form

01. Pengenalan CSS

Pengenalan CSS
  • CSS singkatan dari Cascading Style Sheets
  • HTML digunakan untuk membuat struktur konten web secara semantic, dan CSS digunakan untuk memberi style (gaya) dan layout (tata letak) pada konten HTML
  • Contohnya, kita bisa menggunakan CSS untuk mengubah font, color, size, dan lain-lain pada konten yang sudah kita buat menggunakan HTML

Apa itu CSS?
  • CSS adalah bahasa yang digunakan untuk mendeskripsikan bagaimana sebuah dokumen yang sudah dibuat menggunakan HTML, ditampilkan ke pengguna
  • Setiap browser biasanya punya standar masing-masing ketika menampilkan dokumen HTML
  • Dengan menggunakan CSS, kita bisa membuat semua browser menampilkan dokumen HTML dengan cara yang sama

CSS Syntax
  • CSS adalah bahasa yang berbasis rule/aturan
  • Kita akan mendefinisikan rule/aturan aturan untuk element yang terdapat di dokumen HTML yang kita buat
  • Membuat rule di CSS biasanya dimulai dengan menyebutkan element yang akan dipilih, lalu diikuti dengan kurung kurawal buka, dilanjutkan dengan aturan-aturan yang akan kita gunakan, dan diakhiri dengan kurung kurawal tutup
  • Aturan dalam CSS disebutkan dengan: property: value ;

02. Menambah CSS ke HTML
  • Terdapat tiga cara untuk menambah CSS ke HTML
  • Cara internal, dimana CSS disimpan di file yang sama dengan HTML. Yaitu dengan menggunakan tag style
  • Cara external, dimana CSS disimpan di file yang berbeda dengan HTML. Yaitu menggunakan tag link,
  • Cara inline, dimana CSS disimpan dalam atribut styles pada tag html, ini pernah kita lakukan di kelas HTML, dan cara ini tidak direkomendasikan

Contoh: CSS Internal


Contoh: CSS External

03. Comment
  • Saat membuat kode CSS, kadang kita ingin menyisipkan komentar
  • Komentar adalah kode yang tidak akan berdampak apapun
  • Untuk membuat komentar kita harus mengawali dengan /* dan diakhiri dengan */
  • Komentar bisa multi baris

04. Selector: Attribute ID
  • Selain menggunakan memilih element menggunakan HTML Tag, kita juga bisa memilih element menggunakan ID di CSS
  • Untuk menggunakan ID, kita perlu menggunakan # diawal nama ID nya


05. Selector: Attribute Class
  • Kadang ada kasus kita ingin menambahkan style CSS ke beberapa element tag yang jenisnya berbeda
  • Jika kita harus buat aturan nya per tag, maka akan menyulitkan ketika banyak sekali
  • Di HTML, semua tag bisa memiliki atribut class, dan di CSS, kita bisa menambahkan aturan ke class dengan menggunakan awalan . (titik)

Multiple Class
  • Nilai dari atribut class bisa menggunakan beberapa nilai, caranya kita bisa tambahkan pemisah menggunakan spasi

06. Selector
  • Sebelumnya kita sudah tahu cara memilih elemen yang akan ditambahkan aturan di CSS, yaitu menggunakan tag, #id atau .class
  • Memilih elemen di CSS dinamakan Selector
  • Ada banyak jenis Selector, dan kita akan bahas tiap selector di materi masing-masing
  • Di materi ini kita akan bahas tentang simple selector

Simple Selector
  • Simple selector adalah selector untuk memilih elemen berdasarkan nama (tag), #id atau .class
  • Jika kita ingin membuat selector untuk beberapa element, kita bisa gunakan , (koma) sebagai pemisah

Type Selector
  • Type Selector melakukan seleksi element berdasarkan tag html
  • https://css-tricks.com/almanac/selectors/t/type/ 

ID Selector
  • ID Selector melakukan seleksi element berdasarkan ID
  • https://css-tricks.com/almanac/selectors/i/id/

Class Selector
  • Class Selector melakukan seleksi element berdasarkan nama class
  • https://css-tricks.com/almanac/selectors/c/class/ 

Selector List
  • Selector list melakukan seleksi beberapa element sekaligus, menggunakan pemisah , (koma)
  • Gambar disamping artinya kita melakukan seleksi element untuk tag h1, h2, dan ID title

07. Combinator Selector
  • Combinator adalah sesuatu yang menjelaskan relasi antar selector
  • Terdapat 4 selector untuk combinator
  • descendant selector (space)
  • child selector (>)
  • adjacent sibling selector (+)
  • general sibling selector (~)

Descendant Selector
  • Descendant Selector adalah selector untuk memilih element anak dari element yang dipilih
  • Gambar sebelah artinya kita memilih semua tag p yang terdapat di dalam elemen div
  • https://css-tricks.com/almanac/selectors/d/descendant/ 

Child Selector
  • Child Selector adalah selector untuk memilih child / anak dari element yang dipilih
  • Gambar disamping artinya kita memilih semua elemen p yang anak dari div (div adalah parent element untuk p)
  • https://css-tricks.com/almanac/selectors/c/child/ 

Adjacent Sibling Selector
  • Adjacent Sibling Selector digunakan untuk memilih element setelah element yang dipilih
  • Sibling (saudara) element harus memiliki parent element yang sama
  • Gambar disamping artinya memilih element p yang diletakkan setelah element div dimana p dan div memiliki parent yang sama
  • https://css-tricks.com/almanac/selectors/a/adjacent-sibling/ 

General Sibling Selector
  • General Sibling Selector digunakan untuk memilih seluruh element saudara dari element yang dipilih, dimana harus memiliki parent element yang sama
  • Contoh gambar disamping adalah memilih semua element p dari saudara element div, dimana div dan parent harus memiliki parent yang sama
  • https://css-tricks.com/almanac/selectors/g/general-sibling/ 

08. Attribute Selectors
  • CSS juga mendukung selector menggunakan atribut yang terdapat di tag HTML
  • Terdapat banyak cara untuk menggunakan Attribute Selector

CSS [attribute] Selector
  • Gambar dibawah artinya memilih semua element a yang memiliki atribut target
  • https://css-tricks.com/almanac/selectors/a/attribute/ 

Contoh: 


CSS [attribute=”value”] Selector
  • Gambar dibawah artinya memilih semua element a yang memiliki atribut target dengan nilai “_blank”
  • https://css-tricks.com/almanac/selectors/a/attribute/ 

Contoh: 

CSS [attribute~=”value”] Selector
  • Gambar dibawah artinya memilih semua element p yang memiliki atribut title yang terdapat kata belajar
  • https://css-tricks.com/almanac/selectors/a/attribute/ 


Contoh: 

CSS [attribute|=”value”] Selector
  • Gambar dibawah artinya memilih semua element p yang memiliki atribut title yang memiliki value “belajar” atau “belajar” yang diikuti dengan karakter -
  • https://css-tricks.com/almanac/selectors/a/attribute/ 


Contoh:

CSS [attribute^=”value”] Selector
  • Gambar dibawah artinya memilih semua element p yang memiliki atribut title yang memiliki value dimulai dengan “belajar”
  • https://css-tricks.com/almanac/selectors/a/attribute/ 


Contoh:

CSS [attribute$=”value”] Selector
  • Gambar dibawah artinya memilih semua element p yang memiliki atribut title yang memiliki value didiakhiri dengan “belajar”
  • https://css-tricks.com/almanac/selectors/a/attribute/ 


Contoh:

CSS [attribute*=”value”] Selector
  • Gambar dibawah artinya memilih semua element p yang memiliki atribut title yang mengandung kata “belajar”
  • https://css-tricks.com/almanac/selectors/a/attribute/ 


Contoh:

Attribute Selector Tanpa Tag
  • Saat menggunakan Attribute Selector, nama tag sebenarnya tidak wajib, jadi kita bisa langsung menggunakan Attribute Selector
  • Attribute Selector juga bisa digunakan pada Class atau ID
  • https://css-tricks.com/almanac/selectors/a/attribute/ 


Contoh:

09. Property Color
  • Color merupakan rule di CSS untuk mengubah warna, biasa digunakan pada teks
  • CSS mendukung banyak cara menggunakan color
  • https://developer.mozilla.org/en-US/docs/Web/CSS/color 

HTML Color Names
  • Sebelumnya kita pernah menggunakan color red, selain red, HTML mendukung banyak nama color
  • Kita bisa liat dihalaman web ini untuk daftar warna apa saja yang didukung oleh HTML
  • https://htmlcolorcodes.com/color-names/ 

HEX, RGB dan HSL
  • Selain menggunakan Color Name, CSS juga mendukung color menggunakan format HEX, RGB dan HSL
  • https://colorpicker.me/ 

Contoh:

10. Property Text
  • CSS bisa digunakan untuk mengubah properties atau format untuk text
  • Contoh sebelumnya kita sudah menggunakan color untuk mengubah warna text
  • Selain color, masih banyak yang bisa kita ubah dari properties atau format untuk text

Text Alignment
  • Text alignment digunakan untuk mengubah rata tulisan, kita bisa menggunakan rule text-align, dimana memiliki beberapa nilai seperti
  • https://developer.mozilla.org/en-US/docs/Web/CSS/text-align 
  • left untuk rata kiri
  • right untuk rata kanan
  • center untuk rata tengah
  • justify untuk rata kanan dan kiri
  • nilai default dari text-align adalah left
Contoh:

Text Decoration
  • Text Decoration digunakan untuk menambah garis dekorasi ke text. 
  • Kita bisa menggunakan aturan text-decoration 
  • https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration 

Contoh:

Text Transformation
  • Text Transformation digunakan untuk mengubah uppercase dan lowercase untuk text
  • Kita bisa menggunakan aturan text-transform
  • https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform 

Contoh:

Text Spacing
  • Text Spacing digunakan untuk mengatur jarak dalam text
  • Aturan text-indent digunakan untuk mengatur jarak di awal text
  • https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent 
  • Aturan letter-spacing digunakan untuk mengatur jarak antar huruf
  • https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
  • Aturan line-height digunakan untuk mengatur jarak antar baris
  • https://developer.mozilla.org/en-US/docs/Web/CSS/line-height 
  • Aturan word-spacing digunakan untuk mengatur jarak antar kata
  • https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing 
  • Aturan white-space digunakan untuk mengatur bagaimana whitespace ditampilkan
  • https://developer.mozilla.org/en-US/docs/Web/CSS/white-space 

Contoh:

Text Shadow
  • Text Shadow digunakan untuk menambahkan efek bayangan pada text
  • Untuk menambahkan Text Shadow, kita bisa menggunakan aturan text-shadow
  • https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow 

Contoh:

Referensi
  • Untuk melihat lebih detail tentang text, kita bisa lihat referensi nya dihalaman ini :
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text_decoration 
11.  Property Font
  • Saat membuat tulisan, biasanya Web Browser akan menggunakan default font nya, tiap Web Browser memiliki default Font masing-masing
  • Saat membuat web, baiknya kita menggunakan font yang sama sehingga tampilan web kita konsisten
  • Kita bisa mengatur Font di halaman HTML menggunakan CSS dengan property font
  • https://developer.mozilla.org/en-US/docs/Web/CSS/font 

Font Family
  • Untuk mengubah jenis font, kita bisa menggunakan property font-family
  • https://developer.mozilla.org/en-US/docs/Web/CSS/font-family 
  • Menggunakan font-family sangat tergantung dengan sistem operasi yang digunakan, jika font nya tidak ada di sistem operasi yang digunakan, maka hasilnya tidak akan sesuai dengan yang kita mau
  • Kita bisa menggunakan generic font family yang sudah menjadi standar untuk CSS
  • Kita bisa melihat daftar generic family name disini : https://www.w3.org/TR/css-fonts-3/#generic-font-families 

Font Style
  • Untuk mengubah style dari font, kita bisa menggunakan property font-style
  • https://developer.mozilla.org/en-US/docs/Web/CSS/font-style 
  • Untuk mengubah ketebalan dari font, kita bisa menggunakan property font-weight
  • https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Font Size
  • Untuk mengubah ukuran dari font, kita bisa menggunakan property font-size
  • https://developer.mozilla.org/en-US/docs/Web/CSS/font-size 

Google Font
  • Salah satu penyedia font gratis yang bisa kita gunakan adalah Google Font
  • Kisa bisa mencari font di Google Font, lalu menggunakan CSS untuk menambahkan font yang kita mau di halaman Web yang kita mau
  • https://fonts.google.com/ 

Contoh:


12. Property Background Color
  • CSS bisa digunakan untuk mengubah latar belakang / background dari tiap element di HTML
  • Kita bisa menggunakan property background
  • https://developer.mozilla.org/en-US/docs/Web/CSS/background 

Background Color
  • Background yang paling sederhana Background Color, yaitu mengubah background element menjadi color 
  • Sama seperti property color, background color juga mendukung format color HEX, RGB dan HSL
  • Kita bisa menggunakan property background-color untuk mengubah background menggunakan color
  • https://developer.mozilla.org/en-US/docs/Web/CSS/background-color 

Contoh:

13. Box Model
  • Saat menggunakan CSS, terdapat konsep bernama Box Model
  • Biasanya digunakan ketika kita ingin mengatur tata letak / layout pada element
  • Setiap element di HTML, memiliki Box yang terdiri dari content, padding, border dan margin

Gambaran Box model
  • Content adalah isi dari element
  • Padding adalah arena transparan antara content dan border
  • Border adalah kotak yang mengelilingi content
  • Margin adalah arena transparan paling luar setelah border
Size
  • Saat kita membuat element HTML, kita tahu bahwa beberapa element ditampilkan dalam block, dan beberapa element ditampilkan dalam inline
  • Dengan menggunakan CSS, kita bisa mengubah ukuran dari tiap element menggunakan height dan width
  • https://developer.mozilla.org/en-US/docs/Web/CSS/height 
  • https://developer.mozilla.org/en-US/docs/Web/CSS/width 

Contoh: Mereset ukuran bawaan element body, div, dan p

Contoh: Menggunakan property width dan heigth

Catatan: secara default element div akan mengambil space halaman full dari kiri ke kanan, sehingga element berikutnya akan otomatis ada di bawahnya.

Padding
  • Untuk mengatur area Padding, kita bisa menggunakan property padding dengan CSS
  • https://developer.mozilla.org/en-US/docs/Web/CSS/padding 

Contoh:

Margin
  • Untuk mengatur area Margin, kita bisa menggunakan property margin dengan CSS
  • https://developer.mozilla.org/en-US/docs/Web/CSS/margin 

Contoh:

Catatan: 
Saat dua property margin saling bertemu maka yang menang adalah yang valuenya lebih besar. Pada contoh di atas, margin top dari .artikel1 (valuenya 10) dan .artikel2 (valuenya 20) saling bertemu dan yang diterapkan (yang menang) adalah margin top dari .artikel2 karena valuenya lebih besar.

14. Debug dengan Browser
  • Salah satu cara saat kita ingin melihat Box Model pada halaman HTML yaitu dengan menggunakan Web Browser
  • Tiap Web Browser biasanya ada fitur untuk melihat detail dari informasi halaman HTML yang sedang dibuka
  • Contohnya di Google Chrome, kita bisa klik kanan element yang ingin kita lihat, lalu pilih menu Inspect Element

15. Property Min dan Max Size
  • Saat menambahkan size pada element, kadang kita ingin menentukan minimal atau maksimal dari size element, hal ini untuk menjaga element tidak terlalu kecil atau tidak terlalu besar
  • Kita juga bisa mengaturnya menggunakan property di CSS

Min Size
  • Untuk mengatur minimal kita bisa menggunakan property
  • min-height untuk minimal tinggi
  • https://developer.mozilla.org/en-US/docs/Web/CSS/min-height 
  • min-width untuk minimal lebar
  • https://developer.mozilla.org/en-US/docs/Web/CSS/min-width 

Max Size
  • Untuk mengatur maksimal kita bisa menggunakan property
  • max-height untuk minimal tinggi
  • https://developer.mozilla.org/en-US/docs/Web/CSS/max-height 
  • max-width untuk minimal lebar
  • https://developer.mozilla.org/en-US/docs/Web/CSS/max-width 

Contoh:

16. Property Border
  • Dalam Box Model, terdapat bagian Border
  • Untuk mengubah Border, kita bisa menggunakan property border
  • https://developer.mozilla.org/en-US/docs/Web/CSS/border 

Border Detail
  • Kadang, kita ingin mengubah border tiap sisi berbeda, untuk itu kita bisa menggunakan property border-right, border-left, border-top dan border-bottom
  • https://developer.mozilla.org/en-US/docs/Web/CSS/border-left 
  • https://developer.mozilla.org/en-US/docs/Web/CSS/border-right 
  • https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom 
  • https://developer.mozilla.org/en-US/docs/Web/CSS/border-top 

Contoh:

Border Radius
  • Border Radius adalah untuk mengubah putaran dari ujung border
  • Secara otomatis isi padding pun akan mengikuti putaran dari border
  • Kita bisa menggunakan property border-radius
  • https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius 

Contoh:

17. Outline
  • Outline mirip seperti Border, lokasinya berada setelah Border
  • Yang membedakan dari Border, Outline tidak mengambil area dari Box, sehingga tidak mengganggu ukuran layout / tata letak
  • https://developer.mozilla.org/en-US/docs/Web/CSS/outline 

Contoh:

18. Background Image
  • Selain menggunakan Color, kita juga bisa menggunakan Image sebagai background
  • Untuk menggunakan image sebagai background kita bisa menggunakan property background-image
  • https://developer.mozilla.org/en-US/docs/Web/CSS/background-image 
Contoh:


Gradient
  • Saat menggunakan background-image, selain menggunakan gambar, kita juga bisa menggunakan warna gradient
  • Terdapat banyak sekali jenis warna gradient yang didukung oleh CSS
  • https://developer.mozilla.org/en-US/docs/Web/CSS/gradient 
  • Untuk mencoba warna-warna gradient, kita bisa menggunakan website :
  • https://cssgradient.io/ 

Contoh:


19. Property Opacity
  • Element di HTML bisa diatur transparansinya menggunakan property opacity
  • https://developer.mozilla.org/en-US/docs/Web/CSS/opacity 
  • Perlu diperhatikan, saat menggunakan opacity, semua element baik itu background dan content nya, akan berubah menjadi transparan

Contoh:

20. Value dan Unit
  • Saat kita menggunakan CSS, kita sering sekali menggunakan berbagai jenis value, dari mulai number, text, color name, rgb, image, dan lain-lain
  • Semua standarisasi dari CSS Value dan Unit sudah ditetapkan di spesifikasi berikut :
  • https://drafts.csswg.org/css-values/ 

Value Length
  • Salah satu value yang penting kita mengerti adalah Value Length
  • Sebelumnya kita sering menggunakan px untuk pixel, selain px masih banyak type yang bisa kita gunakan
  • https://developer.mozilla.org/en-US/docs/Web/CSS/length 

21. Property Writing Mode
  • Writing mode digunakan untuk menentukan cara membaringkan text, apakah ingin horizontal, atau vertical
  • Kita bisa mengubahnya menggunakan property writing-mode
  • https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode 

Contoh:

22. Property Overflow
  • Overflow adalah kejadian dimana konten text melebihi ukuran dari Box element
  • Kita bisa menentukan bagaimana cara menampilkan ketika terjadi Overflow menggunakan property overflow
  • https://developer.mozilla.org/en-US/docs/Web/CSS/overflow 

Contoh:

23. Pseudo-elements Selector
  • Pseudo-elements Selector adalah kata kunci untuk menambah selector ke bagian tertentu dari element yang terseleksi
  • Saat memilih pseudo-elements, kita harus gunakan pemisah tanda :: (titik dua sebanyak dua kali)
  • Ada banyak pseudo-elements, kita bisa lihat detailnya di halaman dokumentasinya :
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements 

24. Pseudo-classes Selector
  • Pseudo-classes Selector adalah kata kunci yang ditambahkan ke selector yang merepresentasikan state / keadaan tertentu dari element yang diseleksi
  • Untuk menambahkan pseudo-classes, kita bisa gunakan : (titik dua)
  • Kita bisa lihat daftar pseudo-classes yang tersedia di halaman dokumentasinya : https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes 
  • Contohnya lihat di contoh pembahasan menggunakan Link di bawah

25. Menggunakan Link
  • Saat kita membuat web, kita akan sering sekali menggunakan Link menggunakan tag a
  • Link memiliki banyak sekali pseudo-classes yang bisa kita gunakan untuk mengubah tampilan Link pada state tertentu
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#user_action_pseudo-classes
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#location_pseudo-classes 
Contoh: 

26. Property List
  • Saat membuat daftar, kita sering menggunakan element list
  • CSS memiliki beberapa property yang bisa digunakan untuk mengubah List

CSS List
  • Property list-style-type bisa kita gunakan untuk mengubah jenis list yang ditampilkan di tiap item
  • https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type 
  • Property list-style-image bisa kita gunakan untuk mengubah item list dalam bentuk gambar
  • https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image
  • Property list-style-position bisa kita gunakan untuk mengubah posisi item dalam list
  • https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position
  • Atau kita bisa menggunakan shortcut menggunakan list-style
  • https://developer.mozilla.org/en-US/docs/Web/CSS/list-style 

Contoh:

27. CSS di Table
  • Saat kita membuat element Table di HTML, kita akan banyak menggunakan Box Model

Table Border
  • Jika kita ingin mengatur border pada tabel, kita bisa menggunakan Border pada table, tr, th, td, dan lain-lain
  • https://developer.mozilla.org/en-US/docs/Web/CSS/border 
  • Saat menggunakan border, kadang tiap kolom akan ada jarak, jika kita ingin menghilangkap jaraknya, kita bisa menggunakan border-collapse :
  • https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse 
  • Atau kita bisa juga tambahkan padding pada bagian-bagian tabel

Table Size
  • Untuk mengatur ukuran table, kita bisa menggunakan property width dan height
  • https://developer.mozilla.org/en-US/docs/Web/CSS/height
  • https://developer.mozilla.org/en-US/docs/Web/CSS/width 

Table Alignment
  • Untuk mengatur posisi text pada tabel, kita bisa menggunakan property text-align atau writing-mode
  • https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
  • https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode 

Contoh:

28. CSS di Form
  • Saat kita membuat Form, element input yang kita buat, semua bisa diatur menggunakan Box Model di CSS
  • Selain itu, khusus Form, terdapat pseudo-classes yang dikhususkan untuk input form :
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#input_pseudo-classes 

Contoh:

29. Property Content
  • Content adalah property yang bisa digunakan untuk mengubah isi dari element
  • https://developer.mozilla.org/en-US/docs/Web/CSS/content 
  • Untuk mengganti isi Element menggunakan property content, kita hanya bisa menggunakan content Image, sedangkan untuk text, bisa kita lakukan di pseudo-elements
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_pseudo-elements 

Contoh:

30. Property Counter
  • CSS memiliki kemampuan untuk membuat Counter, ini sangat cocok untuk membuat penomoran tanpa kita harus lakukan secara manual
  • Kita bisa gunakan property counter-set untuk membuat counter 
  • https://developer.mozilla.org/en-US/docs/Web/CSS/counter-set
  • Property counter-increment untuk menaikkan counter 
  • https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment
  • Dan property counter-reset untuk melakukan reset counter
  • https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset 
  • Untuk mengambil nilai counter, bisa menggunakan function counter()
  • https://developer.mozilla.org/en-US/docs/Web/CSS/counter 

Contoh:

31. Property Filter
  • CSS bisa digunakan untuk menambahkan filter di element yang kita inginkan
  • Kita bisa menggunakan property filter
  • https://developer.mozilla.org/en-US/docs/Web/CSS/filter
  • Terdapat banyak sekali jenis filter yang bisa kita gunakan

Contoh:

Catatan: saat menggunakan property filter maka semua element yang ada di dalam element yang dipilih akan di filter juga.

32. Import
  • Sebelumnya, kita sudah tahu untuk menambahkan kode CSS dari external file, kita bisa menggunakan tag link
  • CSS juga memiliki kemampuan untuk mengambil kode CSS dari luar menggunakan At-Rule, dimana harus ditempatkan dibagian atas kode CSS
  • Kita bisa mengambil kode CSS dari external menggunakan rule @import
  • https://developer.mozilla.org/en-US/docs/Web/CSS/@import 

Contoh:

33. Cascade

Cascade
  • Saat kita menggunakan CSS, kita harus tahu konsep bernama Cascade
  • Cascade adalah logika bagaimana web browser mengumpulkan property CSS dari berbagai sumber sebelum diterapkan ke element yang dipilih
  • Web browser akan mengambil sumber property CSS dari tiga sumber, yaitu User Agent, Author dan User
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade 

User Agent Stylesheet
  • User Agent atau browser, biasanya memiliki nilai awal untuk stylesheet
  • Tiap User Agent biasanya berbeda, oleh karena itu saat membuat CSS kita harus hati-hati dengan nilai awal User Agent, karena bisa berbeda untuk tiap browser
  • Salah satu contoh yang banyak dilakukan oleh programmer web adalah, melakukan reset ke nilai kosong
  • Contohnya seperti ini : https://github.com/necolas/normalize.css/blob/master/normalize.css

Author Stylesheet
  • Saat membuat web, kadang biasanya kita tidak langsung membuat file CSS, biasanya kita akan menggunakan stylesheet buatan orang lain, contoh yang populer adalah Bootstrap atau TailwindCSS
  • https://getbootstrap.com/
  • https://tailwindcss.com/ 
  • Biasanya User akan melakukan import atau link untuk Author Stylesheet

User Stylesheet
  • User stylesheet adalah yang kita buat sendiri, biasanya dibuat untuk mengubah stylesheet yang sudah digunakan baik itu dari User Agent atau Author

Cascade Order
  • Saat kita menggunakan sumber-sumber tadi untuk membuat CSS, Web Browser akan menggabungkan semua property CSS untuk element menggunakan urutan sebagai berikut
    • User Agent Stylesheet
    • Author Stylesheet
    • User Stylesheet
  • Jika ternyata kita membuat aturan yang sama di CSS, maka urutan posisi yang paling akhir yang akan digunakan

!important
  • Saat kita membuat aturan CSS, semua aturan akan mendapatkan prioritas normal
  • Jika kita ingin membuat sebuah aturan menjadi sangat penting, sehingga tidak boleh digantikan setelahnya oleh aturan lain, maka kita bisa menambahkan !important pada aturan tersebut
  • https://developer.mozilla.org/en-US/docs/Web/CSS/important 

Contoh:

34. Layer

Masalah dengan !important
  • Menggunakan !important sangat tidak flexible, karena artinya kita tidak bisa mengubah propertinya lagi
  • Alternatif lain yang lebih flexible adalah menggunakan @layer

@layer
  • @layer adalah fitur di dalam CSS Cascade, dimana kita bisa membuat layer (seperti tumpukan), dimana posisi layer bisa diurutkan sesuai dengan yang kita mau
  • Dengan menggunakan @layer, kita bisa menentukan mana yang lebih penting dan mana yang tidak begitu penting dengan mengubah posisi layer
  • Dengan begitu, kita bisa mengubah-ubah posisi, tanpa harus menggunakan !important lagi
  • https://developer.mozilla.org/en-US/docs/Web/CSS/@layer 

Contoh:


Source: Youtube Programmer Zaman Now