CSS adalah singkatan dari Cascading Style Sheet, dapat digunakan untuk menampilkan style dari content dokumen HTML dengan lebih menarik dan meminimalkan penggunaan tag-tag HTML sehingga dapat menghemat waktu pengerjaannya dan lebih cepat proses loadingnya oleh web browser.
Cara CSS membuat style dari content adalah dengan menggunakan property dan memberikan nilai yang diinginkan terhadap property tersebut.
CSS dapat diimplementasikan dalam 3 cara :
1. Inline style yaitu menjadi atribut dalam tag HTML, atributnya adalah style.
Bentuk umumnya adalah : style=”property-1: nilai; property-2: nilai; ……property-n: nilai”
2. Internal style sheet atau embed style yaitu berada didalam tag .
Bentuk umumnya adalah :
3. External style sheet yaitu style CSS berada terpisah pada sebuah file .css sedangkan dokumen HTML yang akan menggunakannya / bentuk umumnya adalah :
Kali ini kita akan mencoba membuat 4 buah baris dengan warna yang berbeda, caranya adalah ketikkan :
Script diatas dituliskan pada dokumen HTML, hasilnya akan menjadikan atau membentuk 4 buah garis horizontal. Kemudian kita akan memberikan warna pada masing-masing garis tersebut dengan warna yang berbeda, berikut adalah scriptnya
hr.h1 {color:yellow}
hr.h2 {color:red}
hr.h3 {color:black}
hr.h4 {color:purple}
Script diatas dituliskan terlebih dahulu pada dokumen atau file CSS yang terpisah dari dokumen HTML, untuk membuat script css tersebut kita menggunakan cara external style sheet dan selector berupa class. Hasilnya akan terlihat bahwa 4 garis horizontal tersebut akan berwarna kuning, merah, hitam, dan ungu.
Selanjunya kita akan coba membuat 4 buah header yang tersusun kebawah dan bertuliskan “4ia03”, caranya adalah ketikkan script berikut pada dokumen HTML
4ia03
4ia03
4ia03
4ia03
Jika telah dibuat, selanjutnya script diatas akan membentuk suatu kata seperti yang kita inginkan tadi.
Setelah selesai, selanjutnya kita akan memberikan warna pada tulisan tersebut, warna background dan border style sesuai yang kita ingingkan, ketikkan
h1 {color:blue; background-color:yellow; border-style: dotted}
h2 {color:yellow; background-color:blue; border-style: dashed}
h3 {color:black; background-color:purple; border-style: groove}
h4 {color:green; background-color:tan; border-style: dotted}
Script diatas, kita buat dalam file css, dari script diatas pula kita dapat menhasilkan
a. header1 akan menghasilkan warna tulisan biru, warna background tulisan tersebut kuning dan border style atau kotak yang dipilih adalah type dotted.
b. header2 akan menghasilkan warna tulisan kuning, warna background tulisan tersebut biru dan border style atau kotak yang dipilih adalah type dashed.
c. header3 akan menghasilkan warna tulisan hitam, warna background tulisan tersebut ungu dan border style atau kotak yang dipilih adalah type groove.
d. header4 akan menghasilkan warna tulisan hijau, warna background tulisan tersebut tan dan border style atau kotak yang dipilih adalah type dotted.
Berikutnya kita akan membuat 4 buah tulisan dengan menggunkan paragraph, ketikkan
isi tulisan
isi tulisan
isi tulisan
isi tulisan
Peletakkan script diatas adalah pada dokumen HTML dan menggunakan class selector untuk dapat memanggil property yang nantinya akan dibuat pada file css.
Hasilnya akan terlihat terdapat 4 buah tulisan dengan masing-masing paragraph yang berbeda.
Masih sama dengan header yang diatas, selanjutnya kita juga akan membuat masing-masing tulisan tersebut warna pada tulisan , warna background dan border style.
Ketikkan script
p.p1 {color:blue; background-color:yellow; border-style: dotted}
p.p2 {color:yellow; background-color:blue; border-style: dashed}
p.p3 {color:black; background-color:purple; border-style: groove}
p.p4 {color:green; background-color:pink; border-style: dotted}
Pembuatan script tersebut dilakukan pada file css, dan akan menghasilkan dari masing-masing tulisan property yang berbeda, seperti warna tulisan yang ada pada setiap tulisan berbeda, seperti contohnya pada paragraph 1 tulisan berwarna biru, background berwarna kuning dan border atau kotak untuk tulisannya bertipe dotted, hal ini tentu tidak akan sama hasilnya dengan paragraph atau tulisan dari paragraph-paragraph berikutnya.
Langkah berikutnya kita akan coba membuat table, ketikkan script
| Nandhi | Angga |
| Eka | Putra |
Dari pembuatan script diatas pada dokumen HTML kita akan menghasilkan table yang terdiri dari 2 baris dan 2 kolom, masing-masing baris dan kolom diberikan nama sesuai yang diinginkan.
Berikutnya kita akan coba memberikan property yang berbeda pada table tersebut melalui CSS, ketikkan
table {background-color: red; color: blue;font-family:comic sans ms}
dari script css diatas kita akan menghasilkan warna background table merah, kemudian warna tulisan biru dan tipe tulisannya adalah comic sans ms
Jika script telah selesai kita buat semua, selanjutnya adalah jangan lupa untuk melihat apakah antara dokumen HTML dan file CSS telah terhubung atau belum,
Jika belum, kita buat script pada dokumen HTML sebagai berikut
Script diatas dimaksudkan untuk memanggil atau menghubungkan seluruh property yang telah kita buat tadi agar dapat di compile bersama. Dari script diatas kita juga dapat mengetahui bahwa file .css yang dihubungkan dengan dokumen HTML tadi bernama LA3.css
Langkah yang paling terakhir adalah jangan lupa untuk menutup semua script yang ada pada dokumen HTML tadi dengan script
Script tersebut dimaksudkan agar script yang tadi telah dibuat dapat dicompile atau dijalankan untuk dapat meilhat hasilnya.
Tidak ada komentar:
Posting Komentar