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
[...] ulang (reload) file css dari cache yang tersimpan di komputer. Lain halnya dengan menggunakan Inline Style CSS yang disisipkan diantara code HTML, browser akan selalu reload CSS untuk setiap halaman yang [...]
BalasHapus