BELAJAR CASCADING STYLE SHEET

8/17/2019 BELAJAR CASCADING STYLE SHEET

1/79

1

BELAJAR CASCADING STYLE SHEET

DIKTAT KULIAH

Oleh :

Beki Subaeki, M. Kom

PROGRAM STUDI TEKNIK INFORMATIKA

UNIVERSITAS SANGGA BUANA YPKP BANDUNG2014


2/79

2

KATA PENGANTAR

CSS bisa dikatakan adalah teknik utuk membuat halaman web lebih cantik. Penulisannya file

CSS dimungkinkan secara terpisah dengan file HTML. Hal ini terntunya akan mempermudah

ketika dilakukan perubahan terhadap layout web tanpa mengganggu file HTML. Versi CSS saat

ini adalah CSS3 tentunya ada penambahan yang membedakan dengan versi – versi sebelumnya.

Dalam pembahasan Diktat ini penulisan membahas semua tentang CSS, dimulai dari pengenalan

CSS, metode penulisan, properti – properti CSS, atribut CSS, sampai implementasi CSS. Semua pembahsan properti disajikan dalam beberapa contoh penggunaanya. Hal ini akan mempermudah

pembaca untuk mengerti fungsi – fungsi dari properti ataupu atribut CSS.

Penulis menyadari dalam penulisan Diktat ini masih banyak ditemukan kekurangan. Hal ini tentu

akan menjadi evaluasi bagi penulis, oleh sebab itu kritikan tentunya diharapkan dari pembaca

untuk pembutan Diktat – Diktat selanjutnya agar lebih baik. Akhir kata semoga keberadaanDiktat ini membawa manfaat untuk pembaca khususnya bagi perekmembangan desain web.

Amin..

Bandung, Januari 2014

Beki Subaeki

[email protected]

mailto:[email protected]:[email protected]


3/79

3

DAFTAR ISI

Belajar cascading style sheet ............................................................................................................ 1

Daftar Isi........................................................................................................................................... 3

Bab I Pengenalan CSS .................................................................................................................... 5

1.1. Tujuan ................................................................................................................................... 5

1.2. Apa itu CSS ? ........................................................................................................................ 5

1.3. Keuntungan CSS ? ................................................................................................................ 5

1.4. Siapa pencipta CSS ? ............................................................................................................ 5

1.5. CSS versi ............................................................................................................................... 6

1.6. Rangkuman ........................................................................................................................... 6

1.7. Latihan................................................................................................................................... 6

BAB II Penulisan Sintak CSS ......................................................................................................... 7

2.1. Tujuan ................................................................................................................................... 7

2.2. Penulisan dasar ...................................................................................................................... 7

2.3. Cara penulisan CSS ............................................................................................................. 10

2.3.1. Internal CSS..................................................................................................................... 102.3.2. External CSS ................................................................................................................... 11

2.3.3. Inline CSS ........................................................................................................................ 12

2.4. Rangkuman ......................................................................................................................... 13

2.5. Latihan................................................................................................................................. 13

Bab III Sintak – Sintak Css ........................................................................................................... 153.1. Tujuan ................................................................................................................................. 15

3.2. Background ......................................................................................................................... 15

3.2.1. Background-image .......................................................................................................... 15

3.2.2. Background-color ............................................................................................................ 16

3.2.3. Background-repeat .......................................................................................................... 16

3.2.5. Background-position ....................................................................................................... 173.2.6. Rangkuman ...................................................................................................................... 17

3.2.7. Latihan ............................................................................................................................. 18

3.3. Text ..................................................................................................................................... 18

3.3.1. Text-color ........................................................................................................................ 18

3.3.2. Text-aligment .................................................................................................................. 19

3.3.3. Text-decoration................................................................................................................ 20

3.3.4. Text-transformation ......................................................................................................... 21

3.3.5. Text-indentation .............................................................................................................. 22

3.3.6. Rengkuman ...................................................................................................................... 23

3.3.7. Latihan ............................................................................................................................. 23

3.4. Font ..................................................................................................................................... 233.4.1. Font family ...................................................................................................................... 23

3.4.2. Font style ......................................................................................................................... 24

3.4.3. Font size........................................................................................................................... 25

3.4.4. Rangkuman ...................................................................................................................... 26

3.4.5. Latihan ............................................................................................................................. 26

3.5. Link ..................................................................................................................................... 27

3.5.1. Style link .......................................................................................................................... 27

3.5.2. Text decorations link ....................................................................................................... 28

3.5.3. Background color link ..................................................................................................... 29

3.5.4. Display block link............................................................................................................ 30

3.5.5. Rangkuman ...................................................................................................................... 31

3.5.6. Latihan ............................................................................................................................. 31


4/79

4

3.6. Lists ..................................................................................................................................... 31

3.6.1. Rangkuman ...................................................................................................................... 34

3.6.2. Latihan ............................................................................................................................. 34

3.7. Tabel .................................................................................................................................... 34

3.7.1. Table border & collapse .................................................................................................. 36

3.7.2. Table width and height .................................................................................................... 37

3.7.3. Table text aligment .......................................................................................................... 383.7.4. Table padding .................................................................................................................. 40

3.7.5. Table color ....................................................................................................................... 41

3.7.6. Rangkuman ...................................................................................................................... 43

3.7.7. Latihan ............................................................................................................................. 43

3.8. Box model ........................................................................................................................... 43

3.8.1. Margin ............................................................................................................................. 44

3.8.2. Padding ............................................................................................................................ 44

3.8.3. Border .............................................................................................................................. 45

3.8.4. Satuan nilai css ................................................................................................................ 47

3.8.5. Rangkuman ...................................................................................................................... 48

3.8.6. Latihan ............................................................................................................................. 48

3.9. Outline ................................................................................................................................. 48

3.9.1. Rangkuman ...................................................................................................................... 52

3.9.2. Latihan ............................................................................................................................. 52

3.10. Dimension ........................................................................................................................... 52

3.10.1. Rangkuman ...................................................................................................................... 54

3.10.2. Latihan ............................................................................................................................. 54

3.11. Display ................................................................................................................................ 55

3.11.1. Rangkuman ...................................................................................................................... 56

3.11.2. Latihan ............................................................................................................................. 57

3.12. Floating & positioning ........................................................................................................ 573.12.1. Rangkuman ...................................................................................................................... 59

3.12.2. Latihan ............................................................................................................................. 59

3.13. Pseudo-classes ..................................................................................................................... 60

3.13.1. Anchor pseudo-classes .................................................................................................... 60

3.13.2. Pseudo-classes and css classses ....................................................................................... 61

3.13.3. Pseudo element ................................................................................................................ 62

3.13.4. Rangkuman ...................................................................................................................... 65

3.13.5. Latihan ............................................................................................................................. 65

3.14. Navigasi bar ........................................................................................................................ 65

3.14.1. Link list ............................................................................................................................ 66

3.14.2. Vertical navigasi .............................................................................................................. 673.14.3. Horizontal navigasi .......................................................................................................... 69

3.14.4. Rangkuman ...................................................................................................................... 71

3.14.5. Latihan ............................................................................................................................. 71

3.15. Image gallery ....................................................................................................................... 71

3.15.1. Slide show image gallery................................................................................................. 73

3.15.2. Rangkuman ...................................................................................................................... 76

3.15.3. Latihan ............................................................................................................................. 76

Daftar Pustaka ................................................................................................................................ 77

profile penulis................................................................................................................................. 79


5/79

5

BAB I

PENGENALAN CSS

1.1. TujuanSetiap mahasiswa mengerti apa itu CSS

Setiap mahasiswa memahami dasar tentang CSS. Setiap mahasiswa dapat mngetahui versi CSS

1.2.

Apa itu CSS ?

CSS atau Casecading Style Sheet merupakan dokumen yang berisi sintak – sintak yang memilikifungsi sebagai pengatur sebuah halaman web. Style diatas memiliki arti untuk mendefinikan

bagaimana untuk menampilakan element HTML. Dengan menggunakan CSS kita bisa

memanipulasi tampilan web semisal manipulasi warna teks, jenis teks, spasi antar teks, ukuran

teks, ataupun merubah warna background dan efek – efek lain. CSS sangat mudah dipelajari dan

mudah dimengerti karena penggunaan CSS umumnya dikombinasikan dengan bahasa markup HTML atau XHTML dengan kata lain CSS digunakan pada tag HTML. Apakah suatu keharusan

untuk menggunakan CSS pada HTML ? style sheet memiliki feature yang sangat penting dalam

pembuatan web dinamis, walaupun bukan sebuah keharusan namun penggunaan CSS sangat

membantu dan memiliki kelebihan tersendiri dalam pembuatan web.

1.3.

Keuntungan CSS ?

a) Hemat Waktu

Penulisan CSS cukup sekali namun bisa digunakan untuk beberapa halaman web. Juga bisa

menentukan style pada setiap elemen HTML dan menerapkannya pada halaman web lain. b)

Respon halaman web lebih cepat

Ketika kita menggunakan CSS, kita tidak perlu menuliskan aturan pada tiap atribut yang ada

pada tag HTML, kenapa ? hal ini dilakukan jika ada aturan yang sama pada atribut lain.

c)

Gampang perawatan

Ketika ada perubahan style pada atribut tertentu secara otomatis seluruh halaman web akan

berubah.

d) Load file lebih cepat

Hal ini dikarnakan Ukuran File dari CSS relatif kecil sehingga respon sebuah situs lebih cepat.

1.4.

Siapa pencipta CSS ?

CSS merupakan bahasa yang dapat dimengerti oleh mesin web browser yang diciptakan World

Web Wide Consortium atau W3C pada tahun 1996. Pada awal kemunculannya yaitu versi 1 CSS

digunakan untuk pemformatan dokumen HTML seperti :

∞ Font ( jenis, ketebalan)

∞ Warna teks, background

∞ Text atribut misalnya spasi antar baris

∞ Posisi gambar, teks, table

∞

Margin, border, padding


6/79

6

Kemudian pada tahun 1998 CSS terus dikembangkan sehingga lahirlah CSS versi 2 atau

CSS2 yang mendukung :

∞ Posisi konten

∞ Downloadable

∞

Huruf font∞ Tampilan pada table layout dan media tipe untuk printer

CSS3 adalah versi terbaru dari CSS yang memiliki banyak hal dalam dalam desain dokumen

web. Semisal :

∞ Animasi 3D

∞ Compatible

∞ Multiple Background

∞ Border-radius

∞

Drop-shadow∞ Border-image

∞ CSS math

∞ CSS object Model

Saat ini web browser sudah menggunakan standar CSS dimana tujuannya adalah untuk

mengurangi pembuatan tag – tag yang ada pada mesin web browser.

1.5.

CSS Versi

Seperti yang sudah dibahas sebelumnya untuk versi yang terbaru saat ini adalah CSS3 yang

merupakan pengambangan dari versi sebelumnya yaitu CSS1, CSS2.

1.6.

Rangkuman

CSS atau Casecading Style Sheet merupakan dokumen yang berisi sintak – sintak yang memilikifungsi sebagai pengatur sebuah halaman web. Style diatas memiliki arti untuk mendefinikan

bagaimana untuk menampilakan element HTML. Penggunaan CSS akan memberikan keuntungan

daiantaraya adalah hemat waktu karena penulisan kode CSS dilakukan sekali namun bisa

digunakan untuk halaman lain. Respon halaman web lebih cepat, gampang dalam perawatan, dan

Load File lebih cepat.

1.7.

Latihan

1. Apa yang dimaksud dengan CSS !

2. Jelaskan perkembangan CSS !

3. Sebutkan versi dari CSS beserta kelebihan dan kekurangannya !


7/79

7

BAB II

PENULISAN SINTAK CSS

2.1. TujuanMahasiswa dapat memahami dasar sintak CSS.

Mahasiswa dapat memahami istilah yang ada pada CSS.Mahasiswa dapat mamahami elemen CSS.

2.2.

Penulisan dasar

Sebelum membahas lebih detail tentang penulisan CSS, ada baiknya kita lihat penulisan dasar

CSS. Secara umum penulisan CSS terdiri dari :

∞ Selector

Merupakan element HTML dimana semua style yang diinginkan ditulis atau bisa diartikan

„kail’ untuk menghubungkan kode CSS dengan HTML.∞ Deklarasi

Berisi satu atau lebih blok yang dipisahkan oleh titik koma (;). Didalam deklarasi ada nama

properti dan nilainya.

∞ Properti

Merupakan jenis style atau elemen yang akan diubah pada tag HTML. CSS memiliki puluhan

properti yang bisa digunakan untuk memberikan efek terhadap halaman web.

∞ Value

Adalah nilai atau isi dari properti. Value tergantung dari properti yang dipakai. Misalkan

properti color yang valuenya adalah warna (red, green, yellow, white) atau bisa menggunakan

angka misal #ff0000, #008000, #00008B , #ffffff. Contoh lain properti font-size yang

valuenya adalah ukuran dari teks. Untuk lebih jelasnya bisa dilihat gambar 2.1

Gambar 2.1. Elemen CSS

Dari empat elemen yang ada pada CSS, salah satunya adalah selector. Selector merupakan nama

yang diberikan terhadap style – style yang ada didalamnya.Untuk menuliskan selector maka harus diingat bahwa akan kebutuhan style terhadap dokumen

web. Hal ini dimaksudkan agar tiap selector dapat bekerja semestinya. Penulisan selector adalah

sebelum tanda { isi properti dari selector }. Nama dari selector harus didefinisikan pada halaman

HTML baik itu penulisannya dengan internal, external ataupun inline. Ada tiga jenis selector

yang merupakan bagian dari CSS adalah sebagai berikut.

∞ ID (#)

Id selector digunakan untuk memebrikan style yang berhubungan dengan objek – objek unik.

Perbedaan antara selector class adalah dimana kalau selector class bisa digunakan pada semuatag. ID selector hanya bisa diuganakan pada satu elemen saja. Penulisannya adalah dengan


8/79

8

memberikan simbol kres (#) sebelum penamaan pada ID selector. Contoh enulisan ID selector

adalah.

#coba_ID

{

text-align:center;

color:red;

}

SELAMAT MAKAN

ini adalah contoh penggunaan ID selector

Tampilan pada web browser akan ampak pada gambar 2.2.

Gambar 2.2. ID Selector

∞ class (.)

Merupakan selector untuk menentukan style yang dapat digunakan tanpa menentukan lagi tag

HTML. Penulisan class selector adalah dengan pemberian tanda titik (.) atau dot. Class

selector memungkinkan untuk menuliskan banyak style. Contohnya penulisan selector class.

.satu{

text-align:center;

color:red;

}

Tulisan HEADING Ini Warnanya MERAH dan tata letak : CENTER

dan Paragraf ini Warnanya MERAH dan tata letak : CENTER


9/79

9

Dari sintak diatas dapat diketahui bahwa selector class “satu” digunakan untuk pengaturanteks yang memiliki style teks rata tengah dan berwarna merah. Berikut gambar 2.3. hasil

tampilan dari sintak diatas.

Gambar 2.3. Selector Class

Disamping penulisan diatas kita juga bisa menuliskan tag – tag html pada class selector.Penulisanya adalah.

p.satu

{

text-align:center;color:red;

}

Pada sintak diatas dimana class dari “satu” akan mengatur tag HTML yaitu “p” yangmerupakan pengaturan untuk paragraf. Paragraf diatas memberikan efek bahwa penulisan teks

letaknya di tengah – tengah dan berwarna merah.

∞ Selector HTML

Merupakan selector yang menggunakan tag HTML sebagai selectornya. Contohnya adalahsebagai berikut :

p{

text-align:left;

color:blue;

}

SELAMAT MAKAN

ini adalah contoh penggunaan HTML selector


10/79

10

Dari sintak diatas diketahui bahwa selector “p” adalah merupakan tag HTML, yaitu paragraphdimana untuk semua tag “p” akan diatur letak paragraf adalah rata kiri dan tulisan berwarnamerah. Untuk lebih jelas perhatikan gambar 2.4.

Gambar 2.4. Selector Tag HTML

2.3.

Cara penulisan CSS

Ada tiga cara penulisan kode CSS dalam HTML. Ketiga cara tersebut bebas digunakan

tergantung kebutuhan dan kenyamanan kita dalam menulis kode CSS. Ketiga cara tersebut adalah

:

2.3.1. Internal CSS

Merupakan metode dimana cara penulisannnya ditulis langsung pada file HTML antara tag

……… dan sebelum tag . Cara penulisannya dengan disisipkan antara tagtersebut. Berikut adalah sintak dasar penulisannya.

/* ------ internal css ------- */

Perhatikan contoh lengkap penulisan css dengan metode internal css dibawah ini. Buat file html

dengan nama internal.html

internal css

/* ------ internal css ------- */

p{

color:white;

text-align:left;

}

body{

background-color:red;

}

Welcome to the Jungle

Ini adalah percobaan penulisan css dengan internal style


11/79

11

Beki Subaeki

E-mail : [email protected]

Penjelasan sintaks :

p{

color:white;

text-align:left;

}

body{


}

Selector : P, body

Properti : Color, text-align, background-color

Value : white, left, red

Selector P akan menghasilkan warna putih untuk setiap tag

dan menghasilkan letak tulisan

akan rata kiri.

Selector body akan menghasilkan warna background merah untuk tag .

Hasil eksekusi file internal.html akan Nampak seperti gambar dibawah ini :

Gambar 2.5. Internal CSS

2.3.2.

External CSSPenulisan External CSS merupakan cara yang banyak digunakan karena penulisannya dipisah

dengan file html artinya ada sintak yang diselipkan pada file HTML untuk memanggil file CSS.

File CSS harus berektensi .CSS dan tidak perlu menulisakan tag – tag html. Letak nya berada pada tag ------ . Sebagai contoh lihat sintak dibawah ini.

external css


12/79

12

Pada contoh diatas ada file yang dipanggil yaitu style.css. Sebagai contoh langkah pertama kita

buat file html yaitu external.html

external css


Ini adalah percobaan penulisan css dengan external style

Beki Subaeki


Langkah kedua buat file dengan nama style.css

p{

color:white;

text-align:left;

}

body{


}

Hasil setelah file external.html dipanggil oleh web browser

Gambar 2.6. External CSS

2.3.3. Inline CSS

Inline CSS adalah cara penulisan css pada tag html secara langsung hanya saja penulisannya

digunakan pada properti yag dibutuhkan saja, artinya properti tersebut tidak digunakan padaeleme lain.

Sebagai contoh lihat sintak dibawah ini.


13/79

13

Untitled Document


Ini adalah percobaan penulisan css dengan inline style

Beki Subaeki


Setelah file tersebut dipanggil web browser maka hasilnya akan nampak seperti gambar 2.7.

Gambar 2.7. Inline CSS

2.4.

Rangkuman

Penulisan CSS terdiri dari Selector, Deklarasi, Properti, dan Value. Kesemua elemen tersebut

merupakan paket kesatuan. Ada beberapa metode dalam penulisan CSS diantaranya internal

dimana penulisan kode CSS dilakuk an secara langsug pada tag HTML antara tag …. Cara selanjutnya adalah External dimana penulisannya dilakukan terpisah artinya kita

hanya memanggil file CSS. terakhir adalah inline cara penulisan css pada tag html secara

langsung hanya saja penulisannya digunakan pada properti yag dibutuhkan saja, artinya properti

tersebut tidak digunakan pada eleme lain.

2.5.

Latihan

1. Apa perbedaan metode penulisan CSS baik itu Internal, External, Inline CSS !

2.

Dimanakah letak penulisan CSS dengan metode internal ?

3. Pemanggilan file.css yang disisipkan di tag HTML merupakan pengertian dari ?

4.

Dari gambar berikut tuliskan sintak dengan metode Internal, External, Inline CSS !


14/79

14

Gambar 2.8. Petanyaan Soal No 5

5. Tampilan apa yang dihasilkan dari sintak berikut :

Belajar CSS

p {color: white; } body {background-color: black; }

body,td,th {

color: #FFF;

}

body {

background-color: #000;

}

Berapa Usia Anda :

1 - 10 Tahun

11 - 20 Tahun

21 - 30 Tahun

31 - 40 Tahun


15/79

15

BAB III

SINTAK – SINTAK CSS

3.1. TujuanMahasiswa memahami jenis – jenis properti dari CSS.

Mahasiswa dapat mamahami fungsi dari tiap tiap properti Mahasiswa dapat mempraktekkan jeni – jenis properti CSS.

3.2.

Background

Background adalah salah satu properti CSS yang penggunaannya digunakan untuk latar belakang

dokumen web. Efek yang digunakan untuk properti background adalah :

∞ background-image

∞ background-color

∞

background-repeat∞ background-attachment

∞ background-position

3.2.1. background-image

Properti ini digunakan untuk menentukan gambar dari latar belakang halaman dokumen web.

Contoh penggunaan properti background-image :

body {background-mage:url("latar.gif");}

Secara default gambar akan disetting secara horizontal dan vertical. Akan tetapi file gambar

seharusnya hanya di repeat secara vertical atau horizontal. Hal ini penting jika ada file gambar

yang ukuran pixel nya kecil seperti gambar 3.1.

Gambar 3.1. Repeat Horizontal Dan Vertical

Dari gambar diatas gambar yang ukuran pixel nya kecil akan memenuhi seluruh halaman web.

Untuk solusinya gunakan properti background-repeat. Contoh penggunaan background-repeat :

{ background-image:url("gradient2.png");


16/79

16

background-repeat:repeat-x;

}

Sehingga gambar akan nampak seperti gambar 3.2.

Gambar 3.2. Repeat Secara Horizontal

3.2.2. background-color

Properti background-color digunakan untuk memberikan efek warna pada halaman web. Berikutsintaknya.

{

background-color:#b0c4de;

}

Dari sintak diatas warna dari background menggunakan angka yang penulisannya menggunakan

symbol (#). Hasil dari angka tersebut akan menghasilkan warna biru langit seperti pada gambar

3.3.

Gambar 3.3. Tampilan gambar properti background-color

3.2.3. background-repeat

Seperti contoh gambar 3.2. diatas bahwa penggunaan background-repeat digunakan untuk

mengatur jika gambar yang memiliki ukuran pixelnya kecil. Berikut sintaknya :

{

background-image:url("gradient2.png");

background-repeat:repeat-x;}


17/79

17

Sehingga akan menampilkan gambar seperti pada gambar 3.2.

3.2.4. background-attachment

Properti ini digunakan untuk menentukan apakah gambar pada web browser menggunakan scroll

atau tetap (fixed). Contoh sintak dasar :

background-attachment: scroll|fixed|local|initial|inherit;

3.2.5. background-position

Properti ini digunakan untuk memposisikan atau letak dari latar belakang gambar. Sintak

dasarnya adalah :

background-position: value;

Value dari properti background-position adalah :

∞

left top ∞ left center

∞ left bottom

∞ right top

∞ right center

∞ right bottom

∞ center top

∞ center center

∞ center bottom

∞ intial

∞ inherit

∞ x% y%

∞ xpos ypos

Contoh lengkap penggunaan background-positin adalah :

{

background-image:url('smiley.gif');

background-repeat:no-repeat;

background-attachment:fixed; background-position:left;

}

3.2.6. Rangkuman

background merupakan propeti CSS yang bisa digunakan untuk mengatur latar belakang suatu

halaman web. Ada beberapa jenis funsi yang bisa digunakan diantarnya adalah background-

image, background-color, background-repeat, background-attachment, dan background-position.

Kesemua properti tersebut memiliki fungsi masing – masing.


18/79

18

3.2.7. Latihan

1. Sebutkan properti dari background

2. Dari masing masig – masing properti sebutkan fungsinya 3. Apa sintak untuk mengatur posisi gambar yang letaknya di tengah dokumen web.

4. Sebutkan properti untuk mengatur warna dari latar belakang dokumen web.

5.

Perhatikan gambar berikut

Gambar 3.4. Pertanyaan Soal No. 5

Dari gambar 3.4. Sebutkan sintak CSS nya !

3.3.

Text

Properti ini digunakan untuk mengatur warna teks. Ada beberapa fungsi teks sepeerti :

∞ text-color

∞ text-aligment

∞ text-decoration

∞ text-transformation

∞ text-indentation

3.3.1. text-color

Properti teks text-color digunakan untuk pemberian warna pada teks. Ada 3 cara penulisan kode

warna yaitu :

∞ HEX

Contohnya : #ff0000

∞

RGB

Contohnya : rgb(255,0,0)

∞ Color name

Contohnya : white

Untuk contoh penggunaan text-color adalah sebagai berikut :

body {color:blue;}

h1 {color:#00ff00;}

h2 {color:rgb(255,0,0);}

Contoh lengkap penggunaan text-color :


19/79

19

body {color:red;}

h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);}

Judul

Ini Adalah contoh penggunaan "text-color"

Akan menghasilakn tampilan sebagai berikut :

Gambar 3.5. Tampilan Gambar Properti text-color

3.3.2. text-aligment

Properti text-aligment digunakan untuk pengaturan tata letak teks. Ada tiga pengaturan pada text-

aligment adalah :

∞ right

∞

center

∞ justified

Sintak dasrnya adalah sebagai berikut :

h1 {text-align:center;}

p.date {text-align:right;}

p.main {text-align:justify;}

Contoh lengkap penggunaan text-aligment adalah sebagai berikut :


20/79

20

h1 {text-align:center;}

p.date {text-align:right;}

p.main {text-align:justify;}

Contoh CSS text-align

May, 2009

Ini merupakan paragrap yang menggunakan text-aligment :

"justified"

Note: Silahkan Anda refresh web browser Anda untuk melihat efeknya

Sintak diatas akan menampilkan gambar gambar 3.6.

Gambar 3.6. Penggunaan Text-Aligment

3.3.3. text-decoration

Properti ini dgunakan untuk memberikan efek garis pada teks. Ada tiga jenis fungsi text-

decorations. Yaitu :

∞ overline

Yaitu untuk memberikan efek garis diatas teks.

∞ line-through

Yaitu untuk memberikan efek garis di tengah teks.

∞ underline

Yaitu untuk memberikan efek garis bawah teks.

∞ blink

Yaitu untuk memberikan efek kedip pada teks.

∞ none

Yaitu tidak memberikan efek apapun pada teks.

Sintak dasarnya yaitu :

a {text-decoration:none;}


21/79

21

Untuk contoh lengkapnya bisa anda lihat pada sintak dibawah ini.

h1 {text-decoration:overline;}h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}




Maka hasil tampilan dari sintak seperti gambar 3.7.

Gambar 3.7. Penggunaan Text-Decorations

3.3.4. text-transformation

text-transformation adalah properti untuk mengatur huruf besar, kecil atau kapital. Sintak

dasarnya yaitu :

p.uppercase {text-transform:uppercase;}

p.lowercase {text-transform:lowercase;}

p.capitalize {text-transform:capitalize;}


p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;}


22/79

22

p.capitalize {text-transform:capitalize;}

saya UPPERCASE

saya lowercase

Saya Capitalize

Maka hasil tampilan dari sintak seperti gambar 3.8.

Gambar 3.8. Tampilan Text-Transformation

3.3.5. text-indentation

Adalah properti untuk mengatur jarak bagian awal paragraf yang menjorok kedalam. Sintak

dasarnya yaitu :

p {text-indent:50px;}


p {text-indent:30px;}

Perkenalkan nama saya Beki Subaeki, saat ini saya aktif megajar dibeberapa

perguruan tinggi dikota bandung. Selain mengajar saya aktif untuk menuliskan Diktat

yang berhubungan dengan dunia web.

Untuk beberapa pertanyaan tentang css Anda bisa mengubungi saya via email

[email protected]

Maka hasil dari sintak diatas adalah Nampak seperti gambar 3.9.


23/79

23

Gambar 3.9. Tampilan Text-Identation

3.3.6.

Rengkuman

Text merupakan properti yang digunakan untuk pengaturan teks yang teradapat pada suatu

halaman. Contoh penggunaan propeti text adalah text color yang digunakan untuk pengaturan

warna teks. Text-align untuk mengatur tata letak teks. Text-decoration properti ini dgunakan

untuk memberikan efek garis pada teks. text-transformation adalah properti untuk mengatur huruf

besar, kecil atau capital. text-indentation adalah properti untuk mengatur jarak bagian awal

paragraf yang menjorok kedalam.

3.3.7. Latihan

1. Sebutkan jenis fungsi dari proprti text !

2. Properti apa yang mengatur tata letak teks

3. Ada bearapa jenis fungsi dari properti text-indentation, Jelaskan !

4. Ada sintak p {text-indent:20px; apa yang dihasilkan dari sintak tersebut ?

5. dari gambar dibawah ini tuliskan sintak CSS nya !

Gambar 3.10. Pertanyaan Soal No 5

3.4.

FONT

Properti ini dugunakan untuk mengatur font dari halaman web. Contoh penggunaan font untuk

jenis font, ukuran font, format teks bold, italic atau yang lainnya.

3.4.1.

Font FamilyDidalam CSS ada dua jenis font family yaitu :

∞ Generic Famly

Adalah kelompok font family yang sama seperti Serif atau Monospace.

∞ Font Family

Adalah kelompok font family yang sama seperti Times New Roman atau Arial.


p{font-family:"Times New Roman", Times, serif;}


24/79

24


p.serif{font-family:"Times New Roman",Times,serif;}

p.sansserif{font-family:Arial,Helvetica,sans-serif;}

CSS font-family

Ini adalah paragraf jenis font "Times New Roman"

Ini adalah paragraf jenis font "SanSerif"


Gambar 3.11. Tampilan Font Family

3.4.2. Font Style

Properti ini diguanakan untuk mengatur style font dari halaman web. Ada tiga jenis fungsi style

font yaitu :

∞ Normal

Adalah style font yang nampak normal atau biasa.

∞ Italic

Adalah style font yang nampak miring.

∞ Oblique

Adalah style font yang hampir mirip dangan italic akan tetapi perbedaanya terletak pada

kemiringannya, untuk obique kemiringannya lebih sedikit ketimbang italic.



25/79

25

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}


p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

Paragraf > normal.

Paragraf > italic.

Paragraf > oblique.


Gambar 3.12. Font Style

3.4.3. Font Size

Font size digunakan untuk pengaturan ukuran dari font. Secara default ukuran font adalah 16px

atau sama dengan 1em. Pemberian nilai pada properti font size bisa dalam bentuk px atau em,

akan tetapi berhubung tidak semua browser mengijinkan pengeditan ukuran font dalam satuan em

sehingga untuk mengatasinya satuan em bisa dikombinasikan dengan percentage sebagai default

dalam tag . Contoh penulisan untuk kombinasi ini adalah; body {font-size:100%;}. Sintak

dasarnya yaitu :

h1 {font-size:40px;}


p {font-size:14px;}



26/79

26


h2 {font-size:30px;} p {font-size:14px;}

ukuran heading 1

ukuran heading 2

ini adalah paragraph.

Untuk beberapa kasus pemberian nilai pixel hanya dibolehkan pada web browser IE9,

Firefox, Chrome, Opera, dan Safari


Gambar 3.13. Font Size

3.4.4. Rangkuman

Font adalah properti ini dugunakan untuk mengatur font dari halaman web. Contoh penggunaan

font untuk jenis font, ukuran font, format teks bold, italic atau yang lainnya. Beberapa jenis

fungsi properti font adalah font-family, properti ini dugunakan untuk mengatur font dari halamanweb. font-style, properti ini diguanakan untuk mengatur style font dari haaman web. Font size

digunakan untuk pengaturan ukuran dari font. Secara default ukuran font adalah 16px atau sama

dengan 1em

3.4.5. Latihan

1. Buatlah sintak CSS berikut.


27/79

27



p {font-size:14px;}

This is heading 1

This is heading 2

This is a paragraph.

Specifying the font-size in px allows Internet Explorer 9, Firefox, Chrome, Opera, and

Safari to resize the text.

Note: This example does not work in IE, prior version 9.

Dari sintak diatas sebutkan properti apa saja yang dipakai ? Jelaskan !

2. Konversi font size berikut keadalam bentuk em !

a. 10px

b.

20px

c. 30px

d.

40px

e. 50px

f. 60px

g. 70px

h.

80px

i.

90px

3. Dari soal no 1 rubah kedalam bentuk em dan persen

4. Berapa pixel font size untuk hitungan standar ?

3.5. LINK

3.5.1. Style Link

Propeti link digunakan untuk navigasi selancar yang ada pada halaman web. Ada banyak fungsi

pada properti link contohnya pengaturan warna link, warna latar link, merubah warna link pada

saat link dikunjungi atapun pada saat link dipilih. Beberapa fungsi properti diantaranya :

∞ a:link

Adalah link normal yang belum dikunjungi.

∞ a:visited

Adalah keadaan dimana link sudah dikunjungi.

∞ a:hover

Keadaan dimana ketika kursor berada diatas link.

∞ a:active

Keadaan dimana link di klik.


28/79

28

Berikut contoh penggunaan properti link yaitu dengan menambahkan warna link pada saat

dikunjungi serta saat di link.

a.satu:link {color:#FF0000;}

a.satu:visited {color:#00FF00;}

a.satu:hover {color:#FF00FF;}

a.satu:active {color:#0000FF;}

LoginFacebook

Link diatas adalah alamat menuju GOOGLE

Sintak diatas akan menghasilkan tampilan seperti gambar 3.14.

Gambar 3.14. Style Link Properti

3.5.2. Text Decorations Link

Yaitu properti yang memberikan efek garis bawah atau underline pada saat kursor menyentuh

link teks. Berikut contoh sintaknya.

a.dua:link {text-decoration:none;}

a.dua:visited {text-decoration:none;}

a.dua:hover {text-decoration:underline;}

a.dua:active {text-decoration:underline;}


29/79

29

:: GOOGLE

::

Link diatas adalah alamat menuju GOOGLE

Dari hasil sintak diatas akan menghasilakan tampilan seperti pada gambar 3.15.

Gambar 3.15. Text Decoration Link

3.5.3. Background Color Link

Yaitu properti yang memberikan efek warna background link pada saat kursor menyentuh link

teks. Berikut contoh sintaknya.

a.tiga:link {background-color:#B2FF99;}

a.tiga:visited {background-color:#FFFF85;}

a.tiga:hover {background-color:#FF704D;}

a.tiga:active {background-color:#FF704D;}

:: GOOGLE

::

Link diatas adalah efek warna latar belakang link

Hasil tampilan sintak diatas seperti pada gambar 3.16.


30/79

30

Gambar 3.16. Background Color Link

3.5.4. Display Block Link

Adalah properti untuk memmberikan efek kotak pada saat kursor menyentuh teks link. Berikut

contoh penggunaannya .

a.sembilan:link,a.sembilan:visited

{

display:block;

font-weight:bold;

color:#FFFFFF;

background-color:#98bf21;

width:120px;

text-align:center; padding:4px;

text-decoration:none;

}

a.sembilan:hover,a.sembilan:active

{

background-color:#7A991A;

}

::

GOOGLE ::

Link diatas adalah alamat menuju GOOGL

Hasil tampilan sintak diatas seperti pada gambar 3.17.


31/79

31

Gambar 3.17. Display Block Link

3.5.5. Rangkuman

Link digunakan untuk navigasi selancar yang ada pada halaman web. Ada banyak fungsi pada

properti link contohnya pengaturan warna link, warna latar link, merubah warna link pada saat

link dikunjungi atapun pada saat link dipilih. Ada beberapa fungsi link diantaranya style link, text

decoration link yaitu properti yang memberikan efek garis bawah atau underline pada saat kursor

menyentuh link teks. Background color link yaitu properti yang memberikan efek warna background link pada saat kursor menyentuh link teks. Display block link yaitu properti untuk

memmberikan efek kotak pada saat kursor menyentuh teks link

3.5.6. Latihan

1. Apa yang dimaksud dengan background-color link !

2. Berikan link yang menuju alamat facebook !

3. Dari gambar 3.15. rubah warna teks background nya menjadi merah.!

4. Buat sintaks CSS dengan kondisi jika kursor menyentuh link teks maka teks tersebut berubah

ukurannya menjadi besar !5. Buat sintaks untuk mengganti jenis font jika kursor menyentuk teks link!

3.6.

LISTS

Adalah properti yang bisa digunakan untuk membuat daftar list. Ketika kita membuat list ada

beberapa hal yang harus kita ketahui yaitu :

∞ list style

Yaitu mengatur properti dalam satu deklarasi

∞

list style position

Yaitu menentukan list apakah list tersebut berada didalam konten atau diluar konten.

∞ list stle type

Yaitu bagaimana menentukan gaya list yang dipakai.

Ada beberapa fungsi yang bisa kita gunakan untuk membuat list yaitu :

∞ circle

Yaitu list dalam bentuk bulalatan (○).∞ square

Yaitu list dalam bentuk kotak (■).∞ upper-roman


32/79

32

Yaitu list dalam bentuk angka romawi (I, V, X).

∞ lower-alfa

Yaitu list dalam bentuk angka huruf (a, b,c…z).∞ image

Yaitu list dalam bentuk gambar.

Berikut adalah contoh penggunaan list.

ul.a {list-style-type:circle;}

ul.b {list-style-type:square;}

ol.c {list-style-type:upper-roman;}ol.d {list-style-type:lower-alpha;}

Menu Hari Ini :

Mie Goreng

Nasi Remes

Nasi Goreng Special

Minuman :

EsTeh Manis

Es Jeruk

Kopi Hitam

Paket :

Paket APaket B

Paket C

Harga Paket :

Paket A : Rp. 20.000,-

Paket B : Rp. 30.000,-

Paket A : Rp. 40.000,-


33/79

33

Maka hasil tampilan sintak diatas seperti pada gambar 3.18.

Gambar 3.18. List CSS

Jika bosan dengan list biasa kita bisa mengkombinasikan dengan list gambar. Berikut sintaknya.

ul

{

list-style:square url("sqpurple.gif");

}

Coffee

Tea

Coca Cola

Maka hasil tampilan sintak diatas adalahs seperti pada gambar 3.18

Gambar 3.18. List Image


34/79

34

3.6.1. Rangkuman

Adalah properti yang bisa digunakan untuk membuat daftar list. Ada beberapa fungsi yang bisa

kita gunakan untuk membuat list yaitu:

∞ circle

Yaitu list dalam bentuk bulalatan (○) ∞ square

Yaitu list dalam bentuk kotak (■) ∞ upper-roman

Yaitu list dalam bentuk angka romawi (I, V, X)

∞ lower-alfa

Yaitu list dalam bentuk angka huruf (a, b,c…z) ∞ image

Yaitu list dalam bentuk gambar.

3.6.2.

Latihan

1. Sebutkan fungsi – fungsi properti list ?

2.

Buat list dalam bentuk ceklist (√) ! 3. Buat list dalam bentuk “belang” dengan menggunakan tag nth-child ! 4. Buat list dalam bentuk “zigzag” dengan menggunakan tag nth-child ! 5. Dari gambar 3.19. tulis sintaknya !

Gambar 3.19. Latihan No 5

3.7. TABEL

Tabel diperlukan untuk menampung data yang terdiri dari baris dan kolom. CSS menyediakan tag

table untuk pembatan tabel. Ada empat tag yang bisa digunakan dalam tabel yaitu , ,

, . Tag merupakan elemen utama yang akan dikiuti oleh , , , .

Adapun fungsi dari masing – masing elemen tersebut adalah :

∞

Merupakan elemen untuk membuat rows atau baris.

∞

Merupakan elemen untuk membuat heading dalam cell.

∞

Merupakan elemen untuk membuat kolom.


35/79

35

Sintak dasar pembuatan tabel adalah sebaga berikut.

Contoh lengkap cara pembuatan tabel dengan 2 kolom 3 baris bisa dilhat dibawah ini.

table,th,td

{

border:1px solid black;

}

Nama

Alamat

Beki

Jl. Buah Batu No. 17 Bandung

Yuni

Jl. Kersamanah No. 33 Garut

Dari sintak diatas maka akan menghasilkan tampilan seperti pada gambar 3.20.


36/79

36

Gambar 3.20. Pembuatan Tabel Separate

3.7.1. Table Border & Collapse

Tabel border adalah elemen yang digunakan untuk mengatur ketebalan border tabel. Sintak

dasarnya seperti dibawah ini.

table,th,td

{ border:1px solid black;

}

Nilai border bisa diubah sesuai dengan kebutuhan. Didalam border CSS ada dua jenis yang bisa

digunakan yaitu border collapse dan separate. Contoh sintak penggunaan border collapse.

table{

border-collapse:collapse;

}

table, td, th

{


}

Nama

Alamat

Beki



37/79

37

Yuni

Jl. Kersamanah No. 33 Garut

Dari sintak diatas akan dihasilkan tampilan seperti pada gambar 3.21.

Gambar 3.21. Pembuatan Tabel Collapse

Pada Gambar 3.21. garis border adalah single. Akan tetapi pada gambar 3.20. garis bordernya

adalah terpisah.

3.7.2. Table Width and Height

Adalah untuk mengatur lebar dan tinggi dari ukuran tabel. Berikut contoh sintak penggunaan

atribut width dan height.

table,td,th

{


}

table

{

width:80%;}

th

{

height:50px;

}

Nama


38/79

38

Alamat

Email

Beki Subaeki

Jl. Buah Batu No. 17 [email protected]

Yuni

Jl. kersamanah No. 33 Garut

[email protected]


Gambar 3.22. Pembuatan Tabel Width dan Heigth

3.7.3. Table Text Aligment

Adalah properti yang digunakan untuk mengatur tata letak teks dalam tabel. Contoh

penggunaannya adalah center, right, left, top, bottom, middle. Contoh sintak nya adalah sebagai

berikut.

td

{

text-align:right;

}

Dan

td

{

height:50px;

vertical-align:bottom;

}

Contoh lengkap penggunaan atribut text aligment adalah sebagai berikut.


39/79

39

table,td,th{


}

table{

width:80%;}

th{

height:50px;

}

td{

text-align: center;

height: 50px;

vertical-align: bottom;

}

Nama

Alamat

Email

Beki Subaeki


[email protected]

Yuni


[email protected]


Gambar 3.23. Penggunaan Text Aligment


40/79

40

3.7.4. Table Padding

Table padding adalah salah satu fungsi untuk mengatur antara border dengan isi dari tabel.

Berikut adalah ilustrasi gambar 3.24. tentang padding.

Gambar 3.24. Padding

Untuk membuat contoh pengaturan padding CSS silahkan anda buat file dengan nama

padding.html. kemudian buat sintak berikut ini.

table,td,th{


}

table{

width:40%;

}

th{

height:50px;

}

td{

padding: 20px;

}

Nama

Alamat

Email

Beki Subaeki


[email protected]


41/79

41

Yuni


[email protected]

Maka sintak diatas akan menghasilkan gambar 3.25.

Gambar 3.25. Penggunaan Padding

3.7.5. Table Color

Merupakan fungsi untuk pemberian warna pada border dan cell tabel. Hal ini dibutuhkan agar

tabel tidak terlihat kaku. Dalam pemberian warna pada tabel diusahan jangan terlalu menyimpang

dari warna dominan dari halaman web. Berikut adalah sintak dasrnya.

table, td, th

{

border:1px solid green;

}

th

{

background-color:green;

color:white;

}

Sebagai contoh penggunaan table color silahkan buat sintak seperti berikut.

table,td,th{


}

table{

width:40%;


42/79

42

border-color: #556A3D;

}

th{

height:50px;

background-color: #A8CF45;

}td{

padding: 20px;

border-color: #556A3D;

}

Nama

Alamat

Email

Beki Subaeki


[email protected]

Yuni


[email protected]


Gambar 3.26. Table Color


43/79

43

3.7.6. Rangkuman

Tabel diperlukan untuk menampung data yang terdiri dari baris dan kolom. CSS menyediakan tag

table untuk pembatan tabel. Ada empat tag yang bisa digunakan dalam tabel yaitu , ,

, . Penggunaan fungsi lain dari properti tabel adalah Tabel border, adalah elemen yang

digunakan untuk mengatur ketebalan border tabel. Width dan height adalah untuk mengatur lebar

dan tinggi dari ukuran tabel. Teble text aligment adalah properti yang digunakan untuk mengaturtata letak teks dalam tabel. table padding adalah salah satu fungsi untuk mengatur antara border

dengan isi dari tabel. Table color Merupakan fungsi untuk pemberian warna pada border dan cell

tabel

3.7.7. Latihan

1. Pada gambar 3.27. Buat Sintak CSS nya

Gambar 3.27. Soal No 1

2. Apa perbedaan dari border collapse dan border separated !

3. Buat sintak untuk membuat tabel dengan komposisi kolom : 3, Baris : 5 !

4. Dari soal no 4, buat warna kolom menjadi orange dan baris warna kuning !

5. Apa perbedaan padding dan marging !

3.8.

BOX MODEL

Box model merupakan unsur dasar dalam pembuatan web/blog. Hampir semua web/blog

bentuknya adalah box atau kotak yang didalamnya terdapat beberapa pengaturan seperti margin,

paddimg, border, dan content . Ketika pertama kali kita buat layout maka yang pertama kali yang

harus anda lakukan adalah buat model box. Berikut adalah pengetrtian dari :

∞ Margin

Adalah ukuran batas/jarak paling luar atau sesudah border.

∞ Padding

Adalah jarak/batas antara border dengan content∞ Border

Adalah baris tepi paling luar.

∞ Content

Merupakan inti atau isi dari box model.

Untuk lebih jelas perhatikan gambar 3.28.


44/79

44

Gambar 3.28. Box Model

3.8.1. Margin

Margin merupakan batasan paling luar yang tidak memiliki warna background dan benar benar

transparan. Fungsi margin terdiri :

∞ margin-top

adalah ukuran margin atas.

∞ margin-left

adalah ukuran margin kiri.

∞ margin-right

adalah ukuran marginkanan.

∞ margin-bottom

adalah ukuran margin bawah.

masing masing fungsi memiliki nilai/value, diantaranya :

∞ auto

tampilan web akan ditampilkan secara otomatis oleh web browser.∞ Length

Adalah sebuah nilai terhadap properti yang nilai satuannya adalah px, pt, cm. Secara default

nilai dari properti adalah 0px.

∞ %

Persentase merupakan satuan yang tidak dihitung berdasarkan ukuran elemen itu sendiri,

melainkan dihitung berdasarkan perbandingan ukuran elemen tersebut terhadap ukuran

induknya.

∞ Inherit

Inherit merupakn turunan dari induknya. Adalah kondisi dimana ukuran akan mengikuti aturan

induknya, akan tetapi kita masih bisa merubahnya.

3.8.2. Padding

Untuk penulisan padding pada CSS urutan nilainya dimulai dari atas, kanan, bawah, kiri. Berikut

contoh sintaknya.

padding-top : 5px;

padding-right : 5px;

padding-bottom : 5px;

padding-left : 5px;


45/79

45

3.8.3. Border

Untuk urutan penulisan border dalam CSS adalah ukuran border, style border, warna border.

Berikut adalah contohnya.

border-width : 2px;

border-style : dotted; border-color : red;

Untuk style border ada beberapa jenis yang bisa digunakan yaitu :

∞ Dashad

∞ Solid

∞ Double

∞ Groove

∞ Ridge

∞ Inset

∞

Outset

Sebagai contoh tuliskan sintak berikut dengan nama padding.html

div.dotted{

width:220px;


46/79

46

padding:10px;

border:5px solid gray;

border-style: dotted;

text-align: center;

margin-bottom :10px;

}div.solid{

width:220px;

padding:10px;


border-style: solid;

text-align: center;


}

div.double{width:220px;

padding:10px;


border-style: double;

text-align: center;


}

div.groove{

width:220px;

padding:10px;


border-style: groove;

text-align: center;


}

div.ridge{

width:220px;

padding:10px;

border:5px solid gray; border-style: ridge;

text-align: center;


}

div.inset{

width:220px;

padding:10px;


border-style: inset;

text-align: center;



47/79

47

}

div.outset{

width:220px;

padding:10px;


border-style:outset;text-align: center;


}

D O T T E D

S O L I D

D O U B L EG R O O V E

R I D G E

I N S E T

O U T S E T


Gambar 3.29. Border-Style

3.8.4. Satuan Nilai CSS

Dalam mendesain web, dibutuhkan dalam pemberian nilai pada suatu properti. Misalkan tinggi

suatu box, besar ukuran image, ukuran font atau ukuran ketebalan border. Untuk kebutuhan ini

CSS menyediakan berbagai ukuran seperti pixel, em, point, in, pc, dan pt.


48/79

48

3.8.5. Rangkuman

Margin merupakan batasan paling luar yang tidak memiliki warna background dan benar benar

transparan. Ada beberapa fungsi margin yang bisa digunakan diantaranya :

∞ margin-top

adalah ukuran margin atas.∞ margin-left

adalah ukuran margin kiri.

∞ margin-right

adalah ukuran margin kanan.

∞ margin-bottom

adalah ukuran margin bawah.

Padding merupakan fungsi CSS untuk mengatur tata letak sebuah objek. Ada beberapa fungsi

yang bisa digunakan adalah top, bottom, right, left. Border merupakan bingkai yang mengatur

ukuran border, style border, warna border.

3.8.6. Latihan

1. Sebutkan jenis fungsi funggsi padding ?

2.

Jelaska fugsi dari properti berikut :

a

Border-left-style

b

Border-right-color

c

Border-top-width

3. Berapa nilai hex dari warna “red” ?

4.

Model box dengan ciri garis putus putus merupakan properti style ?5. Dari sintak berikut apa yang dihasilkan?

p.one

{

border-style:solid;

border-width:5px;

}

p.two

{

border-style:solid;

border-width:medium;

}

3.9. OUTLINE

Outline adalah garis yang mengelilingi semua elemen yang berada diluar border. Nilai/value dari

outline memiliki nilai yang sama dengan border akan tetapi outline bukan merupakan bagian dari

box, walaupun outline selalu berada disekeliling elemen. Outline merupakan bayangan yang

mampu menabrak semua elemen yang dikelilinginya tanpa merubah ukuran bidang box nya.Sintak dasarnya seperti dibawah ini.


49/79

49

Outline: style |color|width;

Untuk contoh lengkapnya buat file dengan nama outline.html

div.dotted{

width:220px;

padding:10px;


border-style: dotted;

text-align: center;


outline-style: outset;

}

div.solid{

width:220px;

padding:10px;


border-style: solid;

text-align: center;


outline-style: inset;}

div.double{

width:220px;

padding:10px;


border-style: double;

text-align: center;


outline-style: ridge;

}

div.groove{

width:220px;

padding:10px;


border-style: groove;

text-align: center;


outline-style: groove;

}

div.ridge{


50/79

50

width:220px;

padding:10px;


border-style: ridge;

text-align: center;

margin-bottom :10px;outline-style: double;

}

div.inset{

width:220px;

padding:10px;


border-style: inset;

text-align: center;

margin-bottom :10px;outline-style: solid;

}

div.outset{

width:220px;

padding:10px;


border-style:outset;

text-align: center;


outline-style: dotted;

}

D O T T E D

S O L I D

D O U B L E

G R O O V E

R I D G EI N S E T

O U T S E T

Dari sintak diatas akan menghasilkan tampilan seperti pada gambar 3.30.


51/79

51

Gambar 3.30. Outline

Kalau diperhatikan dari gambar 3.30 setiap border style dikelilingi properti outline. Hal inisenada dengan pembahasan diatas bahwa outline akan selalu mengelilingi semua elemen setelah

border. Ada beberapa properti yang bisa digunakan antara lain:

Tabel.3.1. Properti Outline

property values

outline outline-color

outline-style

outline-width

inherit

outline-color color_namehex-number

rgb_number

invert

inherit

outline-style none

dotted

dashed

solid

double

groove

ridgeinset

outset

inherit

outline-width thin

medium

thick

length

inherit


52/79

52

3.9.1. Rangkuman

Outline adalah garis yang mengelilingi semua elemen yang berada diluar border. Nilai/value dari

outline memiliki nilai yang sama dengan border akan tetapi outline bukan merupakan bagian dari

box, walaupun outline selalu berada disekeliling elemen. Outline merupakan bayangan yang

mampu menabrak semua elemen yang dikelilinginya tanpa merubah ukuran bidang boxnya.

Doted, solid, double, groove, ridge, inset, outset merupakan jenis fungsi outline yang akanmenghasilkan bentuk outline yang berbeda.

3.9.2. Latihan

1. Sebutkan urutan box model dalam CSS !

2. Apa fungsi dari properti outline ?

3. Apa perbedaan antara outline dengan border ?

4. Buat latihan properti dari outline !

5. Dari gambar 3.31. buat sintak CSS nya !


3.10.

DIMENSION

Adalah properti untuk mengatur tinggi dan lebar dari sebuah elemen. Bukan itu saja, properti ini

mengijinkan kita untuk mengatur spasi antar dua baris. Beberapa properti yang bisa digunakan

untuk properti dimension adalah.

Tabel.3.2. Poperti Outline

property values

height Auto

Length

%

Inherit

Max-height None

Length

%

Inheritmax-width None

Length

http://www.w3schools.com/cssref/pr_dim_max-width.asphttp://www.w3schools.com/cssref/pr_dim_max-width.asp


53/79

53

%

Inherit

min-height Length

%

Inherit

min-width Length

%

Inherit

width Auto

Length

%

Inherit

Dari properti diatas berikut adalah sintak dasar dari masing masing properti.

∞ height

p.ex

{

height:100px;

width:100px;

}

∞ max-height

p

{

max-height:50px;

}

∞ max-width

p

{

max-width:100px;}

∞ min-width

p

{

min-width:1000px;

}

∞

min-heigth

http://www.w3schools.com/cssref/pr_dim_min-height.asphttp://www.w3schools.com/cssref/pr_dim_min-width.asphttp://www.w3schools.com/cssref/pr_dim_width.asphttp://www.w3schools.com/cssref/pr_dim_width.asphttp://www.w3schools.com/cssref/pr_dim_min-width.asphttp://www.w3schools.com/cssref/pr_dim_min-height.asp


54/79

54

p

{

min-height:100px;

}

∞

min-width

p

{

min-width:1000px;

}

∞ width

p.ex

{

height:100px;

width:100px;

}

3.10.1. Rangkuman

Dimension merupakan properti untuk mengatur tinggi dan lebar dari sebuah elemen. Bukan itusaja, properti ini mengijinkan kita untuk mengatur spasi antar dua baris.

3.10.2. Latihan

1. Apa yang dimaksud dengan dimension ?

2.

Properti apa saja yang bisa digunakan dalam dimension ?

3.

Buat masing – masing contoh properti yang terdapat dalam dimension ?4.

Dari gambar 3.32. buat sintak CSS nya !


5. Jelaskan sintak dibawah ini !


55/79

55

p

{

min-width:150px;

background-color:yellow;}

The minimum width of this paragraph is set to 150px.

3.11.

DISPLAY

Properti display adalah cara bagaimana elemen ditampilkan atau dengan cara apa elemen bisa

ditampilkan. Ada beberapa value yang bisa digunakan untuk properti display.

∞ inherit

∞ inline

∞ block

∞ inline-block

∞

none∞ list-item

∞ run-in

∞ table

contoh penggunaan display dapat dilihat sintak berikut ini.

div{

display:inline-block;

padding:10px;

border:1px solid #888;

margin:10px;

}

h3{

display:inherit;

color:red;


56/79

56

background:#ccc;

}

img{

display:inherit;

margin:10px;

padding:4px; border:1px solid #888;

}

text here ... dst

Text here

text here ... dst

The minimum width of this paragraph is set to 150px.

Maka hasil dari sintak diatas akan menghasilkan seprti gambar 3.33.

Gambar 3.33. Display Properti

3.11.1. Rangkuman

Properti display adalah cara bagaimana elemen ditampilkan atau dengan cara apa elemen bisaditampilkan. Ada beberapa value yang bisa digunakan untuk properti display.

∞ inherit

∞ inline

∞ block

∞ inline-block

∞ none

∞ list-item

∞ run-in

∞

table


57/79

57

3.11.2. Latihan

1. Apa yang dimaksud dengan display ?

2. Sebutkan properti apa saja yang terdapat dalam display ?

3. Berikan contoh masing – masing properti ?

4.

Perhatikan gambar 3.34.


Dari gambar 3.34. buat sintak CSS nya !

5. Buat kesimpulan tentang properti display !

3.12.

FLOATING & POSITIONING

Floating merupakan elemen yang berguna untuk mengatur posisi elemen html secara horizontal

yang berpatokan pada elemen – elemen yang membungkusnya seperti DIV, Table, Browser danyang lainnya. Karena pengaturan ini hanya horizontal maka nilai atau valuenya adalah right, left,

none, inherit. Berikut adalah contoh sintaknya.

.thumbnail

{

float:left;

width:110px;

height:90px;

margin:5px;

}

Image Gallery

Ini adalah gambar rata kiri.


58/79

58

Dari sintak diatas akan menghasilkan seperti pada gambar 3.35.

Gambar 3.35. Display : Left

Sedangkan positioning mirip dengan float yang membedakan hanyalah pada penempatan elemen.

Jika pada float gambar bisa berdampingan akan tetapi pada postioning gambar bisa saling tindih.

Ada beberapa properti yang bisa digunakan dalam positioning, adalah sebagai berikut :

∞ Static

Yaitu positioning default suatu elemen tanpa merubah nilainya seperti div, top, left, right.

∞ Fixed

Penempatan elemen html sesuai dengan browser. Artinya ketika scroll digeser elemen tidak

akan bergeser. Penggunaan postioning fixed akan mengubah default html. Sebagai catatan

pada mesin IE7 dan IE8 properti ini tidak akan berpengaruh kecuali harus dideklarasikan


59/79

59

}

h2.pos_left{

position:relative;

left:20px;

}

h2.pos_right{ position:absolute;

left:20px;

}

Judul tanpa position

Sub Judul denga positioning : STATIC

Sub Judul denga positioning : FIXEDSub Judul denga positioning : RELATIVE

Sub Judul denga positioning : ABSOLUTE

Sehingga akan menghasilkan seperti pada gambar 3.36.

Gambar 3.36. Float & Positioning Properti

3.12.1. Rangkuman

Floating merupakan elemen yang berguna untuk mengatur posisi elemen html secara horizontal

yang berpatokan pada elemen – elemen yang membungkusnya seperti DIV, Table, Browser danyang lainnya value dari properti ini adalah right, left, none, inherit.

3.12.2. Latihan

1.

Dari sintak dibawah ini, jelaskan properti apa yang digunakan ?

p.pos_fixed

{

position:fixed;


60/79

60

top:30px;

right:5px;

}

Some more text

Note: IE7 and IE8 supports the fixed value only if a

!DOCTYPE is specified.

Some text

Some text

Some text

Some text

Some

text

Some text

Some text

Some text

Some text

Some

text

Some text

Some text

Some text

Some text

Some

text

Some text

2.

Ada berapa jenis properti yang digunakan dalam positioning ? jelaskan !

3. Dari gambar 3.37. buat sintaknya !


4. Dari soal no 3 sebutkan properti apa saja yang digunakan ?

5. Apa yang dimaksud dengan overlapping ?

3.13.

PSEUDO-CLASSES

Adalah properti yang digunakan untuk memberikan efek tertentu pada selector. Untuk

pembahasan Selector sudah dijelaskan pada BAB I.

3.13.1.

Anchor Pseudo-ClassesAdalah properti untuk memberikan efek tertentu pada beberapa selector. Pada CSS pseudo

classes dibuat tebal dalam selector – selector dalam menentukan relasi selector. Penulisan pseudoclasses menggunakan tanda titik dua (:). Sintaknya adalah sebagai berikut :

selector:pseudo-class {propermty:value;}

CSS classes juga bisa dipadu padankan sehingga Nampak sintak berikut ini :

Selector.class:pseudo-class {property:value;}

Anchor pseudo classes merupakan properti untuk pengaturan link. pada mesin browser ada empat pseudo classes yang didukung oleh web browser yaitu :


61/79

61

∞ link

Adalah tampilan link yang belum dikunjungi.

∞ visited

Adalah tampilan link yang sudah dikunjungi.

∞ hover

Adalah tampilan link ketika link tersentuh oleh kursor. Biasanya link berubah warnanya.∞ active

Adalah tampilan link ketika link di klik.

Untuk contoh penggunaan pseudo classes adalah sebagai berikut :

a:link {color:#FF0000;} /* unvisited link */

a:visited {color:#00FF00;} /* visited link */

a:hover {color:#FF00FF;} /* mouse over link */

a:active {color:#0000FF;} /* selected link */

Ini LINKk

Note: a:hover MUST come after a:link and a:visited in the CSS

definition in order to be effective.

Note: a:active MUST come after a:hover in the CSS definition in order

to be effective.

Maka akan menghasilkan tampilan gambar 3.38.

Gambar 3.38. Pseudo Classes

Pada tampilan gambar 3.38. ada empat kondisi yaitu a:link, a:visited, a:active, a:hover.

3.13.2. Pseudo-Classes and CSS Classses

Pseudo classes dapat dikombinasikan dengan class CSS. contoh sintaknya adalah seperti dibawah

ini.


62/79

62

a.red:visited {color:#FF0000;}

CSS Syntax

link diatas jika link sudah di klik/dikunjungi maka link tersebut akan berubah menjadi merah.

3.13.3.

Pseudo ElementMerupakan efek khusus yang diberikan pada beberapa seleksi elemen dengan maksud

menambahkan elemen atau suatu tag baru didalam tag yang diberi style. Ada empat pseudo

element yaitu before, after, first-letter dan first-line.

∞ Pseudo before-after

Pseudo before-after akan menambahkan conten sebelum (before) dan sesudah (after) element.

Contoh sintaknya adalah sebagai berikut.

Beki Subaeki

Lalu anda tambahkan kode CSS yaitu pseudo element :before da isi dengan content :

“perkenalkan nama saya” untuk sintak lengkapnya silahkan tulis dibawah ini.

h1:before

{content:"Perkenalkan Nama Saya -";

background: #add;

text-shadow:white;

}

Beki Subaeki

Note: Note:before dapat support untuk IE8 akan tetapi harus dideklarasikan

dengan menulis, !DOCTYPE

Maka akan menghasilkan tampilan seperti pada gambar 3.39.


63/79

63

Gambar 3.39. Classes Before

Hampir sama dengan before, hanya saja penempatannya yang berbeda. Berikut contoh

sintaknya.

h1:after{

content:"Perkenalkan Nama Saya -";

background: #add;

text-shadow:white;

}

Beki Subaeki

Note: Note:before dapat support untuk IE8 akan tetapi harus dideklarasikan

dengan menulis, !DOCTYPE

Sehingga jika sintak diatas dieksekusi akan menghasilkan gambar 3.40.

Gambar 3.40. Classes After

∞ first-line dan first-letter

first-line digunakan untuk memberikan style pada baris pertama selector. Contoh sintaknya

adalah.


64/79

64

p:first-line

{

background-color:yellow;

}

Undang Undang Dasar 45

"Bahwa sesungguhnya kemerdekaan itu ialah hak segala bangsa dan oleh sebab itu, maka

penjajahan diatas dunia harus dihapuskan karena tidak sesuai dengan perikemanusiaan dan

perikeadilan. Dan perjuangan pergerakan kemerdekaan Indonesia telah sampailah kepada saat

yang berbahagia dengan selamat sentosa mengantarkan rakyat Indonesia ke depan pintu

gerbang kemerdekaan negara Indonesia, yang merdeka, bersatu, berdaulat, adil dan

makmur."


Gambar 3.41. First-Line

Sedangkan first-letter digunakan untuk membuat style pada baris pertama dan huruf pertama

akan Nampak beda atau besar. Contoh sintaknya adalah :

p:first-letter

{

background-color:yellow;

font-size: 25px;

font-family: "Share-Tech";

float: left;

margin-right: 0px;

}

Undang Undang Dasar 45


65/79

65

"Bahwa sesungguhnya kemerdekaan itu ialah hak segala bangsa dan oleh sebab itu, maka

penjajahan diatas dunia harus dihapuskan karena tidak sesuai dengan perikemanusiaan dan

perikeadilan. Dan perjuangan pergerakan kemerdekaan Indonesia telah sampailah kepada saat

yang berbahagia dengan selamat sentosa mengantarkan rakyat Indonesia ke depan pintu

gerbang kemerdekaan negara Indonesia, yang merdeka, bersatu, berdaulat, adil dan

makmur."


Gambar 3.42. Classes First-Letter

Jika diperhatikan gambar 3.42. akan Nampak hurup pertama pada baris pertama yaitu “B” berwarna kuning, berukuran besar dan jenis fontnya adalah Share-Tech.

3.13.4. Rangkuman

Pseudo adalah properti yang digunakan untuk memberikan efek tertentu pada selector. Pada CSS

pseudo classes dibuat tebal dalam selector – selector dalam menentukan relasi selector. Penulisan pseudo classes menggunakan tanda titik dua (:). Fungsi – fungsi lain dari properti ini adalahPseudo element yang merupakan efek khusus yang diberikan pada beberapa seleksi elemen

dengan maksud menambahkan elemen atau suatu tag baru didalam tag yang diberi style.

3.13.5. Latihan

1. Apa yang maksud dengan pseudo classes ?

2. Jelaska masing – masing fungsi yang ada pada pseudo classes ? 3. Apa saja yang bisa ditulis dalam content ?

4. Dari gambar 3.43. tulis sintak CSS nya !


5. Dari soal no 4, kombnasikan dengan first-line ?

3.14.

Navigasi Bar

Dalam pembuatan web navigasi adalah komponen paling utama, karena navigasi berfungsi

sebagai penghubung antar halaman web. Ada beberapa teknik untuk membuat navigasi dan itutergantung kebutuhan dan kemampuan kita. Navigasi bar adalah bagaimana membuat daftar link.


66/79

66

Ada beberapa bentuk yang bisa kita gunakan ketika membuat navigasi bar, apakah bentuknya

tersusun horizontal atau vertical. Gambar 3.44. menunjukan bentuk bentuk navigasi.

Gambar 3.44. Contoh Navigasi Bar

Pada gambar 3.44. adalah contoh penggunaan navigasi bar. Pada dasarnya navigasi bisa dirubah

sesuai dengan keinginan misalnya dengan kombinasi image atau color yang berbeda.

3.14.1. Link list

Adalah cara untuk membuat daftar link dalam bentuk list. Untuk mencobanya silahkan buat

sintak seperti dibawah ini.

Home

ContactAbout

FAQ

Note: alamat link diatas menggunakan tanda a href= "#", itu hanya untuk memberikan

efek link. harusnya diberikan alamat real web

Pada sintak diatas akan menghasilkan tampilan seperti pada gambar 3.45.

Gambar 3.45. Link List

Contoh pada gambar 3.45. memberikan efek bullet . Kita bisa menghilangkan efek bullet dengan

menambahkan properti list-line-type:none. Untuk sintaknya bisa dilihat pada sintak dibawah ini.


67/79

67

ul{

list-style-type: none;}

Home

Contact

About

FAQ

Note: alamat link diatas menggunakan tanda a href= "#", itu hanya untuk memberikan

efek link. harusnya diberikan alamat real web

3.14.2. Vertical Navigasi

Adalah navigasi dalam bentuk tangga atau baris. Contoh penggunaanya adalah sebagai berikut.

/*------Vertical navigation menu bar from bangiz.blogspot.com---------*/

#nav-vr01 {

list-style:none;

margin:0;

padding:0;

}#nav-vr01 li {

margin:0;

padding:0;

}

#nav-vr01 li a:link,#nav-vr01 li a:visited {

display:block;

font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

width:180px;

text-transform:capitalize;


font-weight:bold;


68/79

68

padding:6px 6px 6px 40px;

color:#111111;

background:#EBEBEE;

border-bottom:1px dotted white;

}

#nav-vr01 li a:hover { border:1px solid rgba(81,81,84,0.58);

-khtml-border-top-right-radius:5px;

-webkit-border-top-right-radius:5px;

border-top-right-radius:5px;

border-bottom-right-radius:5px;

-moz-box-shadow:0px 0pz 3px 0px #EFEEF4;

-webkit-box-shadow:0px 0pz 3px 0px #EFEEF4;

box-shadow:0px 0px 3px 0px #EFEEF4;

color:#48A2AE; background:#AFAFB8;

-moz-transition:all .3s cubic-bezier 0.05s;

-webkit-transition:all .3s cubic-bezier 0.05s;

-o-transition:all .3s cubic-bezier 0.05s;

transition:all .3s cubic-bezier 0.05s;

}

#nav-vr01 li a:active {

color:#4848AE;

background:#AEAEB0;


-moz-transition:all .2s linear;

-webkit-transition:all .2s linear;

-o-transition:all .2s linear;

transition:all .2s linear;

}

Link Media Sosial :

Facebook

Twitter

Friendster

Hasil sintak diatas ketika di compile pada web browser akan menghasilkan tampilan seperti

gambar 3.46.


69/79

69

Gambar 3.46. Vertical Link

3.14.3. Horizontal Navigasi

Adalah navigasi dalam bentuk kolom. Penggunaannya adalah dengan menggunakan inline atau

floating. Contoh penggunaanya adalah sebagai berikut.

ul{

list-style-type:none;

margin:0;

padding:0;

}li{

display:inline;

}

Home

Contact

About Us

FAQ

Hasil dari sintak diatas adalah seperti pada gambar seperti pada gambar 3.47.


70/79

70

Gambar 3.47. Horizontal Link

Sedangkan untuk penggunaan horizontal float adalah sebagai berikut.

ul

{

list-style-type:none;

margin:0;

padding:0;

overflow:hidden;

}

li

{

float:left;

}

a

{

display:block;

width:60px;

background-color:#dddddd;

border:

}

Home

Contact

About

FAQ

Maka hasil tampilan dari sintak diatas adalah pada gambar 4.48.


71/79

71

Gambar 3.48. Horizontal Link Float

3.14.4. Rangkuman

Navigasi merupakan bagian terpenting dari sebuah halaman web karena fungsinya sebagai

penghubung dari satu halaman ke halaman lain. Link list merupakan contoh dari navigasi yang

berbentuk daftar link. Bentuk lain dari navigasi adalah horizontal dimana tampilan link nya

adalah kolom. Selanjutnya adalah vertical dimana bentuk ini akan menampilkan link seperti

tangga.

3.14.5.

Latihan

1.

Apa yang dimaksud dengan navigasi ?

2.

Buat sintak untuk membuat tampilan gambar 4.49.


3.

Buat contoh lain untuk pembuatan navigasi bar horizontal float ?4. Buat sintak untuk membuat tampilan pada gambar 3.50

Gambar 3.50. Soal No. 4

5. Jelaskan penggunaan float dan inline ?

3.15.

Image Gallery

Image gallery adalah kumpulan photo yang terpampang pada halaman web. Biasanya digunakan

pada web berbasis e commerce atau web yang menjual produk. Hal ini dilakukan agar

pengunjung bisa melihat katalog yang dijual. Contohnya web tokobagus.com atau berniaga.com

yang memajang produk produk yang dijual. Untuk membuat image gallery bisa dilihat dari sintak

berikut ini.


72/79

72

div.img

{

margin: 5px;

padding: 5px;

border: 1px

Date post:	06-Jul-2018
Category:	Documents
Upload:	bekibinbasei
View:	219 times
Download:	0 times

BELAJAR CASCADING STYLE SHEET

Documents