CSS: From Zero to Hero the Series

1. Introduction to
CSS
Ahmed Rayhan Primadedas
Web Frontend Developer
Skydu.id

2. Apa saja yang akan
kita pelajari?

3. ● Intro
● CSS Syntax Rule
● CSS Placement
● Membuat File CSS
● Selectors
● Properties & Values
● Codelabs!
Apa yang akan kita pelajari?

4. Introduction

5. Apa itu CSS?

6. 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

7. Syntax

8. Syntax
● Rule
● Placement / Peletakan CSS
● Membuat File CSS

9. Rule

10. Rule

11. Rule

12. ● Inline
● Internal
● External
Placement

13. Mulai ke code editor!
Membuat CSS

14. Selectors

15. ● 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

16. Simple selectors (select elements based on element, id, class, global)
Simple Selectors
https://www.w3schools.com/cssref/css_selectors.asp

17. Simple Selectors - Element
https://www.w3schools.com/cssref/css_selectors.asp

18. Simple Selectors - Class
https://www.w3schools.com/cssref/css_selectors.asp

19. Simple Selectors - ID
https://www.w3schools.com/cssref/css_selectors.asp

20. Simple Selectors - Universal/Global
https://www.w3schools.com/cssref/css_selectors.asp

21. memilih elemen berdasarkan relasi antara beberapa elemen.
Combinator Selectors
Combination Parent-Child
https://www.w3schools.com/cssref/css_selectors.asp

22. Combination dan Parent-Child
https://www.w3schools.com/cssref/css_selectors.asp

23. Combination dan Parent-Child
https://www.w3schools.com/cssref/css_selectors.asp

24. Referensi Selectors
https://www.w3schools.com/cssref/trysel.asp

25. Properties & Values

26. ● width & height
● margin & padding
● border
● colors
● layouting (display & position)
● typography
● and more...
Properties

27. Width and Height

28. ● Color Names
● HEX
● RGB
● HSL
Colors

29. ● px
● em
● rem
● vw -> viewport width
● vh -> viewport height
● %
● ..dll
Size

30. Border

31. Margin and Padding

32. Box Model

33. Box Model

34. Box Model

35. Layout

36. display: inline | block | inline-block | flex
position: static | relative | absolute | fixed | sticky
CSS Layout

37. CSS Position
● Static
● Relative
● Absolute
● Fixed

38. 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

39. CSS Position - Static

40. Berbeda dengan position:static, pada position relative ini anda
dapat mengatur posisi dari elemen yang ditampilkan
CSS Position - Relative

41. CSS Position - Relative

42. Position absolute ini digunakan untuk mengatur posisi sebuah
elemen yang ingin menimpa elemen lain
CSS Position - Absolute

43. 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

44. CSS Display
● Inline
● Block
● Inline-Block
● Flexbox

45. 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

46. CSS Display - Inline

47. 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

48. CSS Display - Block

49. 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

50. CSS Display - Inline Block

51. 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

52. 1 Dimensi?
CSS Display - Flexbox

53. 1 Dimensi ?
Hanya dapat mengatur 1 dimensi pada saat tertentu, antara
baris atau kolom, tidak bisa keduanya sekaligus
CSS Display - Flexbox

54. 1 Dimensi ?
CSS Display - Flexbox

55. 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

56. CSS Display - Flexbox

57. CSS Display - Flexbox

58. CSS Display - Flexbox

59. CSS Display - Flexbox

60. CSS Display - Flexbox

61. CSS Display - Flexbox

62. CSS Display - Flexbox

63. CSS Display - Flexbox

64. CSS Display - Flexbox

65. CSS Display - Flexbox

66. CSS Display - Flexbox

67. CSS Display - Flexbox

68. CSS Display - Flexbox
● display: flex
● flex-direction: row | row-reverse | column | column-reverse
● justify-content

69. CSS Display - Flexbox
flex-direction
Mengatur arah / urutan dari
items di dalam container

70. 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

71. CSS Display - Flexbox
justify-content
Mengatur rata items di
dalamnya terhadap
main-axis

72. CSS Display - Flexbox
align-items
Mengatur rata items di
dalamnya terhadap
cross-axis

73. CSS Display - Flexbox

74. Codelabs!
Let’s Code!

75. Thank You! arayhan_
rayhanprima99@gmail.com
linkedin.com/in/arayhan
Keep in touch!