amikjtc.com - kampus berbasis sistem informasi online CSS
Cascading Style Sheet (CSS)
pada HTML
Sub Pokok Bahasan
CSS?
Contoh sederhana
Selector
Mekanisme mengaplikasikan CSS
Elemen-elemen CSS
CSS properties
2
CSS?
Singkatan dari Cascading Style Sheet
Merupakan suatu cara untuk memformat atau
membuat layout halaman web menjadi lebih
menarik dan mudah dikelola.
Di dalamnya terdapat banyak style.
CSS dapat dituliskan pada bagian ,
suatu dokumen HTML atau diletakkan di sebuah file
eksternal.
Perintah-perintah CSS dibatasi oleh tag dan
3
Contoh Sederhana
Script HTML:
StyleSheet Sederhana
h1
{
font-family: verdana;
color: red;
text-align: center;
}
Tampilan:
StyleSheet Sederhana
4
Style model lama yang tidak disarankan
StyleSheet Sederhana
StyleSheet Sederhana
5
Selector
Adalah nama yang diberikan untuk setiap style berbeda yang
dibuat. Di dalam style didefinisikan bagaimana setiap selector
akan bekerja (font, color dan lain-lain.). Kemudian di dalam
bagian body halaman web, selector tersebut dipanggil untuk
mengaktifkan style yang telah didefinisikan.
Jenis-jenis Selector:
• Selector HTML
• Selector Class
• Selector ID
6
Selector HTML
Digunakan untuk mendefinisikan style yang berhubungan
dengan tag HTML, melakukan redefinisi tag normal HTML
Syntax: SelectorHTML {Properti:Nilai;}
Script HTML:
Selector HTML
b {font-family:arial; font-size:14px; color:red}
Tulisan ini tebal karena menggunakan style CSS
Tampilan:
7
Selector Class
Digunakan untuk mendefinisikan style yang dapat
dipakai tanpa melakukan redefinisi tag HTML.
Syntax: ClassSelector {Properti:Nilai;}
Script HTML:
Selector Class
.headline {font-family:arial; font-size:14px; color:red}
Tulisan ini tebal karena pengaruh selector class headline
Tulisan ini dicetak miring karena selector class headline
Tampilan:
8
SPAN dan DIV
Dua tag yang sering dikombinasikan dengan selector class adalah
dan
Tag adalah "inline-tag" dalam HTML, berarti tidak ada
pergantian baris (line break) yang disisipkan sebelum atau setelah
penulisannya.
Tag adalah "block tag" dalam HTML, berarti pergantian baris
secara otomatis disisipkan untuk memberikan jarak antara blok yang
dibuat dengan teks atau blok lain sebelum dan sesudahnya (seperti tag
atau ).
Tag sering digunakan untuk implementasi layer karena layer
merupakan blokblok informasi terpisah. Tag merupakan pilihan
yang tepat saat membuat layer pada halaman web.
9
Box Dimensions
Elements yang terletak antara div tags di
set pada baris yang sama dengan margin
di atas dan dibawahnya
div { background-color: #ffccff;
margin-bottom: .5em }
atribut width dan height pada style
membuat user dapat menyatakan
persentase lebar dan tinggi layar yang
ditempati oleh elemen.
Here is some
text that goes in a box which is
set to stretch across twenty percent
of the width of the screen.
Here is some CENTERED text that goes in a box
which is set to stretch across eighty percent of
the width of the screen.
10
Selector ID
Digunakan untuk mendefinisikan style yang berhubungan
dengan suatu object memanfaatkan ID unik, biasa digunakan
saat bekerja dengan layer
Syntax: #IDSelector {Properti:Nilai;}
Tampilan:
11
Script HTML:
Selector ID
#layer1 {position:absolute; left:100;top:100; z-index:2}
#layer2 {position:absolute; left:130;top:120; z-index:1}
Ini adalah layer 1Diletakkan pada posisi (100,100)
Ini adalah layer 2Diletakkan pada posisi (130,120)
12
Pengelompokan Selector
Untuk beberapa style yang sebagian properti-nya
memiliki nilai yang sama, misalnya jenis font yang
sama; mendefinisikan font tidak perlu dilakukan satu
demi satu untuk setiap selector. Pendefinisian dapat
dikelompokkan, dengan cara melewatkan font ke
semua selector dalam satu kali.
13
Contoh Pengelompokan Selector
Sebelum pengelompokan:
.headlines
{
font-family:arial;
color:black;
background:yellow;
font-size:14pt;
}
.sublines
{
font-family:arial;
color:black;
background:yellow;
font-size:12pt;
}
.infotext
{
font-family:arial;
color:black;
background:yellow;
font-size:10pt;
}
Setelah pengelompokan:
.headlines, .sublines, .infotext
{
font-family:arial;
color:black;
background:yellow;
}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}
14
Mekanisme Mengaplikasikan CSS
1.
2.
3.
Style didefinisikan dalam tag HTML (tag
tunggal)
Style didefinisikan di dalam bagian
dan diaplikasikan untuk seluruh dokumen
HTML tersebut.
Style didefinisikan di file eksternal yang
selanjutnya dapat digunakan oleh dokumen
HTML manapun dengan memasukkan CSS
tersebut dalam dokumen yang diinginkan
melalui URI.
15
Style dalam tag tunggal
CSS mendefinisikan tag tunggalnya hanya dengan menambahkan
style seperti style="styledefinition:styleattribute;"
Script HTML:
Tampilan:
Penggunaan CSS Tag Tunggal
Ini adalah contoh
bold
dengan menggunakan CSS.
16
Style untuk 1 dokumen HTML
CSS dapat didefinisikan untuk satu halaman secara keseluruhan
hanya dengan menambahkan suatu definisi style pada bagian
head dokumen HTML.
Tampilan:
17
Script HTML:
Penggunaan CSS untuk satu halaman Web
.headlines, .sublines, .infotext {
font-family:arial;
color:blue;
background:cyan;
font-weight:bold;}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size:10pt;}
Selamat Datang
Ini adalah contoh penggunaan web yang menggunakan CSS.
Contoh ini menggunakan CSS untuk satu halaman Web.
Pendefinisian style cukup dilakukan di tag head.
Style juga dapat dilakukan dalam elemen table.
contoh penggunaan CSS untuk satu halaman
18
Style dalam file eksternal
CSS dapat didefinisikan untuk semua halaman hanya dengan
menulis definisi CSS di dalam sebuah file teks yang selanjutnya
dirujuk oleh setiap halaman web yang akan menggunakannya.
Dengan demikian jika suatu saat ingin dilakukan perubahan style
yang berlaku untuk semua halaman Web maka yang diubah ada
file teks eksternal tersebut.
19
Script HTML:
File style.css:
.headlines, .sublines, .infotext
{
font-family:arial;
color:blue;
background:cyan;
font-weight:bold;
}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size:10pt;}
Penggunaan CSS Eksternal
Selamat Datang
Ini adalah contoh penggunaan web yang menggunakan CSS.
Contoh ini menggunakan CSS Eksternal.
Pendefinisian pemanggilan style dilakukan dengan menggunakan tag link.
Style juga dapat dilakukan dalam elemen table.
contoh penggunaan CSS eksternal
20
Elemen-elemen CSS
Font
Text
Color
21
Font
Digunakan untuk mengatur
tingkah-laku huruf (font).
Elemen ini mempunyai
beberapa properti. Satu
properti dapat mempunyai
beberapa nilai.
22
Text
Element text akan
membuat tampilan teks
menjadi lebih menarik
23
Color
Elemen color yang digunakan
untuk mengatur warna teks
dan background halaman
web
24
CSS Background Properties (1)
CSS background properties digunakan untuk mengatur tampilan background
pada sebuah elemen. Misalnya menentukan warna background, membuat
background berupa gambar, dan menentukan posisi background.
Property
Description
Values
background
Property yang digunakan
untuk menyeting semua
backgroung property dalam
sebuah deklarasi saja.
background-color
background-image
background-repeat
background-attachment
background-position
background-attachment
Menentukan apakah
background gambar fixed
atau scroll
scroll
fixed
background-color
Menentukan warna
background
color-rgb
color-hex
color-name
transparent
CSS Background Properties (2)
background-image
menentukan gambar sebagai
background
url
none
background-position
Menentukan posisi awal
background yang berupa
gambar
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
background-repeat
Menentukan bagaimana
background yang berupa
gambar akan ditampilkan secara
berulang
repeat
repeat-x
repeat-y
no-repeat
CSS Text Properties (1)
CSS Text properties digunakan untuk mengatur tampilan text. Misalnya
menentukan warna text, perataan text dan dekorasi text.
Property
Description
Values
color
Menentukan warna text
color
letter-spacing
Menentukan jarak spasi antar huruf
normal
length unit
text-align
Perataan text dalam sebuah element
left
right
center
justify
text-decoration
Menambahkan dekorasi ke dalam text none
underline
overline
line-through
blink
CSS Text Properties (2)
text-indent
Memberikan indent pada baris
pertama
length
%
text-transform
Menentukan bentuk huruf
none
capitalize
uppercase
lowercase
white-space
Menentukan bagaimana white space
akan ditangani
normal
pre
nowrap
word-spacing
Menentukan jarak spasi antar kata
normal
length
CSS Font Properties (1)
CSS font properties digunakan untuk mengtur tampilan huruf. Misalnya
menentukan jenis huruf, ukuran huruf, ketebalan dan style huruf.
Property
Description
Values
font
Sebuah property singkat untuk menyeting
semua properti untuk font dalam sebuah
deklarasi
font-style
font-variant
font-weight
font-size/lineheight
font-family
caption
icon
menu
message-box
small-caption
status-bar
font-family
Menentukan jenis huruf
family-name
generic-family
CSS Font Properties (2)
font-size
Menentukan ukuran huruf
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
font-style
Menentukan style huruf
normal
italic
oblique
font-weight
Menentukan ketebalan huruf
normal
bold
bolder
lighter
CSS Border Properties (1)
CSS border properties digunakan untuk mengatur border di setiap elemen.
Misalnya saja warna border, ketebalan border dan style border.
Property
Description
Values
border
Digunakan untuk menentukan property
border(atas, kiri, kanan, bawah) dalam
satu deklarasi saja
border-width
border-style
border-color
border-bottom
Digunakan untuk menentukan property
border bagian bawah dalam satu
deklarasi saja
border-bottom-width
border-style
border-color
border-bottom-color
Menentukan warna border bawah
border-color
border-bottom-style
Menentukan style border bawah
border-style
border-bottom-width
Menentukan lebar border bawah
thin
medium
thick
length
CSS Border Properties (2)
border-color
Menentukan warna keempat border
color
border-left
Digunakan untuk menentukan property
border bagian kiri dalam satu deklarasi
saja
border-left-width
border-style
border-color
border-left-color
Menentukan warna border kiri
border-color
border-left-style
Menentukan style border kiri
border-style
border-left-width
Menentukan lebar border kiri
thin
medium
thick
length
border-right
Digunakan untuk menentukan property
border bagian kanan dalam satu
deklarasi saja
border-right-width
border-style
border-color
border-right-color
Menentukan warna border kanan
border-color
border-right-style
Menentukan style border kanan
border-style
CSS Border Properties (3)
border-right-width
Menentukan lebar border kanan
thin
medium
thick
length
border-style
Menentukan style dari keempat border
sekaligus
None / hidden / dotted /
dashed / solid / double /
groove / ridge /inset /
outset
border-top
Digunakan untuk menentukan property
border bagian atas dalam satu deklarasi
saja
border-top-width
border-style
border-color
border-top-color
Menentukan warna border atas
border-color
border-top-style
Menentukan style border atas
border-style
border-top-width
Menentukan ukuran border atas
thin / medium / thick
length
border-width
Menentukan ukuran dari keempat border
sekaligus
thin / medium / thick
length
CSS Margin Properties
CSS margin properties digunakan untuk mengatur jarak (spasi) di sekitar elemen.
Property
Description
Values
margin
Mensatur margin properti untuk kempat sisi
(atas, kanan, bawah, kiri) sekaligus
margin-top
margin-right
margin-bottom
margin-left
margin-bottom
Mengatur margin bawah
auto
length
%
margin-left
Mengatur margin kiri
auto
length
%
margin-right
Mengatur margin kanan
auto
length
%
margin-top
Mengatur margin atas
Auto / length / %
CSS Padding Properties
CSS padding properties digunakan untuk menentukan spasi antara border elemen
dengan isi element.
Property
Description
Values
padding
Menentukan empat padding sebuah elemen
(atas, kanan, bawah, kiri) sekaligus
padding-top
padding-right
padding-bottom
padding-left
padding-bottom
Menentukan padding bawah sebuah elemen
length
%
padding-left
Menentukan padding kiri sebuah elemen
length
%
padding-right
Menentukan padding kanan sebuah elemen
length
%
padding-top
Menentukan padding atas sebuah elemen
length
%
CSS List Properties (1)
CSS list properties digunakan merubah jenis list, memberi gambar sebagai
pengganti bullet, dll.
Property
Description
Values
list-style
Digunakan untuk menentukan semua list
properties sekaligus.
list-style-type
list-styleposition
list-styleimage
list-style-image
Menetapkan image sebagai penanda list
none
url
list-style-position
Menentukan tempat penanda list item
inside
outside
CSS List Properties (2)
list-style-type
Menentukan tipe penanda list item
none
disc
circle
square
decimal
decimalleading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
Summary
CSS (Cascading Style Sheet) digunakan untuk
memformat atau membuat layout halaman
web menjadi lebih menarik dan mudah
dikelola.
Ada 3 mekanisme untuk mengaplikasikan
CSS, yaitu: Style didefinisikan dalam tag
HTML (tag tunggal), di dalam bagian ,
didefinisikan di file eksternal.
Elemen-elemen CSS terdiri dari Font, Text,
Color dan Link
38
Daftar Pustaka
Chris Bates [2006]. Web Programming: Building
Internet Applications, Third Edition, John Wiley &
Sons Ltd, England.
Sidik dan Husni [2012]. Pemrograman Web
dengan HTML, Penerbit Informatika, Bandung.
Sebesta, R.W. [2002], Programming the World
Wide Web, Addison Wesley.
39
pada HTML
Sub Pokok Bahasan
CSS?
Contoh sederhana
Selector
Mekanisme mengaplikasikan CSS
Elemen-elemen CSS
CSS properties
2
CSS?
Singkatan dari Cascading Style Sheet
Merupakan suatu cara untuk memformat atau
membuat layout halaman web menjadi lebih
menarik dan mudah dikelola.
Di dalamnya terdapat banyak style.
CSS dapat dituliskan pada bagian ,
suatu dokumen HTML atau diletakkan di sebuah file
eksternal.
Perintah-perintah CSS dibatasi oleh tag dan
3
Contoh Sederhana
Script HTML:
StyleSheet Sederhana
h1
{
font-family: verdana;
color: red;
text-align: center;
}
Tampilan:
StyleSheet Sederhana
4
Style model lama yang tidak disarankan
StyleSheet Sederhana
StyleSheet Sederhana
5
Selector
Adalah nama yang diberikan untuk setiap style berbeda yang
dibuat. Di dalam style didefinisikan bagaimana setiap selector
akan bekerja (font, color dan lain-lain.). Kemudian di dalam
bagian body halaman web, selector tersebut dipanggil untuk
mengaktifkan style yang telah didefinisikan.
Jenis-jenis Selector:
• Selector HTML
• Selector Class
• Selector ID
6
Selector HTML
Digunakan untuk mendefinisikan style yang berhubungan
dengan tag HTML, melakukan redefinisi tag normal HTML
Syntax: SelectorHTML {Properti:Nilai;}
Script HTML:
Selector HTML
b {font-family:arial; font-size:14px; color:red}
Tulisan ini tebal karena menggunakan style CSS
Tampilan:
7
Selector Class
Digunakan untuk mendefinisikan style yang dapat
dipakai tanpa melakukan redefinisi tag HTML.
Syntax: ClassSelector {Properti:Nilai;}
Script HTML:
Selector Class
.headline {font-family:arial; font-size:14px; color:red}
Tulisan ini tebal karena pengaruh selector class headline
Tulisan ini dicetak miring karena selector class headline
Tampilan:
8
SPAN dan DIV
Dua tag yang sering dikombinasikan dengan selector class adalah
dan
Tag adalah "inline-tag" dalam HTML, berarti tidak ada
pergantian baris (line break) yang disisipkan sebelum atau setelah
penulisannya.
Tag adalah "block tag" dalam HTML, berarti pergantian baris
secara otomatis disisipkan untuk memberikan jarak antara blok yang
dibuat dengan teks atau blok lain sebelum dan sesudahnya (seperti tag
atau ).
Tag sering digunakan untuk implementasi layer karena layer
merupakan blokblok informasi terpisah. Tag merupakan pilihan
yang tepat saat membuat layer pada halaman web.
9
Box Dimensions
Elements yang terletak antara div tags di
set pada baris yang sama dengan margin
di atas dan dibawahnya
div { background-color: #ffccff;
margin-bottom: .5em }
atribut width dan height pada style
membuat user dapat menyatakan
persentase lebar dan tinggi layar yang
ditempati oleh elemen.
Here is some
text that goes in a box which is
set to stretch across twenty percent
of the width of the screen.
Here is some CENTERED text that goes in a box
which is set to stretch across eighty percent of
the width of the screen.
10
Selector ID
Digunakan untuk mendefinisikan style yang berhubungan
dengan suatu object memanfaatkan ID unik, biasa digunakan
saat bekerja dengan layer
Syntax: #IDSelector {Properti:Nilai;}
Tampilan:
11
Script HTML:
Selector ID
#layer1 {position:absolute; left:100;top:100; z-index:2}
#layer2 {position:absolute; left:130;top:120; z-index:1}
Ini adalah layer 1Diletakkan pada posisi (100,100)
Ini adalah layer 2Diletakkan pada posisi (130,120)
12
Pengelompokan Selector
Untuk beberapa style yang sebagian properti-nya
memiliki nilai yang sama, misalnya jenis font yang
sama; mendefinisikan font tidak perlu dilakukan satu
demi satu untuk setiap selector. Pendefinisian dapat
dikelompokkan, dengan cara melewatkan font ke
semua selector dalam satu kali.
13
Contoh Pengelompokan Selector
Sebelum pengelompokan:
.headlines
{
font-family:arial;
color:black;
background:yellow;
font-size:14pt;
}
.sublines
{
font-family:arial;
color:black;
background:yellow;
font-size:12pt;
}
.infotext
{
font-family:arial;
color:black;
background:yellow;
font-size:10pt;
}
Setelah pengelompokan:
.headlines, .sublines, .infotext
{
font-family:arial;
color:black;
background:yellow;
}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}
14
Mekanisme Mengaplikasikan CSS
1.
2.
3.
Style didefinisikan dalam tag HTML (tag
tunggal)
Style didefinisikan di dalam bagian
dan diaplikasikan untuk seluruh dokumen
HTML tersebut.
Style didefinisikan di file eksternal yang
selanjutnya dapat digunakan oleh dokumen
HTML manapun dengan memasukkan CSS
tersebut dalam dokumen yang diinginkan
melalui URI.
15
Style dalam tag tunggal
CSS mendefinisikan tag tunggalnya hanya dengan menambahkan
style seperti style="styledefinition:styleattribute;"
Script HTML:
Tampilan:
Penggunaan CSS Tag Tunggal
Ini adalah contoh
bold
dengan menggunakan CSS.
16
Style untuk 1 dokumen HTML
CSS dapat didefinisikan untuk satu halaman secara keseluruhan
hanya dengan menambahkan suatu definisi style pada bagian
head dokumen HTML.
Tampilan:
17
Script HTML:
Penggunaan CSS untuk satu halaman Web
.headlines, .sublines, .infotext {
font-family:arial;
color:blue;
background:cyan;
font-weight:bold;}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size:10pt;}
Selamat Datang
Ini adalah contoh penggunaan web yang menggunakan CSS.
Contoh ini menggunakan CSS untuk satu halaman Web.
Pendefinisian style cukup dilakukan di tag head.
Style juga dapat dilakukan dalam elemen table.
contoh penggunaan CSS untuk satu halaman
18
Style dalam file eksternal
CSS dapat didefinisikan untuk semua halaman hanya dengan
menulis definisi CSS di dalam sebuah file teks yang selanjutnya
dirujuk oleh setiap halaman web yang akan menggunakannya.
Dengan demikian jika suatu saat ingin dilakukan perubahan style
yang berlaku untuk semua halaman Web maka yang diubah ada
file teks eksternal tersebut.
19
Script HTML:
File style.css:
.headlines, .sublines, .infotext
{
font-family:arial;
color:blue;
background:cyan;
font-weight:bold;
}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size:10pt;}
Penggunaan CSS Eksternal
Selamat Datang
Ini adalah contoh penggunaan web yang menggunakan CSS.
Contoh ini menggunakan CSS Eksternal.
Pendefinisian pemanggilan style dilakukan dengan menggunakan tag link.
Style juga dapat dilakukan dalam elemen table.
contoh penggunaan CSS eksternal
20
Elemen-elemen CSS
Font
Text
Color
21
Font
Digunakan untuk mengatur
tingkah-laku huruf (font).
Elemen ini mempunyai
beberapa properti. Satu
properti dapat mempunyai
beberapa nilai.
22
Text
Element text akan
membuat tampilan teks
menjadi lebih menarik
23
Color
Elemen color yang digunakan
untuk mengatur warna teks
dan background halaman
web
24
CSS Background Properties (1)
CSS background properties digunakan untuk mengatur tampilan background
pada sebuah elemen. Misalnya menentukan warna background, membuat
background berupa gambar, dan menentukan posisi background.
Property
Description
Values
background
Property yang digunakan
untuk menyeting semua
backgroung property dalam
sebuah deklarasi saja.
background-color
background-image
background-repeat
background-attachment
background-position
background-attachment
Menentukan apakah
background gambar fixed
atau scroll
scroll
fixed
background-color
Menentukan warna
background
color-rgb
color-hex
color-name
transparent
CSS Background Properties (2)
background-image
menentukan gambar sebagai
background
url
none
background-position
Menentukan posisi awal
background yang berupa
gambar
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
background-repeat
Menentukan bagaimana
background yang berupa
gambar akan ditampilkan secara
berulang
repeat
repeat-x
repeat-y
no-repeat
CSS Text Properties (1)
CSS Text properties digunakan untuk mengatur tampilan text. Misalnya
menentukan warna text, perataan text dan dekorasi text.
Property
Description
Values
color
Menentukan warna text
color
letter-spacing
Menentukan jarak spasi antar huruf
normal
length unit
text-align
Perataan text dalam sebuah element
left
right
center
justify
text-decoration
Menambahkan dekorasi ke dalam text none
underline
overline
line-through
blink
CSS Text Properties (2)
text-indent
Memberikan indent pada baris
pertama
length
%
text-transform
Menentukan bentuk huruf
none
capitalize
uppercase
lowercase
white-space
Menentukan bagaimana white space
akan ditangani
normal
pre
nowrap
word-spacing
Menentukan jarak spasi antar kata
normal
length
CSS Font Properties (1)
CSS font properties digunakan untuk mengtur tampilan huruf. Misalnya
menentukan jenis huruf, ukuran huruf, ketebalan dan style huruf.
Property
Description
Values
font
Sebuah property singkat untuk menyeting
semua properti untuk font dalam sebuah
deklarasi
font-style
font-variant
font-weight
font-size/lineheight
font-family
caption
icon
menu
message-box
small-caption
status-bar
font-family
Menentukan jenis huruf
family-name
generic-family
CSS Font Properties (2)
font-size
Menentukan ukuran huruf
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
font-style
Menentukan style huruf
normal
italic
oblique
font-weight
Menentukan ketebalan huruf
normal
bold
bolder
lighter
CSS Border Properties (1)
CSS border properties digunakan untuk mengatur border di setiap elemen.
Misalnya saja warna border, ketebalan border dan style border.
Property
Description
Values
border
Digunakan untuk menentukan property
border(atas, kiri, kanan, bawah) dalam
satu deklarasi saja
border-width
border-style
border-color
border-bottom
Digunakan untuk menentukan property
border bagian bawah dalam satu
deklarasi saja
border-bottom-width
border-style
border-color
border-bottom-color
Menentukan warna border bawah
border-color
border-bottom-style
Menentukan style border bawah
border-style
border-bottom-width
Menentukan lebar border bawah
thin
medium
thick
length
CSS Border Properties (2)
border-color
Menentukan warna keempat border
color
border-left
Digunakan untuk menentukan property
border bagian kiri dalam satu deklarasi
saja
border-left-width
border-style
border-color
border-left-color
Menentukan warna border kiri
border-color
border-left-style
Menentukan style border kiri
border-style
border-left-width
Menentukan lebar border kiri
thin
medium
thick
length
border-right
Digunakan untuk menentukan property
border bagian kanan dalam satu
deklarasi saja
border-right-width
border-style
border-color
border-right-color
Menentukan warna border kanan
border-color
border-right-style
Menentukan style border kanan
border-style
CSS Border Properties (3)
border-right-width
Menentukan lebar border kanan
thin
medium
thick
length
border-style
Menentukan style dari keempat border
sekaligus
None / hidden / dotted /
dashed / solid / double /
groove / ridge /inset /
outset
border-top
Digunakan untuk menentukan property
border bagian atas dalam satu deklarasi
saja
border-top-width
border-style
border-color
border-top-color
Menentukan warna border atas
border-color
border-top-style
Menentukan style border atas
border-style
border-top-width
Menentukan ukuran border atas
thin / medium / thick
length
border-width
Menentukan ukuran dari keempat border
sekaligus
thin / medium / thick
length
CSS Margin Properties
CSS margin properties digunakan untuk mengatur jarak (spasi) di sekitar elemen.
Property
Description
Values
margin
Mensatur margin properti untuk kempat sisi
(atas, kanan, bawah, kiri) sekaligus
margin-top
margin-right
margin-bottom
margin-left
margin-bottom
Mengatur margin bawah
auto
length
%
margin-left
Mengatur margin kiri
auto
length
%
margin-right
Mengatur margin kanan
auto
length
%
margin-top
Mengatur margin atas
Auto / length / %
CSS Padding Properties
CSS padding properties digunakan untuk menentukan spasi antara border elemen
dengan isi element.
Property
Description
Values
padding
Menentukan empat padding sebuah elemen
(atas, kanan, bawah, kiri) sekaligus
padding-top
padding-right
padding-bottom
padding-left
padding-bottom
Menentukan padding bawah sebuah elemen
length
%
padding-left
Menentukan padding kiri sebuah elemen
length
%
padding-right
Menentukan padding kanan sebuah elemen
length
%
padding-top
Menentukan padding atas sebuah elemen
length
%
CSS List Properties (1)
CSS list properties digunakan merubah jenis list, memberi gambar sebagai
pengganti bullet, dll.
Property
Description
Values
list-style
Digunakan untuk menentukan semua list
properties sekaligus.
list-style-type
list-styleposition
list-styleimage
list-style-image
Menetapkan image sebagai penanda list
none
url
list-style-position
Menentukan tempat penanda list item
inside
outside
CSS List Properties (2)
list-style-type
Menentukan tipe penanda list item
none
disc
circle
square
decimal
decimalleading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
Summary
CSS (Cascading Style Sheet) digunakan untuk
memformat atau membuat layout halaman
web menjadi lebih menarik dan mudah
dikelola.
Ada 3 mekanisme untuk mengaplikasikan
CSS, yaitu: Style didefinisikan dalam tag
HTML (tag tunggal), di dalam bagian ,
didefinisikan di file eksternal.
Elemen-elemen CSS terdiri dari Font, Text,
Color dan Link
38
Daftar Pustaka
Chris Bates [2006]. Web Programming: Building
Internet Applications, Third Edition, John Wiley &
Sons Ltd, England.
Sidik dan Husni [2012]. Pemrograman Web
dengan HTML, Penerbit Informatika, Bandung.
Sebesta, R.W. [2002], Programming the World
Wide Web, Addison Wesley.
39