SlideShare a Scribd company logo
1 of 2
Download to read offline
CSS Tutorial rosihanari.net
Lebih Lanjut Tentang Value 14
Lebih Lanjut Tentang Value
Pada bab ini akan dijelaskan lebih lanjut tentang aturan penulisan value dari properti
yang diberikan.
Terdapat beberapa jenis value yang dapat berikan pada properti style, antara lain berupa
predefined value, bilangan, prosentase, url, dan juga warna.
Predefined Value
Predefined value merupakan nilai yang sudah terdefinisikan oleh (X)HTML. Nilai ini
dapat dipilih dari beberapa alternatif pilihan yang ada. Contoh penggunaan predefined
value ini adalah pada style berikut
h1 {
font-style : italic;
}
Style di atas digunakan untuk membuat text miring pada elemen heading 1. Dalam hal ini
value ‘italic’ merupakan predefined value. Untuk properti font-style terdapat pilihan
value yang telah didefinisikan oleh (X)HTML yaitu italic, normal, dan oblique.
Perhatikan bahwa predefined value ditulis tanpa diapit tanda petik.
Bilangan
Suatu value dapat pula berupa bilangan tertentu (tanpa satuan apapun). Berikut ini
contohnya:
p {
line-height : 2;
}
Maksud style di atas adalah mengatur jarak antar baris paragraf menjadi 2 kali dari
ukuran fontnya.
Panjang, Besar dan Prosentase
Untuk menyatakan panjang, besar dan prosentase, value harus diberikan satuan seperti px
(pixel), in (inch), cm (centimeter), mm (milimeter), pt (points) dan pc (picas). Berikut ini
beberapa contohnya
CSS Tutorial rosihanari.net
Lebih Lanjut Tentang Value 15
h1 {
font-size : 20px; /* membuat ukuran font 20 pixel */
}
hr {
width : 20%;
/* membuat garis horizontal dengan panjang 20% terhadap lebar
jendela browser /*
}
URL
Sebuah value juga dapat berupa URL. Berikut ini contohnya
body
{
background : url(img/image.jpg);
}
Style di atas untuk memberi background image pada body yang diambil dari folder img
dengan nama file image.jpg.
Warna
Untuk memberi value berupa warna pada properti, ada beberapa cara yang dapat
dilakukan yaitu dengan menuliskan secara eksplisit warna yang diinginkan, misal (red,
green, yellow, dll) atau dengan menuliskannya dalam kode hexadesimal. Berikut ini
contohnya
p
{
color : red;
}
p
{
color : #FF0000; /* identik dengan warna merah (hexadesimal)
}

More Related Content

Viewers also liked

Makalah komponen sistem informasi
Makalah komponen sistem informasiMakalah komponen sistem informasi
Makalah komponen sistem informasi
Arief Munandar
 

Viewers also liked (20)

Css tutorial-20
Css tutorial-20Css tutorial-20
Css tutorial-20
 
Css tutorial-16
Css tutorial-16Css tutorial-16
Css tutorial-16
 
Introduction to E-learning
Introduction to E-learning Introduction to E-learning
Introduction to E-learning
 
Css tutorial-05
Css tutorial-05Css tutorial-05
Css tutorial-05
 
Css tutorial-03
Css tutorial-03Css tutorial-03
Css tutorial-03
 
Css tutorial-12
Css tutorial-12Css tutorial-12
Css tutorial-12
 
Css tutorial-17
Css tutorial-17Css tutorial-17
Css tutorial-17
 
Css tutorial-12 2
Css tutorial-12 2Css tutorial-12 2
Css tutorial-12 2
 
Css tutorial-18
Css tutorial-18Css tutorial-18
Css tutorial-18
 
Css tutorial-03 2
Css tutorial-03 2Css tutorial-03 2
Css tutorial-03 2
 
Sistem informasi-pengolahan-nilai-sekolah
Sistem informasi-pengolahan-nilai-sekolahSistem informasi-pengolahan-nilai-sekolah
Sistem informasi-pengolahan-nilai-sekolah
 
Css tutorial-09
Css tutorial-09Css tutorial-09
Css tutorial-09
 
Css tutorial-11
Css tutorial-11Css tutorial-11
Css tutorial-11
 
Bab 4 Rancangan Implementasi Sistem perancangan sis tem informasi pendaftaran...
Bab 4 Rancangan Implementasi Sistem perancangan sis tem informasi pendaftaran...Bab 4 Rancangan Implementasi Sistem perancangan sis tem informasi pendaftaran...
Bab 4 Rancangan Implementasi Sistem perancangan sis tem informasi pendaftaran...
 
sistem informasi penjadawalan mataluliah berbasis web pada politeknik jambi
sistem informasi penjadawalan mataluliah berbasis web pada politeknik jambisistem informasi penjadawalan mataluliah berbasis web pada politeknik jambi
sistem informasi penjadawalan mataluliah berbasis web pada politeknik jambi
 
Bab 5 Penutup perancangan sistem informasi pendaftaran online be smart in en...
Bab 5  Penutup perancangan sistem informasi pendaftaran online be smart in en...Bab 5  Penutup perancangan sistem informasi pendaftaran online be smart in en...
Bab 5 Penutup perancangan sistem informasi pendaftaran online be smart in en...
 
Makalah komponen sistem informasi
Makalah komponen sistem informasiMakalah komponen sistem informasi
Makalah komponen sistem informasi
 
Rancang Bangun Sistem Informasi PSB (Penerimaan Siswa Baru) SDN Setiamanah Ma...
Rancang Bangun Sistem Informasi PSB (Penerimaan Siswa Baru) SDN Setiamanah Ma...Rancang Bangun Sistem Informasi PSB (Penerimaan Siswa Baru) SDN Setiamanah Ma...
Rancang Bangun Sistem Informasi PSB (Penerimaan Siswa Baru) SDN Setiamanah Ma...
 
Bab 2 Dasar Teori perancangan sistem informasi pendaftaran online be smart i...
Bab 2  Dasar Teori perancangan sistem informasi pendaftaran online be smart i...Bab 2  Dasar Teori perancangan sistem informasi pendaftaran online be smart i...
Bab 2 Dasar Teori perancangan sistem informasi pendaftaran online be smart i...
 
Bab 3 Perancangan diagram dari Perancangan sistem informasi pendaftaran onli...
Bab 3  Perancangan diagram dari Perancangan sistem informasi pendaftaran onli...Bab 3  Perancangan diagram dari Perancangan sistem informasi pendaftaran onli...
Bab 3 Perancangan diagram dari Perancangan sistem informasi pendaftaran onli...
 

Similar to Css tutorial-04 (13)

Css tutorial-02
Css tutorial-02Css tutorial-02
Css tutorial-02
 
Tabel Tag HTML
Tabel Tag HTMLTabel Tag HTML
Tabel Tag HTML
 
webdesign dasar : 03 html dan css dasar
webdesign dasar : 03 html dan css dasarwebdesign dasar : 03 html dan css dasar
webdesign dasar : 03 html dan css dasar
 
webdesign dasar : 06 layout
webdesign dasar : 06 layoutwebdesign dasar : 06 layout
webdesign dasar : 06 layout
 
TIPE DATA PEMROGRAMAN.pptx
TIPE DATA PEMROGRAMAN.pptxTIPE DATA PEMROGRAMAN.pptx
TIPE DATA PEMROGRAMAN.pptx
 
Modul 2 - CSS
Modul 2 - CSSModul 2 - CSS
Modul 2 - CSS
 
CSS
CSSCSS
CSS
 
Web syahid 1210651273
Web syahid 1210651273Web syahid 1210651273
Web syahid 1210651273
 
02 materi html pengolahan format font
02   materi html pengolahan format font02   materi html pengolahan format font
02 materi html pengolahan format font
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis web
 
Modul PDF.docx
Modul PDF.docxModul PDF.docx
Modul PDF.docx
 
modul CSS tugas Pemrograman Berbasis Web
modul CSS tugas Pemrograman Berbasis Webmodul CSS tugas Pemrograman Berbasis Web
modul CSS tugas Pemrograman Berbasis Web
 
webdesign dasar : 07 background
webdesign dasar : 07 backgroundwebdesign dasar : 07 background
webdesign dasar : 07 background
 

More from Karin Novilda (11)

Css tutorial-07
Css tutorial-07Css tutorial-07
Css tutorial-07
 
Css tutorial-06
Css tutorial-06Css tutorial-06
Css tutorial-06
 
Css tutorial-01
Css tutorial-01Css tutorial-01
Css tutorial-01
 
Publikasi 08.11.22082
Publikasi 08.11.22082Publikasi 08.11.22082
Publikasi 08.11.22082
 
Publikasi 08.11.2208
Publikasi 08.11.2208Publikasi 08.11.2208
Publikasi 08.11.2208
 
Jurnal skripsi
Jurnal skripsiJurnal skripsi
Jurnal skripsi
 
Jurnal 13173sma nu maarif
Jurnal 13173sma nu maarifJurnal 13173sma nu maarif
Jurnal 13173sma nu maarif
 
Jbptunikompp gdl-rudiramlan-28836-16-sistemi-
Jbptunikompp gdl-rudiramlan-28836-16-sistemi-Jbptunikompp gdl-rudiramlan-28836-16-sistemi-
Jbptunikompp gdl-rudiramlan-28836-16-sistemi-
 
Bab skripsi
Bab skripsiBab skripsi
Bab skripsi
 
Bab iv
Bab ivBab iv
Bab iv
 
5 unikom-s-m
5 unikom-s-m5 unikom-s-m
5 unikom-s-m
 

Css tutorial-04

  • 1. CSS Tutorial rosihanari.net Lebih Lanjut Tentang Value 14 Lebih Lanjut Tentang Value Pada bab ini akan dijelaskan lebih lanjut tentang aturan penulisan value dari properti yang diberikan. Terdapat beberapa jenis value yang dapat berikan pada properti style, antara lain berupa predefined value, bilangan, prosentase, url, dan juga warna. Predefined Value Predefined value merupakan nilai yang sudah terdefinisikan oleh (X)HTML. Nilai ini dapat dipilih dari beberapa alternatif pilihan yang ada. Contoh penggunaan predefined value ini adalah pada style berikut h1 { font-style : italic; } Style di atas digunakan untuk membuat text miring pada elemen heading 1. Dalam hal ini value ‘italic’ merupakan predefined value. Untuk properti font-style terdapat pilihan value yang telah didefinisikan oleh (X)HTML yaitu italic, normal, dan oblique. Perhatikan bahwa predefined value ditulis tanpa diapit tanda petik. Bilangan Suatu value dapat pula berupa bilangan tertentu (tanpa satuan apapun). Berikut ini contohnya: p { line-height : 2; } Maksud style di atas adalah mengatur jarak antar baris paragraf menjadi 2 kali dari ukuran fontnya. Panjang, Besar dan Prosentase Untuk menyatakan panjang, besar dan prosentase, value harus diberikan satuan seperti px (pixel), in (inch), cm (centimeter), mm (milimeter), pt (points) dan pc (picas). Berikut ini beberapa contohnya
  • 2. CSS Tutorial rosihanari.net Lebih Lanjut Tentang Value 15 h1 { font-size : 20px; /* membuat ukuran font 20 pixel */ } hr { width : 20%; /* membuat garis horizontal dengan panjang 20% terhadap lebar jendela browser /* } URL Sebuah value juga dapat berupa URL. Berikut ini contohnya body { background : url(img/image.jpg); } Style di atas untuk memberi background image pada body yang diambil dari folder img dengan nama file image.jpg. Warna Untuk memberi value berupa warna pada properti, ada beberapa cara yang dapat dilakukan yaitu dengan menuliskan secara eksplisit warna yang diinginkan, misal (red, green, yellow, dll) atau dengan menuliskannya dalam kode hexadesimal. Berikut ini contohnya p { color : red; } p { color : #FF0000; /* identik dengan warna merah (hexadesimal) }