Struktur Cascading Style Sheet (CSS)

Assalmualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim

Sebelum kita memulai mengerjakan sesuatu ada baiknya kita berdoa terlebih dahulu agar apa yang kita kerjakan dapat berkah dari allah SWT, Amiin.
CSS adalah kependekan dari Cascading Style Sheet, berfungsi untuk mempercantik penampilan HTML atau menentukan bagaimana elemen HTML ditampilkan, seperti menentukan posisi, merubah warna teks atau background dan lain sebagainya. Perhatikan contoh kode CSS berikut

Selector
Selector adalah elemen/tag HTML yang ingin diberi style. Sobat dapat menuliskan langsung nama tag yang ingin diberi style tanpa perlu menambahkan tSobat <>. Pada contoh kode CSS di atas, kita akan memberi style pada seluruh tag h1 yang terdapat dalam file HTML. Jika tag HTML yang ingin diberi style memiliki ID, Sobat dapat menuliskan nama ID tersebut dengan diawali Sobat kress (#).

#header
Dan jika tag yang diberi style memiliki Class, maka penulisan selector bisa dilakukan dengan Sobat titik (.) diikuti dengan nama class.

.artikel
Jika Sobat hanya menuliskan satu selector, seperti contoh kode CSS di atas, maka seluruh tag h1 yang terdapat dalam file HTML akan memiliki style yang sama. Bagaimana jika kita hanya ingin memberi style pada tag h1 yang hanya terdapat di dalam Class artikel. Maka penulisan selectornya seperti berikut :

.artikel h1
Kode tersebut akan memerintahkan pada browser untuk memberi style pada tag h1 yang hanya terdapat di dalam class artikel (atau - h1 yang merupakan child dari class artikel). Sobat-pun dapat memilih lebih dari satu tag untuk penghematan kode CSS. Misalnya ketika Sobat memiliki dua atau lebih tag dengan warna background yang sama, dari pada menuliskan kode seperti ini :

h1{ background-color: #666666; }
P { background-color: #666666; }
a { background-color: #666666; }

Sobat dapat menggabungkan selector dengan menambahkan tSobat koma pada nama tag yang ingin diberi style.

h1, p, a { background-color: #66666; }

Property dan Value
Property adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text, warna background, jarak antar elemen, garis pinggir dan lain sebagainya. Untuk memberikan nilai/value pada property kita gunakan tSobat titik dua ( : ). Setiap property diakhiri dengan titik koma (;),  jika Sobat tidak mengakhirinya maka browser tidak akan mengetahui maksud dari property tersebut. Property property pada CSS sangat mudah dimengerti karena lebih mirip bahasa kita sehari-hari. Misalnya untuk merubah warna text kita gunakan property color, untuk merubah warna background kita gunakan property background-color, untuk merubah ukuran huruf kita gunakan property font-size. Mudah dimengerti bukan?

.artikel h1 {
color : red;
background-color : blue;
font-size : 20px;
}

Menurut saya, Kode CSS sangat mudah dimengerti, karena kata-kata yang digunakan sudah tidak asing lagi, perhatikan contoh kode CSS sebelumnya, jika kita ubah ke bahasa kita sehari-hari, kira-kira menjadi seperti berikut : “Hey Brow (Browser) Cari tag h1 yang terdapat di dalam class artikel, jika ditemukan/ada, ubah warnanya menjadi merah, warna background menjadi biru dan ukuran huruf menjadi 20 pixel”. Cukup perkenalan dengan CSS-nya, lalu yang menjadi pertanyaan besar Sobat saat ini adalah : “Dimana saya mengetikkan kode tersebut?” tunggu postingan selanjutnya …

sampai disini dulu tutorial dari saya , Semoga tutorial ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan dan di beri saran untuk file pdfnya bisa didownload disini.