Membuat desain web yang menarik dengan CSS

Bagi sobat yang sudah mengerti tentang HTML, tentu tidak asing lagi dengan yang namanya CSS. namun bagi sobat yang belum pernah menjamah sama sekali hal-hal yang berbau perancangan web, CSS mungkin agak terdengar Asing. Nah, sebelum mengetahui apa itu CSS, sepertinya kita perlu tahu dulu nih.. kenapa sih harus belajar perancangan web? Hmmm.... sobat tentu sudah tahu bahwa perkembangan teknologi informasi belakangan ini terlihat begitu pesat. Hampir tiap perusahaan baik yang ada di indonesia maupun mancanegara merubah cara berpromosi dari yang tadinya hanya sekedar offline, sekarang sudah merambah ke dunia internet (tanpa melupakan promosi offline tentunya). Disinilah para desainer dan programmer web sangat diperlukan. Bahkan, salah satu teman saya pernah mendapat penghasilan Rp 500.000 hanya untuk menuliskan beberapa baris kode CSS, dan pekerjaan itu diselesaikan dalam waktu kurang dari satu jam. bayangkan..

bagi seorang pemula, penghasilan sebesar itu sudah dianggap cukup besar bukan..?

Apa itu CSS?
    CSS adalah script yang biasa digunakan untuk memformat style pada suatu dokumen HTML. CSS sendiri merupakan singkatan dari Cascading Style Sheet. CSS bukanlah suatu bahasa pemrograman, CSS hanyalah sebuah style sheet. Script CSS tidak mengandung fungsi-fungsi seperti IF, For, While dsb. Oleh karena itu, bagi sobat yang kurang menyukai bahasa pemrograman, tidak usah takut dengan CSS karena selain handal CSS juga mudah untuk digunakan.
Manfaat menggunakan CSS
    CSS diciptakan karena adanya keterbatasan pada HTML untuk menciptakan tampilan web yang menarik. Dengan menggunakan CSS, kita bisa membuat tampilan web yang lebih menarik. Contoh yang paling sederhana adalah sebagai berikut:
Dengan menggunakan HTML biasa tampilan unordered list akan tampak seperti berikut:

• Belajar PHP dengan Framework Code Igniter
• Dibayar 300 Ribu Setiap Bulan Tanpa Modal. Mau?
• Pemrograman C++ (part IV)
• Pembuatan Pemesanan PHP dan MySQL
• CD Interaktif Company Profile Perusahaan Sebagai Sarana Promosi 2010
• PHP - Kompilasi ke Windows/Linux Executable
• Dasar Java 1

Dengan menggunakan CSS kita bisa memodifikasi tampilan unordered list diatas menjadi lebih menarik, contohnya adalah sebagai berikut:

Selain contoh diatas, manfaat CSS lainnya adalah kita bisa mengubah tampilan website kita dengan lebih rapi dan tentunya lebih cepat. Bahkan, terkadang kita hanya perlu mengubah sebaris kode saja untuk mengubah seluruh tampilan website kita.
Bagaimana menggunakan CSS
    Dalam menggunakan CSS, alangkah baiknya jika sobat telah menguasai HTML. Karena sebagian besar kode CSS yang digunakan nantinya akan diterapkan pada dokumen HTML. Suatu style CSS sama sekali bukanlah apa-apa jika tidak ada elemen HTML yang menampilkan style yang ada di dalamnya.

    Ada 3 tipe penggunaan CSS, diantaranya adalah sebagai berikut:
1) Inline CSS
       Yaitu suatu style CSS yang dituliskan secara langsung bersama kode elemen HTML yang ingin dirubah style-nya. Contohnya adalah sebagai berikut:

<font style="color:blue">Ini Tulisan Berwarna Biru</font>

Contoh diatas adalah kode HTML yang digunakan untuk menampilkan kata-kata “Ini Tulisan Berwarna Merah” dengan warna merah:

    Ini tulisan Berwarna Biru

Kode CSS diatas akan menampilkan hasil yang sama dengan kode dibawah ini:

        <font color="blue">Ini Tulisan Berwarna Biru</font>

2) Internal CSS
       Internal CSS adalah style CSS yang dituliskan pada bagian header dokumen HTML. Berikut cara menuliskannya:

     <style type="”text/CSS”">
    ……Kode CSS….
     </style>

3) Eksternal CSS
        Yaitu suatu style CSS yang berada pada suatu dokumen terpisah, dan dihubungkan dengan suatu dokumen HTML. File ini diberi nama dengan ekstensi CSS, misalnya "latihan1.CSS". Untuk menggunakannya, dokumen ini kemudian dihubungkan dengan suatu dokumen HTML dimana style CSS tersebut diaplikasikan.Untuk menghubungkan CSS dengan dokumen HTML, tulisankan tag berikut pada header dokumen HTML.

<link href="latihan1.css" rel="stylesheet" type="text/css">

Kalau dijelaskan secara sederhana perbedaan antara inline,internal dan eksternal adalah sebagai berikut:
1) Inline Ditulis pada body HTML
2) Internal Ditulis pada bagian Header HTML
3) Eksternal ditulis pada File terpisah
        Seperti itulah kira-kira gambaran awal mengenai CSS, Semoga bermanfaat bagi sobat yang baru memulai belajar CSS.
thx