Ilusi Media Logo
 

Belajar CSS dasar

May 10. 2011, under CSS with No Comments

CSS kepanjangan dari Cascading Style Sheets, CSS adalah bahasa yang digunakan untuk mengatur desain halaman HTML atau XHTML. CSS ini merupakan standarisasi dalam mendesain sebuah web yang dikembangkan oleh W3C (World Wide Web Consortium). Dengan CSS ini pekerjaan seorang webdeveloper atau webdesigner menjadi lebih mudah, karena dengan hanya menuliskan satu style saja bisa digunakan berulang-ulang kali.

Selector digunakan untuk menentukan pada element apa sebuah style akan diterapkan. Selector juga bisa berupa “id” biasanya menggunakan tanda “#” (tanpa kutip) dan berupa “class” dengan tanda “.” (tanpa kutip). Untuk bagian Declaration adalah bagian untuk menerangkan/menuliskan style apa yang akan di buat, pada bagian declaration ini terdiri dari dua bagian yaitu Property dan Value. Property adalah tempat untuk mengisi style yang akan digunakan, seperti pada contoh gambar diatas saya mengisikan dengan color yaitu untuk merubah jenis warna, bisa juga diisi dengan font-size (ukuran font), background-color (warna background) dll. Sedangkan Value adalah tempat untuk mengisi nilai dari Property, seperti contoh di gambar atas, saya mengisi dengan “#000″.

Aturan Penulisan CSS

sturktur css

Untuk aturan penulisan css di bagi menjadi 3, yaitu External CSS, Internal CSS, dan Inline CSS.

  1. External CSS
    External CSS adalah sebuah document/file yang hanya berisikan kode kode CSS, extensi file css biasanya “.css”. External CSS ini terpisah dari file HTML, untuk di butuhkan sebuah perintah untuk menghubungkan/memanggil External CSS pada file HTML. Contoh perintah :
    [php highlight="4"]<html>
    <head>
    <title>Belajar CSS</title>
    <link rel=”stylesheet” type=”text/css” href=”file.css” />
    </head>
    <body>
    <h3> Belajar CSS </h3>
    </body>
    </html>[/php]Anda bisa lihat baris yang saya beri highlight, perintah href seperti di atas yang digunakan untuk memanggil External CSS dengan contoh saya beri nama “file.css”. External CSS merupakan cara penulisan yang lebih sering digunakan, karena dalam file ini hanya ada kode-kode css saja, untuk itu memudahkan dalam hal pengeditan.
  2. Internal CSS
    Internal CSS adalah kode-kode css yang dipasang didalam file HTML, lebih tepatnya ditaruh di dalam tag “< head >” dan sebelum tag “< / head >”. Contoh :
    [php highlight="4,5,6,7"]<html>
    <head>
    <title>Belajar CSS</title>
    <style type=”text/css”>
    p {color: red;font-size:12px }
    body {background-color: white; }
    </style>
    </head>
    <body>
    <p>Belajar CSS</p>
    </body>
    </html>[/php]Bagian yang di beri highlight merupakan contoh dari Internal CSS, Internal CSS digunakan hanya dalam kondisi tertentu saja apabila ingin merubah sebuah element yang hanya ada pada satu halaman HTML atau bisa juga dipakai untuk sebuah halaman statis(tidak berubah-ubah).
  3. Inline CSS
    Inline CSS merupakan cara pemasangan kode CSS yang langsung ditulis pada tag HTML. Memang tidak direkomendasikan menggunakan cara ini, namun tidak bisa dipungkiri saya pun masih menggunakan cara ini apabila berada dalam sebuah kondisi yang harus merubah satu atau dua element yang hanya ada dalam satu halaman saja.Contoh :
    [php highlight="6"]<html>
    <head>
    <title>Belajar CSS</title>
    </head>
    <body>
    <p style=”font-size:14px;margin:1em;”>Belajar CSS</p>
    </body>
    </html>[/php]

No Comments

Leave a Reply