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 {  Pseudo-class digunakan untuk

mendefinisikan keadaan khusus dari
property: value; suatu elemen.

| Aditya Wicaksono 30
Pseudo-class (:)

| Aditya Wicaksono 31
Pseudo-elements Selectors

Syntax

selector::pseudo-element {  Pseudo-element digunakan untuk

mengatur style bagian tertentu dari suatu
property: value; 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