Senin, 27 April 2015

Properti text-indent Css

Properti text indent menentukan baris pertama bagian paling kiri berapa lebar menjorok ke kanan. Ini disebut juga indentasi.

Penggunaan
Normalnya paragraf yang diketik di halaman web selalu rata kiri setiap kalimatnya. Namun, jika menginginkan gaya penulisan karya ilmiah seperti skripsi atau makalah, setiap awal kalimat pada setiap paragraf menggunakan indentasi. Jika mengetik di Microsoft Word maka gunakan tombol Tab, di Css gunakan properti text-indent.

Penulisan sintak text-indent
text-indent: value
- value diganti dengan nilai indent.

Value
Ada 3 nilai yang bisa Anda atur untuk lebar indent, dengan menggunakan satuan piksel, millimeter, dan persen. Contohya: 30px, 2mm, 10%. Hanya satu nilai untuk satu class css.

Contoh: textindent.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Properti text-indent Css</title>
            <style type="text/css">
            p{text-align: justify;}
            p.indentpx{text-indent: 30px;}
            p.indentmm{text-indent: 2mm;}
            p.indentpers{text-indent: 10%;}
            </style>
        </head>
    <body>
        <p>Ini paragraf tanpa indent. Kalimat ditampilkan rata kiri.
        Tag p yang digunakan dalam paragraf ini tanpa diatur dengan css,
        mengindikasikan paragraf ditampilkan apa adanya.</p>
        <p class="indentpx">Paragraf ini menggunakan indent 20 piksel.
        p.indentpx artinya memanggil class indentpx pada tag p yang telah
        dideklarasikan pada css (style type...).</p>
        <p class="indentmm">Paragraf ini menggunakan indent 2 millimeter.
        p.indentmm artinya memanggil class indentmm pada tag p yang telah
        dideklarasikan pada css (style type...).</p>
        <p class="indentpers">Paragraf ini menggunakan indent 10 persen.
        p.indentpers artinya memanggil class indentpers pada tag p yang telah
        dideklarasikan pada css (style type...).</p>
    </body>
</html>


Tampilan di browser:

Referensi tulisan:
  1. text-indent; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 28 April 2015.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Kamis, 16 April 2015

Properti letter-spacing Css

Untuk mengatur jarak spasi setiap karakter pada teks maka gunakanlah properti letter-spacing.

Deskripsi
Jarak spasi teks pada semua halaman web bernilai normal. Namun, jika ingin menambah atau merapatkan spasi karena kebutuhan, Anda dapat menggunakan letter-spasing dengan menentukan sendiri nilainya jarak spasinya. Misalnya, paragraf kedua artikel Anda spasinya 4px, sedangkan paragraf ketiga menjadi -0,1em.

Nilai
Letter-spacing mempunyai dua nilai;
normal : berada dalam jarak spasi normal, jika letter-spacing tidak dipakai dalam css Anda, maka teks yang ditampilkan di browser/halaman web bernilai normal.
length : nilai ini menggunakan angka positif untuk jarak spasi semakin lebar, untuk lebih rapat gunakan angka minus.

Satuan
Ada dua satuan yang bisa Anda pakai, piksel (px) dan em untuk nilai positf atau negatif. Contoh; 6px, 1em, -6px, -1em.

Penulisan sintak letter-spacing
letter-spacing: nilai_satuan;
Contoh: (1) letter-spacing: 6px;  (2) letter-spacing: 1em;

Contoh: letspac.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh Letter Spacing Css</title>
            <style type="text/css">
                p.letnormal{letter-spacing: normal;}
                p.letem{letter-spacing: 1em;}
                p.letpx{letter-spacing: 6px;}
                p.letpxmin{letter-spacing: -0.7px;}
                p.letemmin{letter-spacing: -0.1em;}
            </style>
        </head>
    <body>
        <p class="letnormal">Inilah letter spacing normal.</p>
        <p class="letem">Teks ini letter spacing-nya 1em.</p>
        <p class="letpx">Kalau teks ini letter spacing-nya 6px.</p>
        <p class="letpxmin">Sedangkan teks ini letter spacing-nya malah minus, 0.7px</p>
        <p class="letemmin">Teks terakhir ini letter spacing-nya minus 0.3 em.</p>
    </body>
</html>


Tampilan di browser:

Tampilan letter-spacing di Firefox.
Referensi tulisan:
  1. letter-spacing Css; ditulis oleh: Kontributr MDN, developer.mozilla.org, diakses 16 Januari 2015.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Senin, 06 April 2015

Properti text-transform Css

Properti text-transform digunakan untuk mengubah penulisan kata, kalimat atau paragraf apakah dalam bentuk huruf kecil semua, huruf besar semua, huruf besar setiap huruf awal kata atau dalam bentuk full-width.

Penggunaan text-transform
Misalnya Anda menulis artikel yang menonjolkan penekanan makna. Misalnya, paragraf pertama ditampilkan seperti biasa, paragraf kedua ditampilkan dalam huruf besar. Paragraf ketiga ditampilkan dalam huruf kecil semua. Jika menggunakan cara manual, misalnya paragraf kedua, Anda harus mengaktifkan tombol CAPSLOCK keyboard saat mengetik – lalu mematikannya untuk paragraf ketiga. Tetapi dengan properti text-transform, Anda bisa mengubah seluruh kata ke huruf besar atau ke huruf kecil secara otomatis. Menghemat waktu dan efektif.

Atribut properti text-transform
none : tidak memberikan efek apapun, menampilkan teks seperti saat diketik.
uppercase
: mengubah semua kata ke huruf besar.
lowercase : mengubah semua kata ke huruf kecil.
capitalize : mengubah semua huruf di awal kata ke huruf besar.
full-width : menampilkan kata dalam mode full-width.

Sintak penulisan text-transform
text-transform: atribut;
Contoh: text-transform: capitalize;

Contoh: texttransf.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Properti text-transform css</title>
            <style type="text/css">
            p.none{text-transform:none;}
            p.upper{text-transform:uppercase;}
            p.lower{text-transform:lowercase;}
            p.capt{text-transform:capitalize;}
            p.fullw{text-transform:full-width;}
            </style>
        </head>
    <body>
        <p class="none">-Tidak memberikan efek apapun. Persis seperti aslinya.</p>
        <p class="upper">-Kalimat ini ditampilkan semua huruf besar.</p>
        <p class="lower">-Sedangkan KALIMAT iNi SemuaNya ditampilkan dalam HURUF KECIL.</p>
        <p class="capt">-setiap awal huruf kata pada kalimat ini, semuanya huruf besar.</p>
        <p class="fullw">-Kalau yang ini full-width. Beginilah tampilannya.</p>
    </body>
</html>


Tampilan di browser Firefox:

Tampilan text-transform di Firefox.
Referensi tulisan:
  1. text-transform Css; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 06 April 2015.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.