Introduction to
CSS
Ahmed Rayhan Primadedas
Web Frontend Developer
Skydu.id
Apa saja yang akan
kita pelajari?
● Intro
● CSS Syntax Rule
● CSS Placement
● Membuat File CSS
● Selectors
● Properties & Values
● Codelabs!
Apa yang akan kita pelajari?
Introduction
Apa itu CSS?
CSS atau Cascading Stylesheet adalah
kumpulan kode yang digunakan untuk
mendefinisikan desain dari bahasa
markup
Source: https://id.wikipedia.org/wiki/Cascading_Style_Sheets
Definisi
Syntax
Syntax
● Rule
● Placement / Peletakan CSS
● Membuat File CSS
Rule
Rule
Rule
● Inline
● Internal
● External
Placement
Mulai ke code editor!
Membuat CSS
Selectors
● Simple selectors (memilih elemen berdasarkan nama elemen, id, class)
● Combinator selectors (memilih elemen berdasarkan relasi antara beberapa
elemen)
Selectors
https://www.w3schools.com/cssref/css_selectors.asp
Simple selectors (select elements based on element, id, class, global)
Simple Selectors
https://www.w3schools.com/cssref/css_selectors.asp
Simple Selectors - Element
https://www.w3schools.com/cssref/css_selectors.asp
Simple Selectors - Class
https://www.w3schools.com/cssref/css_selectors.asp
Simple Selectors - ID
https://www.w3schools.com/cssref/css_selectors.asp
Simple Selectors - Universal/Global
https://www.w3schools.com/cssref/css_selectors.asp
memilih elemen berdasarkan relasi antara beberapa elemen.
Combinator Selectors
Combination Parent-Child
https://www.w3schools.com/cssref/css_selectors.asp
Combination dan Parent-Child
https://www.w3schools.com/cssref/css_selectors.asp
Combination dan Parent-Child
https://www.w3schools.com/cssref/css_selectors.asp
Referensi Selectors
https://www.w3schools.com/cssref/trysel.asp
Properties & Values
● width & height
● margin & padding
● border
● colors
● layouting (display & position)
● typography
● and more...
Properties
Width and Height
● Color Names
● HEX
● RGB
● HSL
Colors
● px
● em
● rem
● vw -> viewport width
● vh -> viewport height
● %
● ..dll
Size
Border
Margin and Padding
Box Model
Box Model
Box Model
Layout
display: inline | block | inline-block | flex
position: static | relative | absolute | fixed | sticky
CSS Layout
CSS Position
● Static
● Relative
● Absolute
● Fixed
Position Static adalah settingan default posisi dalam elemen
HTML, dengan menggunakan position static anda tidak dapat
mengatur posisi dari elemen, semisal posisi
left,right,top,bottom
CSS Position - Static
CSS Position - Static
Berbeda dengan position:static, pada position relative ini anda
dapat mengatur posisi dari elemen yang ditampilkan
CSS Position - Relative
CSS Position - Relative
Position absolute ini digunakan untuk mengatur posisi sebuah
elemen yang ingin menimpa elemen lain
CSS Position - Absolute
Position:fixed ini memungkinkan kita meletakkan elemen secara
permanen di suatu titik yang tetap diam sekalipun kita scroll
browser kita sampai manapun
CSS Position - Fixed
CSS Display
● Inline
● Block
● Inline-Block
● Flexbox
Elemen yang memiliki property display: inline; hanya memblok
sesuai dengan konten yang ada pada elemen tersebut. Kita
tidak dapat mengubah atau mengatur nilai tinggi dari elemen
tersebut. Selain itu, nilai margin-top dan margin-bottom juga
tidak berpengaruh pada elemen inline.
Contoh elemen html yang memiliki default value inline, yaitu:
● <span>
● <a>
● <img>
CSS Display - Inline
CSS Display - Inline
selalu membuat blok baru pada tampilan. Elemen akan
membentang dari kiri hingga ke kanan mengisi penuh lebar dari
halaman browser. Kita dapat melakukan manipulasi banyak hal
pada elemen yang bernilai block. Baik mengatur lebar, tinggi,
margin sesuai dengan kebutuhan yang kita inginkan.
Contoh default value block, yaitu :
<div> | <p>
CSS Display - Block
CSS Display - Block
memiliki karakteristik gabungan dari dua value sebelumnya
yaitu, inline dan block. Elemen yang memiliki nilai ini akan
tampil secara inline atau sejajar/menyamping namun tiap
elemen memiliki sifat value block.
CSS Display - Inline Block
CSS Display - Inline Block
Model layout 1 dimensi yang dapat mengatur jarak dan
penjajaran antar item dalam sebuah container
CSS Display - Flexbox
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Fl
exbox
1 Dimensi?
CSS Display - Flexbox
1 Dimensi ?
Hanya dapat mengatur 1 dimensi pada saat tertentu, antara
baris atau kolom, tidak bisa keduanya sekaligus
CSS Display - Flexbox
1 Dimensi ?
CSS Display - Flexbox
CSS Display - Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox Layout Module
sebuah modul yang menawarkan cara efektif untuk menyusun,
mensejajarkan dan mendistribusikan jarak antar item di dalam
sebuah container, meskipun ukurannya dinamis atau kita
bahkan tidak tahu ukurannya
CSS Display - Flexbox
CSS Display - Flexbox
CSS Display - Flexbox
CSS Display - Flexbox
CSS Display - Flexbox
CSS Display - Flexbox
CSS Display - Flexbox
CSS Display - Flexbox
CSS Display - Flexbox
CSS Display - Flexbox
CSS Display - Flexbox
CSS Display - Flexbox
CSS Display - Flexbox
● display: flex
● flex-direction: row | row-reverse | column | column-reverse
● justify-content
CSS Display - Flexbox
flex-direction
Mengatur arah / urutan dari
items di dalam container
CSS Display - Flexbox
flex-wrap
Secara default, semua items
di dalam container akan
berada dalam satu baris
meskipun ukurannya sudah
tidak cukup, wrap
memungkinkan untuk
memindahkan items ke
baris di bawahnya
CSS Display - Flexbox
justify-content
Mengatur rata items di
dalamnya terhadap
main-axis
CSS Display - Flexbox
align-items
Mengatur rata items di
dalamnya terhadap
cross-axis
CSS Display - Flexbox
Codelabs!
Let’s Code!
Thank You! arayhan_
rayhanprima99@gmail.com
linkedin.com/in/arayhan
Keep in touch!

CSS: Introduction