{"id":8541,"date":"2019-06-21T13:18:23","date_gmt":"2019-06-21T13:18:23","guid":{"rendered":"https:\/\/www.webhozz.com\/blog\/?p=8541"},"modified":"2019-07-05T11:18:38","modified_gmt":"2019-07-05T11:18:38","slug":"mengatur-style-text-font-dan-link","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/mengatur-style-text-font-dan-link\/","title":{"rendered":"Belajar CSS : Mengatur Style Text, Font dan Link"},"content":{"rendered":"\n

Pada kesempatan kali ini kita akan mempelajari tentang beberapa perintah dari properti CSS, yaitu Text, Font dan Link.<\/p>\n\n\n\n

Ketiga properti ini adalah jenis properti dari CSS yang digunakan untuk mengatur tampilan-tampilan teks pada halaman website.<\/p>\n\n\n\n

Oke, berikut ini kita bahas satu persatu. Yuk, lanjutkan pembahasannya.<\/p>\n\n\n\n\n\n\n\n

1, Text<\/strong><\/p>\n\n\n\n

Text merupakan teks pada elemen-elemen HTML yang bisa ditata lagi. Text ini ditata dengan beberapa properti pengatur format teks. Untuk text ini, bisa menggunakan menggunakan properti text-align, text-transform, dan color. Paragrafnya diindentasi, disejajarkan, dan jarak antar karakter ditentukan. Oke langsung aja kita praktek ya\u2026<\/p>\n\n\n\n

Tapi kali ini kita akan menggunakan jenis CSS yang internal aja, apa itu???<\/p>\n\n\n\n

Kali ini, elemen HTMLnya didefinisikan pada tag <head> menggunakan tag <style><\/p>\n\n\n\n

Sebagai contoh format penulisannya.<\/p>\n\n\n

\n<head>\n        <style>\n            elemen_html\n            {\n                properti : value;\n            }\n        <\/style>\n    <\/head>\n<\/pre><\/div>\n\n\n
Oke, langsung aja.<\/p>\n\n\n
\n<!DOCTYPE html>\n    <html>\n        <head>\n            <title>Teks Format<\/title>\n            <style>\n                h2\n                {\n                    text-align: center;\n                }\n            <\/style>\n        <\/head>\n        <body>\n            \n            <h2>Text Align<\/h2>\n\n        <\/body>\n    <\/html>\n<\/pre><\/div>\n\n\n
Maka, akan menghasilkan tampilan seperti ini pada browser.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
-Text Align-<\/strong><\/p>\n\n\n\n
Nah, kita juga bisa memberikan nama elemen HTML dengan nama class selectornya. Formatnya cukup “.nama_selector” dan sisipkan atribut class=”” pada elemen HTML. <\/p>\n\n\n\n
Sebagai contohnya, bisa kita lihat pada contoh berikut ini.<\/p>\n\n\n
\n<!DOCTYPE html>\n    <html>\n        <head>\n            <title>Teks Format<\/title>\n            <style>\n                .tengah\n                {\n                    text-align: center;\n                }\n\n                .kiri\n                {\n                    text-align: left;\n                }\n\n                .kanan\n                {\n                    text-align: right;\n                }\n            <\/style>\n        <\/head>\n        <body>\n            \n            <h2 class="tengah">Teks Tengah<\/h2>\n            <h2 class="kiri">Teks Kiri<\/h2>\n            <h2 class="kanan">Teks Kanan<\/h2>\n\n        <\/body>\n    <\/html>\n<\/pre><\/div>\n\n\n
Maka, akan menghasilkan tampilan seperti ini pada browser.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
-Text Transform-<\/strong><\/p>\n\n\n\n
Properti text-transform ini biasanya digunakan untuk menentukan huruf besar dan kecil dalam teks elemen HTML.<\/p>\n\n\n\n
Selain itu, dapat digunakan untuk mengubah semua teks HTML menjadi huruf besar atau kecil.<\/p>\n\n\n\n
Atau kita bisa mengubahnya menjadi huruf kapital untuk huruf pertama dari setiap kata dalam sebuah website.<\/p>\n\n\n\n
Oke, langsung aja kita mulai.<\/p>\n\n\n
\n<!DOCTYPE html>\n    <html>\n        <head>\n            <title>Teks Transform<\/title>\n            <style>\n                .aperkes\n                {\n                    text-transform: uppercase;\n                }\n\n                .lowerkes\n                {\n                    text-transform: lowercase;\n                }\n\n                .kapital\n                {\n                    text-transform: capitalize;\n                }\n            <\/style>\n        <\/head>\n        <body>\n            \n            <h2 class="aperkes">teks uppercase<\/h2>\n            <h2 class="lowerkes">teks lowercase<\/h2>\n            <h2 class="kapital">teks capitalize<\/h2>\n\n        <\/body>\n    <\/html>\n<\/pre><\/div>\n\n\n
Maka, akan menghasilkan tampilan seperti ini pada browser.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Pada gambar di atas kita lihat format teksnya sudah berubah. Jika kita lihat pada script HTMLnya, kita tulis dengan huruf yang bukan huruf kapital. Tapi perbedaan hasilnya, bisa kita lihat pada gambar di atas.<\/p>\n\n\n\n
<\/p>\n\n\n\n
-Color-<\/strong><\/p>\n\n\n\n
Properti color digunakan untuk mengubah warna teks pada elemen HTML. Hampir mirip backround-color, hanya saja backround-color untuk memberikan warna pada latar belakang elemen.<\/p>\n\n\n\n
Oke, langsung aja kita coba.<\/p>\n\n\n
\n<!DOCTYPE html>\n    <html>\n        <head>\n            <title>Teks Color<\/title>\n            <style>\n                .merah\n                {\n                    color: red;\n                }\n\n                .kuning\n                {\n                    color: yellow;\n                }\n\n                .hijau\n                {\n                    color: green;\n                }\n            <\/style>\n        <\/head>\n        <body>\n            \n            <h2 class="merah">Merah<\/h2>\n            <h2 class="kuning">Kuning<\/h2>\n            <h2 class="hijau">Hijau<\/h2>\n\n        <\/body>\n    <\/html>\n<\/pre><\/div>\n\n\n
Maka, akan menghasilkan tampilan seperti ini pada browser.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
2. Font<\/strong><\/p>\n\n\n\n
Properti font CSS berfungsi menentukan jenis font yang akan dipakai, huruf yang tebal, mengubah ukuran, dan gaya huruf.<\/p>\n\n\n\n
-Font Family-<\/strong><\/p>\n\n\n\n
Font family adalah salah satu properti CSS yang digunakan untuk menentukan jenis font yang akan dipakai.<\/p>\n\n\n\n
Contohnya, kita bisa lihat pada script di bawah ini.<\/p>\n\n\n
\n<!DOCTYPE html>\n    <html>\n        <head>\n            <title>Font Family<\/title>\n            <style>\n                .arial\n                {\n                    font-family: arial;\n                }\n\n                .calibri\n                {\n                    font-family: calibri;\n                }\n\n                .tahoma\n                {\n                    font-family: tahoma;\n                }\n\n                .comic\n                {\n                    font-family: comic sans MS;\n                }\n\n                .cambria\n                {\n                    font-family: cambria;\n                }\n            <\/style>\n        <\/head>\n        <body>\n            \n            <h3 class="arial">Font Arial<\/h3>\n            <h3 class="calibri">Font Calibri<\/h3>\n            <h3 class="tahoma">Font Tahoma<\/h3>\n            <h3 class="comic">Font Comic<\/h3>\n            <h3 class="cambria">Font Cambria<\/h3>\n\n        <\/body>\n    <\/html>\n<\/pre><\/div>\n\n\n
Maka, akan menghasilkan tampilan seperti ini pada browser.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Untuk pergantian jenis font, tinggal valuenya aja yang diubah. <\/p>\n\n\n\n
Kita bisa mengganti dengan font-font yang tersedia pada perangkat yang kita gunakan (PC, Laptop, Netbook, dll).<\/p>\n\n\n\n
<\/p>\n\n\n\n
-Font Style-<\/strong><\/p>\n\n\n\n
Properti font-style biasanya sebagian besar digunakan untuk menentukan teks miring. <\/p>\n\n\n\n
Properti ini memiliki tiga value:<\/p>\n\n\n\n
normal – Teks ditampilkan secara normal
italic – Teks ditampilkan dalam huruf miring
oblique – Teksnya “condong” (oblique sangat mirip dengan miring, tetapi kurang didukung)<\/p>\n\n\n\n
Oke, kita langsung coba aja.<\/p>\n\n\n
\n<!DOCTYPE html>\n        <html>\n        <head>\n            <title>Font Style<\/title>\n            <style>\n                .normal\n                {\n                    font-style: normal;\n                }\n\n                .miring\n                {\n                    font-style: italic;\n                }\n\n                .oblique\n                {\n                    font-style: oblique;\n                }\n            <\/style>\n        <\/head>\n        <body>\n            \n            <h3 class="normal">Teks Normal<\/h3>\n            <h3 class="miring">Teks Miring<\/h3>\n            <h3 class="oblique">Teks Oblique<\/h3>\n\n        <\/body>\n    <\/html>\n<\/pre><\/div>\n\n\n
Maka, seperti inilah tampilannya di Browser.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
-Font Size-<\/strong><\/p>\n\n\n\n
Properti Font size digunakan untuk mengubah ukuran teks pada elemen HTML.<\/p>\n\n\n\n
Adapun satuan ukuran yang digunakan dalam setingannya adalah px atau em.<\/p>\n\n\n\n
Oke, langsung aja.<\/p>\n\n\n
\n<!DOCTYPE html>\n    <html>\n        <head>\n            <title>Font Size<\/title>\n            <style>\n                .pake-px\n                {\n                    font-size: 20px;\n                }\n\n                .pake-em\n                {\n                    font-size: 2em;\n                }\n            <\/style>\n        <\/head>\n        <body>\n            \n            <p>Ukuran Paragraf Normal<\/p>\n            <p class="pake-px">Ukuran Paragraf menggunakan satuan px<\/p>\n            <p class="pake-em">Ukuran Paragraf menggunakan satuan em<\/p>\n\n        <\/body>\n    <\/html>\n<\/pre><\/div>\n\n\n
Maka, seperti inilah tampilannya di Browser.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
-Font Weight-<\/strong><\/p>\n\n\n\n
Properti Font Weight ini digunakan untuk menebalkan teks pada elemen HTML. <\/p>\n\n\n\n
Hampir mirip Font Style, hanya saja font style untuk memiringkan teks elemen HTML.<\/p>\n\n\n\n
Oke, langsung aja.<\/p>\n\n\n
\n<!DOCTYPE html>\n    <html>\n        <head>\n            <title>Font Weight<\/title>\n            <style>\n                .normal\n                {\n                    font-weight: normal;\n                }\n\n                .tebal\n                {\n                    font-weight: bold;\n                }\n            <\/style>\n        <\/head>\n        <body>\n\n            <p class="normal">Teks Normal<\/p>\n            <p class="tebal">Teks Font Weight: Bold<\/p>\n\n        <\/body>\n    <\/html>\n<\/pre><\/div>\n\n\n
Maka, seperti inilah tampilannya di Browser.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
3. Link<\/strong><\/p>\n\n\n\n
Sebelumnya sudah pernah kita bahas teks link ini. Fungsinya untuk berpindah halaman.<\/p>\n\n\n\n
Yang mana kita gunakan tag  sebagai elemennya.<\/a><\/p>\n\n\n\n
Nah, menggunakan CSS kita akan membuat tampilannya jadi lebih menarik.<\/p>\n\n\n\n
Untuk tampilan link ini bisa menggunakan style dari berbagai properti yang sudah kita pelajari, contohnya color, font, bahkan background color.<\/p>\n\n\n\n
Selain itu, teks link dapat diubah tampilannya tergantung pada keadaannya saat website dikunjungi.<\/p>\n\n\n\n
Nah, keadaan tersebut adalah:<\/p>\n\n\n\n
a: link   – link normal, keadaan saat belum dikunjungi
a: hover  – link ketika pengguna mengunjungi elemen dengan mengarahkan kursor mouse ke teks link
a: active – link yang akan terjadi perubahan saat diklik<\/p>\n\n\n\n
Ada tambahan juga, saat teks link dijalankan biasanya selalu ada garis bawah.<\/p>\n\n\n\n
Untuk menghilangkan garis bawah memerlukan properti tambahan seperti di bawah ini.<\/p>\n\n\n
\n  text-decoration: none;\n<\/pre><\/div>\n\n\n
Oke, langsung aja kita mulai ya\u2026<\/p>\n\n\n
\n<!DOCTYPE html>\n    <html>\n    <head>\n        <title>Teks Link<\/title>\n        <style>\n            a:link \/*saat link dalam keadaan normal*\/\n            {\n                background-color: deeppink;\n                text-decoration: none;\n                font-family: sans-serif;\n                color: white;\n            }\n\n            a:hover \/*saat kursor mouse diarahkan ke elemen*\/\n            {\n                background-color: dodgerblue;\n            }\n\n            a:active \/*saat elemen diklik*\/\n            {\n                background-color: black;\n            }\n        <\/style>\n    <\/head>\n    <body>\n\n        <a href="#">Ini adalah Teks Link<\/a>\n\n    <\/body>\n    <\/html>\n<\/pre><\/div>\n\n\n
Maka, seperti inilah tampilannya di Browser.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Pada gambar di atas, adalah keadaan saat website pertama kali dikunjungi.<\/p>\n\n\n\n
Tapi saat kursor mouse kita arahkan ke elemen teks link maka akan terjadi seperti ini.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Saat kita klik elemen tersebut maka akan tampil seperti berikut ini.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Demikianlah postingan kali ini, akhir kata semoga bermanfaat ya.<\/p>\n","protected":false},"excerpt":{"rendered":"
Pada kesempatan kali ini kita akan mempelajari tentang beberapa perintah dari properti CSS, yaitu Text, Font dan Link. Ketiga properti ini adalah jenis properti dari<\/p>\n","protected":false},"author":15,"featured_media":8553,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-8541","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-belajar-web-design"],"yoast_head":"\nBelajar CSS : Mengatur Style Text, Font dan Link - WebHozz Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/blog\/mengatur-style-text-font-dan-link\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar CSS : Mengatur Style Text, Font dan Link - WebHozz Blog\" \/>\n<meta property=\"og:description\" content=\"Pada kesempatan kali ini kita akan mempelajari tentang beberapa perintah dari properti CSS, yaitu Text, Font dan Link. Ketiga properti ini adalah jenis properti dari\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/mengatur-style-text-font-dan-link\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-21T13:18:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-07-05T11:18:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/06\/css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/mengatur-style-text-font-dan-link\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/mengatur-style-text-font-dan-link\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/c14789b713aefdff4189815a3655a941\"},\"headline\":\"Belajar CSS : Mengatur Style Text, Font dan Link\",\"datePublished\":\"2019-06-21T13:18:23+00:00\",\"dateModified\":\"2019-07-05T11:18:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/mengatur-style-text-font-dan-link\\\/\"},\"wordCount\":692,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/mengatur-style-text-font-dan-link\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/css.jpg\",\"articleSection\":[\"Belajar Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/mengatur-style-text-font-dan-link\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/mengatur-style-text-font-dan-link\\\/\",\"name\":\"Belajar CSS : Mengatur Style Text, Font dan Link - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/mengatur-style-text-font-dan-link\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/mengatur-style-text-font-dan-link\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/css.jpg\",\"datePublished\":\"2019-06-21T13:18:23+00:00\",\"dateModified\":\"2019-07-05T11:18:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/mengatur-style-text-font-dan-link\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/mengatur-style-text-font-dan-link\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/mengatur-style-text-font-dan-link\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/css.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/css.jpg\",\"width\":750,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/mengatur-style-text-font-dan-link\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Belajar CSS : Mengatur Style Text, Font dan Link\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"name\":\"WebHozz Blog\",\"description\":\"Kursus Web & Android di Jakarta Bandung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\",\"name\":\"WebHozz\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"width\":442,\"height\":442,\"caption\":\"WebHozz\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/c14789b713aefdff4189815a3655a941\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/author\\\/farry\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar CSS : Mengatur Style Text, Font dan Link - WebHozz Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webhozz.com\/blog\/mengatur-style-text-font-dan-link\/","og_locale":"en_US","og_type":"article","og_title":"Belajar CSS : Mengatur Style Text, Font dan Link - WebHozz Blog","og_description":"Pada kesempatan kali ini kita akan mempelajari tentang beberapa perintah dari properti CSS, yaitu Text, Font dan Link. Ketiga properti ini adalah jenis properti dari","og_url":"https:\/\/www.webhozz.com\/blog\/mengatur-style-text-font-dan-link\/","og_site_name":"WebHozz Blog","article_published_time":"2019-06-21T13:18:23+00:00","article_modified_time":"2019-07-05T11:18:38+00:00","og_image":[{"width":750,"height":400,"url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/06\/css.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/mengatur-style-text-font-dan-link\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/mengatur-style-text-font-dan-link\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/c14789b713aefdff4189815a3655a941"},"headline":"Belajar CSS : Mengatur Style Text, Font dan Link","datePublished":"2019-06-21T13:18:23+00:00","dateModified":"2019-07-05T11:18:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/mengatur-style-text-font-dan-link\/"},"wordCount":692,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/mengatur-style-text-font-dan-link\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/06\/css.jpg","articleSection":["Belajar Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/mengatur-style-text-font-dan-link\/","url":"https:\/\/www.webhozz.com\/blog\/mengatur-style-text-font-dan-link\/","name":"Belajar CSS : Mengatur Style Text, Font dan Link - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/mengatur-style-text-font-dan-link\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/mengatur-style-text-font-dan-link\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/06\/css.jpg","datePublished":"2019-06-21T13:18:23+00:00","dateModified":"2019-07-05T11:18:38+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/mengatur-style-text-font-dan-link\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/mengatur-style-text-font-dan-link\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/mengatur-style-text-font-dan-link\/#primaryimage","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/06\/css.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/06\/css.jpg","width":750,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/mengatur-style-text-font-dan-link\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Belajar CSS : Mengatur Style Text, Font dan Link"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/blog\/#website","url":"https:\/\/www.webhozz.com\/blog\/","name":"WebHozz Blog","description":"Kursus Web & Android di Jakarta Bandung","publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhozz.com\/blog\/#organization","name":"WebHozz","url":"https:\/\/www.webhozz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","width":442,"height":442,"caption":"WebHozz"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/c14789b713aefdff4189815a3655a941","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/blog\/author\/farry\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/8541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=8541"}],"version-history":[{"count":2,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/8541\/revisions"}],"predecessor-version":[{"id":8685,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/8541\/revisions\/8685"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media\/8553"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=8541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=8541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=8541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}