CSS Classes


Mungkin kita merasa kebingungan jika kita menggunakan HTML dengan elemen berbagai tampilan menggunakan CSS. Katakanlah untuk contoh Font kita menjadi besar dan berwarna putih, sementara saat yang berlainan kita inginkan tulisan kecil dan berwarna hitam

CSS tidak akan sangat bermanfaat jika ia tidak mengijinkan kita untuk mempunyai banyak jenis  format yang berbeda  untuk satu halaman HTML. Kita sangat beruntung dengan adanya CSS yang mengijinkan kita untuk melakukanlakukannya dengan menggunakan Class-Class.

Format Class

Penggunaan class sederhana. Kita hanya perlu menambahkan sebuah extension dalam pengkodean CSS dan  kita harus menempatkan ektension ini didalam HTML yang kita buat. Untuk mempersingkat waktu mari saja kita mencoba dengan satu contoh membuat dua paragraph yang keduanya ditulis berbeda.. Pertama, kita mulai dengan kode CSS, menulis teks yang berwarna merah.

Kode CSS:

p.first{ color: blue; }

p.second{ color: red; }

Keterangan :  first dan second adalah nama kelas

Kode HTML:

<html>

<body>

<p>Ini adalah normalparagraph </p>

<p class=”first”>Ini paragraph yang menggunakan kode CSS p.first!</p>

<p class=”second”> Ini paragraph yang menggunakan kode CSS p.second!</p>

Latihan I.

Buka Editor (Notepad,PHPEditor,Dreamweaver,dsb)

Kemudian ketik :

<html>

<style>

p.first{ color: blue; }

p.second{ color: red; }

</style>

<head>

<title>Untitled Document</title>

</head>

<body>

<p>This is a normal paragraph.</p>

<p>This is a paragraph that uses the p.first CSS code!</p>

<p>This is a paragraph that uses the p.second CSS code!</p>

</body>

</html>

Setelah selesai kita ketik jalankan HTMLnya kemudian amati dan lihatlah hasil yang ditampilkan

Kita dapat menggunakan Class-class CSS dengan berbagai element HTML Bagaimanapun, apa yang terjadi jika kita mempunyai sebuah nilai yang sudah didefinisikan  dengan tetap untuk tag <p>, Akankan ini menyebabkan beberapa masalah untuk class-class pada tag paragraph?

Well, when this happens the CSS class for any <p> tag will override the default <p> CSS. If the CSS class uses a CSS attribute already defined by the default CSS, then the formatting defined by the class will be the value that is used.

It may be easier to imagine that the CSS for a generic HTML element is the starting point and the only way to change that look is to overwrite the attributes using CSS classes. Please see the example below for a visual of this tricky topic.

CSS Code:

p{ color: red; font-size: 20px; } 
p.test1{ color: blue; } 
p.test2{ font-size: 12px; }

HTML Code:

<html>
<body>
<p>This is a normal paragraph.</p>
<p>This is a paragraph that uses the p.test1 CSS code!</p>
<p>This is a paragraph that uses the p.test2 CSS code!</p>
...

Display:

This is a normal paragraph.

This is a paragraph that uses the p.test1 CSS code! The p.test1 paragraph remained the same size, but it’s color changed.

This is a paragraph that uses the p.test2 CSS code! The p.test2 paragraph remained the same color, but it’s size changed.

Remember, CSS code in classes will override the general CSS code for that element. p.test1 overrides p!

~ oleh desktopku pada Mei 10, 2010.

Satu Tanggapan to “CSS Classes”

  1. lam kenal sob..
    numpang info ya.. sorry, lg butuh uang nihh..
    =============================================
    JUAL MURAH !! Butuh Uang.. Intel Core Duo 3 Ghz, lebih jelas liat di sini

    http://chepypoenya.wordpress.com/2010/05/10/jual-pc-murah-butuh-uang-neh/

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

 
%d blogger menyukai ini: