Pemrograman Web

Cascading Style Sheets

Created by : Rifqi Sambas

Khairurrohman

Home Page

Anatomi CSS
Macam Selector
Cara Kerja

Anatomi CSS
CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector,
1 property, 1 value.
Adapun format penulisan kalimat CSS :
selector { property: value }
Selector itu untuk menunjukkan bagian mana yang hendak
diatur / diformat.
Property untuk menunjukkan, bagian (properti) dari selector
yang hendak diatur.
Value adalah nilai dari pengaturannya.

Contoh Syntax:
h1 { color: red }
Dari contoh di atas dapat kita simpulkan atau kita lihat bahwa :
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini:
Mengatur color dari h1 ke warna merah (red).

Pengelompokan Selectors
Anda dapat menulis satu kode CSS untuk berbagai macam
selector dengan cara menggunakan koma. Misalkan anda mau
mengatur agar tag h1, h2 dan h3 semua menggunakan warna
merah, maka kode CSS nya menjadi:
h1,h2,h3 { color: red }
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.

Penggunaan Banyak Properties

Untuk mengatur lebih dari satu properties gunakan pemisah titik
koma ( ; ).
Contoh:
h1,h2,h3 {color:red; font-family:arial; font-size:150%;}
Pada contoh di atas, tag h1, h2 dan h3 di atur agar
menggunakan warna merah, dengan type font arial, dan ukuran
font 150%.

Cara Penulisan Yang Baik

Sangat disarankan untuk menulis kode CSS menggunakan
beberapa baris dimana pengaturan property dan values nya di
indent. Hal ini bertujuan agar terlihat rapi.
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}

CSS Comment
Kenapa kita perluh belajar membuat comment dalam CSS ?
alasannya karena kadang kala, ada baiknya anda menuliskan
komentar ke dalam kode CSS anda untuk memberi catatan
pengingat.
Anda bisa menggunakan syntax pembuka /* dan penutup */
untuk menuliskan komentar. Segala teks yang berada di antara
tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai
catatan untuk diri anda.
/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;

Macam Selector CSS

Type selector
Class selector
ID selector
Descendant Selector
Universal Selector

Type Selector
Type Selector merupakan bentuk paling dasar dari selector
css. Dengan menggunakan tag HTML tertentu, kita dapat
menerapkan style css langsung pada tag yang dimaksud.
Type selector digunakan untuk mengatur style dasar yang
akan diterapkan pada seluruh situs web.

Class Selector
Class selector digunakan jika ingin menerapkan style yang
berbeda untuk sekelompok elemen yang identik.

Pemanggilannya :

ID Selector
ID selector digunakan jika kita ingin menerapkan style yang
berbeda hanya untuk satu elemen tertentu. Cara penulisan
kode css untuk id selector adalah dengan tanda hash atau
pagar (#) sebelum nama selector.

Pemanggilannya :

Descendant Selector
Pada halaman web biasanya terdapat bagian konten. Nah,
pada bagian konten tersebut biasanya terdapat lebih dari
satu paragraf. Untuk menerapkan style yang sama pada
paragraf-paragraf tersebut, kita bisa saja menuliskan kelas
pada setiap tag paragraf, namun alangkah baiknya kita
menggunakan descendant selector.

Pemanggilannya :

Universal Selector
universal selector merupakan jenis selektor yang dapat
diterapkan pada seluruh elemen html

Cara Kerja CSS

Embedded StyleSheet
External Style Sheet
Inline Style Sheet

Embedded Style Sheet

Embedded CSS adalah kode-kode css yang dipasang
langsung didalam file HTML, lebih tepatnya ditaruh di dalam
tag < head > dan sebelum
tag < / head >.

External Style Sheet

External CSS adalah sebuah document/file yang hanya
berisikan kode kode CSS, extensi file css biasanya .css.
External CSS ini terpisah dari file HTML, untuk di butuhkan
sebuah perintah untuk menghubungkan/memanggil
External CSS pada file HTML.

Inline Style Sheet

Inline CSS merupakan cara pemasangan kode CSS yang
langsung ditulis pada tag HTML.

TERIMA KASIH