About Me




Nama : Achmad Alfiyan Faqih
Alamat : Banyuwangi
Hobi : Membaca dan Traveling
Prodi : S1 Pendidikan Teknik Informatika '12 Off A
Motto : Hidup hanya sekali, jalani dengan sebaik-baiknya karena penyesalan selalu datang terlambat

Tuesday, April 29, 2014

0

CSS (Cascading Style Sheet)

Posted in

 

Cascading Style Sheet atau CSS adalah sebuah pemrogamaran atau boleh dibilang script yang mengendalikan beberapa komponen (tag html) dalam sebuah website sehingga tampilan akan menjadi lebih terstruktur dan seragam. Ada tiga jenis cara dalam penggunaan CSS ini, yaitu:

  1. 1. External Style Sheet
  2. 2. Internal Style Sheet
  3. 3. Inline Style Sheet

A.    LATIHAN

1.      Lihat dan Percaya!

Lihat file index.html. file yang begitu standard. Anda sudah mempelajari beberapa elemen seperti header, paragraph, image, list, dan tables. Buka file index.html di browser, dan tidak ada hal yang menarik disana.

File stylesheet.css (yang akan kita pelajari) berisi informasi style, kemana suatu elemen html harus berada, apa warna yang ada seharusnya, seberapa besar, dan lain lain. Terdapat elemen yang diberikan komentar pada tag <head>. Hapus komentar tersebut, dan lihat perbedaannya di browser.

 

File index.html

 css-alfiyanfaqih1

File stylesheet.css

 css-alfiyanfaqih2css-alfiyanfaqih3

  css-alfiyanfaqih4css-alfiyanfaqih5

Tampilan

css-alfiyanfaqih6 

2.      Pengenalan CSS

CSS (Cascading Style Sheet) dapat menerapkan suatu format ketika lebih dari satu style berlaku. Misalkan kita menginginkan semua paragraph harus memiliki font biru, namun secara khusus menginginkan satu kata agar berwarna merah. CSS bisa melakukan itu.

 

File index.html

 css-alfiyanfaqih7

File stylesheet.css

Buat text yang berada diantara tag <span> menjadi biru!

css-alfiyanfaqih8

Tampilan

css-alfiyanfaqih9 

 

3.      Mengapa Terpisah?

Terdapat dua alasan mengapa memisahkan file css dan html. Pertama, kita dapat menerapkan style yang sama untuk beberapa elemen tanpa menulis ulang kode. Kedua, kita dapat menerapkan style dan format yang sama (satu file css) untuk beberapa halaman HTML.

 

File index.html

 css-alfiyanfaqih10

File stylesheet.css

Lihat file stylesheet.css, katakan pada selector span, bahwa kita menginginkan font-family dari span menjadi cursive agar terlihat lebih mewah.

 css-alfiyanfaqih11

Tampilan

  css-alfiyanfaqih12

 

4.      Satu selector dengan bayak properties

Salah satu kelebihan CSS adalah kita dapat menerapkan beberapa format untuk satu selector. Semisal anda akan mengatur jenis font, warna, dan ukuran dari suatu paragraph, cukup tuliskan :

Ingat! Setiap akhir dari suatu nilai, berikan semicolon (;).css-alfiyanfaqih13

 

File index.html

 css-alfiyanfaqih14

File stylesheet.css

Di bawah nilai colour:green, atur font-family menjadi Garamond dan font-size menjadi 24px.

css-alfiyanfaqih15 

Tampilan

 css-alfiyanfaqih16

5.      Banyak selector dengan banyak properties

File index.html

 css-alfiyanfaqih17

File stylesheet.css

·         Buat seluruh heading 3 berwarna merah.

·         Buat seluruh paragraph memiliki jenis font Courier.

·         Paragraph kedua berisi tag <span>. Buat background-color dari <span> menjadi kuning.

css-alfiyanfaqih18 

Tampilan

 css-alfiyanfaqih19

 

6.      Banyak selector dengan banyak properties (2)

File index.html

css-alfiyanfaqih20 

File stylesheet.css

·         Tambahkan tag <link> ke file styleku.css antara tag <head> dan </head>

·         Ubah font <h1> menjadi Verdana

·         Ubah font <h3> menjadi Courier

·         Buat warna paragraph menjadi ungu

·         Berikan komentar pada file CSS (komentar apapun)

 

 css-alfiyanfaqih21

 

Tampilan

 css-alfiyanfaqih22

 

7.      Backup

Jika kita menuliskan

css-alfiyanfaqih23

CSS akan mencoba menggunakan font Tahoma pada paragraph. Jika komputer user tidak memilikinya, maka CSS akan menggunakan font Verdana, dan jika tidak ada juga, maka yang digunakan adalah font sans-serif.

 

File index.html

css-alfiyanfaqih24 

File stylesheet.css       

Ubah font <h1> dengan pilihan font cursive, kemudian Times, dan terakhir sans-serif.

css-alfiyanfaqih25 

 

Tampilan

 css-alfiyanfaqih26

8.      Background color, height, width

File index.html

css-alfiyanfaqih27

File stylesheet.css

Pada file stylesheet.css,

·         Ubah background-color menjadi #cc0000

·         Ubah tinggi menjadi 100px

·         Ubah lebar menjadi 100px

css-alfiyanfaqih28

 

Tampilan

css-alfiyanfaqih29

9.      Bordering on insanity

Banyak elemen HTML yang mendukung property border. Contoh penggunaannya:

css-alfiyanfaqih30

File index.html

 css-alfiyanfaqih31

File stylesheet.css

·         Berikan tinggi setiap <td> 50px.

·         Berikan border pada tiap <td> 1px dashed blue

·         Berikan border pada table, 1px solid black

css-alfiyanfaqih32 

Tampilan

 css-alfiyanfaqih33

10.  Membuat Tombol

Sebagai latihan, kita akan membuat tombol menggunakan tag <div>.

File index.html

css-alfiyanfaqih34 

File stylesheet.css

·         Pada file css, beri selector untuk <div> ,

o   Atur tinggi 50px.

o   Lebar 120px.

o   Border-color: #6495ED.

o   Background-color: #BCD2EE.

o   Gunakan border-style sesuai keinginan (dashed , solid atau yang lain) dan gunakan border-width sesuai keinginan (saran : 2px).

o   Lihat hasil.

·         Berikan border-radius pada div sebesar 5px, dan lihat hasil.

·         Atur margin dari div ke auto, dan ubah text-align ke center , lihat hasil.

·         Tambahkan hyperlink (menggunakan <a></a>) diantara <div> dan </div>. berikan atribut href untuk merujuk ke suatu alamat tertentu.

css-alfiyanfaqih35

 

Tampilan

css-alfiyanfaqih36 

11.  Multiple Selectors

Html bisa saja bersifat nested (bersarang) sehingga seperti berikut :

css-alfiyanfaqih37

Jadi, bagaimana caranya menangkap tag <p> yang ada dalam dua tag <div> dengan tidak menangkap semua elemen <p>?

Kita dapat menggunakan selector css sebagai berikut :

css-alfiyanfaqih38

 

File index.html

 css-alfiyanfaqih39

File stylesheet.css

Pada file css, pilih HANYA h3 yang bersarang di dalam tiga <div> , dan ubah warnanya menjadi merah.

css-alfiyanfaqih40

Tampilan

css-alfiyanfaqih41 

 

12.  Class

Class pada css berguna untuk menerapakan suatu style pada banyak elemen. Contoh penggunaan class pada HTML :

css-alfiyanfaqih42

Dan pada CSS, menggunakan symbol titik (.)

css-alfiyanfaqih43

Hal ini akan membuat beberapa elemen (div, img, td) menggunakan satu format style.

File index.html

 css-alfiyanfaqih44

File stylesheet.css

Buat beberapa elemen HTML, dan beri class mewah. Kemudian pada css, set .mewah agar memiliki font-family cursive dan color #0000CD

css-alfiyanfaqih45

Tampilan

css-alfiyanfaqih46 

13.  ID

ID digunakan untuk menerapkan satu style hanya pada satu elemen. Contoh penggunaan Pada html:

css-alfiyanfaqih47

pada css :

css-alfiyanfaqih48

 

File index.html

css-alfiyanfaqih49 

File stylesheet.css                  

Buat beberapa elemen HTML, dan sematkan ID “serious” pada salah satunya. Pada file css, set #serious menggunakan font-family Courier dan color #CC0000

css-alfiyanfaqih50

Tampilan

css-alfiyanfaqih51 

 

B.     STUDI KASUS

Buatlah sebuah tampilan website dengan tema "WISATA" yang menggunakan CSS.

 

File index.html

 css-alfiyanfaqih52

File stylesheet.css

  css-alfiyanfaqih53    css-alfiyanfaqih54

 

Tampilan

 css-alfiyanfaqih55-web banyuwangi

 

0 comments: