Mengenal CSS

By | 3 October 2017

CSS singkatan dari Cascading Style Sheets. CSS menjelaskan bagaimana elemen HTML ditampilkan di browser, juga menghemat pekerjaan web designer karena mampu mengontrol tata letak beberapa halaman sekaligus hanya dari satu file CSS. CSS digunakan untuk mengatur dan menetapkan tampilan halaman web termasuk desain, tata letak, dan variasi tampilan untuk berbagai perangkat dan ukuran layar yang berbeda-beda.

CSS memiliki aturan tersendiri dalam penulisannya, yaitu terdiri atas selector dan blok deklarasi. Blok deklarasi dapat terdiri dari beberapa deklarasi yang dipisahkan oleh titik koma. Setiap deklarasi memiliki property dan value yang dipisihkan tanda titik dua. Blok deklarasi berada diantara kurung kurawal buka dan kurung kurawal tutup.

Syntax CSS

Selector adalah nama tag dari elemen html, id, class, atribut, dsb. Selector id menggunakan atribut id untuk memilih elemen yang spesifik dan sifatnya unik dalam halaman tersebut artinya id tidak akan ada yang dalam halaman tersebut. Dalam penulisan selektor id diawali simbol # diikuti dengan nama selektor, misalnya #paragraf1{ text-align: justify;color: blue;}. Nama id tidak dapat dimulai dengan angka.

Selector class menggunakan atribut class untuk memilih elemen. Selector class menggunakan karakter titik dalam penulisannya yang diikuti dengan nama class, misalnya .right { text-align: right;color: red;}. Nama class tidak dapat dimulai dengan angka. Kemudian jangan ada spasi antara value dengan unit, contoh yang benar p {margin-left: 20 px;}

Untuk beberapa selector yang memiliki kesamaan dalam deklaratornya dalam penulisannya dapat dibuat grup selektor seperti : h1, h2, p { text-align: center;color: red;}. Dan untuk memberikan komentar dalam baris kode CSS dapat dilakukan dengan memberi tanda /* Ini baris komentar */ dimana komentar tidak akan ditampilkan atau diterjemahkan oleh browser.



Ada tiga cara untuk memasukan cascading style sheets dalam dokumen html untuk mengubah tampilan halaman web, yaitu:

  • Inline style, dimana kode css disisipkan langsung ke dalam elemen html di belakang nama tag pembuka sebagai atribut elemen, dan yang terpengaruh hanya elemen tersbut. Contoh: <h1 style=”color:blue;margin-left:30px;”>Judul Utama</h1>
  • Internal style, dimana kode css ditulis dalam blok elemen style yang diletakan di dalam elemen head, sehingga hanya satu halaman itu terpengaruh oleh style yang menggunakan selector dalam kode css.
<!DOCTYPE html>
<html>
<head>
<title>Internal Style</title>
<style>
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
  • External Style, dimana kode css ditulis dan disimpan dalam file khusus css. Halaman yang ingin menggunakan file css misalnya styleku.css hanya tinggal memanggilnya di dalam elemen head dengan elemen link berikut <link rel=”stylesheet” type=”text/css” href=”styleku.css”>. Keuntungan menggunakan external style, dapat menghemat waktu untuk mengatur tampilan karena kode css ditulis dalam satu file sehingga hanya tinggal dipanggil saat ingin diterapkan di halaman dimaksud. Jika ingin memperbaiki juga hanya tinggal membuka file css dan memperbaikinya.
Category: CSS