makalah css
DESCRIPTION
Pemograman Web ITRANSCRIPT
-
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
CASCADING STYLE
SHEET CSS
ABDUL MALIK
KHALILULLAH X RPL MALIEQZ malieqz
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
1
Sejarah Singkat CSS
Pada tanggal 17 Desember 1996, World Wide Web Consortium (W3C) menjadikan
CSS sebagai bahasa pemrograman standard dalam pembuatan dokumen web.
Tujuannya adalah mengurangi pembuatan TAG-TAG baru oleh Netscape dan Internet
Explorer (IE), karena pada masa itu kedua browser saling bersaing mengembangkan
TAG sendiri untuk mengatur tampilan web.
CSS level 1 mendukung pengaturan tampilan dalam hal:
1. Font (jenis, ketebalan),
2. Warna teks, latar belakang, dan elemen lainnya,
3. Text attributes, misalnya spasi antar baris, kata, dan huruf,
4. Posisi text, gambar, tabel, dan elemen lainnya,
5. Marjin, border, dan padding,
Selanjutnya di tahun 1998, W3C menyempurnakan CSS awal dengan menciptakan
standard CSS2 (CSS level 2) yang menjadi standard hingga saat ini. Pada CSS level
2 ini, di masukkan semua atribut dari CSS1, serta diperluas dengan penekanan pada
International accesibility and capability khususnya media-specific CSS.
Bahkan pada perkembangannya, saat ini sudah muncul CSS3. Pekerjaan dari CSS3
dimulai pada tahun 2000, tidak lama setelah CSS2 di implementasikan. CSS3 ini
sampai sekarang masih terus dikembangkan, spesifikasinya dibagi pada beberapa
topik atau modul.
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
2
Pengertian & Manfaat CSS
Menurut Wikipedia, Cascading Style Sheets (CSS) adalah:
bahasa pemrograman untuk mengatur tampilan suatu website atau blog
Tampilan yang dimaksud disini adalah jenis, ukuran, dan warna font; jarak
antara baris dan panjangnya, marjin dan indentasi, background dan warna, serta
masih banyak lagi. CSS merupakan fitur yang sangat penting dalam pembuatan
Dynamic HTML. Meskipun bukan merupakan keharusan dalam membuat web, namun
penggunaan CSS merupakan kelebihan tersendiri.
Menggunakan CSS tidak memerlukan perangkat lunak tertentu, karena
merupakan script yang telah embedded dengan HTML. Anda cukup menggunakan
aplikasi notepad untuk menciptakan script CSS sendiri.
Manfaat dari CSS:
1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
4. Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia
XHTML,
5. Digunakan dalam hampir semua web browser.
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
3
Kumpulan Tag CSS
One of the best ways to learn CSS is to jump right in and start to get into the page layouts.
~ www.css-mastery.com ~
Pada bab kedua ini, Anda dapat menemukan kumpulan lengkap tag CSS beserta
contoh-contoh penggunaannya pada beberapa bagian. Bila Anda serius ingin
menekuni CSS, sangat disarankan agar Anda terus mencoba setiap tag dan
propertinya; selain membantu Anda mengingat-ingat cara penulisan sintaks, metode
mencoba akan memperlihatkan kegunaan dari masing-masing tag.
Anda tidak harus menghapal semua tag bila ingin menjadi seorang ahli. Seorang
ahli yang sesungguhnya adalah orang yang bisa memanfaatkan tag-tag yang paling
sederhana sekalipun untuk menambah nilai estetika suatu website secara efisien.
Tidak jarang kita menemukan situs-situs di internet yang terlalu memaksakan
penggunaan CSS yang tidak perlu, sehingga malah mempersulit pengunjungnya untuk
sekedar membaca.
Berikut ini adalah table-tabel properti dan nilai dari CSS:
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
4
a. Text
Property Deskripsi Values
color Mengeset warna teks color
direction Mengeset arah teks ltr rtl
line-height Mengeset jarak antar garis normal number
length
%
letter-spacing Menambah atau mengurangi jarak antar karakter
normal
length
text-align Mengatur teks agar rata kanan, kiri, tengah, atau kanan-kiri pada
elemen
left
right
center
justify
text-decoration Menambah dekorasi pada teks none underline
overline
line-through
blink
text-indent Mengindentasikan baris pertama teks pada elemen
length
%
text-shadow none color
length
text-transform Mengontrol huruf pada elemen none capitalize
uppercase
lowercase
unicode-bidi normal embed
bidi-override
white-space Mengeset bagaimana ruang putih di dalam elemen ditangani
normal
pre
nowrap
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
5
word-spacing Menambah atau mengurangi jarak antar kata
normal
length
Contoh penggunaan tag dan property text:
p.satu {color: #FF0000; letter-spacing:length;}
p.dua {color: #000080; text-decoration:underline;}
p.tiga {text-align:justify; direction:rtl;}
Everything that humans can imagine
is a possibility in reality
Willy Karen - psychologist
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
6
b. Pseudo-elements
Pseudo-element Kegunaan
:first-letter Menambahkan style spesial pada huruf pertama sebuah teks
:first-line Menambah spesial style pada baris pertama sebuah teks
:before Menyisipkan suatu konten sebelum elemen
:after Menyisipkan suatu konten setelah elemen
Contoh penggunaan tag dan property pseudo-elements:
p {font-size: 12pt}
p:first-letter {font-size: 200%; float: left}
Tulisan pertama dalam suatu paragraph.
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
7
c. Font
Property Deskripsi Values
font Mengeset semua properti untuk font(huruf) dalam satu deklarasi
font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
font-family Prioritas list untuk font family dan/atau generic pada suatu elemen
family-name
generic-family
font-size Mengset ukuran dari font xx-small x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
font-size-adjust Menspesifikasi aspek nilai untuk sebuah elemen yang akan
mempertahankan tinggi-x dari font
pilihan pertama
none
number
font-stretch Memadatakan atau melonggarkan font-family yang digunakan
normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
8
font-style Mengeset style dari font normal italic
oblique
font-variant Menampilkan teks dalam small-caps font atau normal font
normal
small-caps
font-weight Mengeset ketebalan huruf normal bold
bolder
lighter
100
200
300
400
500
600
700
800
900
Contoh penggunaan tag dan property font:
p.italic {font-style: italic; font-family:"courier";
font-size:16;}
p.oblique {font-style: oblique}
Menguak Rahasia CSS
Kumpulan Tag
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
9
d. Background
Property Deskripsi Values
background Mengeset semua properti background dalam satu deklarasi
background-color
background-image
background-repeat background-
attachment background-
position
background-attachment Mengeset kondisi posisi background; antara dapat discroll atau tidak
dapat digerakkan dalam halaman
scroll
fixed
background-color Mengeset warna latar background suatu elemen
color-rgb
color-hex
color-name
transparent
background-image Mengeset sebuah gambar menjadi sebuah background
url(URL)
none
background-position Mengeset posisi background top left top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
background-repeat Mengeset apakah/bagaimana background akan diulang
repeat
repeat-x
repeat-y
no-repeat
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
10
Contoh penggunaan tag dan property background:
body { background-color: black; }
p { background-color: gray; }
h2 { background-color: red; }
ul { background-image: url(pics/cssT/smallPic.jpg);
background-repeat: repeat-y; color: green; }
CSS Backgrounds
This page has a black background. If you make a black
background be sure that
you change the font color from its default black value. On
the other hand, you could
just change the backgrounds of the HTML elements, as we have
done for the paragraph and the header.
This list has a picture on the left
Because it was set to repeat-y
And not to repeat-x
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
11
e. Table
Property Deskripsi Values
border-collapse Mengeset apakah border tabel collapse pada satu border atau
terpisah sesuai standar HTML
collapse
separate
border-spacing Mengeset jarak yang memisahkan border sel (khusus untuk model
separate-border)
length length
caption-side Mengeset posisi dari judul tabel top bottom
left
right
empty-cells Megeset apakah sel kosong ditampilkan pada tabel atau tidak
(khusus untuk model separate-
border)
show
hide
table-layout Mengeset algoritma yang digunakan untuk menampilkan sel
tabel, baris, dan kolom
auto
fixed
Contoh penggunaan tag dan property table:
table
{border-collapse: separate;
empty-cells: show}
Q1
Q2
Q3
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
12
f. Padding
Property Deskripsi Values
padding Mengeset semua properti untuk padding (bloknot)
dalam satu deklarasi
padding-top
padding-right
padding-bottom
padding-left
padding-bottom Mengeset pad bagian bawah dari elemen
length
%
padding-left Mengeset pad bagian kiri dari elemen
length
%
padding-right Mengeset pad bagian kanan dari elemen
length
%
padding-top Mengeset pad bagian atas dari elemen
length
%
Contoh penggunaan tag dan properti padding:
p { padding-left: 45px; border: 1px solid black; }
h2 { padding-top: 80px; border: 1px solid black; }
ul { padding: 25px; border: 1px solid black; }
CSS Padding
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
13
The header has a top padding of 45px and this paragraph has
a padding-left of 80px. This gives
a nice indendation to the paragraph.
This list has a uniform
25 pixel margin
Padding is useful for creating necessary white
space.
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
14
g. List & Marker
Property Deskripsi Values
list-style Mengeset semua properti untuk sebuah list dalam satu deklarasi
list-style-type
list-style-position
list-style-image
list-style-image Mengeset gambar sebagai list-item marker
none
url
list-style-position Mengeset dimana list-item marker ditempatkan pada list
inside
outside
list-style-type Mengeset tipe dari list-item marker none disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
marker-offset auto length
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
15
Contoh penggunaan tag dan properti list:
ul { list-style-image: disc; }
ol { list-style-type: upper-roman; }
CSS Lists
This list has a picture
in the place of bullets
The spacing doesn't look very good.
This list is
in Upper Roman
These are good for outlines
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
16
h. Border
Property Deskripsi Values
border Mengeset semua properti untuk 4-border (yang tertutup) dalam satu
deklarasi
border-width
border-style
border-color
border-bottom Mengeset semua properti untuk bottom-border (yang bawah aja)
dalam satu deklarasi
border-bottom-width
border-style
border-color
border-bottom-color Mengeset warna dari bottom-border
border-color
border-bottom-style Mengeset style dari bottom border border-style
border-bottom-width Mengeset ketebalan dari garis bottom-border
thin
medium
thick
length
border-color Mengeset warna dari keseluruhan border
Color
border-left Mengeset semua properti untuk left-border (yang kiri aja) dalam
satu deklarasi
border-left-width
border-style
border-color
border-left-color Mengeset warna dari left-border border-color
border-left-style Mengeset style dari left-border border-style
border-left-width Mengeset ketebalan dari garis left-border
thin
medium
thick
length
border-right Mengeset semua properti untuk right-border (yang kanan aja)
dalam satu deklarasi
border-right-width
border-style
border-color
border-right-color Mengeset warna dari right-border border-color
border-right-style Mengeset style dari right-border border-style
border-right-width Mengeset ketebalan dari garis right-border
thin
medium
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
17
thick
length
border-style Mengeset style dari keseluruhan border
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-top Mengeset semua properti untuk top-border (yang atas aja) dalam
satu deklarasi
border-top-width
border-style
border-color
border-top-color Mengeset warna dari top-border border-color
border-top-style Mengeset style dari top-border border-style
border-top-width Mengeset ketebalan dari garis top-border
thin
medium
thick
length
border-width Mengeset ketebalan dari keseluruhan border; terdapat
empat jenis ketebalan
thin
medium
thick
length
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
18
Contoh penggunaan tag dan property border:
p.pertama {border-style: dashed;border-color: #0000ff}
p.kedua {border-style: solid;border-color: #ff0000 #0000ff}
p.ketiga
{
border-style: dotted;
border-color: #ff0000 #00ff00 #0000ff
}
p.keempat
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
Border dengan satu macam warna
Border dengan dua macam warna
Border dengan tiga macam warna
Border dengan empat macam warna
catatan: "Perhatikan warna border-nya"
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
19
i. Positioning
Property Deskripsi Values
Bottom mengeset sejauh mana pojok bawah elemen di atas atau di
bawah dari pojok bawah parent
element
auto
%
length
clip Mengeset bentuk dari elemen. Elemen diclip menjadi bentuk ini,
dan ditampilkan
shape
auto
left Mengeset sejauh mana pojok kiri dari elemen di kiri/kanan tepi kiri
parent element
auto
%
length
overflow Mengeset apa yang terjadi jika konten dari elemen melebihi area
elemen
visible
hidden
scroll
auto
position Menempatkan elemen dengan posisi static, relative, absolute, atau
fixed
static
relative
absolute
fixed
right Mengeset sejauh mana pojok kanan dari elemen di kiri/kanan
dari pojok kanan parent element
auto
%
length
top Sets how far the top edge of an element is above/below the top
edge of the parent element
auto
%
length
vertical-align Sets the vertical alignment of an element
baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
z-index Sets the stack order of an element auto number
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
20
Contoh penggunaan tag dan properti positioning:
h3 {
position: absolute;
top: 200px;
left: 150px;}
p {
position: absolute;
top: 75px;
left: 75px;}
Menguak Rahasia CSS
~anonim~
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
21
j. Classification
Property Deskripsi Values
clear Mengeset sisi dari sebuah elemen dimana elemen ngambang lainnya
tidak diperbolehkan
left
right
both
none
cursor Menspesifikasi kursor yang ditampilkan
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
display Mengeset apakah/bagaimana suatu elemen ditampilkan
none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
22
float Mengeset dimana sebuah gambar atau teks dimunculkan pada elemen
lain
left
right
none
position Mengeset penempatan elemen sebagai posisi yang static, relative,
absolute atau fixed
static
relative
absolute
fixed
visibility Mengeset apakah suatu elemen ditampilkan atau tidak
visible
hidden
collapse
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
23
k. Pseudo-classes
Pseudo-class Kegunaan
:active Menambahkan spesial style kepada elemen yang aktif
:focus Menambahkan spesial style kepada elemen selama elemen sedang focus
:hover Menambahkan spesial style kepada elemen saat cursor berada di atas elemen tersebut
:link Menambahkan spesial elemen kepada link yang belum kena hit
:visited Menambahkan spesial style kepada link yang telah dihit
:first-child Menambah spesial style pada elemen yang merupakan child pertama dari gabungan beberapa elemen lainnya
:lang Membolehkan pemilik(author) untuk menentukan bahasa yang digunakan pada elemen tertentu
Contoh penggunaan tag dan properti pseudo-classes:
a:link{ text-decoration: none;
color: gray;
}
a:visited{ text-decoration: none;
color: gray;
}
a:hover{ text-decoration: none;
color: green;
font-weight: bolder;
letter-spacing: 2px;
}
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
24
CSS Pseudo Classes or Links
Arahkan kursor Anda ke sini !
catatan: Warna ke sini akan berubah saat Anda mengarahkan kursor ke
atasnya.
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
25
l. Dimension
Property Deskripsi Values
height Mengeset tinggi dari sebuah elemen auto length
%
line-height Mengeset jarak antar garis pada elemen
normal
number
length
%
max-height Mengeset tinggi maksimal dari elemen
none
length
%
max-width Mengeset lebar maksimal dari elemen
none
length
%
min-height Mengeset tinggi minimal dari elemen length %
min-width Mengeset lebar minimal dari elemen length %
width Mengeset lebar dari suatu elemen auto %
length
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
26
m. Generated Content
Property Deskripsi Values
content Membuat konten dalam dokumen. Digunakan bersama pseudo-
element :before dan :after
string
url
counter(name)
counter(name, list-style-type)
counters(name, string)
counters(name, string, list-
style-type)
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote
counter-increment Mengeset berapa banyak suatu counter menambahkan pada tiap
aksi pada selektor
none
identifier number
counter-reset Mengeset nilai yang counter set pada tiap aksi pada selektor
none
identifier number
quotes Mengeset tipe dari quote none string string
-
AB
DU
L M
ALI
K K
HA
LILU
LLA
H
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH
27
n. Outlines
Property Deskripsi Values
outline Mengeset semua properti untuk outline dalam satu deklarasi
outline-color
outline-style
outline-width
outline-color Mengeset warna dari outline elemen
color
invert
outline-style Mengeset style outline dari elemen none dotted
dashed
solid
double
groove
ridge
inset
outset
outline-width Mengeset ketebalan outline dari elemen
thin
medium
thick
length