Belajar CSS Dekorasi Teks Sederhana

byKomodo Liar •
0
Jika kalian memiliki website atau blog pasti kalian tak asing lagi dengan HTML, lalu apa itu CSS?

CSS merupakan singkatan dari Cascading Style Sheets, yang berfungsi untuk merangcang tampilan sebuah website atau blog agar terlihat lebih menarik sesuai dengan kebutuhan. CSS juga memudahkan kita dalam mengolah data.
Misal:
  • Toko online menjual sebuah produk A.
  • Harga awal Rp5.000.000,00.
  • Ada Diskon 30%.
  • Rp5.000.000,00 -> Rp3.500.000,00.

Nah itu contoh simpel penggunaan CSS. Sekarang kita akan belajar membuat CSS untuk mendekorasi sebuah teks atau kalimat agar lebih menarik dilihat.

 Belajar CSS Dekorasi Teks
Langkah-langkahnya:
<html>
<head>
<title>Dekorasi Teks</title>
<style>
.atas{
    text-decoration: overline;
font-size: 30px;
text-align: center;
color: red;
}

 .tengah{
    text-decoration: line-through;
font-size: 30px;
text-align: center;
color: yellow;
}

 .bawah{
    text-decoration: underline;
font-size: 30px;
text-align: center;
color: green;
}

 .atas-bawah{
    text-decoration: underline overline;
font-size: 30px;
text-align: center;
color: blue;
}
</style>
</head>
<body>

 <p class="atas">This is heading 1</p>
<p class="tengah">This is heading 2</p>
<p class="bawah">This is heading 3</p>
<p class="atas-bawah">This is heading 4</p>

 </body>
</html>

  1. Tulis/Copy script diatas.
  2. Pastekan di Notepad/Notepad++/Visual Studio.
  3. Simpan dengan format .html  (contoh: Latihan.html).
  4. Dan siap dicoba dengan klik 2x.
  5. Hasilnya.
Sekian Belajar CSS dekorasi teks sederhana ini, ya sekiranya cukup mudah untuk dipahami. Semoga bermanfaat bagi kita semua.

 Terimakasih...
Tags:

Berkomentarlah yang baik dan Lucu, jangan Spam!

إرسال تعليق (0)
أحدث أقدم