CSS tutorial: semuanya, tapi… jangan semua deh!


K

alo ngomongin CSS, maka kita berurusan dengan format yang berlaku di seluruh halaman. Misalnya lo udah tentuin <body> menggunakan font tahoma 9pt, maka di seluruh halaman dia akan muncul sebagai tahoma berukuran 9pt.

Tapi gimana kalo kita mau memformat sebagian halaman dengan formatting yang sama sekali beda?

Nggak masalah. Inget kan definisi CSS sebagai “CASCADING” style sheet? Nah, kita sekarang akan mulai memanfaatkan segi ke-CASCADING-annya di mana kita akan melakukan formatting secara bersusun, format suatu bagian menjadi mengikuti (atau justru bertentangan) dari format bagian lainnya. Di sini kita akan berkenalan dengan yang namanya atribut “class”.

Dengan perintah “class” kita bisa menentukan bagian-bagian dalam CSS yang memiliki formatting khusus, mulai dari ukuran, jenis font, font-style, pokoknya semua deh!

Untuk membuat perintah class, kita cukup ngarang nama sendiri yang dituliskan setelah titik (.). Syaratnya, nama tersebut nggak boleh mengandung spasi dan karakter khusus (!, #, @, dsb). Cukup beri nama dengan huruf dan angka aja.

Contohnya, gue bikin class di CSS bernama “highlight” dengan perintah seperti ini:

.highlight {

font-size: 1.2em;

font-weight: bold;

color: red;

}

Perintah CSS seperti ini, kalo diterjemahkan dalam bahasa manusia berarti:

Bagian yang gue kasih class “highlight”, ukurannya akan jadi 1.2 kali lebih besar dan hurufnya bold.

Gimana cara menggunakan CSS class?

Caranya adalah dengan menambahkan perintah “class =[nama class]” ke dalam elemen-elemen HTML kita.

Misalnya, kita punya sebuah artikel yang kita format dengan kode HTML seperti ini:

<html>

<head>

</head>

<body>

<p>Pada hari minggu kuturut Ayah ke kota. <br>
Naik delman istimewa kududuk di muka pak kusir<br>
yang sedang bekerja mengendali kuda<br>

<p>tentu saja kuda menjadi kurang terkendali<br>
Karena muka pak kusir kududuki.

</body>

</html>

Dengan elemen HTML seperti itu, maka hasilnya akan seperti ini:

Pada hari minggu kuturut Ayah ke kota.
Naik delman istimewa kududuk di muka pak kusir
yang sedang bekerja mengendali kuda

tentu saja kuda jadi tak terkendali
Karena muka pak kusir kududuki.

Sebuah dokumen HTML sederhana yang terdiri atas 2 paragraf. Nah, sekarang, kita mau buat tambahkan kode <style> yang memuat class highlight dengan perintah-perintah font 1.2em, bold, berwarna merah seperti yang udah gue tuliskan sebelumnya menjadi seperti ini:

<html>

<head>

<style>

.highlight {

font-size: 1.2em;

font-weight: bold;

color: red;

}

</style>

</head>

<body>

<p>Pada hari minggu kuturut Ayah ke kota. <br>
Naik delman istimewa kududuk di muka pak kusir<br>
yang sedang bekerja mengendali kuda<br>

<p>tentu saja kuda menjadi kurang terkendali<br>
Karena muka pak kusir kududuki.

</body>

</html>

Habis itu kita tentukan bahwa paragraf ke dua adalah paragraf dengan kelas “highlight” seperti ini:

<html>

<head>

<style>

.highlight {

font-size: 1.2em;

font-weight: bold;

color: red;

}

</style>

</head>

<body>

<p>Pada hari minggu kuturut Ayah ke kota. <br>
Naik delman istimewa kududuk di muka pak kusir<br>
yang sedang bekerja mengendali kuda<br>

<p class=”highlight”>tentu saja kuda menjadi kurang terkendali<br>
Karena muka pak kusir kududuki.

</body>

</html>

Cukup masukkan nama class tanpa titik di depannya. Maka hasilnya akan menjadi seperti ini:

Pada hari minggu kuturut Ayah ke kota.
Naik delman istimewa kududuk di muka pak kusir
yang sedang bekerja mengendali kuda

tentu saja kuda jadi tak terkendali
Karena muka pak kusir kududuki.

Class ini bisa kita tempel ke elemen-elemen HTML lainnya. Misalnya kita membuat list daftar peristiwa yang terjadi setelah muka pak kusir kita duduki dan list tersebut hendak kita beri kelas “highlight” maka perintah yang kita tulis adalah seperti ini:

<html>

<head>

<style>

.highlight {

font-size: 1.6em;

font-weight: bold;

color: red;

}

</style>

</head>

<body>

<p>Pada hari minggu kuturut Ayah ke kota. <br>
Naik delman istimewa kududuk di muka pak kusir<br>
yang sedang bekerja mengendali kuda<br>

<p>tentu saja kuda menjadi kurang terkendali<br>
Karena muka pak kusir kududuki.

<p>Adapun yang terjadi sebagai akibatnya adalah:

<ul class=”highlight”>

<li>Jalannya kuda menjadi melintir</li>

<li>Pak Kusir menjadi panik</li>

<li>Ayah menjadi panik</li>

<li>Sejak itu aku tak pernah diajak ayah pergi ke kota lagi</li>

</ul>

</body>

</html>

Akan menghasilkan dokumen HTML yang berwujud seperti ini:

Pada hari minggu kuturut Ayah ke kota.
Naik delman istimewa kududuk di muka pak kusir
yang sedang bekerja mengendali kuda

tentu saja kuda menjadi kurang terkendali
Karena muka pak kusir kududuki.

Adapun yang terjadi sebagai akibatnya adalah:

  • Jalannya kuda menjadi melintir
  • Pak Kusir menjadi panik
  • Ayah menjadi panik
  • Sejak itu aku tak pernah diajak ayah pergi ke kota lagi

Penggunaan perintah “class” ini sangat penting dalam dunia per-MP-an, krn MP penuh dengan class-class yang saling bertumpang tindih satu dengan lainnya. Sebagian “class” yang pernah gue temukan di MP gue posting di sini, tapi waktu itu gue masih belum bisa membedakan antara elemen HTML dan class sehingga campur aduk begitu, hehehe….

Pada posting berikutnya, gue akan menjelaskan bagaimana cara memanfaatkan “class” y
ang diterapkan pada elemen “div” untuk menciptakan wilayah-wilayah dalam HTML – seperti kotak abu-abu yang gue pake untuk memajang contoh di atas. Atau, ada yang udah bisa?

Tantangan (bukan latihan)
Coba manfaatkan perintah class pada div untuk membuat kotak berbackground gambar!

Posting tutorial CSS sebelumnya:
Apa itu CSS?
Ukuran-ukuran dalam CSS
Memformat font pake CSS
Link yang bling-bling

Image untuk background gue dapat dari sini.
Image utama, seperti biasa dari picturequest.com


Iklan baris:

Iklan
Tinggalkan komentar

37 Komentar

  1. bang.. ajrin cara lengkapnya dong???

    Suka

    Balas
  2. bang.. ajrin cara lengkapnya dong???

    Suka

    Balas
  3. ajarin gue donk…..

    Suka

    Balas
  4. sumpeh deh…binggung mboot….ajarin yang paling simple…

    Suka

    Balas
  5. viakoos said: Mbot, salam kenal yah. Tampilan MP saya dah lumayan, setelah diutak atik dgn panduan beberapa orang, termasuk sampyan ini. Thanks ya. Ada yg bikin saya penasaran. Gimana caranya ngerubah huruf (bentuk dan ketebalan) di tabel “my multiply-my site-my network-post dll”? NGerubah background nya ada, tapi ngerubah hurufnya, dimana ya? Makasih sebelumnya

    gue juga belum pernah customize bagian situ, tapi kayaknya class-nya adalah “gnopt”. coba deh ganti class itu, gabung dengan command untuk list [li]selamat mencoba

    Suka

    Balas
  6. Mbot, salam kenal yah. Tampilan MP saya dah lumayan, setelah diutak atik dgn panduan beberapa orang, termasuk sampyan ini. Thanks ya. Ada yg bikin saya penasaran. Gimana caranya ngerubah huruf (bentuk dan ketebalan) di tabel “my multiply-my site-my network-post dll”? NGerubah background nya ada, tapi ngerubah hurufnya, dimana ya? Makasih sebelumnya

    Suka

    Balas
  7. myshant said: sepertinya lebih enak kalau dijelasin sambil praktek langsung di depan komputerbikin buku saku aja gung …. berguna banget deh bagi yg pemula pengen ngutak ngatik 🙂

    sebenernya sih… emang masih jarang ya buku CSS dalam bhs indonesia… kalo HTML udah banyak…(mulai pikir2)

    Suka

    Balas
  8. ayo ayo, yang bingung, yang pusing, pada pegangan ya…

    Suka

    Balas
  9. Masih pusinggggg!!!!!!!!

    Suka

    Balas
  10. aduhhh,, binun

    Suka

    Balas
  11. mbonk said: *masih keukeuh..bisakah kode tracker dimasukkan dengan ?

    kayaknya sih ga bisa. tapi coba aja dulu.

    Suka

    Balas
  12. mbot said: Lo gak bisa dapet semuanya. Harus pilih salah satu. Beri kepastian, jangan membingungkan.*kayaknya ini udah di luar konteks css*

    hooh..ini bukan pelajaran css, melainkan wacana ruang konseling..hehe..*masih keukeuh..bisakah kode tracker dimasukkan dengan ?**maaf mengganggu siswa lain dengan pertanyaan tidak relevan dengan mata pelajaran sekarang..

    Suka

    Balas
  13. mbonk said: tinggal gimana cara ngumpetin kode2 jelek di page title gue..hiks..*eh itu di kelas tutorial lainnya ya?? hehe..

    hidup ini penuh dengan pilihan git;mau ada tracker, konsekuensinya page title jadi jelekmau page title bagus, konsekuensinya ga punya tracker. Lo gak bisa dapet semuanya. Harus pilih salah satu. Beri kepastian, jangan membingungkan.*kayaknya ini udah di luar konteks css*

    Suka

    Balas
  14. sepertinya lebih enak kalau dijelasin sambil praktek langsung di depan komputerbikin buku saku aja gung …. berguna banget deh bagi yg pemula pengen ngutak ngatik 🙂

    Suka

    Balas
  15. tinggal gimana cara ngumpetin kode2 jelek di page title gue..hiks..*eh itu di kelas tutorial lainnya ya?? hehe..

    Suka

    Balas
  16. ardho said: wah.. makasihhh… 🙂

    sama-sama… 🙂

    Suka

    Balas
  17. mbonk said: gung bisa ngga kalo gini?? (hehe..padahal nyontek css elo juga, yang mana..tetep aja gue gak ngerti sama sekali knapa rinciannya kayak gini..)Koedakoe lari kentjang Masoek ke roemah OejangOejang-nya lagi ..ehm..Koedakoe lari kentjang Masoek ke roemah OejangOejang-nya lagi ..ehm..

    nah itu udah berhasil, krn tadi lupa ngapus “transparent” di bagian background kan?

    Suka

    Balas

Ada komentar?

Please log in using one of these methods to post your comment:

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

  • Komentar Terbaru

    mbot di Yang Terjadi Pada Bahu Ayah In…
    Tjetje [binibule.com… di Yang Terjadi Pada Bahu Ayah In…
    [sharing HRD] negosi… di [sharing HRD] WASPADA! 5 gelag…
    Koper | (new) Mbot… di Realita, Cinta, dan Rock n…
    mbot di Yang Terjadi Pada Bahu Ayah In…
    ganganjanuar di Yang Terjadi Pada Bahu Ayah In…
    mbot di OGC 2017: Udah Pernah ke Roma,…
    Tjetje [binibule.com… di OGC 2017: Udah Pernah ke Roma,…
    mbot di OGC 2017: Udah Pernah ke Roma,…
    enkoos di OGC 2017: Udah Pernah ke Roma,…
  • Terfavorit

  • Terbanyak diklik

  • Masukin email lu di sini agar dapat notifikasi tiap kali ada tulisan baru

    Bergabunglah dengan 4.241 pengikut lainnya

  • Twitnya @mbot

  • Agung ‘si mbot’ Nugroho

  • Arsip

  • Penunggu blog ini

    mbot

    mbot

    Seorang pegawai biasa-biasa aja

    Layanan Terverifikasi

    Tampilkan Profil Lengkap →

  • RSS Nonton Deh!

    • Sensasi Nonton Pengabdi Setan Bareng Emak-Emak Setan 8 Oktober 2017
      Sejak lama, Joko Anwar terobsesi dengan film horor. Menurutnya, horor adalah genre film yang paling jujur. Tujuannya ya nakut-nakutin penonton, bukannya mau ceramah, motivasi, atau menyisipkan pesan moral. Di kesempatan berbeda, gue juga pernah denger dia bilang, secara komersial film horor lebih berpotensi laku. Alasannya sederhana: karena takut, orang cend […]
    • Parodi Film: Jailangkung (2017) 26 Juni 2017
      SPOILER ALERTSPOILER ALERTSPOILER ALERTSPOILER ALERTSPOILER ALERTSPOILER ALERTFerdi (Lukman Sardi) diketemukan nggak sadar di sebuah rumah terpencil oleh pilot pesawat carterannya. Dia dirawat di ICU, tapi dokter nggak bisa menemukan apa penyakitnya.Anak Ferdi, Bella (Amanda Rawles), tentu kepikiran. Dia minta bantuan Rama (Jefri Nichol), seorang... yah, dib […]
    • Parodi Film: Suicide Squad (2016) 14 Agustus 2016
      SPOILER ALERT!Jangan baca kalo masih ingin penasaran dengan cerita film ini.SPOILER ALERT!SPOILER ALERT!SPOILER ALERT!Amanda Waller, pejabat intelijen, presentasi di depan sekumpulan pejabat militer. AMANDA: “Kita beruntung Superman yang barusan ini, yang sekarang lagi mati suri dan dipastikan akan hidup kembali dalam film berikut karena demikianlah pakem da […]
    • Parodi Film: Bangkit (2016) 12 Agustus 2016
      SPOILER ALERT!Jangan baca kalo masih ingin penasaran dengan cerita film ini.SPOILER ALERT!SPOILER ALERT!SPOILER ALERT!Ada bus kejeblos jurang. Muncul sang pahlawan, anggota Basarnas, bernama Addri. Ya, dengan 2 huruf D. Addri: “Saya akan menyelamatkan Anda semua, satu per satu. Kita mulai dari wanita dan anak-anak!”Beberapa menit kemudian, hampir semua penum […]
    • Kalo Fans Turun Tangan Ngeberesin Trailer Film 15 Mei 2016
      Hari gini, jadi produsen film 'mainstream' itu semakin nggak gampang. Masalahnya, software pembuat film makin gampang didapat, film bisa dibikin secara "rumahan" dan akibatnya: penonton makin kritis. Sepuluh tahun lalu, saat produsen film melempar trailer promosi ke pasar, kemungkinannya cuma dua: orang tertarik atau nggak tertarik. Sekar […]
    • Review: My Stupid Boss (2016) 14 Mei 2016
      Nggak kerasa udah 7 tahun sejak gue pertama kali bikin review tentang buku My Stupid Boss. Dalam kurun waktu tersebut bukunya udah masuk jilid 5, plus sempet ada antologi cerita boss-boss bego kiriman pembaca juga, dan… difilmkan!Kemarin gue kembali beruntung dapet kesempatan nonton premiere film My Stupid Boss the Movie, sebagai (kalo nggak salah) premiere […]
    • Review: 5th Wave (2016) 17 Januari 2016
      Coba deh tonton trailer film ini:Action? Check.Alien? Check.Chloë Grace Moretz? Check.Jelas, gue langsung memutuskan nonton.Ekspektasi gue adalah film sejenis Battle Los Angeles (2011) atau War of the Worlds (2005) atau Independence Day (1996), tentang bumi yang diserang alien jahat dan berisi adegan-adegan perang seru.Begitu filmnya mulai, adegan dibuka den […]
    • Review: Ngenest: Kadang Hidup Perlu Ditertawakan (2015) 5 Januari 2016
      Tentang kenapa di sini kaum Cina ‘diperlakukan khusus’ adalah pertanyaan yang belum berhasil gue temuin jawabannya. Kenapa kita bisa santai bilang, “Si Joko Jawa, Si Tigor Batak, Si Asep orang Sunda,” tapi giliran “Si Ling Ling” mendadak kagok, lantas jadi nginggris: “Chinese”? Atau yang lebih absurd lagi: pencanangan sebutan Cina diganti jadi Tionghoa oleh […]
    • Obrolan Film Merangkap Ujian Kesabaran 9 April 2015
      Setiap orang punya penghayatan beda tentang film. Ada yang suka ngapalin berbagai detil tentang film favoritnya, ada juga yang bisa inget judul aja udah syukur. Sah-sah aja sih sebenernya. Yang bikin senewen adalah NGEDENGERIN orang-orang tipe terakhir saling ngobrol. Kemarin, karena udah kemaleman untuk jalan kaki, gue pulang naik angkot. Di dalemnya ada 2 […]
    • Review: Guru Bangsa: Tjokroaminoto (2015) 6 April 2015
      Baru kali ini gue sampe merasa perlu "belajar" dulu sebelum nonton film. Ada dua pemicunya. Pengalaman nonton film Lincoln: udah mana pengetahuan gue tentang sejarah Amerika minim banget, cuma ngerti Lincoln itu anti perbudakan dan matinya ditembak, eh di filmnya muncul tokoh banyak banget yang mukanya nampak sama semua karena rata-rata berewokan.  […]
  • RSS Bisnis bareng Ida Yuk!

    • Banyak orang gagal jalanin MLM? Bukan..mereka BERHENTI. 1 September 2016
      'Udah pernah join dulu mbak, tapi gagal….’ Pernah denger kalimat ini saat mengajak seseorang join oriflame? Saya sering..  Alasan ‘kegagalan’-nya macam-macam.. Ada yg karena modalnya mandeg gara-gara jualan produk oriflamenya sistem hutang maka menilai bisnisnya gagal , ada yg ditolak 10 orang lalu merasa gak bakat dan gagal, ada yg gak naik-naik level […]
    • Konsultan Oriflame seperti siapakah Anda: Neil Armstrong atau Lance Armstrong? 26 Agustus 2016
      Ada dua orang Armstrong yang menempati ruang khusus di hati rakyat Amerika. Keduanya berjasa, telah terbukti komitmennya, dan menunjukkan keberanian yang menginspirasi banyak orang. Namun, kisah mereka memiliki akhir yang berbeda. Yang pertama adalah Neil Armstrong, astronot Amerika. Sebagai orang pertama yang menginjakkan kaki di bulan, namanya kondang ke s […]
    • Bangga Jualan, Sekarang Juga! 25 Agustus 2016
      "Malu Jualan", barengan sama "Gampang Percaya Hoax" dan "Jam Karet"adalah kebiasaan-kebiasaan yang penting segera diberantas karena bikin Indonesia susah maju. Tapi "Malu Jualan" adalah yang paling parah. Beberapa waktu lalu, seorang teman yang lama nggak kedengeran kabarnya tiba-tiba muncul dengan pertanyaan, "Gu […]
    • Kerja Oriflame itu seperti apa sih? 24 Agustus 2016
      Dulu, waktu pertama kali baca tentang Oriflame, liat cerita sukses para top leader yang berhasil dapat penghasilan bulanan hingga puluhan juta, dapat mobil, jalan-jalan ke luar negeri, aku bertanya-tanya, "Ini kerjanya gimana sih sebenernya? Kok kayaknya seru banget. Nggak harus terikat jam kerja kayak kantoran tapi bisa pada punya uang jutaan!" Se […]
    • Skin Pro Oriflame, Membersihkan Wajah 5x Lebih Bersih 23 Agustus 2016
      Membersihkan wajah itu penting! Aku menyarankan metode 2 langkah untuk pembersihan wajah, yaitu: 1. Susu Pembersih 2. Toner Untuk menuntaskan pembersihan, kita mencuci muka menggunakan sabun muka yang sesuai dengan jenis kulit. Cuci muka pakai tangan saja hasilnya ternyata kurang maksimal, karena kotoran dalam pori-pori tidak bisa terangkat sepenuhnya. Orifl […]
    • Edukasi MLM untuk Abang Gojek 22 Agustus 2016
      Aku baru pulang dari training skin care di Oriflame Daan Mogot. Pulangnya seperti biasa panggil Gojek. Di jalan, abang Gojeknya tanya, kenapa ramai sekali kantor Oriflame Daan Mogot hari itu. Rupanya dia biasa mangkal di depan kantor Oriflame dan keramaian hari itu lebih dari biasanya. Aku bilang, habis ada training besar, yang pesertanya sampai 300 orang. T […]
    • Scrub Bibir ala Ida dengan Tendercare dari Oriflame 21 Agustus 2016
      Banyak downline dan pelanggan yang menanyakan, apakah Oriflame sudah mengeluarkan produk scrub untuk bibir. Sayangnya, sampai hari ini belum. Tapi kita bisa membuat scrub bibir sendiri lho, dengan memanfaatkan produk andalan Oriflame, si kecil mungil ajaib Tendercare. Silakan tonton videonya ya! Bonus: Di menit 4:55 ada kejutan khusus gara-gara shootingnya d […]
    • NovAge, Skin Care favorite aku! 19 Agustus 2016
      Soal urusan merawat wajah, aku udah buktiin sendiri deh pokoknya. Produk Oriflame yg sesuai kalau dipakainya secara KONSISTEN dan SABAR, hasilnya beneran NYATA. Sebagai yg kulit wajahnya cukup rewel--sensitif maksudnya, aku dulu takut sekali coba sembarang skin care. Soalnya salah-salah pakai produk pastiii jerawatan dan bruntusan. Ah sedih deh pokoknya. Mak […]
    • Oriflame bagi-bagi Tab Advan, ini pemenang dari teamkuu.. :-) 17 Agustus 2016
      Bulan April 2016 lalu Oriflame bikin challenge KEREN BANGET!Apalagi kalau gak bagi-bagi hadiah kan? Judul challenge-nya 'NOW OR NEVER'.Persyaratannya bisa dibilang MUDAH SEKALI lho. Para konsultan yang ingin dapat hadiah ini cukup meraih level baru 9% atau 12% atau 15% di bulan April 2016, lalu mempertahankannya di bulan berikutnya. Serta ada syara […]
    • Merawat wajah itu SABAR dan KONSISTEN. 20 Juni 2016
      Yang namanya perawatan kulit wajah itu BUTUH WAKTU ya teman2. Minimal banget hasil mulai terlihat nyata pada minggu ke 4 ya.. sekitar 28 hari, sesuai siklus pergantian kulit kita. Baca lagi, aku tulis-- 'MULAI terlihat nyata'. Bukan berarti langsung tau2 muka berubaaaaah gitu. Gak bisa. Tapi umumnya akan terlihat perbedaan pada minggu ke 4. Apalagi […]
%d blogger menyukai ini: