SlideShare a Scribd company logo
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

PDF
Css tutorial-04
DOCX
Shinta kuu
PDF
Css tutorial-15
PDF
Css tutorial-13
PDF
Css tutorial-19
PDF
Css tutorial-14
PDF
Css tutorial-08
PDF
Css tutorial-10
Css tutorial-04
Shinta kuu
Css tutorial-15
Css tutorial-13
Css tutorial-19
Css tutorial-14
Css tutorial-08
Css tutorial-10

Viewers also liked (20)

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

Similar to Css tutorial-04 (17)

PPTX
Pemograman WEB (CSS)
PDF
Chapter 3 css
PDF
PPTX
Pelatihan website#1
DOCX
webdesign dasar : 03 html dan css dasar
PDF
Modul css
PPTX
cascading style sheets in html website koding
PPTX
pertemuan 4-Cascading Style Sheet (CSS).pptx
DOC
Pertemuan8
PDF
Css tutorial-01
PDF
Css tutorial-01
DOCX
Laporan pratikum II web
PPTX
04 html styling
PPT
05 XHTML CSS
PPTX
Pengantar CSS berisi dasar2 css untuk pemula
PPTX
Pemograman WEB (CSS)
Chapter 3 css
Pelatihan website#1
webdesign dasar : 03 html dan css dasar
Modul css
cascading style sheets in html website koding
pertemuan 4-Cascading Style Sheet (CSS).pptx
Pertemuan8
Css tutorial-01
Css tutorial-01
Laporan pratikum II web
04 html styling
05 XHTML CSS
Pengantar CSS berisi dasar2 css untuk pemula
Ad

More from Karin Novilda (11)

PDF
Css tutorial-07
PDF
Css tutorial-06
PDF
Css tutorial-02
PDF
Publikasi 08.11.22082
PDF
Publikasi 08.11.2208
PDF
Jurnal skripsi
PDF
Jurnal 13173sma nu maarif
PPTX
Jbptunikompp gdl-rudiramlan-28836-16-sistemi-
PDF
Bab skripsi
PDF
PDF
5 unikom-s-m
Css tutorial-07
Css tutorial-06
Css tutorial-02
Publikasi 08.11.22082
Publikasi 08.11.2208
Jurnal skripsi
Jurnal 13173sma nu maarif
Jbptunikompp gdl-rudiramlan-28836-16-sistemi-
Bab skripsi
5 unikom-s-m

Recently uploaded (10)

PPTX
saya adalah seorang penulis awalann.pptx
PPTX
MATERI Literasi digital ASN TAHUN 2025.pptx
PDF
Aksara nglagena_20250726_094730_0000.pdf
PPTX
Modul 2. Pengoperasian Pengaplikasian dan Kolaborasi Perangkat Kecerdasan Art...
PPTX
materi mata pelajaran koding dan kecerdasan artifisial
PPT
Firewall dalam Jaringan - Kelas 12 TKJ 2025/2026
PPTX
Modul 1. Pengenalan Koding-KA di Dikdasmen.pptx
PDF
IdREN Multi Access Edge Computing dan bangun ruang
PDF
Labuan4D situs Exclusive Game S 1 0 t & T O 9 E 1 dari server NO 01 Gaming Asia.
DOCX
623175210-PROSEM-KELAS-X-SEM-GANJIL.docx
saya adalah seorang penulis awalann.pptx
MATERI Literasi digital ASN TAHUN 2025.pptx
Aksara nglagena_20250726_094730_0000.pdf
Modul 2. Pengoperasian Pengaplikasian dan Kolaborasi Perangkat Kecerdasan Art...
materi mata pelajaran koding dan kecerdasan artifisial
Firewall dalam Jaringan - Kelas 12 TKJ 2025/2026
Modul 1. Pengenalan Koding-KA di Dikdasmen.pptx
IdREN Multi Access Edge Computing dan bangun ruang
Labuan4D situs Exclusive Game S 1 0 t & T O 9 E 1 dari server NO 01 Gaming Asia.
623175210-PROSEM-KELAS-X-SEM-GANJIL.docx

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) }