#10 CSS – Text

Text Color

Merubah warna text dilakukan dengan cara menambahkan property color pada CSS atau bisa dilihat disini.

Text Alignment

Property text-align digunakan untuk mengatur posisi teks secara horizontal. Teks bisa diatur rata kiri, rata kanan atau tengah. Secara default teks memiliki letak rata kiri. Berikut value dari text-align :

ValueDeskripsi
leftteks rata kiri
centerteks berada di tengah suatu elemen
rightteks rata kanan
justifyteks rata kanan kiri terhadap suatu elemen

Text Decoration

Property text-decoration digunakan untuk menambahkan atau menghapus dekorasi pada teks. Sebagai contoh text-decoration dengan value none digunakan untuk menghapus underline pada link. Value text-decoration antara lain :

ValueDeskripsi
overlinememberikan garis diatas teks
line-throughmemberikan dekorasi coretan pada teks
underlinememberikan garis dibawah teks

Text Transformation

Property text-transformation digunakan untuk mengubah format huruf besar atau kecil pada suatu teks. Value dari text-transformation antara lain :

ValueDeskripsi
uppercasemengubah semua huruf pada teks menjadi huruf besar
lowercasemengubah semua huruf pada teks menjadi huruf kecil
capitalizesetiap huruf pertama pada teks diubah menjadi huruf besar

Text Indentation

Property text-indent digunakan untuk memberikan spasi pada awal paragraf. Sebagai contoh kita akan membuat spasi 30px bisa ditulis text-indent: 30px;

Text Shadow

Property text-shadow digunakan untuk menambahkan bayangan pada suatu teks. Value text-shadow diisi dengan nilai dari bayangan horizontal, vertical dan warna bayangan.

Berikut file index.html :

<!DOCTYPE html>
<html>

<head>
    <title>Teks</title>
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
</head>

<body>
    <h1 class="color">H1 berwana merah</h1>
    <p class="center">Teks berada di tengah</p>
    <p class="left">Teks berada di kiri</p>
    <p class="right">Teks berada di kanan</p>
    <div class="justify">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi neque quidem aut accusamus quia voluptate
            quos unde quas officiis vel porro nulla ad mollitia a aspernatur velit, ab optio? Ad.</p>
    </div>
    <p class="overline">Dekorasi garis atas</p>
    <p class="through-line">Dekorasi coret</p>
    <p class="underline">Dekorasi garis bawah</p>
    <p class="uppercase">paragraf menggunakan uppercase</p>
    <p class="lowercase">PARAGRAF MENGGUNAKAN LOWERCASE</p>
    <p class="capitalize">huruf pertama pada setiap kata menggunakan huruf besar</p>
    <p class="indent">Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae aut aliquam, modi, saepe
        voluptas nostrum accusantium error expedita enim rem qui officiis repellendus perferendis eius, laudantium
        asperiores tempora quasi optio?</p>
    <h1 class="shadow">h1 menggunakan teks shadow</h1>
</body>

</html>

file style.css

h1.color {
    color: red;
}

p.center {
    text-align: center;
}

p.left {
    text-align: left;
}

p.right {
    text-align: right;
}

div {
    border: 1px solid black;
    width: 350px;
    height: 100px;
    text-align: justify;
}

p.overline {
    text-decoration: overline;
}

p.through-line {
    text-decoration: line-through;
}

p.underline {
    text-decoration: underline;
}

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

p.indent {
    text-indent: 30px;
}

h1.shadow {
    text-shadow: 3px 3px red;
}
text CSS
hasil dari CSS Text

Tinggalkan sebuah komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *