Mengenal Cara Kerja CSS (Cascading Style Sheet)

irnanto.com – Sebelum mengenal cara kerja CSS, alangkah baiknya kita mengenal dulu apa itu CSS ?. Cascading Style Sheet atau CSS adalah salah satu bahasa pemrograman desain web yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan bahasa penanda atau markup language. CSS biasanya digunakan untuk mendesain halaman HTML, XHTML, XML, SVG, XSL, XUL, dan lain sebagainya.

Tujuan utama CSS diciptakan adalah untuk membedakan konten dari dokumen dan tampilan dari dokumen tersebut, dan dengan menggunakan CSS, pembuatan web akan lebih mudah dilakukan karena menyediakan lebih banyak fleksibilitas dan kontrol dari sebuah karakteristik tampilan.

Cara Kerja CSS

CSS bekerja dengan menggunakan dua elemen penting untuk pemformatan tampilannya, yaitu elemen deklarator dan selektor. Elemen deklarator berfungsi sebagai penentu format tampilan dan elemen selektor berfungsi sebagai penempat atau menempatkan format tampilan. Contoh source code penggunaan deklarator dan selektor seperti di bawah ini.

<html>
    <head>
        <title>Penggunaan deklarator dan selektor</title>
        <style type=”text/css”>
            .model{
                font-family:arial;
                color:#00FF00;
                font-size:14px;
            }
        </style>
    </head>
    <body>
        <p class=”model”>Contoh penggunaan deklarator dan selektor di irnanto.com</p>
    </body>
</html>

.model merupakan deklarator dan class=”model” merupakan selektor. Format tampilan yang diatur dalam deklarator .model adalah jenis font arial, warna hijau, ukuran font 14px dan hasil tampilannya seperti dibawah ini.

contoh hasil penggunaan deklarator dan selektor css

Cara Kerja Style Sheet dalam Browser

Bagaimana cara kerja style sheet atau CSS dalam browser ?. Style sheet mengandung informasi yang memberitahu browser untuk menampilkan sebuah halaman sesuai dengan gaya atau style yang telah didefinisikan sebelumnya.

Ada dua cara sebuah style sheet dapat berhubungan dengan sebuah dokumen HTML, yang pertama style sheet dapat di-embed di dalam tag head pada dokumen HTML dan cara yang kedua yaitu dengan meletakkan sebuah link pada bagian tag head dari HTML yang berfungsi menghubungkan file dokumen HTML dengan style sheet yaitu HTML.

Sebenarnya ada satu cara lagi style sheet dapat di baca yaitu dengan meng-inline kode CSS ke dalam nilai properti dari tag HTML, tetapi cara ini kurang optimal karena kita harus merubah tiap halaman dan bagian tag secara keseluruhan.

CSS Inline Style

Kode CSS akan diletakkan di dalam nilai salah satu properti dari elemen atau tag pada bagian HTML. Contoh Penggunaannya seperti di bawah ini.

<h3 style=”color:#FF0000;font-weight:bold;”>CSS Inline Style</h3>

Tag heading 3 atau H3 memiliki atribut style yang memiliki nilai color:#FF0000 dan font-weight:bold.

Meng-embed Style Sheet di Dokumen HTML

Format style sheet yang di embed dalam tag head seperti dibawah ini.

<style type=”text/css”>kode CSS diletakkan di sini</style>

meng-embed style sheet sebenarnya bukanlah solusi yang baik untuk membuat web design, karena kita akan kehilangan salah satu kelebihan CSS yaitu kemampuan memodifikasi seluruh halaman website dengan hanya melakukan perubahan satu file saja yaitu file CSS.

Menghubungkan Style Sheet di Dokumen HTML

File style sheet tidak dapat dijalankan jika file style sheet tersebut tidak dihubungkan dengan dokumen HTML. Kita harus menghubungkan file style sheet tersebut pada tag head dengan sintaks: