CSS ESSENTIAL - Basic

Get Started. It's Free
or sign up with your email address
CSS ESSENTIAL - Basic by Mind Map: CSS ESSENTIAL - Basic

1. CSS Basics

1.1. Selector

1.1.1. HTML elemen yang ingin kita style. Contohnya dalam CSS ini misal p. P refer <p> pada HTML

1.1.1.1. contoh selector

1.1.1.1.1. element

1.1.1.1.2. id

1.1.1.1.3. class

1.1.1.1.4. *

1.1.1.2. #Id atau .class

1.1.1.2.1. id adalah salah satu selector (#) untuk identifikasi satu elemen

1.1.1.2.2. class adalah salah satu selector (.) identifikasi banyak elemen

1.2. Bagaimana menulis CSS Syntax

1.2.1. property: value;

1.2.1.1. Contoh: text-align : center;

1.2.1.1.1. Contoh real: .nama-class{text-align: center;}

1.2.2. Case sensitive?

1.2.2.1. Penulisan selector di file css case insensitive

1.2.2.2. Penulisan selector di html case sensitive

1.3. Dimana menempatkan kode CSS?

1.3.1. dalam file HTML <style> .nama-class{ font-size: 12px; } </style>

1.3.2. dalam tag HTML <p style="color:blue;">Words</p>

1.3.3. external

1.3.3.1. File Path

1.3.3.1.1. Folder yang sama <link rel="stylesheet" href="style.css" />

1.3.3.1.2. Berbeda Folder <link rel="stylesheet href="/css/style.css" />

1.3.3.1.3. Beda server <link rel="stylesheet href="https://supercoder.academy/wp-includes/css/dist/block-library/style.min.css?ver=5.3.2" />

1.4. Apa itu Naming Convention?

1.4.1. Penamaan yang sesuai dengan elemen yang di style

1.5. Apa itu General Property values?

1.5.1. inherit

1.5.1.1. inherited values from parent

1.5.2. initial

1.5.2.1. default browser values

1.5.3. unset

1.5.3.1. can act as both inherit or initial

1.6. Apa yang dimaksud CSS Declaration?

1.6.1. longhand (cara biasa)

1.6.2. shorthand (disingkat)

1.6.2.1. background

1.6.2.2. border

1.6.2.3. color

1.6.2.4. font

1.6.2.5. list

1.6.2.6. margin

1.6.2.7. padding

1.6.2.8. outline

1.7. Apa itu CSS Display?

1.7.1. inline

1.7.2. inline-block

1.7.3. block

1.7.4. none

1.8. Menentukan Cascading Order

1.8.1. Order of specification (urutan)

1.8.2. Specificity

1.8.2.1. Specificity Hierarki

1.8.2.1.1. 1. Inline styles 2. ID 3. Classes, attributes dan pseudo- classes 4. Elements dan pseudo-elements

1.8.3. !important

1.9. Bagaimana caranya menulis Comments?

1.9.1. /* comments */