Posted by : Rhyf Ahmad Monday, March 12, 2012

Setelah membuat posting mengenai HTML, gag asyik kalo melewatkan yang satu ini. Tema postingan kali ini tentang Cascading Style Sheet atau biasa disebut dengan CSS. Opo meneh iki bang?
Kode-kode CSS biasa digunakan untuk memudahkan para web designer untuk merancang sebuah web. Dengan kode CSS, web designer dan sobat Blogger tentunya, bisa menghemat ruang dan tidak perlu menuliskan tag atau atribut HTML secara berulang, cukup menuliskannya satu kali di dalam tag STYLE.
CSS sendiri adalah sebuah teknologi dalam dunia internet yang dikenalkan oleh World Wide Web Consortium (W3C) pada tahun 1996.
Jenis-jenis penulisan kode CSS terbagi menjadi dua macam, di antaranya.
  • Inline Style Sheet
    Kode-kode CSS dalam metode ini dituliskan secara langsung pada tag HTML dengan menambahkan atribut style="...". Atribut style tersebut hanya berpengaruh pada tag HTML yang disisipi atribut itu saja, dan tidak mempengaruhi pada tag HTML lainnya. Contoh penulisan kode CSS dengan menggunakan metode ini adalah sebagai berikut:
    <html>
    <head>
    <title>Ini Adalah Contoh Penggunaan Metode Inline</title>
    </head>
    <body bgcolor"00FF00">
    <p>Tulisan ini tanpa menggunakan kode CSS</p>
    <p style="font-size:12px">Tulisan ini berukuran 12 pixel</p>
    <p style="font-size:12px; color:red">Tulisan ini berwarna merah dan berukuran 12 pixel</p>
    </body>
    </html>

  • Embedded Style Sheet
    Metode ini berbeda dengan metode sebelumnya, di mana kode-kode CSS biasanya dituliskan terlebih dahulu di dalam tag <style>...</style> di bawah tag </head> dan di atas tag <body>. Kode-kode CSS ini nantinya akan digunakan oleh tag-tag HTML lainnya yang bersangkutan. Contoh penggunaan metode ini adalah:
    <html>
    <head>
    <style>Ini Adalah Contoh Penggunaan Metode Embedded</title>
    </head>
    <style>
           body {background:#00FF00; color:#00FF00}
           h1 {color:#00000; font-size:12px}
    p {font-size:14px; color:#000000}
    </style>
    <body>
    <h1>Header ini berwarna hitam dan berukuran 12 pixel</h1>
    <p>Teks ini berukuran 14 pixel dan berwarna hitam</p>
    </body>
    </html>
Stetelah mengetahui cara penulisan kode CSS seperti yang saya tuliskan di atas, sekarang kita akan mencoba menuliskan dua objek dengan dan tanpa menggunakan kode CSS.
  • Tanpa menggunakan kode CSS
    Silahkan sobat Blogger mencoba menuliskan kode di bawah ini dengan menggunakan Notepad.
    <html>
    <head>
    <title>Tidak Menggunakan CSS</title>
    <body bgcolor="#00FF00">
    <font face="book antiqua" size="12px">
    <p>Tulisan ini tidak menggunakan kode <b><font color"red">CSS</font></b></p>
    <p>Tulisan ini juga sama, tidak menggunakan kode <b><font color="red">CSS</font></b></p>
    </font>
    </body>
    </html>
Terlihat begitu banyaknya atribut yang dituliskan di dalam tag HTML, hal ini tidak akan terjadi jika sobat Blogger menggunakan kode CSS di dalamnya.
  • Menggunakan kode CSS
    Nah, sekarang kita akan mencoba menggunakan kode CSS di dalam tag <style>
    <html>
    <head>
    <title>Menggunakan Kode CSS</title>
    </head>
    <style type="text/css">
          body{background-color: #00FF00; font-family:book antiqua; font-size:12px}
          b{color:red}
    </style>
    <body>
    <p>Nah,,,,,kalo text ini menggunakan kode<b>CSS</b></p>
    <p>Ini juga sama menggunakan kode<b>CSS</b></p>
    </body>
    </html>
Setelah selesai menulis kedua cara tersebut (dengan dan tanpa menggunakan kode CSS), silahkan simpan dengan nama CSS1 (tanpa CSS) dan CSS2 (dengan CSS), bandingkan hasilnya, sama bukan..
Selamat mencoba.

Leave a Reply

You can leave a comment to request any article(s), software(s), ebook(s) or report the dead link.
Then I will reply as soon as I can :)

Subscribe to Posts | Subscribe to Comments

Welcome to My Blog

Recent Post

Recent Posts Widget
Instagram

- Copyright © Madriva -Robotic Notes- Powered by Blogger - Designed by Johanes Djogan -