Bagian 18. Lebih Dalam Bekerja dengan CSS

Buat dokumen html dengan kode html seperti di bawah ini.




<!DOCTYPE html>
<html>
<head>
<title>belajar web</title>
</head>
<body>
A:Ternyata css itu <B>asik</B>,kita bisa menjadikan tampilan <B>web</B>
kita jadi <B>indah</B>.<br>
B:ya, Benar sekali itu, dengan css <B>tampilan web</B> yang tadinya
<I>garing</I>, menjadi lebih <B>hidup</B>.
</body>

</html>

Priview

A:Ternyata css itu asik,kita bisa menjadikan tampilan web kita jadi indah.
B:ya, Benar sekali itu, dengan css tampilan web yang tadinya garing, menjadi lebih hidup.

Dari tampilan di atas ada beberapa teks dengan cetak tebal dan teks dengan cetak miring. Karena di dalam code html tersebut ada terdapat tag  ...  yang berfungsi untuk membuat teks tebal dan tag  ...  untuk membuat teks miring.

Jika kita ingin memberi warna pada teks tebal dan teks miring di atas maka kita perlu menambahkan tag  ...  pada dokumen html tersebut.

Baca Juga

Untuk lebih jelasnya lihat kode di bawah ini:




<!DOCTYPE html>
<html>
<head>
<title>belajar web</title>
</head>
<body>
A:Ternyata css itu <B><FONT COLOR="BLUE">asik</FONT></B>,kita bisa menjadikan tampilan <B><FONT COLOR="BLUE">web</FONT></B> kita jadi
<B><FONT COLOR="BLUE">indah</FONT></B>.<br>
B:ya, Benar sekali itu, dengan css <B><FONT COLOR="BLUE">tampilan web</FONT></B> yang tadinya <I>garing</I>, menjadi lebih <B><FONT
COLOR="BLUE">hidup</FONT></B>.
</body>
</html>

Priview

A:Ternyata css itu asik,kita bisa menjadikan tampilan web kita jadi indah.
B:ya, Benar sekali itu, dengan css tampilan web yang tadinya garing, menjadi lebih hidup.

Download source code latihan

Untuk mewarani teks yang bercetak tebal diatas kita memerlukan beberapa tag dengan atribut colornya.

Sekarang kita lihat kode di bawah:




<!DOCTYPE html>
<html>
<head>
<title>belajar web</title>
<style type="text/css">
b{
color:blue;/*merubah warna teks*/
}
</style>
</head>
<body>

A:Ternyata css itu <B>asik</B>,kita bisa menjadikan tampilan <B>web</B> kita jadi <B>indah</B>.

B:ya, Benar sekali itu, dengan css <B>tampilan web</B> yang tadinya <I>garing</I>, menjadi lebih <B>hidup</B>.
</body>
</html>

Priview

belajar web A:Ternyata css itu asik,kita bisa menjadikan tampilan web kita jadi indah. B:ya, Benar sekali itu, dengan css tampilan web yang tadinya garing, menjadi lebih hidup.

Dari kode diatas maka kita dapat lihat hasilnya akan sama dengan contoh sebelumnya, yakni semua teks bercetak tebal berubah warnanya menjadi biru. Nah sekarang kita bandingan kode html yang menggunakan css dengan yang tidak menggunakan css. Hasilnya kode yg menggunakan css lebih sedikit dibandingkan kode yang tidak menggunakan css.

Untuk e-booknya silahkan download disini