Pada artikel sebelumnya saya sedikit mengulas tentang 'Anatomi CSS Rule' dimana saya lampirkan juga contoh css sederhananya, contoh css nya saya tekankan pada bagian text paragraf (tag 'p').
Namun pada contoh artikel sebelumnya semua paragraf yang ditulis akan menyesuaikan dengan rule css (pada contoh sebelumnya paragraf dutulis dengan warna text merah), karena global tag selector paragraf (p) ditentukan dengan warna huruf merah. Bagaimana jika paragraf yang lain ingin diberikan style yang berbeda dari style default yang sudah ditentukan oleh rule CSS.
Anda bisa menyisipkan 'Style Atribute' ke dalam tag 'p' (paragraf), cara ini disebut dengan 'inline style'. OK langsung saja lihat contohnya di bawah:
Hasilnya akan seperti ini;
Contoh paragraf yang berwarna merah
Dapat anda lihat style text css di atas bahwa paragraf (tag 'p') ditentukan tebal (font-weight: bold;) dengan text berwarna merah (color: red;). Nah sekarang seandainya anda ingin membuat paragraf lain namun dengan style yang berbeda, misalnya warna text biru ditambah dengan warna background abu-abu tanpa harus memodifikasi 'Default Style Text CSS'. Solusinya adalah menyisipkan style attribute ke dalam tag 'p'. lihat contohnya di bawah;
Maka hasilnya akan seperti ini;
Contoh paragraf yang berwarna merah
Paragraf text ini berwarna biru dengan warna background abu-abu
Mudah kan, paragraf tertentu dapat anda modifikasi tanpa harus merubah rule text CSS.
Selamat mencoba.
:D
Namun pada contoh artikel sebelumnya semua paragraf yang ditulis akan menyesuaikan dengan rule css (pada contoh sebelumnya paragraf dutulis dengan warna text merah), karena global tag selector paragraf (p) ditentukan dengan warna huruf merah. Bagaimana jika paragraf yang lain ingin diberikan style yang berbeda dari style default yang sudah ditentukan oleh rule CSS.
Anda bisa menyisipkan 'Style Atribute' ke dalam tag 'p' (paragraf), cara ini disebut dengan 'inline style'. OK langsung saja lihat contohnya di bawah:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>title/judul halaman website anda</title>
<style type="text/css">
<!--
p {
color: red;
font-weight: bold;
-->
</style>
</head>
<body>
<p>Contoh paragraf yang berwarna merah</p>
</body>
</html>Hasilnya akan seperti ini;
Contoh paragraf yang berwarna merah
Dapat anda lihat style text css di atas bahwa paragraf (tag 'p') ditentukan tebal (font-weight: bold;) dengan text berwarna merah (color: red;). Nah sekarang seandainya anda ingin membuat paragraf lain namun dengan style yang berbeda, misalnya warna text biru ditambah dengan warna background abu-abu tanpa harus memodifikasi 'Default Style Text CSS'. Solusinya adalah menyisipkan style attribute ke dalam tag 'p'. lihat contohnya di bawah;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>title/judul halaman website anda</title>
<style type="text/css">
<!--
p {
color: red;
font-weight: bold;
-->
</style>
</head>
<body>
<p>Contoh paragraf yang berwarna merah</p>
<p style="background-color:gray; color:blue">Paragraf text ini berwarna biru dengan warna background abu-abu</p>
</body>
</html>Maka hasilnya akan seperti ini;
Contoh paragraf yang berwarna merah
Paragraf text ini berwarna biru dengan warna background abu-abu
Mudah kan, paragraf tertentu dapat anda modifikasi tanpa harus merubah rule text CSS.
Selamat mencoba.
:D
Untuk mengaktifkan efek rollover maka anda perlu menambahkan tag id tambahan untuk efek link gambarnya (tuliskan kode ini di bawah kode tag id paling akhir dari '#atas' dibawah kode " } " ). Gambar yang saya pakai mempunyai alamat url 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq1qU-jvn13h3gqEj33r5J1RQQEk7rDGr6Nf0pcmaEIkFRUTaA_Ht89AzC7Fe_NmYhq8GxzjL3lzzxfu60rvJfTSTZEwHI12WsLJvVe6CxD7xQoALQdaG4zGrebAeqdqaKkB6L6lP64ls/s320/top.gif'. Tuliskan kode CSSnya seperti di bawah ini: