├── attribute.html ├── background-image.html ├── background.html ├── box.html ├── cascade.html ├── class.html ├── color.html ├── combinator.html ├── content.html ├── counter.html ├── external.html ├── filter.html ├── font.html ├── form.html ├── hello.css ├── hello.html ├── id.html ├── images ├── godzilla.png └── pattern.png ├── import.html ├── internal.html ├── layer.css ├── layer.html ├── link.html ├── list.html ├── max.html ├── outline.html ├── overlfow.html ├── selector.html ├── table.html ├── text.html └── writing-mode.html /attribute.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Attribute 7 | 16 | 17 | 18 | Contoh 1 19 | Contoh 2 20 | Contoh 3 21 | Contoh 4 22 | 23 |

Ini dipilih

24 |

Ini tidak dipilih

25 |

Ini dipilih

26 |

Ini dipilih

27 | Ini contoh span 28 | 29 | -------------------------------------------------------------------------------- /background-image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 18 | 19 | 20 |
21 |

Ini judul

22 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi sint molestiae molestias adipisci assumenda asperiores quam praesentium in rem distinctio explicabo aperiam illo nemo ipsa amet provident, dolorum et est!

23 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi aperiam nulla atque quod esse laudantium, porro dolor reprehenderit ex dicta totam, quo consequuntur vitae veritatis temporibus? Sit mollitia hic eaque?

24 |
25 | 26 | -------------------------------------------------------------------------------- /background.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Background 7 | 15 | 16 | 17 |

18 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem perspiciatis consequuntur fugit repudiandae veniam! Illo, delectus dolorem soluta beatae, quibusdam quo ratione doloremque commodi, nobis ab debitis eveniet accusamus excepturi! 19 |

20 | 21 | -------------------------------------------------------------------------------- /box.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Box Model 7 | 46 | 47 | 48 |
49 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis rerum tempora et corrupti quae in iste libero amet? Ipsa suscipit quibusdam necessitatibus cumque nam veniam? Accusamus qui libero provident in.

50 |
51 |
52 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est dolor voluptatibus possimus nobis dignissimos in laborum rerum maxime praesentium repudiandae tempora maiores et tempore, sapiente molestias nemo fugiat. Sunt, repudiandae?

53 |
54 | 55 | -------------------------------------------------------------------------------- /cascade.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 25 | 26 | 27 |

Ini Judul

28 |

Ini Sub Judul

29 | 30 | -------------------------------------------------------------------------------- /class.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Class 7 | 16 | 17 | 18 |

Ini adalah title

19 |

Ini adalah subtitle

20 |

Ini adalah isi artikel

21 | 22 | -------------------------------------------------------------------------------- /color.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Color 7 | 20 | 21 | 22 |

Ini title

23 |

Ini sub title

24 |

Ini artikel

25 | 26 | -------------------------------------------------------------------------------- /combinator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Combinator 7 | 12 | 13 | 14 |
15 |
16 |

Ini tidak Dipilih

17 |
18 |

Ini Dipilih

19 |
20 |

Ini Dipilih

21 |

Ini Dipilih

22 | 23 | -------------------------------------------------------------------------------- /content.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Content 7 | 20 | 21 | 22 |

Ini Konten

23 | 24 | -------------------------------------------------------------------------------- /counter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 30 | 31 | 32 |

Judul

33 |

Sub Judul

34 |

Sub Judul

35 |

Sub Judul

36 |

Judul

37 |

Sub Judul

38 |

Sub Judul

39 |

Judul

40 |

Sub Judul

41 |

Sub Judul

42 |

Sub Judul

43 |

Sub Judul

44 |

Judul

45 |

Sub Judul

46 |

Sub Judul

47 |

Judul

48 |

Sub Judul

49 |

Sub Judul

50 | 51 | -------------------------------------------------------------------------------- /external.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | External 7 | 8 | 9 | 10 |

Belajar CSS

11 |

Belajar CSS External

12 | 13 | -------------------------------------------------------------------------------- /filter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 17 | 18 | 19 | 20 | 21 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque consequuntur fugiat cumque, voluptate quisquam doloremque harum similique mollitia soluta rem accusantium consectetur minima nemo non animi quae vel rerum dicta!

22 | 23 | -------------------------------------------------------------------------------- /font.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Font 7 | 8 | 23 | 24 | 25 |

Ini adalah judul

26 |

27 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur quidem enim esse sint! Illum sequi nobis id impedit iure deserunt, sint error ullam, vel aliquam reprehenderit et. Alias, aliquid similique. 28 |

29 | 30 | -------------------------------------------------------------------------------- /form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Form 7 | 41 | 42 | 43 |
44 | 49 | 53 |
54 | 55 |
56 | 57 | -------------------------------------------------------------------------------- /hello.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: red; 3 | font-size: 20px; 4 | } 5 | 6 | h2 { 7 | color: blue; 8 | font-size: 15px; 9 | } -------------------------------------------------------------------------------- /hello.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Hello World

10 |

Belajar CSS

11 | 12 | -------------------------------------------------------------------------------- /id.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ID 7 | 13 | 14 | 15 |

Ini adalah judul

16 |

Ini adalah bukan judul

17 | 18 | -------------------------------------------------------------------------------- /images/godzilla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammerZamanNow/belajar-css-dasar/2cde709621ba05ebe500ea2fe7bee11c83415267/images/godzilla.png -------------------------------------------------------------------------------- /images/pattern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammerZamanNow/belajar-css-dasar/2cde709621ba05ebe500ea2fe7bee11c83415267/images/pattern.png -------------------------------------------------------------------------------- /import.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 10 | 11 | 12 |

Ini Judul

13 |

Ini Sub Judul

14 | 15 | -------------------------------------------------------------------------------- /internal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Internal 7 | 8 | 25 | 26 | 27 | 28 |

Belajar CSS

29 |

Belajar CSS Internal

30 | 31 | -------------------------------------------------------------------------------- /layer.css: -------------------------------------------------------------------------------- 1 | @layer a { 2 | h1 { 3 | color: red; 4 | } 5 | } 6 | 7 | @layer b { 8 | h1 { 9 | color: pink; 10 | } 11 | } -------------------------------------------------------------------------------- /layer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Layer 7 | 15 | 16 | 17 |

Ini Judul

18 |

Ini Sub Judul

19 | 20 | -------------------------------------------------------------------------------- /link.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Link 7 | 33 | 34 | 35 |
36 | Programmer Zaman Now 37 | Facebook 38 | Instagram 39 |
40 | 41 | -------------------------------------------------------------------------------- /list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | List 7 | 13 | 14 | 15 | 23 | 24 | -------------------------------------------------------------------------------- /max.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Max 8 | 16 | 17 | 18 |
19 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt, laborum? Dolore nobis possimus provident nihil at assumenda. Laboriosam, libero cum fuga architecto eveniet alias obcaecati. Repellendus a perferendis aut cum.

20 |
21 | 22 | -------------------------------------------------------------------------------- /outline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Box Model 7 | 48 | 49 | 50 |
51 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis rerum tempora et corrupti quae in iste libero amet? Ipsa suscipit quibusdam necessitatibus cumque nam veniam? Accusamus qui libero provident in.

52 |
53 |
54 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est dolor voluptatibus possimus nobis dignissimos in laborum rerum maxime praesentium repudiandae tempora maiores et tempore, sapiente molestias nemo fugiat. Sunt, repudiandae?

55 |
56 | 57 | -------------------------------------------------------------------------------- /overlfow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Box Model 7 | 46 | 47 | 48 |
49 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis rerum tempora et corrupti quae in iste libero amet? Ipsa suscipit quibusdam necessitatibus cumque nam veniam? Accusamus qui libero provident in. 50 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio tempora quos sunt, eligendi eius amet aliquam vel pariatur laboriosam ab, minima repellat quasi? Accusantium, recusandae rerum officiis aut repudiandae dicta! 51 |

52 |
53 |
54 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est dolor voluptatibus possimus nobis dignissimos in laborum rerum maxime praesentium repudiandae tempora maiores et tempore, sapiente molestias nemo fugiat. Sunt, repudiandae?

55 |
56 | 57 | -------------------------------------------------------------------------------- /selector.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Selector 7 | 12 | 13 | 14 |

Ini title

15 |

Ini sub title

16 |

Ini artikel

17 | 18 |

Ini contoh

19 | 20 | Ini contoh 21 | 22 | 23 | -------------------------------------------------------------------------------- /table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Table 7 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 |
NamaNilai
Eko100
Eko100
Eko100
Eko100
Eko100
73 | 74 | -------------------------------------------------------------------------------- /text.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Text 7 | 27 | 28 | 29 |

Ini judul artikel

30 |

31 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat suscipit impedit ullam libero dolorem, praesentium pariatur. Quod vitae, tenetur cumque adipisci recusandae modi, deleniti amet neque impedit asperiores facilis tempora. 32 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat optio adipisci sunt quia, reiciendis nostrum placeat, temporibus quae nesciunt ad error voluptate expedita laudantium nihil blanditiis consectetur impedit reprehenderit nam! 33 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat exercitationem ipsam, delectus magnam quibusdam velit soluta doloribus eum aut accusantium, ab vitae debitis itaque iste sapiente alias mollitia excepturi? Voluptatem. 34 |

35 | 36 | -------------------------------------------------------------------------------- /writing-mode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Box Model 7 | 46 | 47 | 48 |
49 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis rerum tempora et corrupti quae in iste libero amet? Ipsa suscipit quibusdam necessitatibus cumque nam veniam? Accusamus qui libero provident in.

50 |
51 |
52 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est dolor voluptatibus possimus nobis dignissimos in laborum rerum maxime praesentium repudiandae tempora maiores et tempore, sapiente molestias nemo fugiat. Sunt, repudiandae?

53 |
54 | 55 | --------------------------------------------------------------------------------