Belajar CSS Part 7 : Mengatur Format Text Dengan CSS

Senin, 28 November 2016

Belajar CSS Part 7 : Mengatur Format Text Dengan CSS

    Tidak ada komentar

MENGATUR FORMAT TEXT DENGAN CSS
Pada tutor kali ini akan dijelaskan bagaimana cara mengatur format text dengan tujuan agar text dapat kita atur sesuai dengan keinginan kita dan kebutuhan kita. 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 penjelasanya berikut untuk mengatur format text

Adapun syntax yang digunakan untuk mengatur format text diantaranya :
  • color : Berfungsi untuk mengatur warna text value dapat diisi dengan nama warna atau kode warna
  • text-align : Digunakan untuk mengatur align atau rata text, value yang bisa diisi diantaranya adalah left untuk mengatur text rata kiri, right untuk mengatur text rata kanan, center untuk mengatur text rata tengah, justify untuk mengatur text rata kanan dan rata kiri
  • text-decoration : Digunakan untuk mengatur dekorasi text, value yang bisa diisi diantaranya adalah none agar text tidak memiliki dekorasi, overline untuk memberikan garis diatas text, line-trough untuk membuat garis yang mencoreng pada text, dan underline untuk membuat garis bawah pada text
  • text-transform : Digunakan untuk mengatur huruf kapital pada text, valuenya diantara lain uppercase untuk membuat text menjadi huruf besar, lowercase untuk membuat text menjadi huruf kecil, dan capitalize untuk membuat semua huruf awal pada tiap kata menjadi huruf besar
  • text-indent : Untuk mengatur jarak alinea pada text, valuenya dapat diisi dengan nilai pixel atau yang lain sesuai kebutuhan
  • text-spacing : Untuk mengatur jarak antar karakter pada text, valuenya dapat diisi nilai pixel
  • word-spacing : Untuk mengatur jarak antar kata pada text, valuenya dapat diisi dengan nilai pixel
  • line-height : Untuk mengatur ajrak antar baris pada text valuenya dapat diisi dengan nilai pixel
  • text-shadow : Digunakan untuk mengatur efek bayangan pada text, value pertama diisi dengan jarak pixel kiri kanan, kedua jarak pixel atas bawah, ketiga mengatur ketebalan bayangan dan keempat mengisi warna. Untuk contoh penulisanya 2px 3px 2px black
  • vertical-align : Digunakan untuk mengatur align dalam bentuk vertikal pada text, value yang digunakan adalah left untuk mengatur text rata kiri, right mengatur text rata kanan, center mengatur text rata tengah

CONTOH CARA MENGATUR FORMAT TEXT CSS
Akan saya contohkan bagaimana cara mengatur format text dengan CSS. Ketik script dibawah usahak jangan Copas agar sobat bisa paham dengan kode syntaxnya

index.html

<!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 Script Kiddies
         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
.tulisan_satu{
    color: blue;
    text-align: left;
    text-decoration: underline;
}
.tulisan_dua{
    text-align: right;
    text-transform: capitalize;
    text-decoration: overline;
    text-shadow: 3px 3px 3px black;
}
.tulisan_tiga{
    text-align: center;
    text-transform: lowercase;
    text-decoration: line-through;
    word-spacing: 10px;
}
.tulisan_empat{
    text-transform: uppercase;
    text-indent: 25px;
    line-height: 25px;
    letter-spacing: 3px;
}
Hasilnya seperti ini
KESIMPULAN
Untuk mengatur sebuah format text saya rasa tidak terlalu susah tetapi membutuhkan kreatifitas dan pemahaman. Dapat kita lihat pada script diatas fungsi dari tiap kode syntax dan valuenya. Jika ada kesulitan silahkan berikan komentar, Sekian Terima Kasih

Referensi : Malas Ngoding

TUTORIAL CSS LAINYA

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )