Materi CSS Dasar

Pada materi kali ini kita akan belajar tentang Materi CSS Dasar, dimana seorang developer atau programer juga pasti menggunakan CSS untuk merancang sebuah website yang sedang di bangun. Karena peran CSS dalam merancang sebuah website memang tidak dapat ditinggalkan, ini karena CSS berperan untuk meberikan sentuhan gaya, kerapihan dan keindahan pada sebuah website. Sehingga website memiliki tata letak dan layout atau tampilan tema seperti yang diinginkan.

Dalam Materi CSS Dasar ada tiga bagian penting dan perlu untuk di ketahui, yaitu selector, property, dan value. Dan berikut ini adalah uraian dari ketiga bagian CSS tersebut:

Selector

Sebagai fungsi yang digunakan untuk mengatur desain atau tampilan, CSS menggunakan metode deklaratif untuk menspesifikasikan bagian HTML yang ingin diberikan gaya tampilan. Pemilihan elemen HTML dilakukan dengan menspesifikasikan selector. Kode di bawah memberikan contoh dari sebuah selector yang dapat digunakan untuk memberikan gaya atau desain tampilan terhadap seluruh elemen h1 yang ada pada dokumen HTML(silahkan pelajari tentang Belajar Struktur HTML Dasar):

.h1 {
  ....
}

Kode tag 'h1' dimana 'h1' adalah kode untuk menunjukan 'heading 1 atau title', dalam CSS ini 'h1' berperan sebagai 'selector'. Selector adalah seluruh kode yang berada sebelum buka dan tutup kurawal “{}”.

Selector yang diberikan pada kode di atas memberikan gaya pada seluruh elemen 'h1' yang ada dalam dokumen. Selain memberikan desain pada seluruh elemen seperti ini, selector juga dapat memberikan desain secara lebih spesifik: yaitu melalui klasifikasi, identitas, ataupun berbagai atribut lainnya dari sebuah elemen.

Property

Sebuah properti menentukan berbagai parameter desain yang dapat diubah dari sebuah elemen yang dipilih oleh selector. Perhatikan contoh Materi CSS Dasar berikut ini:

.h1 {
  font-family: ...;
  font-size: ...;
  color: ...;
  line-height: ...;
}

Pada contoh kode css di atas, yang disebut sebagai property adalah kode yang berada sebelum titik dua (:). Kegunaan dari empat properti tersebut dapat di artikan atau disimpulkan dari nama yang diberikan, yaitu font-family untuk memberikan jenis elemen teks, color untuk memberikan warna pada elemen 'h1', font-size untuk memberikan ukuran teks, dan line-height untuk memberikan jarak antar paragraf, dalam css banyak sekali properti yang dapat digunakan. Namun pada Materi CSS Dasar ini saya hanya memberikan contoh sebagian kecil dari css saja,supaya anda dapat lebih mudah memahami.

Value

Value merupakan nilai dari property yang ingin kita berikan. Nilai yang dapat diberikan sendiri berbeda-beda, tergantung dengan jenis property-nya. Misalnya, jika ingin memberikan nilai warna, kita harus memberikan nilai dalam format #FF0000 (untuk warna merah), #fff (Untuk warna putih), serta masih banyak lagi kode untuk warna lainya. Ketika ingin memberikan nilai ukuran dan jarak paragraf, kita dapat memberikan nilai dalam format nilai px atau nilai em. Berikut contoh value dari properti yang ada pada kode sebelumnya:

.h1 {
  font-family: normal;
  font-size: 46px;
  color: #999;
  line-height: 30px;
}

Yang harus diketahui dan di ingat, bahwa pada satu selector dapat diaplikasikan banyak property, dan masing-masing property akan memiliki value yang berbeda-beda, bergantung kepada apa yang direpresentasikan oleh property tersebut.

Penyingkatan Nilai dari Property

Ketika memberikan nilai untuk property, sintaks CSS memungkinkan kita untuk menyingkat nilai yang diberikan. Untuk lebih jelasnya, amati contoh penyingkatan kode css berikut:

/*
  format default,semua property dan value disebutkan.
*/
.h1 {
  padding-top  : 10px;
  padding-right : 20px;
  padding-bottom : 10px;
  padding-left  : 20px;
}

/*
  Sintaks css diatas dapat di buat lebih Singkat menjadi seperti berikut
*/
.h1 {
  padding: 10px 20px;
}

/*
  Dapat pula dibuat lebih singkat lagi menjadi seperti berikut
*/
.h1 {
  padding: 10px;
}

Dalam penyusunan atau penulisan css juga tedapat komentar, berdasarkan contoh diatas dapat kita ketahui bahwa kode css tersebut memiliki komentar. Sebuah komentar selalu di awali dengan karakter '/*' dan diakhiri dengana '*/'. Berikut adalah Komentar yang terdapat pada contoh diatas: /* format default,semua property dan value disebutkan. */ dan /* Sintaks css diatas dapat di buat lebih Singkat menjadi seperti berikut */ dan /* Dapat pula dibuat lebih singkat lagi menjadi seperti berikut */.
Seluruh teks yang berada di antara '/*' dan '*/' adalah komentar yang digunakan sebagai penanda atau pengingat. Sebuah komentar dalam file css akan diabaikan oleh web browser.

Pada format default pada kode di atas, nilai padding atas, kanan, bawah, dan kiri disebutkan atau dituliskan satu per satu, sesuai dengan property yang ada. Penulisan ini dapat dibuat lebih singkat dengan menggunakan hanya property margin dan dua value, dimana secara otomatis akan mengisikan nilai top dan right, kemudian bottom dan left. Bentuk singkat kedua memberikan nilai keempat margin dengan satu value.

Untuk di ketahui bahwa tidak semua property dapat tuliskan dengan menggunakan penulisan singkat. Beberapa property yang dapat ditulis secara singkat misalnya: padding, margin, background, dan border.

Cara mereferensikan CSS terhadap HTML yang ada supaya desain yang dispesifikasikan oleh CSS dapat diaplikasikan pada HTML. Terdapat tiga cara untuk mereferensi CSS, yaitu:

Referensi Eksternal atau Best Practice.

Kita dapat memberikan referensi ke sebuah file CSS yang berada di luar HTML. Cara referensi CSS seperti ini seringkali dianggap sebagai best practice dalam pengembangan web dan paling disarankan. Karena ini adalah metode terbaik cara untuk mereferensikan css.

CSS in Head element.

CSS yang ingin diaplikasikan pada sebuah dokumen HTML dapat juga dituliskan pada bagian head dari sebuah file dokumen HTML. Metode pemberian atau penulisan CSS ini tidak disarankan, karena umumnya elemen-elemen yang ada dalam sebuah dokumen akan digunakan kembali pada dokumen lain. Penulisan CSS langsung pada bagian head akan menyebabkan elemen-elemen yang berulang harus dituliskan ulang pada dokumen lain juga.

CSS in style Atribut Element.

Metode penulisan CSS di dalam atribut style pada elemen HTML merupakan cara ketiga, ini merupakan metode atau cara yang tidak disarankan dan buruk, karena penulisan seperti ini akan 'mengotori' kode HTML sehingga memberikan kesan 'JOROK'. Struktur HTML dibuat dengan tujuan untuk memberikan makna semantik untuk konten, bukan desain(Silahkan baca tentang Mengenal Struktur HTML). Begitupun, metode ini biasanya digunakan untuk manipulasi gaya yang dilakukan secara dinamis, melalui Javascript.

Untuk lebih jelasnya, kode di bawah memberikan contoh cara melakukan referensi CSS pada sebuah dokumen HTML:

 

<!DOCTYPE html>
<html lang="en">
<head>
     
<title> learning CSS </title>
     
<style type="text/css">
h1 {
 color: #999;
}
.h2{
  font-size: 46px;
  color: #FF6600;
}

.h3 {
  font-size: 40px;
  color: #FF6600;
}
</style>

<link rel="stylesheet" href="style.css">
     
</head>
<body>


<h1 style="font-family:normal;font-size:50px;color:#999;"> Learning CSS Basics </h1>


<h2> How to refrension CSS in HTML </h2>
<h3>It h3 tag size 40px and red </h3>

<p> h1 element is the header (headeng 1) <br/> h2 element is heading 2. Elements <br/> h3 heading 3. <br/> p element is a paragraph. </p>

</body>
</html>

Agar file css dapat bekerja pada belajar-css.html simpan kedua file tersebut dalam satu folder, setelah itu jalankan belajar-css.html pada web browser anda. Anda akan melihat hasilnya seperti pada gambar berikut:

Perhatikan bagaimana setiap CSS mempengaruhi elemen-elemen yang bersangkutan. Teks pada elemen h1 ditampilkan dengan warna abu-abu dan ukuran 50px karena CSS yang berada pada bagian header dokumen, elemen h2 dan h3 masing-masing dengan warna dan ukuranya karena css yang di simpan dalam file style.css, teks paragraf memiliki ukuran 18px karena CSS yang langsung ditambahkan pada tag 'p', Ketiga CSS yang terpisah tersebut sama-sama berjalan dengan baik.

Meskipun ketiganya dapat bekerja dengan baik sesuai deklarasi, namun disarankan agar tetap mengutamakan penggunaan css eksternal atau Best Practice. Karena Cara ini memungkinkan seorang perancang web hanya menggunakan satu file CSS untuk seluruh web yang dikembangkan. Perubahan desain laout juga dapat dilakukan dengan mudah, hanya mengubah satu buah file saja. Pengguna juga hanya perlu melakukan sedikit download.