Jika kalian mempunyai website atau blog niscaya kalian tak aneh lagi dengan HTML, kemudian apa itu CSS?
CSS merupakan abreviasi dari Cascading Style Sheets, yang berfungsi untuk merangcang tampilan sebuah website atau blog supaya 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%.
- Rp
5.000.000,00-> Rp3.500.000,00.
Nah itu pola simpel penggunaan CSS. Sekarang kita akan berguru menciptakan CSS untuk mendekorasi sebuah teks atau kalimat supaya lebih menarik dilihat.
Belajar CSS Dekorasi Teks
Langkah-langkahnya:
Terimakasih...
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>
<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>
- Tulis/Copy script diatas.
- Pastekan di Notepad/Notepad++/Visual Studio.
- Simpan dengan format .html (contoh: Latihan.html).
- Dan siap dicoba dengan klik 2x.
- Hasilnya.
Terimakasih...
