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