Install Web App

BRIEF

MINA

CSS

Memahami Persingkatan CSS untuk Font: Penggunaan Singkat yang Efisien

profil-penulis

Nuzul Karomah

26 Maret 2024

 

CSS fonts adalah kumpulan properti CSS yang digunakan untuk mengontrol tampilan teks pada halaman web. Properti CSS fonts memungkinkan pengembang web untuk menentukan jenis font, ketebalan, gaya, ukuran, dan variasi lainnya dari teks dalam elemen HTML. Dengan menggunakan properti CSS fonts, pengembang dapat mencapai desain yang konsisten dan menarik untuk teks di situs web.

1. Bentuk Lengkapnya

.item {
 font-style: italic;
 font-weight: bold;
 font-size: 15px;
 font-family: 'Poppins' sans-serif;
}

Program di atas adalah sekelompok aturan CSS (Cascading Style Sheets) yang digunakan untuk mengatur tampilan teks pada halaman web. Berikut adalah penjelasan singkat untuk setiap aturan:

  1. font-style: italic;: Aturan ini mengatur gaya teks menjadi miring (italic). Ini akan membuat teks miring secara visual.

  2. font-weight: bold;: Aturan ini mengatur ketebalan teks menjadi tebal (bold). Ini akan membuat teks terlihat lebih tebal dan menonjol.

  3. font-size: 15px;: Aturan ini mengatur ukuran teks menjadi 15 piksel. Ini menentukan ukuran teks secara relatif terhadap ukuran default.

  4. font-family: poppins sans-serif;: Aturan ini mengatur jenis font yang akan digunakan untuk teks. Font yang ditentukan adalah "Poppins" dengan fallback ke jenis font sans-serif. Jadi, jika font Poppins tidak tersedia, browser akan mencari jenis font sans-serif lainnya.

Dengan menggunakan aturan-aturan ini, Anda dapat mengontrol tampilan teks di halaman web Anda untuk membuatnya terlihat sesuai dengan keinginan Anda.

2. Bentuk Singkatnya

.item {
  font: italic bold 15px 'Poppins' sans-serif;
}

Program di atas adalah aturan CSS yang mengatur tampilan teks untuk elemen-elemen dengan kelas ".item". Berikut adalah penjelasan singkat untuk aturan tersebut:

  1. font: italic bold 15px 'Poppins' sans-serif;: Ini adalah singkatan dari aturan-aturn font yang lebih terinci, yang mencakup:
    • italic: Menetapkan gaya teks menjadi miring.
    • bold: Menetapkan ketebalan teks menjadi tebal.
    • 15px: Menetapkan ukuran teks menjadi 15 piksel.
    • 'Poppins': Menetapkan jenis font menjadi "Poppins".
    • sans-serif: Fallback ke jenis font sans-serif jika "Poppins" tidak tersedia.

Dengan aturan ini, elemen-elemen dengan kelas ".item" akan menggunakan teks miring, tebal, dengan ukuran 15 piksel, menggunakan jenis font "Poppins". Jika "Poppins" tidak tersedia, browser akan menggunakan jenis font sans-serif sebagai alternatif.

Artikel Lainnya Dengan Kategori Terkait :

1. 1 Menit Langsung Paham GAP Property CSS

2. 3 Trik Pada CSS

3. 4 Layout CSS Modern

4. 5 Tata Letak Modern di CSS

5. 5 Website Generator CSS

6. ALIGN ITEMS

7. ALIGN-SELF

8. Beberapa Cara Untuk Memusatkan Item Menggunakan CSS

9. Beberapa Contoh Gaya Powerfull Snippet

10. Beberapa Variasi Style CSS Button

11. Belajar CSS #01 | Apa Itu CSS?

12. Belajar CSS #02 | Inline CSS

13. Belajar CSS #03 | Internal CSS

14. Belajar CSS #04 | External CSS

15. Belajar CSS #05 | Syntax CSS

16. Belajar CSS #06 | Belajar lebih banyak cara menggunakan CSS Selector

17. Belajar CSS #07 | Pseudo-class

18. Belajar CSS #08 | Definisi Box Model

19. Belajar CSS #09 | Perhitungan Ukuran Lebar dan Tinggi Box Model

20. Belajar CSS #10 | box-sizing: border-box

21. Belajar CSS #11 | Display block

22. Belajar CSS #12 | Belajar display-inline

23. Belajar CSS #13 | Belajar Display Inline Block

24. Belajar CSS #14 | Position-static

25. Belajar CSS #15 | Position-relative

26. Belajar CSS #16 | position absolute

27. Belajar CSS #17 | position fixed

28. Belajar CSS #18 | Position Sticky

29. Belajar CSS #19 | Web Responsif - Viewport

30. Belajar CSS #20 | Menggunakan presentase untuk menentukan nilai lebar

31. Belajar CSS #21 | Properti Max width 100%

32. Belajar CSS #22 | Satuan "VW" Viewport Width

33. Belajar CSS #23 | Media query

34. Belajar CSS #24 | Belajar display-inline

35. Belajar CSS #25 | Display-none

36. Belajar Membuat Fitur Interaktif Efek Flipping Card Menggunakan CSS

37. Belajar Mengenal Neon Text Pada CSS

38. Buat Desain Web Responsif CSS

39. Cara Membuat Badges Dengan HTML & CSS

40. Cara Membuat Balon Obrolan dengan CSS

41. Cara Membuat Efek Teks Berisi Gambar Pakai CSS

42. Cara Membuat Pemisah Antar Elemen di CSS

43. Cara Membuat Underline Tabs CSS

44. Cara Mengatur Proporsi Sebuah Teks di CSS

45. Contoh Penggunaan Grid Shorthand Area

46. CSS Media Queries

47. CSS MODERN LAYOUT

48. CSS Positioning

49. CSS SHORTHAND

50. Explorasi CSS Pulse Loader: Cara Efektif Membuat Animasi Form dengan CSS

51. Faded Background in CSS

52. GAP IN CSS FLEXBOX

53. Gaya Kartu Retro dalam Desain Web dengan CSS

54. Hover Effect Menggunakan CSS

55. How to Make Border Radius in CSS

56. How to make Card-Profile

57. Implementasi Aminasi Label Menggunakan CSSS

58. Implementasi Aspect - ratio CSS

59. Implementasi Jam Analog Sederhana

60. Input HTML Yang Perlu Diketahui

61. Insert Properti dalam CSS: Kunci Mengatur Jarak dalam Elemen HTML

62. Kembangkan Tampilanmu: 10 Trik Keren dengan CSS Filter 😎

63. Macam-Macam Properti Di CSS

64. Mask Text With Image In CSS

65. Memahami Anatomi CSS: Gaya yang Tepat untuk Elemen HTML

66. Memahami Efek Vignette dalam Desain Grafis dan Implementasinya dalam Kode HTML/CSS

67. Memahami Konsep Stretch Background dalam Desain Web : Membuat Gambar Latar Belakang Sesuai dengan Ukuran Elemen

68. Memahami Persingkatan CSS untuk Font: Penggunaan Singkat yang Efisien

69. Memahami Responsivitas Web dengan CSS :hover

70. Membuat Bentuk Organik yang Unik Menggunkan Simple Blob Shape

71. Membuat Button Menggunakan Tag Button

72. Membuat Latar Belakang "Faded" yang Elegan dengan CSS

73. Membuat Layout Yang Responsif Dengan CSS

74. Membuat Tampilan yang lebih Teratur menggunakan Elemen Opgroup dalam Select HTML

75. Membuat Tata Letak Secara Vertikal dan Horizontal dengan CSS Grid

76. Membuat Teks Lebih Menarik dengan CSS: Menggunakan Properti text-decoration

77. Mempelajari Border Pada CSS dan Trik Penulisan Singkat

78. Mempelajari Button Menggunakan Tag Button

79. Mempelajari Filter Blur Pada CSS

80. Mempelajari Penggunaan Margin dalam CSS

81. Mempelajari Selector :active Pada CSS

82. Mempercantik Pengalaman Pengguna dengan Efek Hover Menggunakan Selector CSS :has()

83. Mengatasi Teks Panjang dengan Efek Elipsis Long Text

84. Mengenal 3 Trik Pemusatan div

85. Mengenal CSS Clip-Path: Memotong Elemen dengan Berbagai Bentuk

86. Mengenal CSS Shapes: Membuat Bentuk-Bentuk Kreatif di Halaman Web

87. Mengenal Efek Kaca Glassmorphism Pada CSS

88. Mengenal Flex Wrap Pada CSS

89. Mengenal Flexbox - Flex Direction CSS

90. Mengenal Macam-macam Border Pada CSS

91. Mengenal Nilai Selector :nth-child() dalam CSS

92. Mengenal Properti CSS accent-color dan Penggunaannya

93. Mengenal Sematik Pada HTML

94. Menggunakan :is() untuk Menyederhanakan Selektor yang Rumit dalam CSS

95. Menggunakan Pseudo-Class :is() untuk Menjadikan Tombol Lebih Interaktif

96. Mengoptimalkan Tampilan Halaman Web dengan Media Query Orientation

97. Perbedaan Antara 'box-shadow' dan 'drop-shadow' dalam CSS untuk Efek Bayangan🌟

98. Perbedaan Antara content-box dan border-box dalam CSS:

99. Perbedaan Box Shadow vs Drop Shadow

100. Properti Justify-Content dalam CSS Flexbox

101. Pseudo-Class :has() dalam CSS

102. Responsive Button

103. Retro Card In CSS

104. Sebuah Trik Script Singkat Menggunakan CSS

105. Snippet

106. Stlanted Section

107. Syntax Baru Rentang Media Query pada CSS

108. TABULAR NUMBERS

109. Tampilan Modern dan Fungsional: Memahami Keunggulan Blur Sticky Navbar dalam Desain Situs Web

110. Tips Dasar CSS Yang Perlu Diketahui

111. Tips untuk Menggunakan Border Radius dalam Desain 🌟

112. Unveiling Hidden CSS Tricks

113. Zoom on hover

Masuk Terlebih dahulu untuk berkomentar

Paling baru
Lihat Lainnya