The My Project

Beranda
CSS

CSS | BAB 5 Pengaturan Teks

 


Properti font-family

Properti ini digunakan untuk mengatur jenis font yang digunakan pada teks.
Contoh penggunaannya adalah sebagai berikut: 

<!DOCTYPE html>
<html>
<head>
<title>Properti text-decoration</title> 
</head>
<body>
     <p> belajar coding by Ripal </p>
</html>

p{font-family:Arial,sans-serif}
    
     
 belajar coding by Ripal

Pada contoh di atas, font yang digunakan pada elemen <p> akan menjadi Arial atau font sans-serif jika Arial tidak tersedia.

Properti font-size

Properti ini digunakan untuk mengatur ukuran font pada teks.
Contoh penggunaannya adalah sebagai berikut: 

<!DOCTYPE html>
<html>
<head>
<title>Properti text-decoration</title>
</style>
</head>
<body>
     <h1> belajar coding by Ripal </h1>
</body>
</html>

h1{font-size:24px}
    
     
 belajar coding by Ripal

Pada contoh di atas, ukuran font pada heading h1 akan menjadi 24px.

Properti font-weight

Properti ini digunakan untuk mengatur ketebalan atau ketipisan font pada teks.
Contoh penggunaannya adalah sebagai berikut: 

<!DOCTYPE html>
<html>
<head>
<title>Properti font-weigh</title> 
</head>
<body>
     <h1>belajar coding by Ripal</h1>
</body>
</html>

h1{font-weight:bold}
belajar coding by Ripal

Pada contoh di atas, teks yang diberi tag <strong> akan memiliki ketebalan font yang didefinisikan sebagai bold (tebal)

Properti text-align

Properti ini digunakan untuk mengatur posisi teks pada suatu elemen.
Contoh penggunaannya adalah sebagai berikut: 

<!DOCTYPE html>
<html>
<head>
<title>Properti text-align</title> 
</head>
<body>
     <h1>belajar coding Ripal</h1>
</body>
</html>

h1{text-align:center}
belajar coding by Ripal

Pada contoh di atas, teks pada elemen h1 akan berada di tengah (pusat/tengah) secara horizontal.

left : Teks rata kiri, merupakan pengaturan default pada kebanyakan browser.
center : Teks rata tengah.
right : Teks rata kanan.
justify : Teks rata kiri dan kanan, dengan spasi yang sama di antara kata-kata.

Properti text-decoration

Properti ini digunakan untuk mengatur dekorasi pada teks, seperti garis bawah atau garis tengah.
Contoh penggunaannya adalah sebagai berikut: 

<!DOCTYPE html>
<html>
<head>
<title>Properti text-decoration</title> 
</head>
<body>
<a href="https://themyprojects.blogspot.com/">visit my blog</a>
</body>
</html>

a{text-decoration:none;}
visit my blog

Pada contoh di atas, tautan (hyperlink) yang diberi tag <a> tidak akan memiliki dekorasi seperti garis bawah.