{CSS} Cascading Style Sheet

Ukuran: px

Mulai penontonan dengan halaman:

Download "{CSS} Cascading Style Sheet"

Johan Setiabudi
7 tahun lalu
Tontonan:

1 {CSS} Cascading Style Sheet

2 mekanisme sederhana yang mengatur gaya / style (cth: warna, ukuran, posisi, dll) pada halaman web.

7 sebelum CSS

8 sebelum CSS

9 sebelum CSS

10 sebelum CSS

11 dengan CSS

12 dengan CSS HTML CSS

13 {CSS} Cascading Style Sheet

14 Cascading Style Sheet

15 1 CSS dapat digunakan di banyak halaman CSS

16 1 HTML dapat tampil berbeda dengan CSS berbeda

17 1 HTML dapat tampil berbeda dengan CSS berbeda

18 {CSS} anatomy

19 selector { property: value; }

20 selector value h1 { color: blue; } property

21 h1 { font-family: Courier New ; text-align: center; font-size: 30px; color: blue; }

22 selector { property: value; }

23 Selector

24 Selector h1 { color: blue; } CSS, pilih seluruh elemen h1, lalu ubah teks didalamnya menjadi berwarna biru

25 selector { property: value; }

26 Property & Value

27 Property & Value 350++

28 Property & Value docs/web/css/reference

29 menempatkan {CSS}

30 - embed <style></style>

31 - embed <style></style> - inline <p style= color: lightblue; > </p>

32 - embed <style></style> - inline <p style= color: lightblue; > </p> - external <link rel= stylesheet href= style.css >

33 Embed

34 Embed

35 Embed

36 Embed

37 Inline

38 Inline

39 Inline

40 Inline

41 external

42 external

43 external

44 external

45 external

46 font styling

47 Font font-family mengatur jenis font yang akan digunakan font-size mengatur ukuran font font-weight mengatur ketebalan font font-variant mengubah font menjadi small caps

48 Font font-style mengubah font menjadi bercetak miring line-height mengatur spasi antar baris

49 font-family nama font generic family

50 font-family nama font generic family

51 font-family nama font generic family nama font generic family

53 font-size px % em

54 font-weight lighter normal bold bolder

55 font-variant normal small-caps

56 font-variant normal small-caps

57 font-variant normal small-caps normal small-caps

58 font-style normal italic oblique

59 font-style oblique italic

60 line-height normal px em

61 CSS font shorthand / singkatan

64 font-weight font-style line-height font-variant font-size font-family

65 optional optional optional optional wajib wajib

66 text styling

67 komentar /* ini adalah komentar pada CSS */

68 Text color memberi warna pada tulisan text-align mengatur format paragraf / teks text-indent memberi indentasi pada paragraf / teks text-decoration mengatur dekorasi pada teks text-transform mengubah jenis huruf menjadi huruf besar, kecil / kapital

69 Text letter-spacing mengatur spasi antar huruf word-spacing mengatur spasi antar kata

70 color nama warna red, lightseagreen, royalblue, hexadecimal #ff0000, #20b2aa, #4169e1, rgb rgb(255,0,0), rgb(32,178,170), rgb(65,105,225),

71 text-align left right center justify

72 text-indent px %

73 text-decoration none underline overline line-through

74 text-transform none lowercase uppercase capitalize

75 letter-spacing normal px

76 word-spacing normal px

77 CSS background

78 Background background-color mengatur warna pada background background-image mengatur gambar yang akan digunakan pada background background-position mengatur posisi gambar pada background background-repeat mengatur jenis pengulangan gambar pada background

79 background-color nama warna red, lightseagreen, royalblue, hexadecimal #ff0000, #20b2aa, #4169e1, rgb rgb(255,0,0), rgb(32,178,170), rgb(65,105,225),

80 background-image url

81 background-image url

82 background-position top left top center top right center left center center center right bottom left bottom center bottom right x% y% x-pos y-pos

83 background-repeat repeat repeat-x repeat-y no-repeat

84 CSS background shorthand / singkatan

85 background: color url() position repeat;

86 background: lightgreen url(bg.png) top left no-repeat;

87 CSS selector basic

88 digunakan pada css untuk mengenali sebuah elemen HTML yang akan diberi style

89 selectors elemen HTML id class complex selector

90 elemen HTML selector sederhana

91 elemen HTML operator, / koma (dan)

92 elemen HTML operator / spasi (yang ada di-dalam)

93 id menggunakan #

94 id

95 class menggunakan.

96 class

97 elemen HTML + id atau class menggabungkan elemenhtml dengan id atau class

98 CSS pseudo-class

99 kelas semu yang dimiliki oleh sebuah elemen HTML, yang membuat kita dapat mendefinisikan style pada keadaan tertentu dari elemen tersebut.

100 pseudo-class yang berhubungan dengan link :link style default pada sebuah link (a yang memiliki href) :hover style ketika kursor mouse berada diatas sebuah link / elemen :active style ketika sebuah link di-klik (keadaan aktif) :visited style ketika sebuah link sudah pernah dikunjungi sebelumnya (menggunakan browser yang sama)

101 pseudo-class yang berhubungan dengan posisi elemen (1) :first-child memilih elemen pertama dari sebuah parent (elemen pembungkusnya) :last-child memilih elemen terakhir dari sebuah parent (elemen pembungkusnya) :nth-child(n) memilih elemen ke-n dari sebuah parent (elemen pembungkusnya). n bisa berarti urutan (1), (2), atau pola (2n), (3n+2), (4n-1) atau ganjil dan genap (even) & (odd)

102 pseudo-class yang berhubungan dengan posisi elemen (2) :first-of-type memilih elemen pertama dari sebuah jenis / tipe tag :last-of-type memilih elemen terakhir dari sebuah jenis / tipe tag

103 thankyou.

dokumen-dokumen yang mirip

CSS Cascading Style Sheet

CSS Cascading Style Sheet Pengenalan CSS CSS adalah singkatan dari Cascading Style Sheets CSS (Cascading Style Sheet) digunakan untuk melengkapi file HTML, dan tugas utamanya adalah menetapkan aturan tampilan/style