loading...

CSS Dasar: Text Styling

Teknik CSS untuk mengatur tampilan teks pada halaman web menggunakan properti pendukungnya. Beberapa properti yang ada untuk mengelola teks yaitu color, text-align, text-ident, text-decoration, text-transform, letter-spacing, dan word-spacing. Lebih jelasnya, yok kita bereksperimen dengan script HTML yang udah tersambung secara eksternal dengan file CSS berikut.

<!DOCTYPE html>
<html>
<head>
   <title>CSS Dasar</title>
   <link rel="stylesheet" href="text-style.css">
</head>
<body>
   <h1>Kata</h1>
   <h2>Kalimat</h2>
   <p>Paragraf: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam eligendi, doloribus aliquam maiores aspernatur similique eum, et velit omnis, sint sed? Aspernatur facere similique accusantium asperiores exercitationem rem mollitia esse explicabo. Ipsa, ex ab eum dolor eligendi ipsum, sequi provident mollitia, soluta molestiae animi totam assumenda aliquam voluptatem voluptate. Est!</p>
</body>
</html>


Color 

Properti ini digunakan utuk memberi warna pada tulisan. Ada 3 kelompok warna yang biasa digunakan sebagai value dari properti color: nama warna (red, lightseagreen, royalblue), hexadecimal (#ff0000, #20b2aa, #4169e1), dan RGB ( rgb(255,0,0), rgb(32,178,170), rgb(65,105,225) ).

/*nama warna*/
h1 {
   color: red;
}

/*hexadecimal*/
h2 {
   color: #20b2aa;
}

/*RGB*/
p  {
   color: rgb(65,105,225);
}


Text-align 

Properti ini digunakan utuk mengatur format paragraf atau teks. Value yang bisa diguakan dalam properti ini yaitu left, right, center, dan justify.

h1 {
   color: red;
   text-align: center;
}

h2 {
   color: #20b2aa;
   text-align: left;
}

p  {
   color: rgb(65,105,225);
   text-align: justify;
}


Text-indent 

Properti ini digunakan utuk memberi indentasi pada paragraf atau teks. Satuan pada value biasa meggunakan px atau %.

h1 {
   color: red;
   text-align: center;
}

h2 {
   color: #20b2aa;
   text-align: left;
}
   /*beri indentasi*/
p  {
   color: rgb(65,105,225);
   text-align: justify;
   text-indent: 50px;
}


Text-decoration

Properti ini digunakan utuk  mengatur dekorasi pada teks. Value yang digunakan pada properti ini yaitu none, underline, overline, dan line-through.

   /*teks coret*/
h1 {
   color: red;
   text-align: center;
   text-decoration: line-through;
}

   /*bergaris atas*/
h2 {
   color: #20b2aa;
   text-align: left;
   text-decoration: overline;
}
   
   /*bergaris bawah*/
p  {
   color: rgb(65,105,225);
   text-align: justify;
   text-indent: 50px;
   text-decoration: underline;
}


Text-transform 

Properti ini digunakan utuk mengubah jenis huruf menjadi huruf besar, kecil, dan kapital. Empat value yang dapat digunakan yaitu none, lowercase, uppercase, dan capitalize.

h1 {
   color: red;
   text-align: center;
   text-decoration: line-through;
   text-transform: lowercase;
}

h2 {
   color: #20b2aa;
   text-align: left;
   text-decoration: overline;
   text-transform: uppercase;
}

p  {
   color: rgb(65,105,225);
   text-align: justify;
   text-indent: 50px;
   text-decoration: underline;
   text-transform: capitalize;
}


Letter-spacing 

Properti ini digunakan utuk mengatur spasi antar huruf. Ada dua value dalam properti ini yaitu normal dan satuan px.

/*letter-spacing: menggeser antar huruf*/
h1 {
   color: red;
   text-align: center;
   text-decoration: line-through;
   text-transform: lowercase;
   letter-spacing: 25px;
}

h2 {
   color: #20b2aa;
   text-align: left;
   text-decoration: overline;
   text-transform: uppercase;
   letter-spacing: normal;
}

p  {
   color: rgb(65,105,225);
   text-align: justify;
   text-indent: 50px;
   text-decoration: underline;
   text-transform: capitalize;
}


Word-spacing 

Properti ini digunakan utuk mengatur spasi antar kata. Ada dua value dalam properti ini yaitu normal dan satuan px.

/*word-spacing: menggeser antar kata*/
h1 {
   color: red;
   text-align: center;
   text-decoration: line-through;
   text-transform: lowercase;
   letter-spacing: 25px;
   word-spacing: normal;
}

h2 {
   color: #20b2aa;
   text-align: left;
   text-decoration: overline;
   text-transform: uppercase;
   letter-spacing: normal;
}

p  {
   color: rgb(65,105,225);
   text-align: justify;
   text-indent: 50px;
   text-decoration: underline;
   text-transform: capitalize;
   word-spacing: 25px; 
}

Ok cukup materi CSS kali ini, mari terus belajar dan jangan takut untuk mencoba. Materi selanjutya kita akan belajar Backgroud pada CSS. Semangat terus yaa gengs!

0 Comments

Leave a comment