{"id":48054,"date":"2024-07-10T08:24:00","date_gmt":"2024-07-10T01:24:00","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=48054"},"modified":"2024-09-05T15:04:02","modified_gmt":"2024-09-05T08:04:02","slug":"belajar-css-bagian-7","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-7\/","title":{"rendered":"Belajar CSS Bagian 7: Mengatur Text Formatting dengan CSS"},"content":{"rendered":"\n<p>Setelah pada series belajar CSS bagian 6 kita belajar tentang <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-6\/\" target=\"_blank\" rel=\"noopener\" title=\"\">menggunakan Background di CSS<\/a>, dalam artikel ini kami akan melanjutkan pembahasannya tentang cara mengatur text <em>formatting <\/em>dengan CSS. <\/p>\n\n\n\n\n\n<p>Memformat teks dengan <a href=\"https:\/\/www.rumahweb.com\/journal\/css-adalah\/\" target=\"_blank\" rel=\"noopener\" title=\"css adalah\">CSS<\/a> yang tepat dapat meningkatkan tampilan antarmuka pengguna (<em>user interface<\/em>) pada website, menjadikannya lebih menarik dan mudah dibaca.<\/p>\n\n\n\n<p>Hal ini penting untuk dipahami, karena teks adalah elemen yang sering kita temui saat mengelola atau membangun halaman web. Simak tutorial belajar CSS bagian ke 6 tentang text <em>formatting <\/em>berikut ini.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa itu Teks <em>Formatting<\/em>?<\/h2>\n\n\n\n<p>Teks <em>formatting <\/em>adalah penerapan <em>styling <\/em>yang digunakan untuk mengatur dan mengontrol tampilan dan letak teks dalam <em>script <\/em>html atau dalam tampilan halaman website menggunakan <em>script <\/em>CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Jenis Properti Teks <em>Formatting<\/em><\/h2>\n\n\n\n<p>Pada dasarnya, penulisan <em>formating <\/em>teks sama seperti penulisan CSS pada umumnya yang telah dibahas pada artikel <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-3\/\" target=\"_blank\" rel=\"noopener\" title=\"\">mengenal sintaks dasar CSS<\/a>. Namun secara umum, properti yang sering digunakan dan ditemukan untuk teks <em>formatting <\/em>adalah:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>font<\/li>\n\n\n\n<li>text-color&nbsp;<\/li>\n\n\n\n<li>text-align&nbsp;<\/li>\n\n\n\n<li>text-decoration&nbsp;<\/li>\n\n\n\n<li>text-transform<\/li>\n\n\n\n<li>text-spacing&nbsp;<\/li>\n\n\n\n<li>letter-spacing&nbsp;<\/li>\n\n\n\n<li>line-height&nbsp;<\/li>\n\n\n\n<li>direction<\/li>\n<\/ul>\n\n\n\n<p>Dalam artikel ini, kami akan membahas semua teks <em>formatting <\/em>diatas, agar Anda lebih memahami CSS secara lebih mendalam.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Font<\/h3>\n\n\n\n<p>Font yang tepat dapat membuat tampilan antarmuka pengguna (<em>user interface<\/em>) pada website lebih menarik dan mudah dibaca. Berikut adalah beberapa properti font yang sering digunakan.<\/p>\n\n\n\n<p><strong>Font Family<\/strong> : Menentukan jenis huruf yang digunakan.<br \/>Contoh kode CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>font-family: Arial, sans-serif;<\/code><\/pre>\n\n\n\n<p><strong>Font Size<\/strong> : Menentukan ukuran huruf.<br \/>Contoh kode CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>font-size: 16px;<\/code><\/pre>\n\n\n\n<p><strong>Font Style<\/strong> : Menentukan gaya huruf (normal, italic, oblique).<br \/>Contoh kode css :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>font-style: italic;<\/code><\/pre>\n\n\n\n<p><strong>Font Weight<\/strong> : Menentukan ketebalan huruf (normal, bold, bolder, lighter, atau nilai numerik).<br \/>Contoh kode css :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>font-weight: bold;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Text-color<\/h3>\n\n\n\n<p>Untuk mengatur warna teks, anda dapat mempelajari pada artikel berikut <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-5\/\" target=\"_blank\" rel=\"noopener\" title=\"\"><strong>Memberikan Warna Pada Text<\/strong><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Text-align<\/h3>\n\n\n\n<p>Properti text-align adalah properti untuk mengatur perataan teks seperti rata kiri, rata tengah, posisi di tengah dan rata kiri dan kanan.<\/p>\n\n\n\n<p>nilai yang digunakan yaitu :<br \/><strong>left <\/strong>: penulisan rata kiri<br \/><strong>right <\/strong>: penulisan rata kanan<br \/><strong>center <\/strong>: penulisan rata tengah<br \/><strong>justify <\/strong>: penulisan rata kiri dan kanan<\/p>\n\n\n\n<p>Contoh kode :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>text-align: center;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Text-decoration<\/h3>\n\n\n\n<p>Text-decoration adalah properti untuk memberikan garis pada teks seperti garis bawah, garis atas, dan garis di tengah (teks tercoret).<\/p>\n\n\n\n<p>nilai yang digunakan yaitu :<br \/><strong>none <\/strong>: penulisan tidak menggunakan dekorasi garis apapun;<br \/><strong>underline <\/strong>: penulisan akan memberikan dekorasi garis bawah;<br \/><strong>overline <\/strong>: penulisan dekorasi dengan garis di atas teks;<br \/><strong>line-through<\/strong> : penulisan dekorasi garis di tengah atau teks tercoret.<\/p>\n\n\n\n<p>Contoh kode :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>text-decoration: underline;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Text-transform<\/h3>\n\n\n\n<p>Text-transform adalah properti untuk merubah bentuk teks seperti merubah menjadi huruf besar semua, huruf kecil semua, dan huruf pertama hanya kapital<\/p>\n\n\n\n<p>nilai yang digunakan yaitu :<br \/><strong>lowercase <\/strong>: merubah semua teks menjadi huruf kecil;<br \/><strong>uppercase <\/strong>: merubah semua teks menjadi huruf kapital (besar);<br \/><strong>capitalize <\/strong>: merubah teks pada huruf pertama kata menjadi kapital.<br \/><strong>none <\/strong>: tidak ada perubahan pada text.<\/p>\n\n\n\n<p>Contoh kode :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>text-transform: uppercase;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Text-shadow<\/h3>\n\n\n\n<p>Properti text-shadow adalah properti untuk memberikan bayangan pada teks. Format penulisan properti text-shadow sebagai berikut :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>text-shadow: x y blur color;<\/code><\/pre>\n\n\n\n<p>nilai yang digunakan yaitu :<br \/><strong>x<\/strong> : jarak bayangan sumbu x (vertikal).<br \/><strong>y <\/strong>: jarak bayangan sumbu y (horizontal).<br \/><strong>blur <\/strong>: ukuran kepudaran dari bayangan.<br \/><strong>color<\/strong> : warna bayangan.<\/p>\n\n\n\n<p>Contoh kode :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>text-shadow: 1px 1px 2px #000000;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Word-spacing<\/h3>\n\n\n\n<p>Properti wext-spacing adalah properti untuk mengatur jarak antar kata.<\/p>\n\n\n\n<p>Contoh kode :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>word-spacing: 4px;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Letter-spacing<\/h3>\n\n\n\n<p>Properti letter-spacing adalah properti untuk mengatur jarak antar huruf.<\/p>\n\n\n\n<p>Contoh kode :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>line-height: 1.5;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Direction<\/h3>\n\n\n\n<p>Properti direction adalah properti untuk untuk menentukan arah baca teks. Contohnya dari kiri ke kanan (ltr) atau dari kanan ke kiri (rtl).<\/p>\n\n\n\n<p>Contoh kode :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>direction: rtl;<\/code><\/pre>\n\n\n\n<p>Contoh screenshoot penggunaan direction rtl :<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/06\/image-6.png\"><img loading=\"lazy\" decoding=\"async\" width=\"735\" height=\"263\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/06\/image-6.png\" alt=\"direction rtl\" class=\"wp-image-48088\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/06\/image-6.png 735w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/06\/image-6-300x107.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/06\/image-6-370x132.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/06\/image-6-270x97.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/06\/image-6-570x204.png 570w\" sizes=\"auto, (max-width: 735px) 100vw, 735px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Contoh Penerapan Text <em>Formatting<\/em><\/h2>\n\n\n\n<p>Berikut adalah salah satu contoh kode lengkap yang dapat Anda gunakan untuk menerapkan text <em>formatting <\/em>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Mengatur Text Formatting dengan css&lt;\/title&gt;\n    &lt;meta http-equiv=\"Content-Type\" content=\"text\/html;charset=UTF-8\"&gt;\n    &lt;style&gt;\n        .font-cursive {\n            font-family: cursive;\n        }\n        .font-size {\n            font-size: 24px;\n        }\n        .font-style {\n            font-style: italic;\n        }\n        .font-weight {\n            font-weight: bold;\n        }\n        .text-color {\n            color: red;\n        }\n        .text-align {\n            text-align: center;\n        }\n        .text-decoration {\n            text-decoration: underline;\n        }\n        .text-transform {\n            text-transform: uppercase;\n        }\n        .text-shadow {\n            text-shadow: 1px 1px 2px blue;\n        }\n        .word-spacing {\n            word-spacing: 10px;\n        }\n        .letter-spacing {\n            letter-spacing: 10px;\n        }\n        .line-height{\n            line-height: 2.5;\n        }\n        .direction{\n            direction: rtl;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;p class=\"font-cursive\"&gt; Ini adalah paragraf yang &lt;b&gt;menggunakan font-family cursive&lt;\/b&gt;&lt;\/p&gt;\n    &lt;p class=\"font-size\"&gt;Ini adalah paragraf yang &lt;b&gt;menggunakan font-size: 24px&lt;\/b&gt;&lt;\/p&gt;\n    &lt;p class=\"font-style\"&gt;Ini adalah paragraf yang &lt;b&gt;menggunakan font-style: italic&lt;\/b&gt;&lt;\/p&gt;\n    &lt;p class=\"font-weight\"&gt;Ini adalah paragraf yang &lt;b&gt;menggunakan font-weight: italic&lt;\/b&gt;&lt;\/p&gt;\n    &lt;p class=\"text-color\"&gt;Ini adalah paragraf yang &lt;b&gt;menggunakan color: red&lt;\/b&gt;&lt;\/p&gt;\n    &lt;p class=\"text-align\"&gt;Ini adalah paragraf yang &lt;b&gt;menggunakan text-align: center&lt;\/b&gt;&lt;\/p&gt;\n    &lt;p class=\"text-decoration\"&gt;Ini adalah paragraf yang &lt;b&gt;menggunakan text-decoration: underline&lt;\/b&gt;&lt;\/p&gt;\n    &lt;p class=\"text-transform\"&gt;Ini adalah paragraf yang &lt;b&gt;menggunakan text-transform: uppercase&lt;\/b&gt;&lt;\/p&gt;\n    &lt;p class=\"text-shadow\"&gt;Ini adalah paragraf yang &lt;b&gt;menggunakan text-shadow: blue&lt;\/b&gt;&lt;\/p&gt;\n    &lt;p class=\"word-spacing\"&gt;Ini adalah paragraf yang &lt;b&gt;menggunakan word-spacing: 20px&lt;\/b&gt;&lt;\/p&gt;\n    &lt;p class=\"letter-spacing\"&gt;Ini adalah paragraf yang &lt;b&gt;menggunakan letter-spacing: 20px&lt;\/b&gt;&lt;\/p&gt;\n    &lt;p class=\"line-height\"&gt;Ini adalah paragraf &lt;br&gt;yang &lt;b&gt;menggunakan line-height: 2.5&lt;\/b&gt;&lt;\/p&gt;\n    &lt;p class=\"direction\"&gt;Ini adalah paragraf yang &lt;b&gt;menggunakan direction: rtl&lt;\/b&gt;&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Ketika dicoba akses melalui browser, tampilannya akan seperti <em>screenshot <\/em>berikut :<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/06\/image-7.png\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"844\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/06\/image-7.png\" alt=\"Mengatur Text Formatting dengan css - belajar css\" class=\"wp-image-48089\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/06\/image-7.png 960w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/06\/image-7-300x264.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/06\/image-7-768x675.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/06\/image-7-370x325.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/06\/image-7-270x237.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/06\/image-7-570x501.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/06\/image-7-740x651.png 740w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Kesimpulan<\/h2>\n\n\n\n<p>Text <em>formatting <\/em>digunakan untuk mengatur dan menata tampilan teks agar lebih rapi, menarik, dan mudah dibaca. Dengan text formatting, pengunjung website Anda akan lebih nyaman saat membaca informasi di web Anda, sehingga pesan di website dapat disampaikan dengan lebih efektif.<\/p>\n\n\n\n<p>Pada series belajar CSS bagian ke 8, kami akan menjelaskan tentang <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-8\" target=\"_blank\" rel=\"noopener\" title=\"\">mengatur ukuran elemen dengan CSS<\/a>.<\/p>\n\n\n\n<p>Demikian series belajar CSS bagian ke 7 tentang text <em>formatting<\/em>. Simak terus artikel belajar CSS dari Rumahweb Indonesia, untuk meningkatkan skill dan pemahaman CSS yang Anda kuasai. Semoga bermanfaat.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Setelah pada series belajar CSS bagian 6 kita belajar tentang menggunakan Background di CSS, dalam artikel ini kami akan melanjutkan pembahasannya tentang cara mengatur text formatting dengan CSS. Memformat teks dengan CSS yang tepat dapat meningkatkan tampilan antarmuka pengguna (user interface) pada website, menjadikannya lebih menarik dan mudah dibaca. Hal ini penting untuk dipahami, karena [&hellip;]<\/p>\n","protected":false},"author":353,"featured_media":48277,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[1752,1751,2186],"class_list":{"0":"post-48054","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-design","8":"tag-belajar-css","9":"tag-css","10":"tag-tutorial-css"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/48054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=48054"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/48054\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/48277"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=48054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=48054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=48054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}