Pengenalan dan Sintaks Dasar CSS

Toni Haryanto 13 Juli 2016

Pengenalan dan Sintaks Dasar CSS

CSS singkatan dari Cascading Style Sheets. Secara bahasa berarti lembaran gaya yang mengalir ke bawah. Kamu akan kebayang dengan istilah ini setelah nanti tau penggunaan dan bentuknya. Secara istilah, CSS adalah bahasa penulisan yang digunakan untuk mendeskripsikan penampilan sebuah dokumen markup. CSS selalu digunakan bersamaan dengan HTML, meskipun kita dapat juga menggunakannya untuk mengatur style dokumen markup lain seperti XML, SVG dan XUL. Agar lebih terbayang, coba perhatikan tiga dokumen HTML di bawah ini dan lihat perbedaan tampilannya.

Dokumen #1:

Dokumen #2:

Dokumen #3:

Ketiga dokumen HTML di atas isinya sama. Tapi dokumen yang kedua dan ketiga dilengkapi dengan CSS sedangkan yang pertama hanya dokumen HTML saja (tanpa CSS). Untuk melihat bagaimana tampilan penulisan CSS, klik tab CSS yang ada di bagian atas dokumen kedua dan ketiga.

Mengapa Harus Menggunakan CSS?

HTML dirancang tidak ditujukan untuk mendesain sebuah halaman web, tapi hanya untuk menampilkan konten saja. Pada saat HTML beranjak ke versi 3.2, diperkenalkan tag <font> yang digunakan untuk mengatur tampilan sebuah teks, seperti jenis font yang digunakan, warna, dan ukuran. Tapi dengan adanya tag ini, malah jadi menyulitkan proses development, karena tag ini mesti disematkan di banyak halaman untuk mendapatkan hasil style yang sama. Bayangkan ketika kita sudah memiliki banyak halaman web, belasan atau puluhan, lalu kemudian hendak mengedit beberapa style saja misalkan ukuran font dan ingin semua halaman mendapatkan perubahan yang konsisten. Maka kita harus memperbaharui tag tersebut di setiap halaman satu per satu!

Untuk itu, dibuatlah CSS, yang memisahkan style dari halaman web, sehingga antara konten pada HTML dan desain tampilan pada dokumen CSS dapat dikerjakan di dua tempat berbeda. Dengan kata lain, dokumen HTML cukup berisi konten saja, dan satu dokumen CSS dapat disematkan pada setiap dokumen HTML agar semuanya menampilkan style yang sama dan konsisten.

Penerapan CSS Pada HTML

CSS biasanya disimpan di dalam sebuah file berekstensi .css dan disematkan di dalam dokumen HTML untuk memberikan style pada halaman tersebut. Meski demikian, kita tetap dapat menambahkan sintaks CSS langsung di dalam dokumen HTML, di dalam tag <style></style> untuk mengakomodir penerapan style yang hanya digunakan di dalam dokumen tersebut. Kita juga dapat menyematkan sintaks CSS langsung di dalam atribut style pada suatu tag HTML untuk menerapkan style yang hanya digunakan pada tag itu saja. Berikut adalah contoh penerapan ketiga mode tersebut:

Dokumen yang disematkan file style.css:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML dengan CSS</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
<body>
    <h1>Selamat Datang, Programmer!</h1>
    <p>Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>

Dokumen dengan CSS di dalamnya:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML dengan CSS</title>
        <style>
            h1 { text-align: center; color: lightsteelblue; }
        </style>
    </head>
<body>
    <h1>Selamat Datang, Programmer!</h1>
    <p>Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>

Dokumen dengan CSS pada tag:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML dengan CSS</title>
    </head>
<body>
    <h1 style="text-align:center; color:lightsteelblue;">Selamat Datang, Programmer!</h1>
    <p>Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>

Sintaks CSS

Sekarang mari kita perhatikan sintaks penulisan kode CSS: 
h1 { text-align: center; color: red; }
Pada contoh kode di atas:
  • h1 -> selector
  • { text-align: center; color: red; } -> deklarasi style
  • text-align -> property
  • center -> value
  • color -> property
  • red-> value
Selector adalah bagian CSS untuk merujuk elemen HTML yang ingin dikenakan style. Ada beberapa jenis selector yang dapat kita gunakan untuk memudahkan pekerjaan styling kita pada CSS, seperti selector element, selector class, dan selector id.

Pada kode di atas elemen yang dirujuk oleh kode CSS kita adalah <h1>. Elemen <h1> ini kita buat supaya tulisannya rata tengah, maka kita beri property text-align dengan value center. Property dan value CSS dipisahkan dengan tanda titik dua (:). Kita dapat memberikan lebih dari satu property style dengan memisahkan antar property dengan tanda titik koma (;).  property dan value disimpan di dalam kurung kurawal { dan }.

Selector Element

Selector ini mengacu elemen HTML berdasarkan nama elemennya. Pada contoh berikut: 
<!DOCTYPE html>
<html>
    <head>
        <title>HTML dengan CSS</title>
        <style>
            h1 { color: red; }
            p { color: blue; }
        </style>
    </head>
<body>
    <h1>Welcome</h1>
    <h1>Selamat Datang, Programmer!</h1>
    <p>Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>
itu berarti kita menerapkan style color:red pada semua elemen <h1> yang ada di dokumen dan menerapkan style color:blue pada semua elemen <p>.

 

Selector class

Selector ini mengacu elemen berdasarkan nama classnya. Nama class pada elemen diacu dengan nilai atribut class diawali oleh tanda titik (.). Pada contoh berikut: 
<!DOCTYPE html>
<html>
    <head>
        <title>HTML dengan CSS</title>
        <style>
            .merah { color: red; }
        </style>
    </head>
<body>
    <h1>Welcome</h1>
    <h1 class="merah">Selamat Datang, Programmer!</h1>
    <p class="merah">Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>
pada dokumen di atas semua elemen yang memiliki atribut class merah yakni elemen <h1> yang kedua dan <p> akan berwarna merah. Elemen <h1> yang pertama tidak dikenai style karena tidak memiliki atribut class="merah".

Contoh lain:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML dengan CSS</title>
        <style>
            h1.merah { color:red; }
        </style>
    </head>
<body>
    <h1>Welcome!</h1>
    <h1 class="merah">Selamat Datang, Programmer!</h1>
    <p class="merah">Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>

pada dokumen di atas, elemen yang teksnya berwarna merah hanyalah elemen <h1> yang kedua karena selector h1.merah berarti hanya memilih elemen <h1> yang memiliki atribut class="merah" saja. Elemen <p> juga tidak dikenai style meskipun memiliki atribut class merah.

Bandingkan contoh di atas dengan contoh di bawah ini:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML dengan CSS</title>
        <style>
            h1 .merah { color:red; }
        </style>
    </head>
<body>
    <h1>Welcome!</h1>
    <h1 class="merah">Selamat Datang, <span class="merah">Programmer</span> !</h1>
    <p class="merah">Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>

Pada contoh terakhir ini, teks yang berwarna merah hanya yang bertuliskan Programmer saja. Perhatikan selector pada CSS di atas, terdapat spasi antara h1 dan .merah. Spasi antar selector berarti mengacu pada elemen turunannya. h1 .merah berarti memilih elemen berclass merah yang ada di dalam elemen h1.

Selector id

Selector ini mengacu elemen berdasarkan nama idnya. Nama id pada elemen diacu dengan nilai atribut id diawali oleh tanda pagar (#). Pada contoh berikut: 
<!DOCTYPE html>
<html>
    <head>
        <title>HTML dengan CSS</title>
        <style>
            #judul-utama { color:red; }
            #subjudul { color:blue; }
        </style>
    </head>
<body>
    <h1 id="judul-utama">Welcome!</h1>
    <h2 id="subjudul">Selamat Datang, Programmer!</h2>
    <p>Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>
elemen <h1> akan berwarna merah dan <h2> akan berwarna biru.

Perhatikan lagi contoh ini:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML dengan CSS</title>
        <style>
            #hijau { color:green; }
        </style>
    </head>
<body>
    <h1 id="hijau">Welcome!</h1>
    <h1 id="hijau">Selamat Datang, Programmer!</h1>
    <p id="hijau">Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>

Pada contoh di atas, hanya elemen <h1> yang pertama saja yang berwarna hijau. Berbeda dengan selector class, selector id bersifat unik, artinya mesti hanya ada satu id spesifik dalam sebuah dokumen. Apabila ada dua atau lebih elemen yang ber-id sama seperti contoh di atas, maka hanya elemen yang ditemukan pertama kali (dari atas) pada dokumen saja yang dikenai style.

Untuk mengenakan style ke banyak elemen, gunakanlah class.

Menggabung Selector

Kita dapat mengenakan style yang sama kepada berbagai elemen, dengan memisah antar selector dengan tanda koma (,). 
<!DOCTYPE html>
<html>
    <head>
        <title>HTML dengan CSS</title>
        <style>
            h1, p { color:#333; text-align:center; }
        </style>
    </head>
<body>
    <h1>Selamat Datang, Programmer!</h1>
    <p>Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>
Pada contoh di atas,  semua elemen <h1> dan <p> pada dokumen akan dikenai style yang sama.

Penutup

Pada tutorial kali ini kita telah mempelajari apa itu CSS, apa kegunaan CSS dan cara menggunakannya, bagaimana sintaks CSS, apa itu selector, bagaimana menggunakan selector element, class dan id, serta menggabungkan selector untuk style yang sama.

 

Referensi: http://www.w3schools.com/css

Background cover oleh Freepik

Tags
Tutorial
Share to
FacebookTwitterLinkedIn