Pengenalan CSS

Sejarah

CSS pertama kali bermula sejak munculnya SGML pada tahun 1970an. Sejak kemunculannya tersebut, CSS mengalami perkembangan yang sangat pesat.
Format dasar CSS yang banyak kita gunakan sekarang ini merupakan ide dari seoang programmer bernama Hakon Wium Lie yang tertuang dalam proposalnya mengenai Cascading HTML Style Sheet (CHSS) pada bulan Oktober 1994 (dalam konferensi W3C di Chicago, Illinois).
Kemudian, beliau bersama-sama dengan seorang temannya yang bernama Bert Bos mengembangkan suatu standard CSS.

Pada akhir tahun 1996, CSS telah resmi dipublikasikan (dan menyusul kemudian CSS Level 1 pada bulan Desember). Pengerjaan proyek ini juga didukung oleh seorang programmer bernama Thomas Reardon dari perusahaan software ternama, Microsoft.
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).
Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran, gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.
CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Pengertian

CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.

Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.

Penulisan

Sekarang penggunaan CSS telah semakin meluas dan terus dikembangkan. Hal ini juga akan mempermudah seorang web designer dalam mengembangkan suatu halaman web (situs).

Ada 3 cara untuk memasang Script CSS pada dokumen HTML yaitu :

Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan)
Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
External Style Sheet (file CSS terpisah dari file HTML)

Berikut contoh pemasangan Script CSS pada dokumen HTM

Inline Style Sheet :

<html>
    <head>
        <title>KodingOnline</title>
    </head>
    <body>
        <!-- Perharikan Link <a href="" ini didalamnya ada "style",
             style=”font-size: 20px; font-family: Calibri;” ini adalah CSS Inline Style Sheet  -->

        <a href=”#” style=”font-size: 20px;”>KodingOnline Belajar CSS</a>
                                <!-- ^ -->
                     <!-- Ini Inline Style Sheet -->    
    </body>
</html>

Internal Style Sheet :

<!DOCTYPE html>
<html>
    <head>
        <title>KodingOnline</title>

        <!-- CSS ini ada di awali dengan code "<style type=”text/css”>",
             dan di akhiri "</style>" yang ada di atas "</head>" 
        -->

        <style type="text/css">

            /* CSS a{} ini merubah semua bagian html yang ada di body dengan code '<a href=""></a>' 
               menjadi ukuran font nya '20px' dan berwarna 'Biru'.
            */

            a{
                font-size: 20px;
                color: blue;
            }

            /*  CSS pengguna-class{} merubah ukuran lebar '200px' dan mengubah background warna 'Biru',
                dengan syarat memasukan nya dengan sebuah class,
                contoh penggunaan ada dibawah pada '<div class="pengguna-class"></div>'.
            */

            .pengguna-class{
                width: 200px;
                background: blue;
            }

            /*  Perbedaan penulisan CSS '.' dan '#',
                perbedaan nya jika menggunakan  '#' harus menggunakan 'id' pada html-nya,
                Jik '.' menggunakan 'class' contoh ada di bawah.
            */

            #pengguna-id
            {
                width: 200px;
                background: green;
            }

            /*  Perlu di ingat kedua nya sangat berbeda,
                Saya sarankan untuk menggunakan '.' saja,
                Penggunaan pada '.' dapat menggabungkan 2 CSS atau lebih,
                Penulisan => '<div class="pengguna-class penggunaa-class2"></div>'
                Sedangkan penggunaan '#' tidak bisa,
                dan biasanya kalau pakai '#' sering bentrok dengan javascript.

                Contoh menggunakan 2 css sekaligus ada di bawah
            */

            .penggunaa-class2{
                color: red;
            }

        </style>
    </head>
    <body>

        <a href=””>KodingOnline</a>

        <div class="pengguna-class">Penggunaan 'class'</div>
                  <!-- ^ -->
                  <!-- Ini di ambil dari CSS '.pengguna-class' di atas -->

        <div id="pengguna-id">Penggunaan 'id'</div>
                  <!-- ^ -->
                  <!-- Ini di ambil dari CSS '#pengguna-id' di atas -->

        <div class="pengguna-class penggunaa-class2">Penggunaan Multi CSS pada 'class'</div>
                  <!-- ^ -->
                  <!-- Ini di ambil dari CSS '.pengguna-class' dan '.pengguna-class2' di atas -->

    </body>
</html>

External Style Sheet :

HTML File :

<html>
    <head>
        <title>KodingOnline</title>

        <!-- Ini penggunaan External Style Sheet yang berarti file CSS nya ada di luar  -->

        <link rel=”stylesheet” type=”text/css” href=”style.css”>
                                                    <!-- ^ -->
                                                    <!-- ini untuk nama css-nya
                                                         yang ada di folder yang sama dengan html nya
                                                    -->

        <link rel=”stylesheet” type=”text/css” href=”folder/style.css”>
                                                    <!-- ^ -->
                                                    <!-- ini untuk nama css yang ada di dalam folder html-nya -->

        <link rel=”stylesheet” type=”text/css” href=../style.css”>
                                                    <!-- ^ -->
                                                    <!-- ini untuk nama css yang ada di luar folder html-nya -->

        <!-- Untuk penggunaan di dalma html body nya itu sama saja dengan Internal Style Sheet  -->
    </head>
    <body>

        <a href=””>KodingOnline</a>

    </body>
</html>

CSS File :

a{
    text-decoration: none;
    color: blue;
    font-size: 20px;
}

Keuntungan dan Kekurangan

Keuntungan Penggunaan CSS
Jika anda memiliki beberapa halaman website dimana anda menggunakan fontarial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.
Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet. Jadi, keuntungan menggunakan CSS, lebih praktis!
Kekurangan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain.
Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser