Gunakan teks editor misalkan “Notepad” untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor. Show
Home » Belajar CSS Part 7 : Mengatur Format Text Dengan CSS Belajar CSS Mengatur Format Text dengan CSSPada tutorial belajar CSS Mengatur Format Text Dengan CSS ini akan di jelaskan tentang penggunaan css dalam mengatur atau memodifikasi text dengan tujuan agar format text dapat menjadi seperti yang kita inginkan dan kita butuhkan. contohnya untuk mengatur text menjadi justify atau kita kenal dengan sebutan rata kiri rata kanan, mengatur jarak indent text, mengatur huruf menjadi uppercase atau huruf besar, huruf kecil, warna text dan juga mengatur dekorasi atau design pada text. silahkan simak penjelasan berikut tentang mengatur format text yang dapat di lakukan menggunakan CSS. adapun beberata syntax CSS yang bisa di gunakan untuk mengatur format text diantara nya adalah:
Untuk contoh cara mengatur format text dengan css. buat sebuah file html dan sebuah file css. di sini saya membuat file index.html dan style.css Cara mengubah warna text dengan CSSuntuk mengubah warna text dengan CSS perhatikan contoh berikut ini. index.html 1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <html> <head> <title>format text CSS</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p class="tulisan_warna">Mengatur format text dengan CSS</p> </body> </html> style.css 1 2 3 .tulisan_warna{ color: blue; } dan hasilnya Mengatur format text dengan CSS dapat di lihat pada contoh di atas terdapat sebuah tag paragraf yang mempunyai class tulisan_warna. kemudian mengatur warna biru dengan css. Cara menggunakan text align CSSindex.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html> <html> <head> <title>Format text CSS</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p class="tulisan_kiri">Mengatur format text dengan CSS</p> <p class="tulisan_kanan">Mengatur format text dengan CSS</p> <p class="tulisan_tengah">Mengatur format text dengan CSS</p> <p class="tulisan_justify"> Belajar tutorial CSS dasar di www.malasngoding.com. Mengatur format text dengan CSS. belajar HTML dasar di www.malasngoding.com. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </body> </html> style.css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .tulisan_kiri{ text-align: left; }
.tulisan_kanan{ text-align: right; }
.tulisan_tengah{ text-align: center; }
.tulisan_justify{ text-align: justify; }  belajar css mengatur format text dengan css Belajar CSS Mengatur format text dengan CSSuntuk contoh mengatur format text dengan CSS lainnya silahkan perhatikan contoh berikut. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html> <html> <head> <title>Format text CSS</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p class="tulisan_satu">Mengatur format text dengan CSS</p> <p class="tulisan_dua">Mengatur format text dengan CSS</p> <p class="tulisan_tiga">Mengatur format text dengan CSS</p> <p class="tulisan_empat"> Belajar tutorial CSS dasar di www.malasngoding.com. Mengatur format text dengan CSS. belajar HTML dasar di www.malasngoding.com. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </body> </html> style.css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 .tulisan_satu{ color: blue; text-decoration: underline; }
.tulisan_dua{ text-align: right; text-transform: capitalize; text-decoration: overline; }
.tulisan_tiga{ text-align: center; text-transform: lowercase; text-decoration: line-through; word-spacing: 10px; }
.tulisan_empat{ text-transform: uppercase; text-indent: 30px; line-height: 30px; letter-spacing: 5px; } Incoming search terms:
Diki Alfarabi Hadi Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
Tags: align css, belajar dasar css, Cara mengatur text dengan css, css dasar untuk pemula, format text css, fungsi justify di css, membuat huruf besar dan huruf kecil css, membuat rata kiri rata kanan css, mengubah warna text css, pengertian dari css Tutorial CSS Dasar
Tutorial CSS3 Dasar
Produk
Tutorial Terbaru
Toko KamiSOCIALMalas Ngoding TUTORIAL MENARIK LAINNYAMembuat Bentuk Segitiga Dengan CSS – Selamat datang kembali di tutorial css di malasngoding.com. beberapa waktu lalu ada beberapa teman-teman pembaca tutorial di malasngoding.com yang ... Diki Alfarabi Hadi Membuat Lingkaran Dengan CSS Membuat Lingkaran Dengan CSS – Pada tutorial ini kita akan belajar membuat lingkaran atau nembuat bulat dengan menggunakan CSS. Memang mungkin ... Diki Alfarabi Hadi Membuat Template Web Responsive Dengan HTML dan CSS – Pada tutorial ini kita akan membuat sebuah template web sederhana responsive dengan menggunakan HTML dan CSS. ... Diki Alfarabi Hadi
|
Tag html yang berfungsi untuk menempatkan posisi teks rata tengah secara horizontal adalah
Pos Terkait
Copyright © 2024 membukakan Inc.
