Cascading Style Sheet - WordPress.com · Pseudo-class Selectors Syntax selector:pseudo-class...
38
Cascading Style Sheet
Transcript of Cascading Style Sheet - WordPress.com · Pseudo-class Selectors Syntax selector:pseudo-class...
Cascading Style Sheet
Sumber
https://www.w3schools.com/
| Aditya Wicaksono 2
Syntax
selector {
property: value;
}
| Aditya Wicaksono 3
Cara Akses CSS
| Aditya Wicaksono 4
Inline
| Aditya Wicaksono 5
Cara Akses CSS
| Aditya Wicaksono 6
Internal
| Aditya Wicaksono 7
Cara Akses CSS
| Aditya Wicaksono 8
Eksternal
| Aditya Wicaksono 9
Selector
Kategori
Selector merupakan target dimana style
diaplikasikan.
| Aditya Wicaksono 10
Simple Selector
| Aditya Wicaksono 11
Element
| Aditya Wicaksono 12
Simple Selector
| Aditya Wicaksono 13
Id (#)
| Aditya Wicaksono 14
Simple Selector
| Aditya Wicaksono 15
Class (.)
| Aditya Wicaksono 16
Simple Selector
| Aditya Wicaksono 17
Universal (*)
| Aditya Wicaksono 18
Simple Selector
| Aditya Wicaksono 19
Grouping (,)
| Aditya Wicaksono 20
Combinator Selectors
Combinator Selectors merupakan sesuatu
yang menjelaskan hubungan antara
selectors.
Selector dapat berisi lebih dari satu
Simple Selectors.
Diantara Simple Selectors kita dapat
meng-include Combinator.
| Aditya Wicaksono 21
Combinator Selectors
| Aditya Wicaksono 22
Descendant (space)
| Aditya Wicaksono 23
Combinator Selectors
| Aditya Wicaksono 24
Child (>)
| Aditya Wicaksono 25
Combinator Selectors
| Aditya Wicaksono 26
Adjacent Sibling (+)
| Aditya Wicaksono 27
Combinator Selectors
| Aditya Wicaksono 28
General Sibling (~)
| Aditya Wicaksono 29
Pseudo-class Selectors
Syntax
selector:pseudo-class {
property: value;
}
Pseudo-class digunakan untuk
mendefinisikan keadaan khusus dari
suatu elemen.
| Aditya Wicaksono 30
Pseudo-class (:)
| Aditya Wicaksono 31
Pseudo-elements Selectors
Syntax
selector::pseudo-element {
property: value;
}
Pseudo-element digunakan untuk
mengatur style bagian tertentu dari suatu
elemen.
| Aditya Wicaksono 32
Pseudo-elements (::)
| Aditya Wicaksono 33
Attribute Selectors
[attribute=“value”]
Selector dengan nilai attribute spesifik “value”
[attribute~=“value”]
Selector dengan nilai attribute mengandung string “value”, nilainya harus seluruh kata
[attribute|=“value”]
Selector dengan nilai attribute spesifik “value” atau diawali string “value-”, nilainya harus seluruh kata
| Aditya Wicaksono 34
Attribute Selectors
[attribute^=“value”]
Selector dengan nilai attribute diawali string “value”, nilainya tidak harus seluruh kata
[attribute$=“value”]
Selector dengan nilai attribute diakhiri string “value”, nilainya tidak harus seluruh kata
[attribute*=“value”]
Selector dengan nilai attribute mengandung string “value”, nilainya tidak harus seluruh kata
| Aditya Wicaksono 35
Attribute Selectors
| Aditya Wicaksono 36
Latihan
https://www.w3schools.com/css/css_exercises.asp
| Aditya Wicaksono 37
Tugas
https://www.w3schools.com/css/css_quiz.asp
| Aditya Wicaksono 38
