CSS Bagian 4

Pada bagian ini kita akan melanjutkan materi CSS.

  • Word & Letter Spacing

word dan letter spacing digunakan untuk memberi spasi antara kata (word) dan huruf(Letter). dengan memasukkan jarak pada properti yang kita inginkan misalnya word-spacing : 30px dan letter-spacing: 12px,

<html>
<head>
<title>CSS Guide</title>
<style type="text/css">
h1 {
word-spacing: 30px;
}
p{
letter-spacing: 12px;
}
</style>
</head>
<body>
<h1>Ini Judul Heading</h1>
<p>Ini adalah paragraf 1. Ini adalah paragraf 1.</p>
</body>
</html>
  •  Membuat Text Indent

Pada bagian awal paragraf biasanya terdapat text indent atau teks yang agak menjorok ke dalam paragraf dalam jarak tertentu. Berikut ini adalah properti yang digunakan untuk mengaturnya:

<html>
<head>
<title>CSS Guide</title>
<style type="text/css">
.indt {
text-indent : 40px;
}
</style>
</head>
<body>
<h1>Ini Judul Heading</h1>
<p class="indt">Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.</p>

<p>Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p>

</body>
</html>
  • Text Transform

mengubah suatu teks menjadi huruf kecil semua (lowercase), besar semua (uppercase), atau capitalize (hanya huruf pertama dari kata yang dibuat besar). Hal ini dilakukan dengan menggunakan properti text-transform : option; dengan option dapat diganti dengan lowercase, uppercase, atau capitalize.

<html>
<head>
<title>CSS Guide</title>
<style type="text/css">
.tul1 {
text-transform : uppercase;
}
.tul2 {
text-transform : lowercase;
}
</style>
</head>
<body>
<h1>Ini Judul Heading</h1>
<p class="tul1">Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.</p>

<p class="tul2">Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p>

</body>
</html>
  • Text Decoration
<html>
<head>
<title>CSS Guide</title>
<style type="text/css">
.tul1 {
text-decoration : underline; }
.tul2 {
text-decoration : line-through;}
.tul3 {
text-decoration : overline;}
</style>
</head>
<body>
<h1 class="tul1">Ini Judul Heading</h1>
<h1 class="tul2">Ini Judul Heading</h1>
<h1 class="tul3">Ini Judul Heading</h1>

</body>
</html>
  •  Drop Cap
<html>
<head>
<title>DROP CAP</title>
<style type="text/css">
p.styleku:first-letter {
float: left;
font-family: "Lucida Grande";
font-size: 80px;
}
p {
text-align : justify;
}
</style>
</head>
<body>
<h1>Ini Judul Heading 1</h1>
<p class="styleku">Bagian ini adalah paragraf. Bagian ini adalah
paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf.
Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini
adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah
paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf.
Bagian ini adalah paragraf. Bagian ini adalah paragraf. </p>
</body>
</html>