Aturan dan Cara Penulisan Kode CSS
Untuk lebih mudah memahami aturan dan cara penulisan kode CSS, dibawah ini adalah contoh kode HTML + CSS sederhana yang akan kita bahas secara lebih mendalam:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <!DOCTYPE html><html><head><title>Belajar Penulisan CSS</title><style type="text/css">body { font-size: 14px; color: navy; }p { font-family: calibri, helvetica, sans-serif; }h1, h2 { text-decoration: underline; font-size: 23px; color: green; }</style> </head><body> <h1>Belajar Aturan dan Cara Penulisan Kode CSS</h1> <h2>Lorem ipsum dolor sit amet</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p> <p>Eam facilis omittantur at, usu efficiantur neglegentur delicatissimi et, in per vero splendide persequeris. Semper persius his te, ea mea omnium aliquip alienum, in gloriatur vituperata has. An per dicat clita oporteat, explicari deterruisset ex per. Liber tibique ullamcorper ei duo, at hinc civibus oporteat his.</p> <p>Nam verear constituto an, eu latine bonorum euripidis vim. Quidam maiorum interesset pri id, usu vero saepe graeci ea. Prompta nominati oportere te usu. Ad eam nulla accusamus.</p> <h2>Lorem ipsum dolor sit amet</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p> </body></html> |
Kode HTML di atas memiliki kode CSS pada bagian head yang diinput menggunakan motode Metode Internal Style Sheets. Kita akan fokus pada bagian CSS saja:
1
2
3
4
5
6
7
8
9
10
11
12
| body { font-size: 14px; color: navy; }p { font-family: calibri, helvetica, sans-serif; }h1, h2 { text-decoration: underline; font-size: 23px; color: green; } |
Seperti yang dapat dilihat dari contoh diatas, aturan penulisan CSS adalah sebagai berikut:
- Selector di tempatkan pada awal penulisan CSS. Dalam contoh diatas, body, p, h1 dan h2adalah selector. Khusus untuk selector yang lebih dari 1 (seperti pada contoh selector terakhir: h1,h2) untuk memisahkan kedua selector tersebut, digunakan tanda koma (,)
- Setelah penulisan selector, seluruh isi dari property dan valuenya (nilainya), berada di antara kurung kurawal “{“ dan “}”.
- Diantara property satu dengan yang lainnya, dipisahkan dengan tanda titik koma (;)
- Diantara property dengan value (nilai), dipisahkan dengan anda titik dua (:).
- Untuk property yang memiliki 2 kata , spasi diantaranya digantikan dengan tanda hubung (-), contohnya: background-color dan border-left.
- Untuk properti yang berada pada baris terakhir, kita boleh mengabaikan tanda ‘;’ sebagai tanda tutup, tetapi disarankan agar tetap menggunakan tanda ‘;’, karena bisa saja kita lupa menuliskan tanda titik koma pada saat menambahkan properti lainnya. Contoh property tanpa tanda ‘;’ dapat di lihat pada contoh “text-decoration: underline”.
Anda baru saja membaca artikel yang berkategori CSS
dengan judul Tutorial Belajar CSS Part 4: Aturan dan Cara Penulisan Kode CSS. Jika kamu suka, jangan lupa like dan bagikan keteman-temanmu ya... By : Wahid Cyber Punk
Ditulis oleh:
Unknown - Tuesday, 11 November 2014
Belum ada komentar untuk "Tutorial Belajar CSS Part 4: Aturan dan Cara Penulisan Kode CSS"
Post a Comment