CSS
Setelah mempelajari cara pengubahan format teks dan lainnya, kita akan menyadari bahwa jika kita akan memformat beberapa teks di dalam halaman web kita, maka kita harus memformat berulang-ulang. Jika teks yang diformat mempunyai banyak style, hal ini akan memakan banyak waktu. Untuk mengatasi hal ini, kita bisa mendefinisikan sebuah style untuk halaman web kita.
Ada 3 cara untuk mendefinisikan CSS:
1. Style diletakkan embedded dalam halaman web, diletakkan di bagian tag HEAD
2. Style diletakkan langsung di bagian belakang teks yang akan diganti formatnya
3. Style disimpan ke dalam file CSS terpisah
3 bagian yang akan diganti formatnya adalah:
1. Elemen
2. Class
3. Id
Berikut ini adalah salah satu contoh pendefinisian style dalam halaman web kita yang diletakkan di dalam tag head.
Style berikut ini akan mengubah default font dari halaman web kita berikut dengan stylenya. Perhatikan bahwa kode CSS berikut ini diletakkan di bagian tag HEAD.
<style type="text/css">
<!--
font
{
font-family: Tahoma;
font-size: 11px;
color: #3F3F3F;
text-decoration: none;
}
-->
</style>
Dengan cara yang sama, kita dapat mendefinisikan style dengan identifier yang mudah diingat, sebagai berikut:
<style type="text/css">
<!--
.huruf
{
color : Black;
font-family : Tahoma, Arial, sans-serif;
font-size : 9pt;
}
.huruf1
{
color : White;
font-family : Tahoma, Arial, sans-serif;
font-size : 9pt;
}
.huruf2
{
color : Red;
font-family : Tahoma, Arial, sans-serif;
font-size : 9pt;
}
-->
</style>
Untuk dapat menggunakan style yang sudah kita definiskan, kita dapat menggunakan tag <p> yaitu untuk membuat paragraf. Contoh:
<p class="huruf">
Paragraf ini akan diformat sesuai dengan style huruf
</p>
sedangkan untuk sebagian teks yang akan kita format, dapat diganti dengan menggunakan tag <span>. Contohnya sbb.
Khusus <span class="huruf">teks ini</span> akan diganti dengan style huruf.
Cara yang kedua adalah kita bisa menyisipkan style di belakang tag yang ada. Sebagai contoh kita akan ubah style dari tag font sebagai berikut:
<font style="color:#FFFF00; background-color:#000033; font-weight:bold">hello</font>
Berikutnya kita akan coba menyimpan style ke dalam file tersendiri yang diberi ekstensi css, misalnya style.css
Cara me-load ke dalam halaman web sebagai berikut:
<link href="style.css" rel="stylesheet" type="text/css">
Berikut contoh-contoh style:
.smalltext {
FONT-SIZE: 10px; COLOR: #7f7f7f; LINE-HEIGHT: 17px; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif
}
.tinytext {
FONT-SIZE: 9px; COLOR: #7f7f7f; LINE-HEIGHT: 17px; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif
}
.whitetext {
FONT-SIZE: 11px; COLOR: #ffffff; LINE-HEIGHT: 17px; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif
}
.bluetext {
FONT-SIZE: 11px; COLOR: #85b0c6; LINE-HEIGHT: 17px; FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif
}
Pertanyaan:
Dari 3 cara penggunaan CSS, yang mana yang paling efisien dan mudah?
Latihan:
Buatlah halaman seperti dibawah ini dengan menggunakan 3 metode CSS:
Pulau Pandan jauh ditengah
Dibalik pulau Angsa Dua
Hancur badan dikandung tanah
Budi baik terkenang jua.
|
Copyright wahyukurniawan.info. 
