Kumpulan Kode CSS 1 & 2

/* ini adalah komentar penjelas pada CSS */
PELAJARI DI AKHIR CSS

@media screen {
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print {
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print {
p.test {font-weight:bold;}
}
Note: - @media memungkinkan aturan style yang berbeda untuk media yang berbeda dalam style
sheet yang sama.
@import
@page
Background Properties
background: #00ff00 url('smiley.gif') no-repeat fixed center;
Dukungan Browser
- Value "inherit" tidak didukung di IE7 dan sebelumnya. IE8 membutuhkan !DOCTYPE. IE9
mendukung "inherit".
Note: - Shorthand properti background mengatur semua properti background dalam satu deklarasi.
- Properti yang dapat diatur, adalah: background-color, background-position, background-size,
background-repeat, background-origin, background-clip, background-attachment dan
background-image.
- Tidak masalah jika salah satu value di atas hilang, misalnya background:#ff0000
url(smiley.gif); ini diperbolehkan.
Syntax
background: color position size repeat origin clip attachment image;
background-attachment: scroll | fixed | local;

Note: - Properti background-attachment mengatur apakah gambar latar belakang tetap (fixed) atau
tergulung (scroll) saat halaman digulung (scroll).
background-color: yellow | #00ff00 | rgb(255,0,255 | transparent | inherit;

Note: - Properti background-color menentukan warna latar belakang dari elemen.
- Value transparent menentukan bahwa warna latar belakang harus transparan. Ini adalah
default
background-image:url('paper.jpg') | none | inherit;

background-image:url("img_tree.gif"),url("img_flwr.gif");
Multiple background-image.
Note: - Properti background-image mengatur satu atau lebih gambar latar belakang untuk sebuah
elemen.
- Direkomendasikan untuk menentukan background-color selain background-image untuk
mengantisipasi jika gambar tidak tersedia..
- IE8 dan sebelumnya tidak mendukung multiple background images pada satu elemen.
background-position: left top | 25% 75% | 10px 200px | top | right 20% | inherit;
left center
left
left bottom
center
right top
right
right center
bottom
right bottom
center top
center center
center bottom
Note: - Properti background-position mengatur posisi awal dari gambar latar belakang (background
image).
- Agar properti background-position bekerja di Firefox dan Opera, maka properti backgroundattachment harus diatur ke " fixed ".
Penjelasan Value:
- Value Kata Kunci
Jika hanya menentukan satu kata kunci, value lainnya akan menjadi "center".
- x% y%
Value pertama adalah posisi horizontal dan value kedua adalah vertikal. Pojok kiri atas adalah 0%
0%. Sudut kanan bawah adalah 100% 100%. Jika hanya menentukan satu value, maka value
lainnya akan menjadi 50%. Nilai default adalah 0% 0%.
- xpos ypos
Nilai pertama adalah posisi horizontal dan nilai kedua adalah vertikal. Pojok kiri atas adalah 0 0.
Satuan boleh dengan piksel (0px 0px) atau satuan CSS lainnya. Jika Anda hanya menentukan satu
value, value lainnya akan menjadi 50%. Anda dapat mencampur% dan posisi.
- inherit
Menentukan bahwa pengaturan properti background-position harus diwarisi dari elemen induk.
background-repeat:repeat | repeat-x | repeat-y | no-repeat | inherit;

Note: - Properti background-repeat mengatur bagaimana gambar latar belakang (background-image)
akan diulang.
Penjelasan value:
repeat
Gambar latar belakang akan diulang secara vertikal dan horizontal. Ini adalah default.
repeat-x
Gambar latar belakang akan diulang secara horizontal.
repeat-y
Gambar latar belakang akan diulang secara vertikal saja.
no-repeat
Gambar latar belakang tidak akan diulang.
inherit
Menentukan bahwa pengaturan properti background-repeat harus diwarisi dari elemen induk.
background-clip: border-box | padding-box | content-box;

Note: - Properti background-clip menentukan daerah background.
Contoh:
div {width:100px;
height:50px;
padding:20px;
background-color:yellow;
background-clip:border-box;
border:5px dotted black;}
div {width:100px;
height:50px;
padding:20px;
background-clip:padding-box;
div {width:100px;
height:50px;
padding:20px;
background-clip:content-box;
background-origin: border-box | padding-box | content-box;

Note: - Properti background-origin menentukan apakah properti background-position harus relatif.
- Jika properti background-attachment untuk gambar latar belakang adalah "fixed", maka
properti ini tidak memiliki efek.
File CSS
div {border:1px solid black;
padding:35px;
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;}
#div1 {background-origin:border-box;}
#div2 {background-origin:content-box;}
File HTML
<p>background-origin:border-box:</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<p>background-origin:content-box:</p>
<div id="div2">
</div>
Output
Syntax
background-origin: border-box | padding-box | content-box;
Penjelasan Value:
- padding-box
Gambar latar belakang (background image) diposisikan relatif terhadap padding box.
- border-box
Gambar latar belakang (background image) diposisikan relatif terhadap border box.
- content-box
Gambar latar belakang (background image) diposisikan relatif terhadap content box.
background-size: 100px 100px | 50% | cover | contain;

Note: - Properti background-size menentukan ukuran gambar latar belakang (background image).
Syntax
background-size: length | percentage | cover | contain;
Penjelasan Value:
- length
Mengatur lebar (width) dan tinggi (height) background image. Value pertama mengatur lebar, value
kedua mengatur ketinggian. Jika hanya satu value yang diberikan, maka value kedua diatur ke
"auto".
- persentase
Mengatur lebar (width) dan tinggi (height) background image dalam persen dari elemen induk. Value
pertama mengatur lebar, value kedua mengatur ketinggian. Jika hanya satu value yang diberikan,
maka value kedua diatur ke "auto".
- cover
Skala background image menjadi sebesar mungkin sehingga daerah background benar-benar
tertutup oleh gambar latar belakang. Beberapa bagian dari background image mungkin tidak terlihat
dalam area posisi background (background positioning area).
- contain
Skala gambar ke ukuran terbesar sehingga kedua lebar (width) dan tinggi (height) bisa muat di
dalam area konten.
Border dan Outline Properties
border: thick solid red;

border-top:
border-right:
border-bottom:
border-left:
Note: - Shorthand properti border mengatur semua properti border dalam satu deklarasi.
- Shorthand properti border diatur dengan urutan: border-width, border-style dan border-color.
Tidak masalah (diperbolehkan) jika salah satu value di atas tidak ada, misalnya :
border:solid #ff0000;
Dukungan Browser
border-width:15px | thin | medium | thick | inherit;

border-top-width:
border-right-width:
border-bottom-width:
border-left-width:
Note: - Properti border-width mengatur lebar pada 4 elemen border. Properti border-width
dapat memiliki 1 sampai 4 value.
- Selalu deklarasikan properti border-style sebelum properti border-width. Sebuah elemen
harus memiliki border sebelum dapat mengubah warna border (border-color).
Contoh:
border-width: (top-right-bottom-left);
border-width:thin medium thick 10px;
top border adalah thin
right border adalah medium
bottom border adalah thick
left border adalah 10px
border-width:thin medium thick;
top border adalah thin
right and left borders adalah medium
bottom border adalah thick
border-width:thin medium;
top and bottom borders adalah thin
right and left borders adalah medium
border-width:thin;
Ke empat border adalah thin
Penjelasan value:
- length values (Nilai Panjang)
Menentukan ketebalan border dalam px, dll.
- thin
Menentukan border tipis.

- medium
Menentukan border sedang. Ini adalah default.
- thick
Menentukan border tebal.
- inherit
Menentukan bahwa border width harus diwarisi dari elemen induk.
border-style:none | hidden | dotted | dashed | solid | double | groove | ridge | inset| outset | inherit;
border-top-style:
border-right-style:
border-bottom-style:
border-left-style:
Note: - Properti border-style mengatur style pada 4 elemen border. Properti border-style dapat
memiliki 1 sampai 4 value.
Contoh:
border-style: (top-right-bottom-left);
border-style:dotted solid double dashed;
top border adalah dotted
right border adalah solid
bottom border adalah double
left border adalah dashed
border-style:dotted solid double;
top border adalah dotted
right and left borders adalah solid

bottom border adalah double
border-style:dotted solid;
top and bottom borders adalah dotted
right and left borders adalah solid
border-style:dotted;
Ke empat border adalah dotted
Penjelasan value:
- none
Menentukan tidak ada border
- hidden
Sama seperti "none", kecuali dalam resolusi konflik border untuk elemen tabel.
- dotted
Menentukan border titik-titik.
- dashed
Menentukan border bergaris putus-putus.
- solid
Menentukan border yang padat (solid).
- double
Menentukan border ganda (double border).
- groove
Menentukan border groove 3D. Efeknya tergantung pada value border-color.
- ridge
Menentukan border ridge 3D. Efeknya tergantung pada value border-color.
- inset
Menentukan border inset 3D. Efeknya tergantung pada value border-color.
- outset
Menentukan border ridge 3D. Efeknya tergantung pada value border-color.
- inherit
Menentukan bahwa border-style harus diwarisi dari elemen induk.
border-color:red | #0000ff | rgb(250,0,255) | transparent | inherit;

border-top-color:
border-right-color:
border-bottom-color:
border-left-color:
Note: - Properti border-color mengatur warna pada 4 elemen border. Properti border-color dapat
memiliki 1 sampai 4 value.
- Selalu deklarasikan properti border-style sebelum properti border-color. Sebuah elemen harus
memiliki border sebelum dapat mengubah warna border (border-color).
Contoh:
border-color:(top-right-bottom-left);
border-color:red green blue pink;
top border adalah red
right border adalah green
bottom border adalah blue
left border adalah pink
border-color:red green blue;
top border adalah red
right and left borders adalah green
bottom border adalah blue
border-color:red green;
top and bottom borders adalah red
right and left borders adalah green
border-color:red;
Ke empat border adalah red
outline: blue dotted thick;

Note: - Outline adalah garis yang ditarik di sekitar elemen (outside borders) untuk membuat elemen
"menonjol".
- Shorthand properti outline mengatur semua properti outline dalam satu deklarasi.
- Properti diatur dalam urutan: outline-color, outline-style, outline-width.
Jika salah satu value di atas hilang, misalnya "outline:solid #ff0000;", maka value default untuk
properti yang hilang akan disisipkan, jika ada.
- Outline bukan merupakan bagian dari elemen dimension, sehingga properti elemen width dan
height tidak termasuk lebar outline.
Dukungan Browser
- IE8 mendukung properti outline hanya jika !DOCTYPE ditentukan.
File CSS
p {border:1px solid red;
outline:blue dotted thick;}
File HTML
<p>Ini adalah contoh properti outline dengan value "green dotted thick" </p>
Output
outline-color: red | #00ff00 | rgb(255,130,255) | invert | inherit;

Note: - Properti outline-color menentukan warna outline.
- Outline ditampilkan di sekitar elemen margin.

- Selalu deklarasikan properti outline-style sebelum properti outline-color. Sebuah elemen harus
memiliki outline sebelum mengubah warna (color).
Penjelasan Value:
- invert
Warna dari outline adalah warna kebalikan dari warna background. Ini adalah default.
- inherit
Menentukan bahwa outline color harus diwarisi dari elemen induk.
outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit;
Note: - Properti outline-style menentukan gaya (style) outline.
Contoh Output:
outline-width: thin | medium | thick | 10px | inherit;

Note: - Properti outline-width menentukan lebar outline.
- Selalu deklarasikan properti outline-style sebelum properti outline-width. Sebuah elemen
harus memiliki outline sebelum Anda mengubah lebar (width).
Penjelasan Value:
- thin
Menentukan outline tipis.
- medium
Menentukan outline menengah/sedang. Ini adalah default.
- thick
Menentukan outline tebal.
- length
Memungkinkan untuk menentukan ketebalan outline.
- inherit
Menentukan bahwa lebar outline (outline-width) harus diwarisi dari elemen induk.
outline-offset:15px | inherit;
Note: - Properti outline-offset mengimbangi outline dan menariknya melebihi tepi border.
- Outline berbeda dari border dalam dua cara:
1. Outline tidak mengambil ruang
2. Outline mungkin non-persegi panjang
File CSS
div {margin:20px;
width:150px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;}
File HTML
<div>Div ini memiliki properti outline-offset:15px.</div>
Penjelasan Value:
- length
Jarak outline awal dari tepi border
- inherit
Menentukan bahwa value properti outline-offset harus diwarisi dari elemen induk
border-image
border-image:url(border.png) 30 30 round;
Note: - Properti border-image didukung dalam Firefox, Chrome, dan Safari 6.
Opera mendukung sebuah alternatif, properti -o-border-image.
Safari 5 mendukung sebuah alternatif, properti -webkit-border-image.
- Properti border-image adalah shorthand properti untuk menetapkan properti border-imagesource, border-image-slice, border-image-width, border-image-outset dan
border-image-repeat.
- Value yang dihilangkan diatur ke nilai standar (default values).
- Tips: Gunakan properti border-image-* untuk membangun tombol yang indah!
Syntax
border-image: source slice width outset repeat;
File CSS
div {border:15px solid transparent;
width:250px;
padding:10px 20px;}
#round {-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;}
#stretch {-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;}
File HTML
<div id="round">Di sini, gambar ubin berulang (repeated) untuk mengisi area.</div>
<br>
<div id="stretch">Di sini, gambar ditarik (stretched ) untuk mengisi area.</div>
<p>Ini adalah gambar yang digunakan:</p>
<img src="border.png">
Output
Referensi
border-image.com
Properti border-image-source, border-image-slice, border-image-width, border-image-outset dan

border-image-repeat tidak didukung dalam salah satu browser utama.
Lihat properti border-image sebagai gantinya!
border-image-source
border-image-source: url(border.png);
Note: - Properti border-image-source menentukan gambar yang akan digunakan, bukan border styles
yang diberikan oleh properti border-style.
- Tips: Jika nilai "none", atau jika gambar tidak dapat ditampilkan, border styles akan
digunakan.
Syntax
border-image-source: none | image;
border-image-slice
border-image-slice: 50% 50%;
Note: - Properti border-image-slice menentukan offset ke dalam border-image.
Syntax
border-image-slice: number | % | fill;
border-image-width
border-image-width: 30 30;
Note: - Properti border-image-width menentukan lebar border-image.
Syntax
border-image-width: number|%|auto;
border-image-outset
border-image-outset: 30 30;
Note: - Properti border-image-outset menentukan jumlah dimana area border-image melampaui kotak
perbatasan (border box).
Syntax
border-image-outset: length|number;
border-image-repeat
border-image-repeat: round;
Note: - Properti border-image-repeat menentukan apakah border-image harus repeat (diulang), round
(bulat) or stretch (diregangkan).
Syntax
border-image-repeat: stretch|repeat|round;
border-radius: 25px | 2em | 25%;

border-top-left-radius: 2em;
border-top-right-radius: 25px;
border-bottom-right-radius: 25%;
border-bottom-left-radius: 2em;
Note: - Properti border-radius adalah shorthand properti untuk menetapkan empat properti
border-*-radius.
- Tips: Properti ini memungkinkan untuk menambahkan border bulat (rounded) kepada elemen!
- Keempat value untuk setiap radius diberikan dalam urutan top-left, top-right, bottom-right,
bottom-left. Jika bottom-left dihilangkan itu adalah sama dengan top-right. Jika bottom-right
dihilangkan itu adalah sama dengan top-left. Jika top-right dihilangkan itu adalah sama
dengan top-left.
Syntax
border-radius: 1-4 length | % / 1-4 length | %;
Example
border-radius: 2em 1em 4em / 0.5em 3em;
Sama dengan
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
File CSS
div {border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;}
File HTML
<div>The border-radius property allows you to add rounded corners to elements.</div>
Output
box-shadow: 20px -20px 15px 10 red inset;

Note: - Properti box-shadow digunakan untuk memunculkan efek bayangan (shadow) pada box.
Syntax
box-shadow: h-shadow v-shadow blur spread color inset;
File CSS
div# satu {width:200px;
height:100px;
box-shadow: 50px 50px black;}
File HTML
<div id=" satu "></div>
File CSS
div# dua {width:200px;
height:100px;
box-shadow: 20px 20px 15px red;}
div# tiga {width:200px;
height:100px;
box-shadow: 20px 20px 15px red inset;}
File HTML
<div id=" dua "></div>
<br><br><br>
<div id=" tiga "></div>
Penjelasan Value:
- h-shadow
Diperlukan (Required). Posisi bayangan horisontal. Nilai negatif diperbolehkan.
- v-shadow
Diperlukan (Required). Posisi bayangan vertikal.
negatif diperbolehkan.
- blur
Opsional (Optional). Jarak blur.
- spread
Opsional (Optional). Ukuran bayangan.
- color
Opsional (Optional). Warna bayangan.
- inset
Opsional (Optional). Perubahan bayangan dari bayangan luar (awal) ke bayangan dalam.
Generated Content Properties

content:"Read this -";
Nilai
Note: - Properti content digunakan dengan pseudo-element :before dan :after, untuk memasukkan
konten yang dihasilkan (generated content).
Dukungan Browser
IE8 mendukung properti content hanya jika !DOCTYPE ditentukan.
Penjelasan Value:
- none
Mengatur konten, jika yang ditentukan tidak ada.
- normal
Mengatur konten, jika yang ditentukan normal, yang defaultnya adalah "none" (tidak ada).
- counter
Mengatur konten sebagai counter.
- attr(attribute)
Mengatur konten sebagai salah satu selector attribute.
- string
Mengatur konten ke teks yang ditentukan.
- open-quote
Mengatur konten dengan tanda kutip pembuka.
- close-quote
Mengatur konten dengan tanda kutip penutup.
- no-open-quote
Menghapus tanda kutip pembuka dari konten, jika ditentukan.
- no-close-quote
Menghapus tanda kutip penutup dari konten, jika ditentukan.
- url(url)
Mengatur konten menjadi semacam media (gambar, suara, video, dll).
- inherit
Menentukan bahwa value properti content harus diwarisi dari elemen induk.
Contoh Output Value:

- none, string
File CSS
p:before {content:"Read this -";}
p#hometown:before {content:none;}
File HTML
<p>My name is Donald</p>
<p id="hometown">I live in Ducksburg</p>
- counter
File CSS
p {counter-increment: myIndex;}
p:before {content:counter(myIndex);}
File HTML
<p>Paragraf Pertama</p>
<p>Paragraf Kedua</p>
<p>Paragraf Ketiga</p>
- attr(attribute)
File CSS
a:before {content:attr(href);}
File HTML
<a href="http://www.w3schools.com">(W3Schools)</a>
- open-quote, close-quote, no-open-quote, noclose-quote

File CSS
p:before {content:open-quote;}
p:after {content:close-quote;}
p.hometown:before {content:no-open-quote;}
p.hometown:after {content:no-close-quote;}
File HTML
<p class="hometown">I live in Ducksburg</p>
- url(url)
File CSS
p:before {content:url(smiley.gif);}
File HTML
<p>I live in Ducksburg</p>
counter-increment: none | id number | inherit;

Note: - Properti counter-increment menaikkan satu atau lebih nilai counter.
- Properti counter-increment biasanya digunakan bersama-sama dengan properti counter-reset
dan properti content.
Dukungan Browser
IE8 mendukung properti counter-increment hanya jika !DOCTYPE ditentukan.
Penjelasan Value:
- none
Tidak ada counter yang akan ditambahkan.
- id number
Id mendefinisikan counter mana yang harus bertambah. Jumlah tersebut menetapkan berapa
banyak counter yang akan dinaikkan pada setiap munculnya selector. Default increment adalah 1.
Nilai 0 atau negatif, diperbolehkan. Jika id mengacu pada counter yang belum diinisialisasi dengan
counter-reset, nilai awal default adalah 0.
- inherit
Menentukan bahwa value properti counter-increment harus diwarisi dari elemen induk.
counter-reset: none | id number | inherit;

Note: - Properti counter-reset digunakan untuk me-reset (mengatur ulang) satu atau lebih counter
(penghitung).
- Properti counter-reset biasanya digunakan bersama-sama dengan properti counter-increment
dan properti content.
Dukungan Browser
IE8 mendukung properti counter-reset hanya jika !DOCTYPE ditentukan.
File CSS
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before {counter-increment:section;
content:"Section " counter(section) ". ";}
h2:before {counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";}
File HTML
<html>
<body>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
</html>
Penjelasan Value:
- none
Tidak ada counter yang akan direset. Ini adalah default.
- id number
Id mendefinisikan counter mana yang harus di reset (atur ulang). Jumlah tersebut menetapkan nilai
counter diatur pada setiap munculnya selector. Value default reset adalah 0.
- inherit
Menentukan bahwa value properti counter-reset harus diwarisi dari elemen induk.
quotes: "" "" " ' " " ' ";

Note: - Properti quotes menentukan tipe tanda kutip untuk kutipan.
Dukungan Browser
IE8 mendukung properti quotes hanya jika !DOCTYPE ditentukan.
File CSS
q:lang(en) { quotes: "" "" " ' " " ' ";}
File HTML
<p><q>This is a <q>big</q> quote.</q></p>
Output
File CSS
q {quotes:'' '';}
File HTML
<p>Change <q>this quote's</q> quotation marks.</p>
Output
Penjelasan Value:
- none
Menentukan bahwa value "open-quote" dan "close-quote" dari properti "content" tidak akan
menghasilkan tanda kutip apapun.
- string string string string
Menentukan di mana tanda kutip (quotes) digunakan. Dua value pertama menentukan tingkat
pertama penyisipan kutipan, lalu dua value berikutnya menentukan tingkat berikutnya penyisipan
kutipan, dll.
- inherit
Menentukan bahwa value properti quotes harus diwarisi dari elemen induk.
Font Properties
font:italic bold 12px/30px Georgia,serif;
Note: - Shorthand properti font mengatur semua properti font dalam satu deklarasi.
- Properti diatur dalam urutan:"font-style font-variant font-weight font-size/line-height font-family"
- Value font-size dan font-family diperlukan. Jika salah satu value hilang, nilai default akan
disisipkan, jika ada.
- Properti line-height mengatur jarak antara baris.
Dukungan Browser
Contoh beberapa value properti font yang lain:

<p style="font:caption">Font Browser digunakan dalam kontrol captioned.</p>
<p style="font:icon">Font browser digunakan dalam label ikon.</p>
<p style="font:menu">Font Browser digunakan dalam menu dropdown.</p>
<p style="font:message-box">Font Browser digunakan dalam kotak dialog.</p>
<p style="font:small-caption">Sebuah versi lebih kecil dari font judul (caption).</p>
<p style="font:status-bar">Font browser digunakan dalam status bar.</p>
<p><b>Note:</b>Hasil kata kunci font tergantung browser.</p>
Output
font-style: normal | italic | oblique | inherit;

Note: - Properti font-style menentukan gaya (style) font untuk teks.
- Normal adalah value defaultnya.
- Value italic = Huruf yang dicetak miring, sedangkan
Value oblique = Miring.
font-variant: normal | small-caps | inherit;

Note: - Dalam small-caps font, semua huruf kecil dikonversi ke huruf besar. Namun, huruf besar
dikonversi dalam ukuran font yang lebih kecil daripada huruf besar asli dalam teks.
- Properti font-variant menentukan apakah ada atau tidak teks harus ditampilkan dalam font
small-caps.
- Normal adalah value defaultnya.
File CSS
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
File HTML
<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>
font-weight: normal | bold | bolder | lighter | 100-900 | inherit

Note: - Properti font-weight menentukan bagaimana karakter tebal atau tipis dalam teks harus
ditampilkan.
Penjelasan Value:
- normal
Mendefinisikan karakter normal. Ini adalah default.
- bold
Mendefinisikan karakter tebal.
- bolder
Mendefinisikan karakter yang lebih tebal.
- lighter
Mendefinisikan karakter yang lebih terang.
- 100, 200, 300, 400, 500, 600, 700, 800, 900
Mendefinisikan karakter dari tipis ke tebal. 400 adalah sama dengan normal dan 700 adalah sama
dengan bold.
- inherit
Menentukan bahwa font weight harus diwarisi dari elemen induk.
font-size:20px | 150% | xx-small | x-small | small | smaller | medium | large | x-large | xx-large | larger;
Note: - Properti font-size menentukan ukuran font.
Penjelasan Value:
-%
Menentukan ukuran font (font-size) dalam persen dari ukuran font elemen induk.
- inherit
Menentukan bahwa ukuran font (font size) harus diwarisi dari elemen induk
font-family: "Times New Roman",Georgia,Serif;

Note: - Properti font-family menentukan font untuk suatu elemen.
- Jika nama font mengandung white-space, harus dikutip. Tanda kutip tunggal harus digunakan
ketika menggunakan atribut "style" dalam HTML.
Ada dua jenis nama font family:

- family-name= Nama dari font-family, seperti "times", "courier", "arial", dll
- generic-family= Nama dari generic-family, seperti "serif", "sans-serif", "cursive", "fantasy" dan
"monospace".
Mulailah dengan font yang diinginkan dan selalu berakhir dengan generic family, agar browser
memilih font yang sama dalam keluarga generik, jika tidak ada font lain yang tersedia.
Berikut ini adalah daftar generic-family beserta family-name:
- serif
Times New Roman, Times, Georgia

- sans-serif
Arial, Verdana, Helvetica, Tahoma, "Arial Black", "Comic Sans MS"
- cursive
- fantasy
- monospace
Courier, "Courier New"
@font-face { font-family: myFirstFont;

src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}
@font-face
Note: Digunakan untuk mencadangkan file font (jenis huruf) di server yang nantinya
akan digunakan untuk menyediakan jenis huruf apabila di komputer pengguna
tidak ada jenis huruf yang dimaksud.
@font-face {font-family: myFirstFont;

src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */}
Dukungan Browser
- @font-face didukung di Internet Explorer 9, Firefox, Opera, Chrome dan Safari.
- Namun, Internet Explorer 9 hanya mendukung tipe font .eot, sedangkan Firefox, Chrome, Safari dan
Opera mendukung tipe font .ttf dan .otf.
- Internet Explorer 9 +, Firefox, Chrome, Safari dan Opera mendukung huruf WOFF (Web Open Font
Format).
- Internet Explorer 8 dan versi sebelumnya, tidak mendukung aturan @ font-face.
Dengan aturan @font-face, web designer tidak lagi harus menggunakan salah satu dari "web-safe
fonts".
Membuat aturan font-face dengan memberikan nama font:
- font-family: myFirstFont;
Sertakan file font di suatu tempat pada server dan hubungkan dengan CSS:
- src: url('Sansation_Light.ttf')
Jika file font terletak di domain yang berbeda, gunakan URL lengkap sebagai gantinya:
- src: url('http://www.w3schools.com/css3/Sansation_Light.ttf')
Sekarang font siap digunakan, di bawah ini adalah contoh bagaimana menggunakannya untuk semua
elemen div:
- div {font-family: myFirstFont;}
File CSS
src: url('AlexBrush-Regular.ttf'),
url('AlexBrush-Regular.eot'); /* IE9 */}
div {font-family:myFirstFont;}
File HTML
<div>
Dengan CSS3, website akhirnya dapat menggunakan font selain yang telah ditentukan oleh "websafe fonts".
</div>
Output
Syntax
@font-face {font-properties}
Tips: - Gunakan huruf kecil untuk URL font. Huruf besar dapat memberikan hasil yang tidak
diharapkan di IE.
- Font gratis dapat ditemukan di www.fontsquirrel.com atau www.openfontlibrary.org.
Menggunakan Teks Bold

Anda harus menambahkan aturan @font-face lain berisi deskripsi untuk teks bold:
File CSS
src: url(sansation_light.woff);}
src: url(sansation_bold.woff);
font-weight:bold;}
div {font-family:myFirstFont;}
File HTML
<div>
With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts.
</div>
Output
Keterangan:
- File "Sansation_Bold.ttf" adalah file font lain, yang berisi karakter bold untuk font Sansation.
- Browser akan menggunakan ini setiap kali sepotong teks dengan font-family "myFirstFont" harus
dibuat bold.
- Dengan cara ini Anda dapat memiliki banyak aturan @font-face untuk font yang sama.
margin-left:
px
List Properties
list-style:square inside url("smiley.gif");
Note: - Shorthand properti list-style mengatur properti list dalam satu deklarasi.
- Properti yang dapat diatur (dalam urutan) adalah list-style-type, list-style-position, list-styleimage.
- Jika salah satu value di atas tidak ada, misalnya "list-style:circle inside;", maka nilai default
untuk properti yang tidak ada akan disisipkan, jika ada.
Dukungan Browser
list-style-type: circle | disc | square | none | inherit;

decimal | decimal-leading-zero | upper-latin | lower-latin | upper-roman | lower-roman |
upper-alpha | lower-alpha;
armenian | cjk-ideographic | georgian | hebrew | hiragana | hiragana-iroha | katakana |
katagana-iroha | lower-greek;
Note: - Properti list-style-type menentukan jenis penanda list-item dalam daftar (list).
Dukungan Browser
- IE9 dan Opera 11 tidak mendukung: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana
dan katakana-iroha.
- IE8 dan sebelumnya, hanya mendukung value properti: ecimal-leading-zero, lower-greek, lowerlatin, upper-latin, armenian, georgian dan inherit jika DOCTYPE ditentukan.
File CSS:
ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:square;}
ol.d {list-style-type:decimal;}
ol.e {list-style-type:lower-latin;}
ol.f {list-style-type:lower-roman;}
ol.g {list-style-type:upper-latin;}
ol.h {list-style-type:upper-roman;}
File HTML:
<ul class="a">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="c">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol class="d">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="e">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="f">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="g">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="h">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
list-style-position: inside | outside | inherit;

Note: - Properti list-style-position menentukan apakah penanda list-item harus muncul di dalam atau
di luar aliran konten.
- Value outside adalah nilai defaultnya.
Dukungan Browser
- Value "inherit" tidak didukung di IE7 dan
membutuhkan !DOCTYPE. IE9
sebelumnya. IE8
list-style-image: url('sqpurple.gif') | none | inherit;

Note: - Properti list-style-image menggantikan penanda list-item dengan gambar.
- Selalu tentukan properti list-style-type sebagai tambahan. Properti list-style-type digunakan
jika gambar untuk beberapa alasan tidak tersedia.
- Value none adalah nilai defaultnya.
Dukungan Browser
Crossbrowser Solution
Contoh berikut menampilkan penanda-gambar yang sama di semua browser:
File CSS:
ul {
list-style-type:none;
padding:0px;
margin:0px;
}
ul li {
background-image:url(sqpurple.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
File HTML:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
Penjelasan Sintaks di atas:
ul:
Mengatur list-style-type ke none untuk menghapus penanda list item.
padding dan margin 0px (untuk kompatibilitas cross-browser).
ul li:
Mengatur URL gambar dan menampilkannya hanya sekali (no-repeat).
Memposisikan gambar di mana yang di inginkan (left 0px dan down 5px).
Posisi teks dalam daftar (list) dengan padding-left.
Margin Property
margin: 25px | 5em | 10% | -2cm | auto | inherit;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
Note: - Properti margin menentukan margin (tepi,batas) dari suatu elemen.
- Shorthand properti margin mengatur semua properti margin dalam satu deklarasi. Properti
margin dapat memiliki 1 sampai 4 value.
- Value negatif diperbolehkan.
Dukungan Browser
Contoh:
margin: (top-right-bottom-left);
margin:10px 5px 15px 20px;
margin top adalah 10px
margin right adalah 5px
margin bottom adalah 15px
margin left adalah 20px
margin:10px 5px 15px;
margin top adalah 10px
margin right dan left adalah 5px
margin bottom adalah 15px
margin:10px 5px;
margin top dan bottom adalah 10px
margin right dan left adalah 5px
margin:10px;
Ke empat margin adalah 10px
Penjelasan value:
- auto
Browser yang akan menghitung margin.
Menentukan margin dalam px, pt, cm, dll. Value default adalah 0px.
-%
Menentukan margin dalam persen dari lebar elemen yang mengandung.
- inherit
Menentukan bahwa margin harus diwarisi dari elemen induk.
padding:25px | 5em | 10% | 0.5cm | inherit;

padding-top:
padding-right:
padding-bottom:
padding-left:
Note: - Shorthand properti padding mengatur semua properti padding dalam satu deklarasi. Properti
padding dapat memiliki 1 sampai 4 value.
- Value negatif tidak diperbolehkan.
- Value default adalah 0px.
Dukungan Browser
Contoh:
padding: (top-right-bottom-left);
padding:10px 5px 15px 20px;
padding top adalah 10px
padding right adalah 5px
padding bottom adalah 15px
padding left adalah 20px
padding:10px 5px 15px;
padding top adalah 10px
padding right dan left adalah 5px
padding bottom adalah 15px
padding:10px 5px;
padding top dan bottom adalah 10px
padding right dan left adalah 5px
padding:10px;
Ke empat padding adalah 10px
Multi-column Properties
Multi-column Properties
Multi-column Properties didukung di Internet Explorer 10 dan Opera.
Firefox mendukung dengan alternatif,-moz.
Safari dan Chrome mendukung dengan alternatif,-webkit.
column-count: 3 | auto;
Note: - Properti column-count digunakan untuk membagi jumlah kolom suatu elemen.
File CSS
.newspaper {column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */}
File HTML
<div class="newspaper">
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem
insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores
legere me lius quod ii legunt saepius.
</div>
Output
Syntax
column-count: number | auto;
Penjelasan Value:
- number
Jumlah optimal kolom dimana isi dari elemen akan mengalir.
- auto
Jumlah kolom akan ditentukan oleh properties lainnya, misalnya "column-width".
column-gap:40px | normal;
Note: - Properti column-gap menentukan jarak/celah antara kolom.
- Jika ada column-rule di antara kolom, maka akan muncul di tengah-tengah jarak/celah (gap).
Syntax
column-gap: length | normal;
Penjelasan Value:
- length
Menentukan panjang yang akan mengatur jarak antara kolom.
- normal
Menentukan jarak normal antara kolom. W3C menunjukkan nilai 1em.
column-width:100px | auto;
Note: - Properti column-width menentukan lebar kolom.
Syntax
column-width: auto | length;
Penjelasan Value:
- auto
Lebar kolom akan ditentukan oleh browser.
- length
Sebuah panjang yang menentukan lebar kolom.
column-rule:4px outset red;

Note: - Properti column-rule adalah shorthand properti untuk mengatur semua properti column-rule-*.
- Properti column-rule mengatur width, style dan color antara kolom.
Syntax
column-rule: column-rule-width | column-rule-style | column-rule-color;
File CSS
column-rule:4px outset pink;}
File HTML
</div>
Output
column-rule-width: thin | medium | thick | length;

Note: - Properti column-rule-width menentukan aturan lebar antara kolom.
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
Note: - Properti column-rule-style menentukan aturan style antara kolom.
column-rule-color: red | #ff0000 | #000000 | rgb(255,130,255) | rgba(255,130,255,0.5);

Note: - Properti column-rule-color menentukan aturan warna antara kolom.
File CSS
column-rule-width:5px;
column-rule-style:outset;
column-rule-color:#ff0000;}
File HTML
</div>
Output
columns:100px 3;
Note: - Properti columns adalah shorthand properti untuk menetapkan column-width dan
column-count.
File CSS
.newspaper {columns:100px 3;}
File HTML
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent
claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt
lectores legere me lius quod ii legunt saepius.
</div>
Output
Syntax
columns: column-width column-count;
Penjelasan Value:
- column-width
Lebar kolom.
- column-count
Jumlah kolom.
Positioning Properties
position: static | fixed | absolute | relative | inherit;
Note: - Properti position menentukan jenis metode penentuan posisi yang digunakan untuk elemen
elemen (static, relative, absolute atau fixed).
Dukungan Browser
Contoh 1:
File CSS
img.hitam {position:static;}
img.hijau {position:fixed; top:10px; left:20px;}
img.kuning {position:absolute; top:10px; left:20px;}
img.merah {position:relative; top:10px; left:20px;}
File HTML
<body>
<img src="kotak1.jpg" class="hitam">
<img src="kotak2.jpg" class="hijau">
<img src="kotak3.jpg" class="kuning">
<img src="kotak4.jpg" class="merah">
</body>
Output
Kotak Hitam
(position static)
Kotak Kuning
(position absolute)
Kotak Merah
(position relative)
Kotak Hijau
(position fixed)
Contoh 2:
<body>
<div style="width:300px; height: 300px; border: 1px solid black; position: relative;">
position: relative;
<div style="width:200px; height: 200px; padding: 10px; border: 1px solid red; position: absolute; top:
50px; left: 10px;">
position: absolute; top: 50px; kiri: 10px;
</div>
</div>
<body>
Penjelasan Value:
- static
- Default. Elemen membuat dalam urutan, seperti yang ditampilkan dalam aliran dokumen.
- Elemen position static tidak terpengaruh oleh properti top, bottom, left dan right.
- fixed
Elemen diposisikan relatif terhadap jendela (window) browser.
- absolute
- Elemen diposisikan relatif terhadap posisi pertama (tidak static) elemen induknya/leluhurnya.
- Position absolute dapat relatif terhadap elemen yang mempunyai position relative.
- relative
Elemen ini diposisikan relatif ke posisi normal, sehingga "left: 20" menambahkan 20 pixel ke position
LEFT elemen
- inherit
Nilai dari properti posisi diwariskan dari elemen induk
top: 5px | -10% | auto | inherit;

right:
bottom:
left:
Note: - Untuk elemen position absolute, properti top/right/bottom/left menetapkan tepi atas suatu
elemen terhadap elemen yang mengandungnya.
- Untuk elemen position relative, properti top/right/bottom/left menetapkan tepi atas suatu
elemen terhadap elemen posisi normal.

- Jika "position:static", properti top tidak berpengaruh.
Dukungan Browser
Value "inherit" tidak didukung di IE7 dan sebelumnya. IE8 membutuhkan !DOCTYPE. IE9
Penjelasan Value:
Mengatur posisi tepi atas, bawah, kanan atau kiri dalam px, cm, dll. Value negatif diperbolehkan.
-%
Mengatur posisi tepi atas, bawah, kanan atau kiri dalam % pada elemen yang mengandung. Value
- auto
Memungkinkan browser menghitung posisi tepi atas, bawah, kanan atau kiri. Ini adalah default.
- inherit
Menentukan bahwa value dari properti top, right, bottom dan left harus diwarisi dari elemen induk.
Berikut ini adalah contoh efek dari properti top terhadap properti position:
- Bagian atas dari lokasi awal elemen (untuk position: relative)
- Bagian atas dari elemen induk (untuk position: absolute)
- Bagian atas dari jendela (window) browser (untuk position: fixed)
z-index: -1 | 1 | auto | inherit;

Note: - Properti z-index menentukan urutan tumpukan elemen.
- Sebuah elemen dengan tumpukan besar selalu di depan sebuah elemen dengan tumpukan
yang lebih rendah.
- Properti z-index hanya bekerja pada elemen position (position:absolute, position:relative atau
position:fixed)
Dukungan Browser
File CSS:
img.merah {position:absolute; top:20px; left:20px; z-index:-1;}
img.kuning {position:absolute; top:30px; left:30px;}
img.hijau {position:absolute; top:40px; left:40px; z-index:1;}
File HTML:
<img src="6.jpg" class="merah">
<img src="7.jpg" class="kuning">
<img src="8.jpg" class="hijau">
Penjelasan Value:
- auto
Mengatur tumpukan agar sama dengan orang tuanya (induknya). Ini adalah default.
- number
Mengatur urutan tumpukan elemen. Angka negatif diperbolehkan.
- inherit
Menentukan bahwa z-index harus diwarisi dari elemen induk.
visibility: visible | hidden | collapse | inherit;

Note: - Properti visibility menentukan apakah elemen terlihat atau tidak .
- Elemen yang tidak terlihat mengambil ruang (space) pada halaman. Gunakan properti
"display" untuk membuat elemen tak terlihat agar tidak mengambil ruang (space)!
Dukungan Browser
Tidak ada versi Internet Explorer (termasuk IE8) mendukung value properti "inherit" atau "collapse".
Penjelasan Value:
- visible
Default. Elemen terlihat.
- hidden
Elemen ini tidak terlihat, tetapi masih menggunakan ruang (space).
- collapse
Hanya untuk elemen tabel. collapse menghapus baris atau kolom, tetapi tidak mempengaruhi tata
letak (layout) tabel. Ruang (space) yang diambil oleh baris atau kolom akan tersedia untuk konten
lainnya.
Jika collapse digunakan pada elemen lain, akan menjadikan sebagai "hidden".
- inherit
Menentukan bahwa value properti visibility harus diwarisi dari elemen induk.
overflow: visible | hidden | scroll | auto | inherit;

Note: - Properti overflow yang dapat menginstruksikan bagaimana browser menampilkan sebuah
elemen yang kontennya tidak dapat ditampung secara penuh pada elemen tersebut.
Dukungan Browser
File CSS:
div.scroll {
background-color:aqua;
width:100px;
height:100px;
overflow:scroll;}
File HTML:
<div class="scroll">You can use the overflow property when you want to have better control of the
layout. The default value is visible.</div>
Penjelasan Value:
- visible
Konten yang melebihi elemen tidak dipotong. Hal ini membuat konten keluar dari kotak elemen
(element's box). Ini adalah default.
- hidden
Konten yang melebihi elemen akan terpotong dan sisa dari konten akan tidak terlihat.
- scroll
Konten yang melebihi elemen akan terpotong, lalu scroll-bar akan ditambahkan untuk melihat sisa
konten.
- auto
Jika kontent melebihi elemen akan dipotong, lalu scroll-bar akan ditambahkan untuk melihat sisa
konten.
- inherit
Menentukan bahwa value properti overflow harus diwarisi dari elemen induk.
float: left | right | none | inherit;

Note: - Properti float digunakan untuk memposisikan elemen mengapung (float) pada bagian kiri atau
kanan dari elemen lain yang berada pada satu elemen induk.
- Properti position:absolute; mengabaikan properti float.
Dukungan Browser
File CSS:
img {float:right;}
File HTML:
<p>
<img src="logocss.gif">
Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini
adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah
teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks.
Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini
adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah teks. Ini adalah
teks. Ini adalah teks. Ini adalah teks.
</p>
Output:
Penjelasan Value:
- left
Elemen mengapung di sebelah kiri.
- right
Elemen mengapung di sebelah kanan.
- none
Elemen ini tidak mengapung (float) dan hanya akan ditampilkan di mana itu terjadi dalam teks. Ini
adalah default.
- inherit
Menentukan bahwa value properti float harus diwarisi dari elemen induk.
clear: left right both none inherit;

Note: - Properti clear digunakan bersamaan dengan properti float untuk menentukan apakah sebuah
elemen memperbolehkan penggunaan float di dalamnya.
- Properti clear bisa menentukan apakah sebuah elemen induk bisa mempunyai elemen yang
float ke kanan atau kiri dari elemen tersebut.
- Jika sebuah elemen tidak memperbolehkan adanya floating pada sisinya, konten yang berada
pada float di sisi tersebut akan muncul di bawah elemen yang mempunyai float tersebut.
Dukungan Browser
File CSS
img.thumbnail {float:left; margin:5px;}
h3.text_line {clear:both; margin-bottom:2px;}
File HTML
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<h3 class="text_line">Second row</h3>
Output
Penjelasan Value:
- left
Tidak memperbolehkan penerapan elemen float (mengapung) pada sisi kiri.

- right
Tidak memperbolehkan penerapan elemen float (mengapung) pada sisi kanan.
- both
Tidak memperbolehkan penerapan elemen float (mengapung) pada sisi kiri atau
kanan.
sisi
- none
Default. Memperbolehkan penerapan elemen float (mengapung) pada kedua sisi.
- inherit
Menentukan bahwa value dari properti clear harus diwarisi dari elemen induk.
clip: rect(0px,60px,200px,0px) | auto | inherit;

rect(top, right, bottom, left)
Note: - Properti clip digunakan untuk memotong elemen yang dapat ditentukan sebelumnya.
- Properti clip tidak bekerja jika "overflow:visible".
Dukungan Browser
File CSS
<div id="myBox">Play with different clip values for this yellow DIV element.</div>
File HTML
div#myBox {position:absolute;
width:100px;
clip:auto;
|
rect(0px,25px,25px,0px);
rect(10px,50px,50px,10px);}
Output
Penjelasan Value:
- shape
Memotong sebuah elemen. Satu-satunya value yang valid adalah: rect (top, right, bottom, left).
- auto
Tidak ada pemotongan yang akan diterapkan. Ini adalah default.
- inherit
Menentukan bahwa value properti clip harus diwarisi dari elemen induk.
display: inline | block | list-item | none | inherit;
box | flex | inline-block | inline-flex | inline-table;

table | table-caption | table-cell | table-row | table-row-group | table-column |
table-column-group | table-header-group | table-footer-group;
Note: - Properti display menentukan tipe box yang digunakan untuk elemen HTML.
Dukungan Browser
- Value "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "tablerow", "table-row-group" dan "inherit" tidak didukung di IE7 dan sebelumnya. IE8 membutuhkan
!DOCTYPE. IE9 mendukung values tersebut.
File CSS:
p {display: inline | block | list-item | none;
border: 1px solid;}
h1 {border: 1px solid;}
File HTML:
<h1>Display .......</h1>
<p>Paragraf Pertama</p>
<p>Paragraf Kedua</p>
Output:
Contoh Penggunaan Value inherit:

File CSS:
body {display:inline}
p {display:inherit}
File HTML:
<body>
<p>These two paragraphs generates inline boxes, and it results in</p>
<p>no distance between the two elements.</p>
</body>
Output:
Note: - Properti display mendefinisikan bagaimana elemen HTML tertentu harus ditampilkan.
- Properti display:none menyembunyikan elemen dan tidak akan mengambil ruang apapun.
Elemen akan disembunyikan dan halaman itu akan ditampilkan seakan-akan tidak ada
elemen tersebut.
Properti visibility:hidden menyembunyikan elemen, tetapi masih akan mengambil ruang yang
sama seperti sebelumnya. Elemen akan disembunyikan, tetapi masih mempengaruhi tata
letak (layout).
- Sebuah elemen block merupakan elemen yang mengambil seluruh lebar yang tersedia dan
memiliki baris baru (line break) sebelum dan sesudahnya.
Contoh elemen block:
<h1>
<p>
<div>
Sebuah elemen inline hanya menempati sebanyak lebar yang diperlukan dan tidak memaksa
baris baru (line break).
Contoh elemen inline:
<span>
<a>
- Mengubah elemen inline untuk elemen blok atau sebaliknya, dapat berguna untuk membuat
halaman terlihat dengan cara tertentu dan selama masih mengikuti standar web.
Mengubah jenis tampilan dari perubahan elemen hanya bagaimana elemen ditampilkan,
BUKAN jenis elemen itu. Sebagai contoh: Sebuah elemen inline diatur untuk display:block
tidak diperbolehkan jika memiliki elemen blok bersarang di dalamnya.
Penjelasan Value:
- inline
Ini adalah default. Elemen ini ditampilkan sebagai elemen tingkat- inline (sebaris) / inline-level
element (seperti <span>)
- block
Elemen ini ditampilkan sebagai elemen tingkat-block / block-level element (seperti paragraf <p> dan
header <h1>)
- list-item
Elemen ini ditampilkan sebagai daftar-item (list-item), yang berarti bahwa ini memiliki bullet di
depannya
- none
Elemen tidak akan ditampilkan sama sekali
- inherit
Value dari properti display akan diwariskan dari elemen induk
- box (or flex-box / kotak fleksibel)

Elemen ini ditampilkan sebagai tingkat-blok fleksibel kotak kontainer (block-level flex container box)
- flex
Elemen ini ditampilkan sebagai tingkat-blok fleksibel kotak kontainer (block-level flex container box)
- inline-block
Elemen ini ditempatkan sebagai elemen inline (pada baris yang sama sebagai konten yang
berdekatan), tetapi berperilaku sebagai elemen block
- inline-flex
Elemen ini ditampilkan sebagai tingkat- inline (sebaris) fleksibel kotak kontainer (inline-level flex
container box)
- inline-table
Elemen ini ditampilkan sebagai tingkat- inline (sebaris) tabel (inline-level table)
- table
Elemen ini ditampilkan sebagai tabel
- table-caption
Elemen ini ditampilkan sebagai judul tabel
- table-cell
Elemen ini ditampilkan sebagai sel tabel
- table-row
Elemen ini ditampilkan sebagai baris tabel
- table-row-group
Elemen ini ditampilkan sebagai kelompok baris tabel
- table-column
Elemen ini ditampilkan sebagai kolom tabel
- table-column-group
Elemen ini ditampilkan sebagai kelompok kolom tabel (seperti <colgroup>)
- table-header-group
Elemen ini ditampilkan sebagai header tabel kelompok baris
- table-footer-group
Elemen ini ditampilkan sebagai footer tabel kelompok baris
Penjelasan value table property display dari Buku:

- table
Sebuah table adalah konten luar dari seluruh tabel. Ini mendefinisikan elemen blok persegi yang
memuat beberapa grup baris, baris, grup kolom, kolom dan/atau judul, semua disusun pada sebuah
pola yang tidak biasa. Semua objek yang di-render selain konten dari tabel ini harusnya akan
diletakkan di luar pola persegi dari tabel ini. (HTML : table).
- table-caption
Sebuah table-caption adalah tipe spesial dari sebuah baris dan kolom dalam tabel yang ditampilkan
dalam sebuah kolom atau baris dari tabel itu sendiri (HTML : caption).
- table-cell
Sebuah table cell adalah obek persegi untuk disusun pada tabel. Kumpulan baris dan kolom kecil
hanya boleh ditempatkan dalam baris (HTML : td).
- table-row
Sebuah table-row akan mengumpulkan kolom dan baris tabel pada baris horizontal (HTML : tr).
- table-row-group
Sebuah table-row-group adalah penampung konetn untuk bebrapa baris abel. Ini memperbolehkan
seorang designer untuk mengatur properti tampilan dikumpulkan dalam sebuah baris, sebagae
contohnya, menempatkan garis di sekeliling kumpulan baris (HTML : tbody).
- table-column
Sebuah table-column adalah pengikatan beberapa cell untuk menjadi sebuah grup pada sebuah
vertikal kolom yang khusus (HTML : col).
- table-column-group
Sebuah table-column-group adalah sebuah penampung konten untuk beberapa kolom tabel. Ini
memperbolehkan seorang designer untuk mengatur properti tampilan untuk ditampilkan dalam grup
sebuah kolom, sebagai contohnya dengan menempatkan garis di sekeliling grup kolom
(HTML : colgroup).
- table-header-group
Sebuah table-header-group adalah sebuah tipe spesial untuk table-row-group yang selalu
ditampilkan pada bagian atas dari sebuah table, diatas semua baris dan grup baris, tapi di bawah
semua judul (HTML : thead).
- table-footer-group
Sebuah table-footer-group adalah sebuah tipe spesial untuk table-row-group yang selalu
ditampilkan pada bagian bawah dari sebuah table, dibawah semua baris dan grup baris, tapi di
bawah semua judul (HTML : tfoot).
- inline-table
Sebuah inline-table mirip seperti elemen table kecuali inline-table ini diperlakukan seperti elemen
yang digantikan pada inline sebuah konteks yang melingkupi elemen inline-table.
cursor: auto | default | crosshair | help | move | n-resize | s-resize | w-resize | e-resize | nw-resize |
se-resize | ne-resize | sw-resize | pointer | text | progress | wait | url(smiley.gif) | inherit;
Note: Properti cursor menentukan jenis kursor yang akan ditampilkan bila menunjuk pada suatu
elemen.
Dukungan Browser
- Opera 9.3 dan Safari 3 tidak mendukung value URL.
Contoh Output:
auto
default
crosshair
help
move
default
Tanda panah terus
+
?
north (utara)
n-resize / s-resize
west (barat)
east (timur)
w-resize / e-resize
nw-resize / se-resize
south (selatan)
ne-resize / sw-resize
pointer
Tangan
text
progress
wait
I
Jam Pasir dan kursor
Jam pasir saja
URL
Penjelasan Value:
- auto
Default. Browser menentukan bentuk kursor yang sesuai dengan konteks elemen tersebut.
- default
Default kursor
- crosshair
Kursor menjadi sebagai crosshair
- help
Kursor menunjukkan bahwa bantuan tersedia
- move
Kursor menunjukkan sesuatu yang harus dipindahkan
- n-resize
Kursor menunjukkan bahwa tepi kotak akan bergerak naik (utara)
- s-resize
Kursor menunjukkan bahwa tepi kotak akan bergerak turun (selatan)
- w-resize
Kursor menunjukkan bahwa
tepi kotak akan dipindahkan kiri (barat)
- e-resize
Kursor menunjukkan bahwa tepi kotak akan pindah kanan (timur)
- nw-resize
Kursor menunjukkan bahwa tepi kotak akan bergerak naik dan ke kiri(utara / barat)
- se-resize
Kursor menunjukkan bahwa tepi kotak akan bergerak turun dan ke kanan (selatan / timur)
- ne-resize
Kursor menunjukkan bahwa tepi kotak akan bergerak naik dan ke kanan (utara / timur)
- sw-resize
Kursor menunjukkan bahwa tepi kotak akan bergerak turun dan ke kiri (selatan / barat)
- pointer
Kursor menjadi sebagai pointer
- text
Kursor menunjukkan teks
- progress
Kursor menunjukkan bahwa program sedang sibuk (in progress)
- wait
Kursor menunjukkan bahwa program sedang sibuk
- URL
Sebuah koma memisahkan beberapa URL. Catatan: Selalu menentukan kursor generik pada akhir
daftar, dalam hal ini apabila ada kursor-URL yang tidak dapat didefinisikan.
Contoh= cursor:url(smiley.gif),url(myBall.cur),auto;
- inherit
Menentukan bahwa value properti cursor harus diwarisi dari elemen induk
Dimension Properties
width:100px | 10em | 50% | auto | inherit;

max-width:100px | 50% | none | inherit;
min-width:150px | 50% | inherit;
Note: - Properti width mengatur lebar dari suatu elemen.
- Properti max-width mengatur lebar maksimum dari suatu elemen.
- Properti min-width mengatur lebar minimum dari suatu elemen.
- Properti width, max-width dan min-width tidak termasuk padding, border atau margin!
Dukungan Browser
- IE6 dan versi sebelumnya tidak mendukung properti max-width, min-width, max-height dan minheight.
Penjelasan Value:
Mendefinisikan lebar dalam em, px, cm, dll.
-%
Mendefinisikan lebar dalam persen dari blok yang mengandung (containing block).
- auto
Browser akan menghitung lebarnya. Ini adalah default.
- none
Tidak ada lebar maksimum. Ini adalah default.
- inherit
Menentukan bahwa value dari properti width harus diwarisi dari elemen induk.
height:100px | 50% | auto | inherit;

max-height:100px | 50% | none | inherit;
min-height:150px | 50% | inherit;
Note: - Properti height mengatur ketinggian dari suatu elemen.
- Properti max-height mengatur ketinggian maksimum dari suatu elemen.
- Properti min-height mengatur ketinggian minimum dari suatu elemen.
- Properti height, max-height dan min-height tidak termasuk padding, border atau margin!
Penjelasan Value:
Mendefinisikan ketinggian dalam px, cm, dll
-%
Mendefinisikan ketinggian dalam persen dari blok yang mengandung (containing block).
Contoh khusus property height dalam persen (%): body {height:100%;}
img.big {height:50%;}
- auto
Browser akan menghitung tingginya. Ini adalah default
- none
Tidak ada ketinggian maksimum. Ini adalah default

- inherit
Menentukan bahwa value properti height harus diwarisi dari elemen induk
Table Properties
border-spacing: 20px | 0px 50px | inherit;
Note: - Properti border-spacing menentukan jarak antara batas (border) sel yang berdekatan (hanya
dapat digunakan dengan properti border-collapse:separate.
Dukungan Browser
- IE8 mendukung properti border-spacing hanya jika !DOCTYPE ditentukan.
File CSS:
table.ex1 {
border-collapse:separate;
border-spacing:10px;
}
table.ex2 {
border-spacing:0px 50px;
}
File HTML:
<table class="ex1" border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<br>
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
<tr>
<td>Glenn</td>
<td>Quagmire</td>
</tr>
</table>
Penjelasan Value:
- length length (Nilai Panjang)

Menentukan jarak antara batas (border) sel yang berdekatan dalam px, cm, dll. Value negatif tidak
diperbolehkan.
Jika hanya satu nilai panjang yang ditentukan, maka akan menentukan jarak secara horizontal dan
vertikal
Jika dua nilai panjang yang ditentukan, pertama menetapkan jarak horizontal dan kedua
menetapkan jarak vertikal
- inherit
Menentukan bahwa value dari properti border-spacing harus diwarisi dari elemen induk
empty-cells: hide | show | inherit;

Note: - Properti empty-cells menentukan apakah ditampilkan atau tidak menampilkan perbatasan
(border) dan latar belakang (background) pada sel kosong (empty cells) dalam sebuah tabel
(hanya dapat digunakan dengan properti border-collapse:separate).
Dukungan Browser
- IE8 mendukung properti empty-cells hanya jika !DOCTYPE ditentukan.
File CSS:
table.ex1 {
empty-cells:show;
}
table.ex2 {
empty-cells:hide;
}
File HTML:
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
<br>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
Penjelasan Value:
- hide
Tidak ada latar belakang (background) atau perbatasan (border) yang ditampilkan pada sel kosong
(empty cells).
- show
Latar belakang (background) dan perbatasan (border) ditampilkan pada sel kosong (empty cells). Ini
adalah default.
- inherit
Menentukan bahwa value dari sel kosong (empty cells) properti harus diwarisi dari elemen induk.
border-collapse: collapse | separate | inherit;

Note: - Properti border-collapse mengatur apakah perbatasan (border) tabel menjadi perbatasan
(border) tunggal atau terpisah seperti pada standar HTML.
Dukungan Browser
- Value "inherit" dari properti border-collapse tidak didukung di Internet Explorer 9 dan versi
sebelumnya.
- Jika !DOCTYPE tidak ditentukan, properti border-collapse dapat menghasilkan hasil yang tidak
diharapkan.
File CSS:
table.ex1 {
border-collapse:collapse;
}
table.ex2 {
}
File HTML:
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
<br>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
Penjelasan Value:
- collapse
Border menjadi perbatasan (border) tunggal bila memungkinkan (properti border-spacing dan
empty-cells akan diabaikan).
Garis-garis (border) pada tabel yang berdekatan akan menjadi satu garis saja.
- separate
Borders menjadi terpisah (properti border-spacing dan empty-cells tidak akan diabaikan). Ini adalah
default.
- inherit
Menentukan bahwa value properti border-collapse harus diwarisi dari elemen induk.
caption-side: top | bottom | inherit;

Note: - Properti caption-side menentukan penempatan (caption) judul tabel.
Dukungan Browser
- IE8 mendukung properti caption-side hanya jika !DOCTYPE ditentukan.
File CSS:
caption {caption-side: bottom;}
File HTML:
<table border="1">
<caption>Judul Tabel 1</caption>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
Penjelasan Value:
- top
Menempatkan judul (caption) di atas tabel. Ini adalah default.
- bottom
Menempatkan judul (caption) di bawah tabel.
- inherit
Menentukan bahwa value properti caption-side harus diwarisi dari elemen induk.
table-layout: auto | fixed | inherit;

Note: - Properti table-layout menentukan algoritma tata letak (layout) tabel yang akan digunakan
untuk tabel.
Dukungan Browser
File CSS:
table.ex1 {table-layout:auto}
table.ex2 {table-layout:fixed}
File HTML:
<table class="ex1" border="1" width="100%">
<caption>TABLE LAYOUT: AUTO</caption>
<tr>
<td width="5%">1***************************</td>
<td width="95%">1-------</td>
</tr>
</table>
<br>
<table class="ex2" border="1" width="100%">
<caption>TABLE LAYOUT: FIXED</caption>
<tr>
<td width="5%">1***************************</td>
<td width="95%">1-------</td>
</tr>
</table>
Output:
Penjelasan Value:
- auto
Algoritma layout tabel otomatis (automatic). Ini adalah default:
- Lebar kolom ditentukan oleh isi (content) terluas dalam sel.
- Dapat menjadi lambat, karena harus membaca semua isi dalam tabel, sebelum menentukan layout
akhir.
- fixed
Algoritma layout tabel fixed:
- Tata letak (layout) horizontal hanya bergantung pada lebar tabel dan lebar kolom, bukan isi sel.
- Memungkinkan browser untuk menampilkan tabel lebih cepat dari layout tabel otomatis (auto).
- Browser dapat mulai menampilkan tabel setelah baris pertama diterima.
- inherit
Menentukan bahwa value properti table-layout harus diwarisi dari elemen induk
Styling Tables
Tampilan sebuah tabel HTML dapat sangat ditingkatkan dengan CSS:
- Border Table
Untuk menentukan border tabel dalam CSS, gunakan properti border.
- Border Collapse
Properti border-collapse menentukan apakah border tabel menjadi border tunggal atau terpisah
(separated).
- Lebar dan Tinggi Tabel (Width and Height Table)
Lebar dan tinggi tabel didefinisikan oleh properti width and height.
- Properti text-align dan vertical-align Table
Teks dalam tabel dapat diposisikan dengan properti text-align dan vertical-align.
- Padding Tabel
Untuk mengontrol ruang antara border dan konten dalam sebuah tabel, gunakan properti padding
pada elemen td
dan th:
- Color Table
Digunakan untuk
memberikan warna
di dalam tabel,
seperti border, teks
dan latar belakang
(background).
File CSS:
table,td,th {border:1px solid red;}
table {width:100%;}
th {height:50px; vertical-align:bottom; background-color:green;
color:white;}
td {text-align:right;padding:15px;}
File HTML:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
</table>
Text Properties
text-decoration: none | underline | overline | line-through | inherit;

Note: - Properti text-decoration menentukan dekorasi tambahan pada teks.
- Warna dekorasi (decoration) harus ditetapkan dengan properti "color".
- Value none mendefinisikan teks normal. Ini adalah default.
Dukungan Browser
text-transform: none | capitalize | uppercase | lowercase | inherit;

Note: - Property text-transform mengontrol kapitalisasi teks.
Dukungan Browser
Penjelasan value:
none
Tidak ada kapitalisasi. Ini adalah default.
capitalize
karakter pertama dari setiap kata menjadi huruf besar.
uppercase
Mengubah semua karakter menjadi huruf besar.
lowercase
Mengubah semua karakter menjadi huruf kecil.
letter-spacing: 2px | -2px | normal | inherit;

Note: - Properti letter-spacing digunakan untuk mengatur jarak spasi antara setiap karakter (huruf)
dalam teks.
Dukungan Browser
word-spacing: 5px | -5px | normal | inherit;

Note: - Properti word-spacing digunakan untuk mengatur jarak spasi diantara kata-kata.
Dukungan Browser
line-height: 2 | 25px | 200% | normal | inherit;

Note: - Properti line-height digunakan untuk menentukan tinggi baris
- Value negatif tidak diperbolehkan.
Dukungan Browser
Penjelasan Value:
- number
Angka yang akan dikalikan dengan ukuran font saat ini untuk mengatur tinggi baris. Sebagai
contohnya, dengan menggunakan font-size sebesar 10pt dan line-height sebesar 1.2, spasi antara
garis yang berdekatan akan menjadi 1.2 x 10 = 12pt.
- length
Ketinggian baris tetap dalam px, pt, cm, dll
-%
Sebuah line-height dalam persen akan dikalikan dengan ukuran font saat ini untuk mengatur tinggi
baris.
- normal
Ketinggian baris normal. Ini adalah default
- inherit
Menentukan bahwa value properti line-height harus diwarisi dari elemen induk
vertical-align: baseline | sub | super | top |text-top| middle | bottom | text-bottom | 25px | -25px | 50% |
-50%;
Note: - vertical-align properti digunakan untuk mengatur posisi vertikal dari suatu elemen.
- Menggunakan nilai persentase adalah cara yang baik untuk mengontrol bagaimana gambar
dan konten yang berupa elemen non-text memposisikan diri dengan tulisan pada halaman
web.
Dukungan Browser
Penjelasan Value:
- length
Menaikkan atau menurunkan posisi suatu elemen dengan ukuran tertentu. Value negative
diperbolehkan.
-%
Menaikkan atau menurunkan posisi suatu elemen dalam persen dari properti "line-height". Value
- baseline
Posisi baseline pada elemen sejajar dengan elemen induk. Ini adalah default.
- sub
Posisi elemen seperti subscript.
Contoh Output:
- super
Posisi elemen
seperti superscript.
Contoh Output:
- text-top
Bagian atas elemen sejajar dengan bagian atas elemen induk.
Contoh Output:
- middle
Elemen akan ditempatkan di tengah dari elemen induk.

Contoh Output:
- textbottom
Bagian bawah elemen sejajar dengan bagian bawah elemen induk.
Contoh Output:
- top
Bagian atas elemen sejajar dengan bagian atas dari elemen tertinggi pada baris.
Contoh Output:
- bottom
Bagian bawah elemen sejajar dengan elemen terendah pada baris.
Contoh Output:
- inherit
Menentukan bahwa value vertical-align properti harus diwarisi dari elemen induk.
text-indent: 25px | 2cm | 10% | inherit;

Note: - Properti text-indent digunakan untuk memasukkan/mengeluarkan baris pertama dalam teksblok.
- Value negatif diperbolehkan. Baris pertama akan ke kiri luar jika value negatif.
Penjelasan Value:
- length
Mendefinisikan sebuah masukan (indent) tetap dalam px, pt, cm, em, dll.
-%
Mendefinisikan masukan (indent) dalam % dari lebar elemen induk.
- inherit
Menentukan bahwa nilai dari text-indent properti harus diwarisi dari elemen induk.
text-align: left | center | right | justify | inherit;

Note: - text-align properti menentukan posisi horizontal teks dalam suatu elemen.
direction: ltr | rtl | inherit;

Note: - direction property menentukan arah tulisan teks.
color:
Note: - Properti color menentukan warna teks.
white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit;

Note: - Properti white-space digunakan untuk mengatur spasi di dalam elemen.
Penjelasan Value:
- normal
Jarak spasi di dalam elemen adalah spasi tunggal (extra spasi tidak berpengaruh). Teks akan
membungkus bila diperlukan. Ini adalah default.
- nowrap
Jarak spasi di dalam elemen adalah spasi tunggal (extra spasi tidak berpengaruh). Teks tidak akan
membungkus ke baris berikutnya. Teks akan berpindah ke baris baru sampai ditemui tag <br />.
- pre
Extra spasi/spasi ganda diperbolehkan. Teks hanya akan membungkus apabila terdapat baris baru
(line break). Seperti tag <pre> dalam HTML.
- pre-line
Jarak spasi di dalam elemen adalah spasi tunggal (extra spasi tidak berpengaruh). Teks akan
membungkus bila diperlukan atau terdapat baris baru (line break).
- pre-wrap
Extra spasi/spasi ganda diperbolehkan. Teks
akan membungkus bila diperlukan atau
terdapat baris
baru (line break).
- inherit
Menentukan bahwa value properti white-space harus diwarisi dari elemen induk.
text-shadow: -10px 10px 4px red;

Note: - Properti text-shadow memberlakukan bayangan untuk teks.
Syntax
text-shadow: h-shadow v-shadow blur color;
File CSS
h1 {text-shadow:-10px 10px 4px red;}
File HTML
<h1>Text-shadow effect</h1>
Penjelasan Value:
- h-shadow
Diperlukan. Posisi horisontal bayangan. Nilai negatif diperbolehkan.
- v-shadow
Diperlukan. Posisi bayangan vertikal. Nilai negatif diperbolehkan.
- blur
Opsional. Jarak blur.
- color
Opsional. Warna bayangan.
text-overflow: clip | ellipsis | string;

Note: - Properti text-overflow menentukan apa yang harus terjadi bila teks melebihi elemen.
File CSS
div.test1 {white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
text-overflow:clip}
div.test2 {white-space:nowrap;
width:12em;
overflow:hidden;
text-overflow:ellipsis}
File HTML
<p>Div ini menggunakan "text-overflow:clip":</p>
<div class="test1">Ini adalah beberapa teks panjang yang tidak muat dalam kotak</div>
<p>Div ini menggunakan "text-overflow:ellipsis":</p>
<div class="test2">Ini adalah beberapa teks panjang yang tidak muat dalam kotak</div>
Penjelasan Value:
- clip
Memotong teks.
- ellipsis
Memberikan ellipsis ("...") untuk mewakili teks yang terpotong.
- string
Memberikan string yang diberikan untuk mewakili teks yang terpotong.
Contoh text-overflow dengan efek hover

File CSS
div.test {white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;}
div.test:hover {text-overflow:inherit;
overflow:visible;}
File HTML
<div class="test" style="text-overflow:ellipsis;">
Ini adalah beberapa teks panjang yang tidak muat dalam kotak</div>
<br>
<div class="test" style="text-overflow:clip;">
Ini adalah beberapa teks panjang yang tidak muat dalam kotak</div>
Output
word-wrap: normal | break-word;

Note: - Properti word-wrap memungkinkan kata yang panjang menjadi pecah dan membungkus ke
baris berikutnya.
File CSS
p.test {width:11em;
word-wrap:break-word;}
File HTML
<p class="test"> Paragraf ini berisi kata yang sangat panjang:
KataIniSangatPanjanggggggggggggggggggggggggggggggg.
Kata yang panjang akan pecah dan membungkus ke baris berikutnya.</p>
Output
Penjelasan Value:
- normal
Memecah kata hanya saat diperbolehkan baris baru (break point).
- break-word
Memungkinkan kata dipecah.
2D/3D Transform Properties

Properti transform didukung di Internet Explorer 10, Firefox, dan Opera.
Internet Explorer 9 mendukung dengan alternatif,properti -ms-transform (transform 2D saja).
Safari dan Chrome mendukung dengan alternatif, properti -webkit-transform (transform 3D dan 2D).
Opera mendukung transform 2D saja.
Properti transform menerapkan transformasi 2D atau 3D pada elemen. Properti ini memungkinkan
elemen untuk rotate, scale, move (bergerak), skew dan lain-lain.
Syntax
transform: none | transform-functions;
scale(x,y)
transform: scale(2,4);
Note: - Mendefinisikan sebuah transformasi skala 2D.
- Dengan metode scale(), ukuran elemen dapat diperbesar atau diperkecil, tergantung pada
parameter yang diberikan untuk lebar (sumbu X) dan tinggi (sumbu Y).
File CSS
div {width:100px;
height:75px;
background-color:red;
border:1px solid black;}
div#div2 {margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-webkit-transform:scale(2,4);
/* Safari and Chrome */}
File HTML
<div>Ini ukuran awal</div>
<br>
<div id="div2">ini setelah diberikan properti transform:scale(2,4)</div>
Note: - Value scale(2,4) mengubah lebar menjadi 2 kali ukuran aslinya dan tinggi menjadi 4 kali
ukuran aslinya.
Output
scale3d(x,y,z)
Note: - Mendefinisikan sebuah transformasi dengan skala 3D.
- Belum ada penjelasan dan contoh di W3C.
scaleX (x)
transform: scaleX(2);
Note: - Mendefinisikan sebuah transformasi skala dengan memberikan value untuk sumbu X.
File CSS
div#div2 {transform:scaleX(2);
-ms-transform:scaleX(2); /* IE 9 */
-webkit-transform:scaleX(2); /* Safari and Chrome */}
File HTML
<br>
<div id="div2">ini setelah diberikan properti transform:scaleX(2);</div>
scaleY (y)
transform: scaleY(2);
Note: - Mendefinisikan sebuah transformasi skala dengan
memberikan value untuk sumbu Y.
File CSS
div#div2 {transform:scaleY(2);
-ms-transform:scaleY(2); /* IE 9 */
-webkit-transform:scaleY(2); /* Safari and Chrome */}
File HTML
<br>
<div id="div2">ini setelah diberikan properti transform:scaleY(2);</div>
scaleZ (z)
Note: - Mendefinisikan sebuah transformasi skala 3D dengan
memberikan value untuk sumbu Z.
rotate(angle)
transform: rotate(90deg);
Note: - Mendefinisikan rotasi 2D, sudut ditetapkan dalam parameter.
- Dengan metode rotate(), elemen berputar searah jarum jam pada derajat tertentu. Nilai
negatif diperbolehkan dan elemen berputar berlawanan arah jarum jam.
File CSS
div#div2 {transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Safari and Chrome */}
File HTML
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
rotate3d (x,y,z,angle)
Note: - Mendefinisikan rotasi 3D.
rotateX (angle)
transform: rotateX(180deg);
Note: - Mendefinisikan rotasi 3D sepanjang sumbu X.
File CSS
div#div2 {transform:rotateX(180deg);
-ms-transform:rotateX(180deg); /* IE 9 */
-webkit-transform:rotateX(180deg); /* Safari and Chrome */}
File HTML
<div>My DIV</div>
<br>
<div id="div2">My DIV</div>
rotateY (angle)
transform: rotateY(180deg);
Note: - Mendefinisikan rotasi 3D sepanjang sumbu Y.
File CSS
div#div2 {transform:rotateY(180deg);
-ms-transform:rotateY(180deg); /* IE 9 */
-webkit-transform:rotateY(180deg); /* Safari and Chrome */}
File HTML
<div>My DIV</div>
<br>
rotateZ (angle)
transform: rotateZ(180deg);
Note: - Mendefinisikan rotasi 3D sepanjang sumbu Z.
File CSS
div#div2 {transform:rotateZ(180deg);
-ms-transform:rotateZ(180deg); /* IE 9 */
-webkit-transform:rotateZ(180deg); /* Safari and Chrome */}
File HTML
<div>My DIV</div>
<br>
translate (x,y)
transform: translate(20px,10px);
Note: - Mendefinisikan 2D translation (Memindahkan Objek).
- Dengan metode translate(), elemen bergerak dari posisi awal, tergantung parameter yang
diberikan pada posisi kiri (sumbu X) dan atas (sumbu Y).
Contoh Program dan Output
translate3d (x,y,z)
Note: - Mendefinisikan 3D translation (Memindahkan Objek).
translateX (x)
transform: translateX(-25px);
Note: - Mendefinisikan translation, hanya menggunakan value sumbu X (Memindahkan Objek).
translateY (y)
transform: translateY(10px);
Note: - Mendefinisikan translation, hanya menggunakan value sumbu Y (Memindahkan Objek).
translateZ (z)
Note: - Mendefinisikan 3D translation, hanya menggunakan value sumbu Z (Memindahkan Objek).
skew (x-angle,y-angle)
transform: skew(20deg,20deg);
Note: - Mendefinisikan sebuah transformasi skew (miring) 2D sepanjang sumbu X dan Y.
- Dengan metode skew(), elemen berubah dalam sudut tertentu, tergantung pada parameter
yang diberikan untuk garis horizontal (sumbu X) dan vertikal (sumbu Y).
File CSS
div#div1 {transform:skew(20deg,20deg);
-ms-transform:skew(20deg,20deg); /* IE 9 */
-webkit-transform:skew(20deg,20deg); /* Safari and Chrome */}
File HTML
<div id="div1">My DIV 1</div>
skewX (angle)
transform: skewX(10deg);
Note: - Mendefinisikan sebuah transformasi skew (miring) 2D sepanjang
sumbu X.
File CSS
div#div1 {transform:skewX(10deg);
-ms-transform:skewX(10deg); /* IE 9 */
-webkit-transform:skewX(10deg); /* Safari and Chrome */}
div#div2 {transform:skewX(170deg);
-ms-transform:skewX(170deg); /* IE 9 */
-webkit-transform:skewX(170deg); /* Safari and Chrome */}
File HTML
<br>
skewY (angle)
transform: skewY(10deg);
Note: - Mendefinisikan sebuah transformasi skew (miring) 2D sepanjang
Y.
File CSS
div#div1 {transform:skewY(10deg);
-ms-transform:skewY(10deg); /* IE 9 */
-webkit-transform:skewY(10deg); /* Safari and Chrome */}
div#div2 {transform:skewY(170deg);
-ms-transform:skewY(170deg); /* IE 9 */
sumbu
-webkit-transform:skewY(170deg); /* Safari and Chrome */}

File HTML
<br>
matrix (n,n,n,n,n,n)
transform: matrix(0.586,0.8,-0.8,0.586,0,0);
Note: - Mendefinisikan sebuah transformasi 2D, menggunakan matrix enam nilai (value).
- Metode matrix() menggabungkan semua metode transformasi 2D menjadi satu.
- Metode matrix mengambil enam parameter, yang berisi fungsi-fungsi matematika, yang
memungkinkan elemen untuk: rotate, scale, move (translate) dan skew.
matrix3d (n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)
Note: - Mendefinisikan sebuah transformasi 3D, menggunakan matrix 4x4 dari 16 nilai (value).
Properti transform-origin
transform-origin:20% 40%;
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
Dukungan Browser
Properti transform-origin didukung di Internet Explorer 10, Firefox, dan Opera.
Internet Explorer 9 mendukung dengan alternatif, properti -ms-transform-origin, tapi hanya untuk 2Dtransforms.
Safari dan Chrome mendukung dengan alternatif,properti -webkit-transform-origin, pada 2D-dan 3Dtransforms.
Opera mendukung 2D transforms saja.
Note: - Properti transform-origin memungkinkan untuk mengubah posisi pada elemen transform.
- Elemen transform 2D dapat mengubah sumbu x dan y elemen. Elemen transform 3D juga
dapat mengubah sumbu z elemen.
- Properti ini harus digunakan bersama dengan properti transform.
Untuk lebih memahami properti transform-origin, lihat demo.
Untuk lebih memahami properti ini untuk transformasi 3D , lihat demo.
Syntax
transform-origin: x-axis y-axis z-axis;
Penjelasan Value:
Property Value
x-axis
left
center
right
length
%
y-axis
top
center
bottom
length
%
z-axis
length
Description
Defining where the view is placed at the x-axis. Possible values:
Defining where the view is placed at the y-axis. Possible values:
Defining where the view is placed at the z-axis. Possible values:
Properti transform-style
transform-style: flat | preserve-3d;
-webkit-transform-style: flat | preserve-3d; /* Safari and Chrome */
Dukungan Browser
Properti transform-style didukung dalam Firefox.
Chrome dan Safari mendukung dengan alternatif, properti -webkit-transform-style.
Note: - Properti transform-style menentukan bagaimana elemen bersarang (nested) ditempatkan
dalam ruang 3D.
- Properti ini harus digunakan bersama dengan properti transform.
Untuk pengguna Chrome dan Safari: Untuk lebih memahami properti transform-style, lihat demo.
Syntax
transform-style: flat | preserve-3d;
Penjelasan Value:
- flat
Elemen anak tidak akan mempertahankan posisi 3D.
- preserve-3d
Elemen anak akan mempertahankan posisi 3D.
Properti backface-visibility
backface-visibility: visible | hidden;
-webkit-backface-visibility: visible | hidden; /* Chrome and Safari */
-moz-backface-visibility: visible | hidden; /* Firefox */
-ms-backface-visibility: visible | hidden; /* Internet Explorer */
Dukungan Browser
Properti backface-visibility tidak didukung dalam salah satu browser utama.

Internet Explorer 10 mendukung dengan alternatif, properti -ms-backface-visibility.
Firefox mendukung dengan alternatif, properti -moz-backface-visibility.
Safari dan Chrome mendukung dengan alternatif, properti-webkit-backface-visibility.
Properti -ms-backface-visibility tidak didukung di Internet Explorer 9 dan versi sebelumnya.
Note: - Properti backface-visibility mendefinisikan apakah elemen harus terlihat atau tidak bila tidak
menghadap layar.
- Properti ini berguna saat elemen diputar dan tidak ingin melihat bagian belakangnya.
Pengguna Chrome / Safari : Untuk lebih memahami properti ini, lihat demo.
Syntax
backface-visibility: visible | hidden;
Penjelasan Value:
- visible
Bagian belakang terlihat.
- hidden
Bagian belakang tidak terlihat.
Transition Properties
transition: width 2s linear 1s;
-webkit-transition: width 2s linear 1s; /* Safari */
Dukungan Browser
Properti transition didukung di Internet Explorer 10, Firefox, Opera dan Chrome.
Safari mendukung dengan alternatif, properti -webkit-transition.
Properti transition tidak didukung di Internet Explorer 9 dan versi sebelumnya.
Note: - Properti transition adalah shorthand properti untuk empat properti transition:
transition-property, transition-duration, transition-timing-function, and transition-delay.
- Selalu menentukan properti transition-duration, jika durasi adalah 0, maka transisi tidak akan
memiliki efek.
Syntax
transition: property duration timing-function delay;
File CSS
div {width:100px;
height:100px;
background:red;
transition:width 2s linear 1s;
-webkit-transition:width 2s linear 1s; /* Safari */}
div:hover {width:300px;}
File HTML
<div></div>
Output
transition-property: width, height, background-color:green, opacity;

-webkit-transition-property: width,height; /* Safari and Chrome */
Note: - Properti transition-property menentukan nama properti CSS untuk efek transisi (efek transisi
akan dimulai ketika perubahan properti CSS tertentu).
- Tip: Sebuah efek transisi biasanya bisa terjadi saat pengguna hover atas elemen.
File CSS
div {width:100px;
height:100px;
background-color:red;
transition-property:width,height;
transition-duration:2s;
/* Safari */
-webkit-transition-property:width,height;
-webkit-transition-duration:2s;}
div:hover {width:300px;
height:300px;
background-color:green;}
File HTML
<div></div>
Syntax
transition-property: none | all | property;
Penjelasan Value:
- none
Tidak ada properti akan mendapatkan efek transisi.
- all
Semua properti akan mendapatkan efek transisi.
- property
Mendefinisikan daftar dari nama properti CSS dengan dipisahkan tanda koma untuk efek transisi.
transition-duration: 5s;
-webkit-transition-duration: 5s; /* Safari */
Note: - Properti transition-duration menentukan berapa detik (s) atau milidetik (ms) efek transisi
diperlukan untuk menyelesaikan.
Syntax
transition-duration: time;
Penjelasan Value:
- time
Menentukan berapa detik atau milidetik efek transisi diperlukan untuk menyelesaikan. Nilai default
adalah 0, yang berarti tidak akan ada efek. 1 ms = 0,001s.
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

Note: - Properti transition-timing-function menentukan kurva kecepatan efek transisi.
- Properti ini memungkinkan efek transisi untuk mengubah kecepatan dari durasinya.
File CSS
div {width:100px;
height:50px;
background:red;
color:white;
font-weight:bold;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
#div6 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
/* Safari */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
#div6 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
div:hover {width:300px;}
File HTML
<div id="div1" style="top:100px">linear</div>
<div id="div2" style="top:150px">ease</div>
<div id="div3" style="top:200px">ease-in</div>
<div id="div4" style="top:250px">ease-out</div>
<div id="div5" style="top:300px">ease-in-out</div>
<div id="div6" style="top:350px">cubic-bezier(ease)</div>
Output
Syntax
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
Penjelasan Value:
- linear
Menentukan efek transisi dengan kecepatan yang sama dari awal sampai akhir (setara dengan
cubic-bezier (0,0,1,1)).
- ease
Menentukan efek transisi dengan awal yang lambat, kemudian cepat, kemudian berakhir perlahan
(setara dengan cubic-bezier (0.25,0.1,0.25,1)).
- ease-in
Menentukan efek transisi dengan awal yang lambat (setara dengan cubic-bezier (0.42,0,1,1)).
- ease-out
Menentukan efek transisi dengan akhir yang lambat (setara dengan cubic-bezier (0,0,0.58,1)).
- ease-in-out
Menentukan efek transisi dengan awal dan akhir yang lambat (setara dengan cubic-bezier
(0.42,0,0.58,1)).
- cubic-bezier(n,n,n,n)
Tentukan nilai-nilai Anda sendiri dalam fungsi cubic-bezier. Nilai yang mungkin adalah nilai numerik
dari 0 ke 1.
transition-delay:2s;
-webkit-transition-delay:2s;
Note: - Properti transition-delay menentukan kapan efek transisi akan dimulai.
- Value transition-delay didefinisikan dalam detik (s) atau milidetik (ms).
Syntax
transition-delay: time;
Penjelasan Value:
- time
Menentukan jumlah detik atau milidetik untuk menunggu sebelum efek transisi akan mulai.
User-interface Properties
box-sizing: content-box|border-box|inherit:
Note: - Properti box-sizing memungkinkan untuk menentukan beberapa elemen agar sesuai dengan
suatu daerah tertentu.
Misalnya, jika Anda ingin dua border box berdampingan, dapat dicapai melalui pengaturan box-sizing
dengan "border-box". Hal ini akan memaksa browser untuk membuat kotak (box) dengan lebar dan
tinggi yang ditentukan dan menempatkan border dan padding di dalam kotak (box).
Penjelasan Value:
- content-box
Ini adalah perilaku lebar (width) dan tinggi (height) yang ditetapkan oleh CSS2.1. Yang ditentukan
lebar dan tinggi (dan properti min / max) berlaku untuk lebar dan tinggi masing-masing dari isi kotak
(content box) dari elemen. Elemen padding dan border diletakkan dan ditarik diluar lebar dan tinggi
yang ditentukan.
- border-box
Yang ditentukan lebar (width) dan tinggi (height) (dan properti min / max) pada elemen ini
menentukan elemen border box. Artinya, setiap padding atau border ini ditetapkan pada elemen,
diletakkan dan ditarik di dalam lebar dan tinggi yang ditentukan. Lebar dan tinggi konten dihitung
dengan mengurangkan lebar border dan padding dari sisi masing-masing pada properti 'width' dan
'height' yang ditentukan.
- inherit
Menentukan bahwa nilai properti box-sizing harus diwarisi dari elemen induk.
Contoh penggunaan box-sizing:border-box; Step by Step

File CSS
div.container {width:30em;
border:1em solid;}
div.box {box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;}
File HTML
<div class="container">
<div class="box">Div ini menempati setengah kiri.</div>
<div class="box">Div ini menempati setengah kanan.</div>
</div>
Output
File CSS
border:1em solid;}
div.box {width:50%;
float:left;}
File HTML
</div>
Output
File CSS
border:1em solid;}
div.box {width:50%;
border:1em solid red;}
File HTML
</div>
Output
Contoh penggunaan box-sizing:content-box;

File CSS
border:1em solid;}
div.box {box-sizing:content-box;
-moz-box-sizing:content-box; /* Firefox */
width:50%;
float:left;}
File HTML
Output
resize: none | both | horizontal | vertical:
Note: - Properti resize menentukan apakah ada atau tidak elemen yang dapat di resizable oleh
pengguna.
- Properti resize berlaku untuk elemen-elemen yang value-nya overflow, selain dari "visible".
Contohnya mungkin properti: overflow-x, overflow-y, overflow, text-overflow
File CSS
div {border:2px solid;
width:300px;
resize:horizontal;
overflow:auto;}
File HTML
<div>Properti resize menentukan apakah ada atau tidak elemen yang dapat di resizable oleh
pengguna.</div>
Output
Penjelasan Value:
- none
Pengguna tidak dapat mengubah ukuran elemen.
- both
Pengguna dapat menyesuaikan baik tinggi dan lebar dari elemen.
- horizontal
Pengguna dapat menyesuaikan lebar elemen.
- vertical
Pengguna dapat menyesuaikan ketinggian elemen.
Validasi File HTML dan CSS

http://validator.w3.org/
SELECTOR CSS
Atribut class
p.tanya {color:red;}
p.jawab {color:blue;}
.tanya {color:red;}
.jawab {color:blue;}
<p class="tanya">Apakah fungsi atribut "class"?</p>
<p class="jawab">Atribut "class" menentukan satu atau lebih classnames untuk sebuah elemen.</p>
Syntax:
<elemen class="classname">
Note: - Atribut class menentukan satu atau lebih classnames untuk sebuah elemen.
- Atribut class juga dapat digunakan oleh JavaScript (melalui HTML DOM) untuk membuat
perubahan pada elemen HTML
- Dalam HTML5, atribut class dapat digunakan pada setiap elemen HTML (akan memvalidasi
pada setiap elemen HTML. Namun, belum tentu berguna).
- Dalam HTML 4.01, atribut class tidak dapat digunakan dengan: <base>, <head>, <html>,
<meta>, <param>, <script>, <style> dan <title>.
Aturan penulisan value dari atribut class:

- Harus dimulai dengan huruf A-Z atau a-z.
- Dapat diikuti oleh: huruf (A-Z, a-z), angka (0-9), tanda hubung ("-") dan garis bawah ("_").
- Jika terdapat lebih dari satu classname dalam sebuah elemen, pisahkan dengan spasi.
- Dalam HTML, semua value bersifat case-sensitive.
Atribut id
#tanya {color:red;}
#jawab {color:blue;}
p#tanya {color:red;}
p#jawab {color:blue;}
<p id="tanya">Apakah fungsi atribut "id"?</p>
<p id="jawab">Atribut "id" menentukan sebuah id unik untuk sebuah elemen HTML (value harus unik
dalam dokumen HTML).</p>
Syntax:
<elemen id="id">
Note: - Atribut id menentukan sebuah id unik untuk sebuah elemen HTML (value harus unik dalam
dokumen HTML).
- Atribut id juga dapat digunakan oleh JavaScript (melalui HTML DOM) untuk membuat
perubahan pada elemen HTML
- Dalam HTML5, atribut id dapat digunakan pada setiap elemen HTML (akan memvalidasi pada
setiap elemen HTML. Namun, belum tentu berguna).
- Dalam HTML 4.01, atribut id tidak dapat digunakan dengan: <base>, <head>, <html>,
<meta>, <param>, <script>, <style> dan <title>.
Aturan penulisan value dari atribut id:

- Harus mengandung setidaknya satu karakter
- Harus tidak mengandung karakter spasi
- Dalam HTML, semua
nilai bersifat casesensitive
Perbedaan atribut class dan id:

- Atribut id, value nya harus unik untuk sebuah elemen HTML. Sedangkan atribut class, dapat terdiri
dari satu atau lebih value untuk sebuah elemen.
- Atribut id digunakan untuk membeda-bedakan posisi CSS (CSS positioning) yang satu dengan yang
lain
Selektor Turunan (Descendant)

File HTML:
<h1><strong>Di dalam selektor h1 strong</strong><br />
Di luar selektor turunan strong</h1>
<strong>Di luar selektor induk h1</strong>
File CSS:
h1 strong {color: red;}
File HTML:
<ul>
<li>Di dalam selektor ul li, tetapi di luar selektor strong</li>
<li><strong>Di dalam selektor ul li strong</strong></li>
</ul>
<strong>Di dalam selektor strong tapi, di luar selektor ul li</strong>
File CSS:
ul li strong {color: red;}
File HTML:
<p class="tanya"> Di dalam selektor class p.tanya tapi diluar turunan strong
<br />
<strong>Di dalam selektor yang lengkap, maka tulisan berubah menjadi merah</strong></p>
File CSS:
p.tanya strong {color: red;}
Note: - Fungsi utamanya yaitu memilih elemen web secara lebih spesifik, yaitu memilih sebuah
elemen dalam web yang berisi elemen web lain yang juga terpilih, yang kemudian
tampilannya akan diubah sesuai dengan yang dideklarasikan pada file CSS sebelumnya.
Dengan ini anda bisa melakukan perubahan tampilan lebih mendetail, bukan melakukan
perubahan pada web yang berpengaruh pada seluruh halaman web.
Selektor Link Pseudo Class

a:link {color:green}
a:hover {color:red}
a:active {color:blue}
a:visited {color:yellow}
Selektor untuk link pada saat keadaan normal (belum dikunjungi)

Selektor untuk link pada saat mouse melayang di atas link
Selektor untuk link pada saat link sedang di klik
Selektor untuk link pada saat link telah dikunjungi
Urutan selektor
link pseudo
class seperti
berikut ini (Menurut Buku):
a {}
a:link {}
a:visited {}
a:hover {}
a:active {}
Selektor Dynamic Pseudo Class

Selektor dynamic pseudo class merupakan perluasan dari pseudo class sebelumnya. Adapun
penjelasan selectornya sebagai berikut:
- :hover ketika mouse berada di atas elemen yang terpilih
- :active ketika mouse sedang meng-klik elemen yang terpilih
- :focus ketika elemen yang terpilih menerima peristiwa keyboard atau input pengguna
File HTML:
<p class="tes">Ini adalah paragraf yang diberi efek Selektor Dynamic Pseudo Class</p>
File CSS:
p.tes:hover{color:red;}
File HTML:
input:focus {backgroundcolor:yellow;}
File CSS:
<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input
type="text"
name="lastname" />
</form>
Selektor Pseudo Elemen

File HTML:
<p>:first-line digunakan untuk <br>
menentukan format baris pertama dari suatu elemen.</p>
File CSS:
p:first-line {color:red;}
Note: - :first-line digunakan memformat baris pertama dari suatu elemen.
File HTML:
<p>first-letter digunakan memformat huruf pertama dari suatu elemen.</p>
File CSS:
p:first-letter {font-size:50;}
Note: - :first- letter digunakan memformat huruf pertama dari suatu elemen.
File HTML:
<p class="tes">Konten asli dalam halaman web</p>
File CSS:
p.tes:before {content :"Konten yang tergenerate (muncul) secara otomatis | ";}
Note: - :before digunakan untuk memunculkan konten secara otomatis pada halaman web yang
kemudian diletakkan pada awal sebuah elemen.
File HTML:
<p class="tes">Konten asli dalam halaman web</p>
File CSS:
p.tes:after {content :" | Konten yang tergenerate (muncul) secara otomatis";}
Note: - :after digunakan untuk memunculkan konten secara otomatis pada halaman web yang
kemudian diletakkan pada akhir sebuah elemen.
Selektor Child
Note: - Selektor Child hanya akan memformat yang membawahi satu anak saja dari selektor induk.
- Elemen yang tidak langsung anak dari orangtua, tidak dipilih.
File CSS:
div>p {background-color:yellow;}
File HTML:
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<div>
<span><p>I will not be
styled.</p></span>
</div>
<p>My best friend is
Mickey.</p>
Selector :first-child
selector :first-child digunakan untuk memilih selector yang ditentukan, hanya jika itu adalah anak
pertama dari induknya.
File CSS:
p:first-child {color:blue;}
File HTML:
<body>
<p>This is some text.</p>

<p>This is some text.</p>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
File CSS:
p:first-child {background-color:yellow;}
File HTML:
<body>
<p>This paragraph is the first child of its
parent (body).</p>
<p>This paragraph is not the first child
of its parent.</p>
<div>
<p>This paragraph is the first child of its parent (div).</p>
<p>This paragraph is not the first child of its parent.</p>
</div>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
Selektor Adjacent (Berdekatan)

Selektor Adjacent (Berdekatan) digunakan untuk memilih sebuah elemen sesuai dengan elemen
yang berdekatan dengan elemen tersebut dan berada d dalam sebuah induk elemen yang sama.
h2+p {background-color:red;}
div+p {background-color:yellow;}
<body>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
<p>I will not be styled.</p>
</body>
Selector
[attribute^$*=value]
Selector [attribute^=value] cocok dengan setiap elemen yang value atribut-nya dimulai dengan nilai
yang telah ditentukan.
File CSS
div[class^="test"] {background:yellow;}
File HTML
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>
Selector [attribute$=value] cocok dengan setiap elemen yang value atribut-nya berakhir dengan nilai
File CSS
div[class$="test"] {background:yellow;}
File HTML
File CSS
[class$="test"] {background:#ffff00;}
File HTML
Selector [attribute*=value] cocok dengan setiap elemen yang value atribut-nya mengandung nilai
File CSS
div[class*="test"] {background:#ffff00;}
File HTML
<p class="test">This is some text in a paragraph.</div>
CSS Mobile Profile 2.0

Spesifikasi ini mendefinisikan secara umum subset dari CSS 2.1 [CSS21] yang dianggap dasar untuk
interoperabilitas antara implementasi CSS pada perangkat terbatas (misalnya ponsel). Tujuannya
adalah tidak untuk menghasilkan profil CSS sesuai dengan spesifikasi lengkap, melainkan untuk
memastikan bahwa implementasi bahwa karena keterbatasan platform yang tidak dapat mendukung
seluruh spesifikasi menerapkan subset umum yang interoperable tidak hanya antara implementasi
dibatasi tetapi juga dengan orang yang lengkap.
Dokumen ini menetapkan profil CSS yang pada umumnya didasarkan pada CSS 2.1 [CSS21] , tetapi
membutuhkan fitur serta baru dari CSS 3. Selain dokumen mendefinisikan optional set fitur, yang
disarankan untuk diimplementasikan oleh lebih agen pengguna tingkat lanjut.
Selectors
@-rules
Properti yang didefinisikan optional disarankan untuk diimplementasikan oleh agen pengguna tingkat
lanjut.
Properties
Properti yang didefinisikan optional disarankan untuk diimplementasikan oleh agen pengguna tingkat
lanjut.
Property
Syntax (if different from CSS)
Conformance
background-color
REQUIRED
background-image
REQUIRED
background-repeat
REQUIRED
background-attachment
REQUIRED
background-position
top | center | bottom | left | right | inherit
REQUIRED
background
REQUIRED
border-top-width
REQUIRED
border-right-width
border-bottom-width
border-left-width
border-width
REQUIRED
border-top-color
REQUIRED
border-right-color
border-bottom-color
border-left-color
border-color
border-top-style
REQUIRED
none | solid | dashed | dotted | inherit
REQUIRED
REQUIRED
border-right-style
border-bottom-style
border-left-style
border-style
border-top
REQUIRED
border-right
border-bottom
border-left
border
REQUIRED
bottom
OPTIONAL
clear
REQUIRED
color
REQUIRED
display
inline | block | list-item | none | inherit
REQUIRED
float
REQUIRED
font-family
REQUIRED
font-style
REQUIRED
font-variant
REQUIRED
font-weight
REQUIRED
font-size
<absolute-size> | <relative-size> | inherit
REQUIRED
font
REQUIRED
height
REQUIRED
left
OPTIONAL
list-style-type
disc | circle | square | decimal | lower-roman | upper-
REQUIRED
roman | lower-alpha | upper-alpha | none | inherit
list-style-image
REQUIRED
list-style
REQUIRED
margin-top
REQUIRED
margin-right
margin-bottom
margin-left
margin
REQUIRED
marquee-
REQUIRED
direction [CSS3BOX]
marquee-
REQUIRED
loop [CSS3BOX]
marquee-
REQUIRED
speed [CSS3BOX]
marqueestyle [CSS3BOX]
REQUIRED
max-height
REQUIRED
max-width
REQUIRED
min-height
REQUIRED
min-width
REQUIRED
outline-color
OPTIONAL
outline-style
OPTIONAL
outline-width
OPTIONAL
outline
OPTIONAL
overflow [CSS3BOX]
auto
REQUIRED
overflow-
marquee
REQUIRED
style [CSS3BOX]
padding-top
REQUIRED
padding-right
padding-bottom
padding-left
padding
REQUIRED
position
OPTIONAL
right
OPTIONAL
text-indent
REQUIRED
text-align
REQUIRED
text-decoration
none | blink |underline | inherit
REQUIRED
text-transform
REQUIRED
top
OPTIONAL
vertical-align
top | middle | bottom | baseline | inherit
REQUIRED
visibility
REQUIRED
white-space
REQUIRED
width
REQUIRED
z-index
OPTIONAL
Value Property
Length (Nilai Panjang) / CSS Units:
-%
Persentase. Nilai persentase (%) sebuah elemen dihitung berdasarkan elemen induknya.
- in
inci
- cm
sentimeter
- mm
milimeter
- em
1em sama dengan ukuran font saat ini. 2em berarti 2 kali ukuran font saat ini. Misalnya, jika elemen
ditampilkan dengan font 12 pt, maka '2 em 'adalah 24 pt. Value 'em' adalah unit yang sangat
berguna dalam CSS, karena dapat beradaptasi secara otomatis dengan font yang pembaca
gunakan
- ex
1ex adalah x-height font (x-height biasanya sekitar setengah ukuran font)
- pt
point (1 pt adalah sama dengan 1/72 inci)
- pc
pica (1 pc adalah sama dengan 12 point)
- px
pixel (titik pada layar komputer)
CSS Color Names (Nama Warna)

Nama Warna Didukung oleh Semua Browser
140 nama warna (color names) yang didefinisikan dalam spesifikasi warna HTML dan CSS (17
warna standar ditambah 123 lebih). Tabel di bawah adalah daftar nama warna (color names), disertai
dengan nilai-nilai heksadesimalnya.
Terdapat 17 warna standar yaitu: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
orange, purple, red, silver, teal, white dan yellow.
Aqua
#00FFFF
Shades
Mix
Black
#000000
Shades
Mix
Blue
#0000FF
Shades
Mix
Fuchsia
#FF00FF
Shades
Mix
Gray
#808080
Green
#008000
Shades
Mix
Lime
#00FF00
Shades
Mix
Maroon
#800000
Shades
Mix
Navy
#000080
Shades
Mix
Olive
#808000
Shades
Mix
Orange
#FFA500
Shades
Mix
Purple
#800080
Shades
Mix
Red
#FF0000
Shades
Mix
Shades
Mix
Silver
#C0C0C0
Shades
Mix
Teal
#008080
Shades
Mix
White
#FFFFFF
Shades
Mix
Yellow
#FFFF00
Shades
Mix
Klik pada nama warna (atau nilai hex) untuk melihat warna sebagai latar belakang warna bersama
dengan warna teks yang berbeda:
Color Name
HEX
AliceBlue
Color
Shades
Mix
#F0F8FF
Shades
Mix
AntiqueWhite
#FAEBD7
Shades
Mix
Aqua
#00FFFF
Shades
Mix
Aquamarine
#7FFFD4
Shades
Mix
Azure
#F0FFFF
Shades
Mix
Beige
#F5F5DC
Shades
Mix
Bisque
#FFE4C4
Shades
Mix
Black
#000000
Shades
Mix
BlanchedAlmond
#FFEBCD
Shades
Mix
Blue
#0000FF
Shades
Mix
BlueViolet
#8A2BE2
Shades
Mix
Brown
#A52A2A
Shades
Mix
BurlyWood
#DEB887
Shades
Mix
CadetBlue
#5F9EA0
Shades
Mix
Chartreuse
#7FFF00
Shades
Mix
Chocolate
#D2691E
Shades
Mix
Coral
#FF7F50
Shades
Mix
CornflowerBlue
#6495ED
Shades
Mix
Cornsilk
#FFF8DC
Shades
Mix
Crimson
#DC143C
Shades
Mix
Cyan
#00FFFF
Shades
Mix
DarkBlue
#00008B
Shades
Mix
DarkCyan
#008B8B
Shades
Mix
DarkGoldenRod
#B8860B
Shades
Mix
DarkGray
#A9A9A9
Shades
Mix
DarkGreen
#006400
Shades
Mix
DarkKhaki
#BDB76B
Shades
Mix
DarkMagenta
#8B008B
Shades
Mix
DarkOliveGreen
#556B2F
Shades
Mix
DarkOrange
#FF8C00
Shades
Mix
DarkOrchid
#9932CC
Shades
Mix
DarkRed
#8B0000
Shades
Mix
DarkSalmon
#E9967A
Shades
Mix
DarkSeaGreen
#8FBC8F
Shades
Mix
DarkSlateBlue
#483D8B
Shades
Mix
DarkSlateGray
#2F4F4F
Shades
Mix
DarkTurquoise
#00CED1
Shades
Mix
DarkViolet
#9400D3
Shades
Mix
DeepPink
#FF1493
Shades
Mix
DeepSkyBlue
#00BFFF
Shades
Mix
DimGray
#696969
Shades
Mix
DodgerBlue
#1E90FF
Shades
Mix
FireBrick
#B22222
Shades
Mix
FloralWhite
#FFFAF0
Shades
Mix
ForestGreen
#228B22
Shades
Mix
Fuchsia
#FF00FF
Shades
Mix
Gainsboro
#DCDCDC
Shades
Mix
GhostWhite
#F8F8FF
Shades
Mix
Gold
#FFD700
Shades
Mix
GoldenRod
#DAA520
Shades
Mix
Gray
#808080
Shades
Mix
Green
#008000
Shades
Mix
GreenYellow
#ADFF2F
Shades
Mix
HoneyDew
#F0FFF0
Shades
Mix
HotPink
#FF69B4
Shades
Mix
IndianRed
#CD5C5C
Shades
Mix
Indigo
#4B0082
Shades
Mix
Ivory
#FFFFF0
Shades
Mix
Khaki
#F0E68C
Shades
Mix
Lavender
#E6E6FA
Shades
Mix
LavenderBlush
#FFF0F5
Shades
Mix
LawnGreen
#7CFC00
Shades
Mix
LemonChiffon
#FFFACD
Shades
Mix
LightBlue
#ADD8E6
Shades
Mix
LightCoral
#F08080
Shades
Mix
LightCyan
#E0FFFF
Shades
Mix
LightGoldenRodYellow
#FAFAD2
Shades
Mix
LightGray
#D3D3D3
Shades
Mix
LightGreen
#90EE90
Shades
Mix
LightPink
#FFB6C1
Shades
Mix
LightSalmon
#FFA07A
Shades
Mix
LightSeaGreen
#20B2AA
Shades
Mix
LightSkyBlue
#87CEFA
Shades
Mix
LightSlateGray
#778899
Shades
Mix
LightSteelBlue
#B0C4DE
Shades
Mix
LightYellow
#FFFFE0
Shades
Mix
Lime
#00FF00
Shades
Mix
LimeGreen
#32CD32
Shades
Mix
Linen
#FAF0E6
Shades
Mix
Magenta
#FF00FF
Shades
Mix
Maroon
#800000
Shades
Mix
MediumAquaMarine
#66CDAA
Shades
Mix
MediumBlue
#0000CD
Shades
Mix
MediumOrchid
#BA55D3
Shades
Mix
MediumPurple
#9370DB
Shades
Mix
MediumSeaGreen
#3CB371
Shades
Mix
MediumSlateBlue
#7B68EE
Shades
Mix
MediumSpringGreen
#00FA9A
Shades
Mix
MediumTurquoise
#48D1CC
Shades
Mix
MediumVioletRed
#C71585
Shades
Mix
MidnightBlue
#191970
Shades
Mix
MintCream
#F5FFFA
Shades
Mix
MistyRose
#FFE4E1
Shades
Mix
Moccasin
#FFE4B5
Shades
Mix
NavajoWhite
#FFDEAD
Shades
Mix
Navy
#000080
Shades
Mix
OldLace
#FDF5E6
Shades
Mix
Olive
#808000
Shades
Mix
OliveDrab
#6B8E23
Shades
Mix
Orange
#FFA500
Shades
Mix
OrangeRed
#FF4500
Shades
Mix
Orchid
#DA70D6
Shades
Mix
PaleGoldenRod
#EEE8AA
Shades
Mix
PaleGreen
#98FB98
Shades
Mix
PaleTurquoise
#AFEEEE
Shades
Mix
PaleVioletRed
#DB7093
Shades
Mix
PapayaWhip
#FFEFD5
Shades
Mix
PeachPuff
#FFDAB9
Shades
Mix
Peru
#CD853F
Shades
Mix
Pink
#FFC0CB
Shades
Mix
Plum
#DDA0DD
Shades
Mix
PowderBlue
#B0E0E6
Shades
Mix
Purple
#800080
Shades
Mix
Red
#FF0000
Shades
Mix
RosyBrown
#BC8F8F
Shades
Mix
RoyalBlue
#4169E1
Shades
Mix
SaddleBrown
#8B4513
Shades
Mix
Salmon
#FA8072
Shades
Mix
SandyBrown
#F4A460
Shades
Mix
SeaGreen
#2E8B57
Shades
Mix
SeaShell
#FFF5EE
Shades
Mix
Sienna
#A0522D
Shades
Mix
Silver
#C0C0C0
Shades
Mix
SkyBlue
#87CEEB
Shades
Mix
SlateBlue
#6A5ACD
Shades
Mix
SlateGray
#708090
Shades
Mix
Snow
#FFFAFA
Shades
Mix
SpringGreen
#00FF7F
Shades
Mix
SteelBlue
#4682B4
Shades
Mix
Tan
#D2B48C
Shades
Mix
Teal
#008080
Shades
Mix
Thistle
#D8BFD8
Shades
Mix
Tomato
#FF6347
Shades
Mix
Turquoise
#40E0D0
Shades
Mix
Violet
#EE82EE
Shades
Mix
Wheat
#F5DEB3
Shades
Mix
White
#FFFFFF
Shades
Mix
WhiteSmoke
#F5F5F5
Shades
Mix
Yellow
#FFFF00
Shades
Mix
YellowGreen
#9ACD32
Shades
Mix
Hexadecimal Colors
Nilai warna heksadesimal yang didukung di semua browser utama.
Sebuah warna heksadesimal ditentukan dengan: # RRGGBB, dimana RR (red), GG (green) dan BB
(blue) bilangan bulat heksadesimal menentukan komponen warna. Semua nilai harus diantara 0 dan
FF.
Sebagai contoh, #0000ff nilai diberikan sebagai biru, karena komponen biru diatur ke nilai tertinggi (ff)
dan yang lainnya diatur ke 0.
RGB Colors
Nilai warna RGB yang didukung di semua browser utama.
Sebuah nilai warna RGB ditentukan dengan: rgb (red, green, blue). Setiap parameter (red, green dan
blue) mendefinisikan intensitas warna dan dapat menjadi integer antara 0 dan 255 atau nilai
persentase (dari 0% sampai 100%).
Misalnya, rgb (0,0,255) nilai yang diberikan sebagai biru, karena parameter biru diatur ke nilai
tertinggi (255) dan yang lainnya diatur ke 0.
Juga, nilai berikut menentukan warna yang sama: rgb (0,0,255) dan rgb (0%, 0%, 100%).
RGBA Colors
Nilai warna RGBA didukung oleh IE9 +, Firefox 3 +, Chrome, Safari, dan Opera di 10 +.
Nilai warna RGBA merupakan perpanjangan dari nilai warna RGB dengan alpha channel yang
menentukan opacity (transparansi) dari objek.
Sebuah nilai warna RGBA ditentukan dengan: rgba(red, green, blue, alpha). Parameter alpha adalah
angka antara 0.0 (sepenuhnya transparan) dan 1.0 (sepenuhnya tidak transparan).
Contoh:
File CSS
p.one {background-color:rgba(255,0,0,0.3);}
p.two {background-color:rgba(0,255,0,0.3);}
p.three {background-color:rgba(0,0,255,0.3);}
File HTML
<p class="one">This is some text in a paragraph.</p>
<p class="two">This is some text in a paragraph.</p>
<p class="three">This is some text in a paragraph.</p>
Output
HSL Colors
Nilai warna HSL didukung oleh IE9 +, Firefox, Chrome, Safari, dan Opera di 10 +.
HSL singkatan dari hue, saturation dan lightness (warna, saturasi dan kecerahan) dan merupakan
representasi silinder-koordinat warna.
Sebuah nilai warna HSL ditentukan dengan: hsl(hue, saturation, lightness).
Hue adalah warna (0-360), yaitu 0 (atau 360) = merah, 120 = hijau, 240 = biru.
Saturation (kejenuhan) adalah nilai persentase, 0% berarti warna abu-abu dan 100% adalah warna
penuh (full color).
Lightness (kecerahan) juga persentase; 0% hitam, 100% putih.
Contoh:
File CSS
p {background-color:hsl(120,100%,75%);}
File HTML
<p>This is some text in a paragraph.</p>
Output
Setiap tabel di bawah ini merupakan salah satu Hue. Dua belas warna (yaitu setiap 30 interval) telah
dipilih dari lingkaran warna: red, yellow, green, cyan, blue, magenta, dengan semua warna menengah
(yang terakhir adalah warna antara magenta dan red).
Sumbu X di setiap tabel mewakili saturation (100%, 75%, 50%, 25%, 0%).
Sumbu Y mewakili lightness. 50% adalah 'normal'.
HSLA Colors
Nilai warna HSLA didukung oleh IE9 +, Firefox 3 +, Chrome, Safari, dan Opera di 10 +.
Nilai warna HSLA merupakan perpanjangan dari nilai warna HSL dengan alpha channel yang
menentukan opacity (transparansi) dari objek.
Sebuah nilai warna HSLA ditentukan dengan: hsla(hue, saturation, lightness, alpha), dimana
parameter alpha mendefinisikan opacity. Parameter alpha adalah angka antara 0.0 (sepenuhnya
transparan) dan 1.0 (sepenuhnya tidak transparan).
Contoh:
File CSS
p {background-color:hsla(120,100%,35%,0.5);}
File HTML
<p>This is some text in a paragraph.</p>
Output
Web Safe Colors? (Warna web aman?)

Beberapa tahun yang lalu, ketika komputer didukung max 256 warna yang berbeda, daftar 216 "Web
Safe Colors" disarankan sebagai standar Web, sisakan 40 warna sistem tetap.
Hal ini tidak penting sekarang, karena sebagian besar komputer dapat menampilkan jutaan warna
yang berbeda, tapi pilihan yang tersisa untuk Anda.
216 lintas-browser palet warna diciptakan untuk memastikan bahwa semua komputer akan
menampilkan warna dengan benar ketika menjalankan sebuah 256 palet warna (alat yg digunakan
pelukis untuk tempat menaruh cat) :
000000
000033
000066
000099
0000CC
0000FF
003300
003333
003366
003399
0033CC
0033FF
006600
006633
006666
006699
0066CC
0066FF
009900
009933
009966
009999
0099CC
0099FF
00CC00
00CC33
00CC66
00CC99
00CCCC
00CCFF
00FF00
00FF33
00FF66
00FF99
00FFCC
00FFFF
330000
330033
330066
330099
3300CC
3300FF
333300
333333
333366
333399
3333CC
3333FF
336600
336633
336666
336699
3366CC
3366FF
339900
339933
339966
339999
3399CC
3399FF
33CC00
33CC33
33CC66
33CC99
33CCCC
33CCFF
33FF00
33FF33
33FF66
33FF99
33FFCC
33FFFF
660000
660033
660066
660099
6600CC
6600FF
663300
663333
663366
663399
6633CC
6633FF
666600
666633
666666
666699
6666CC
6666FF
669900
669933
669966
669999
6699CC
6699FF
66CC00
66CC33
66CC66
66CC99
66CCCC
66CCFF
66FF00
66FF33
66FF66
66FF99
66FFCC
66FFFF
990000
990033
990066
990099
9900CC
9900FF
993300
993333
993366
993399
9933CC
9933FF
996600
996633
996666
996699
9966CC
9966FF
999900
999933
999966
999999
9999CC
9999FF
99CC00
99CC33
99CC66
99CC99
99CCCC
99CCFF
99FF00
99FF33
99FF66
99FF99
99FFCC
99FFFF
CC0000
CC0033
CC0066
CC0099
CC00CC
CC00FF
CC3300
CC3333
CC3366
CC3399
CC33CC
CC33FF
CC6600
CC6633
CC6666
CC6699
CC66CC
CC66FF
CC9900
CC9933
CC9966
CC9999
CC99CC
CC99FF
CCCC00
CCCC33
CCCC66
CCCC99
CCCCCC
CCCCFF
CCFF00
CCFF33
CCFF66
CCFF99
CCFFCC
CCFFFF
FF0000
FF0033
FF0066
FF0099
FF00CC
FF00FF
FF3300
FF3333
FF3366
FF3399
FF33CC
FF33FF
FF6600
FF6633
FF6666
FF6699
FF66CC
FF66FF
FF9900
FF9933
FF9966
FF9999
FF99CC
FF99FF
FFCC00
FFCC33
FFCC66
FFCC99
FFCCCC
FFCCFF
FFFF00
FFFF33
FFFF66
FFFF99
FFFFCC
FFFFFF
Cascade
Cascading adalah proses penghubungan antara style sheet.
Specificity (pengkhususan)
Pada poin ini, kita akan membahas specificity. Apa yang tejadi jika dua buah properti pada aturan
yang terpisah berlaku pada satu buah elemen yang sama dan satu sama lain saling berlawanan.
Sayangnya, dua buah properti ini tidak dapat diberlakukan pada sebuah elemen pada halaman web
(contohnya sebuah text pada elemen tidak mungkin berwarna merah dan biru). CSS menyediakan
mekanisme dalam permasalahan ini, yang disebut specificity (pengkhususan).
Beberapa selektor mungkin lebih spesifik daripada yang lain. Sebagai contohnya, class dan selektor
ID lebih spesifik dari selektor elemen HTML. Jika dua buah aturan memilih elemen yang sama dan
properti-nya berlawanan satu sama lain, aturan dengan selektor yang lebih spesifik akan
didahulukan. Beberapa keadaan terkait dengan specificity ini diantaranya dapat diselesaikan dengan
cara seperti berikut,
selektor ID lebih spesifik daripada selektor lain
Selektor class lebih spesifik daripada selektor elemen HTML dan selektor lain seperti kontekstual,
pseudo class dan pseudo elemen.
Selektor kontekstual dan selektor lain yang melibatkan lebih banyak selektor elemen HTML akan
lebih spesifik daripada menggunakan satu buah selektor elemen.
Ada waktu ketika dua buah aturan akan mempunyai specificity yang sama. Dalam kasus ini, aturan
yang lebih belakang yang akan menang dan diberlakukan. Sebagai contohnya, jika sebuah aturan
style sheet di-import dan yang lain berada pada style sheet tersebut sendiri, aturan yang berada pada
style sheet yang mengimport akan didahulukan. Jika dua buah aturan berada pada style sheet yang
sama, aturan yang lebih jauh letaknya dari awal style sheet akan lebih didahulukan dan
akan diberlakukan pada elemen tersebut.
Inheritance (Pewarisan Nilai)
CATATAN:
!DOCTYPE. IE9 supports "inherit".
Aturan penggunaan css di W3C
Pelajari @media, @import, @page dan Print Properties (page-break-after, page-break-before,

page-break-inside)

Kumpulan Kode CSS 1 &amp; 2

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Kumpulan Kode CSS 1 &amp; 2

Diunggah oleh

Hak Cipta:

Format Tersedia

/* ini adalah komentar penjelas pada CSS */

PELAJARI DI AKHIR CSS

background-attachment: scroll | fixed | local;

background-color: yellow | #00ff00 | rgb(255,0,255 | transparent | inherit;

background-image:url('paper.jpg') | none | inherit;

background-repeat:repeat | repeat-x | repeat-y | no-repeat | inherit;

background-clip: border-box | padding-box | content-box;

background-origin: border-box | padding-box | content-box;

background-size: 100px 100px | 50% | cover | contain;

Border dan Outline Properties

border: thick solid red;

border-width:15px | thin | medium | thick | inherit;

Menentukan border tipis.

right and left borders adalah solid

border-color:red | #0000ff | rgb(250,0,255) | transparent | inherit;

outline: blue dotted thick;

outline-color: red | #00ff00 | rgb(255,130,255) | invert | inherit;

- Outline ditampilkan di sekitar elemen margin.

outline-width: thin | medium | thick | 10px | inherit;

Properti border-image-source, border-image-slice, border-image-width, border-image-outset dan

border-radius: 25px | 2em | 25%;

box-shadow: 20px -20px 15px 10 red inset;

Generated Content Properties

Contoh Output Value:

- open-quote, close-quote, no-open-quote, noclose-quote

counter-increment: none | id number | inherit;

counter-reset: none | id number | inherit;

quotes: "" "" " ' " " ' ";

Contoh beberapa value properti font yang lain:

font-style: normal | italic | oblique | inherit;

font-variant: normal | small-caps | inherit;

font-weight: normal | bold | bolder | lighter | 100-900 | inherit

font-family: "Times New Roman",Georgia,Serif;

Ada dua jenis nama font family:

Times New Roman, Times, Georgia

@font-face { font-family: myFirstFont;

@font-face {font-family: myFirstFont;

Menggunakan Teks Bold

list-style-type: circle | disc | square | none | inherit;

list-style-position: inside | outside | inherit;

list-style-image: url('sqpurple.gif') | none | inherit;

padding:25px | 5em | 10% | 0.5cm | inherit;

column-rule:4px outset red;

column-rule-width: thin | medium | thick | length;

column-rule-color: red | #ff0000 | #000000 | rgb(255,130,255) | rgba(255,130,255,0.5);

top: 5px | -10% | auto | inherit;

elemen terhadap elemen posisi normal.

z-index: -1 | 1 | auto | inherit;

visibility: visible | hidden | collapse | inherit;

overflow: visible | hidden | scroll | auto | inherit;

float: left | right | none | inherit;

clear: left right both none inherit;

Tidak memperbolehkan penerapan elemen float (mengapung) pada sisi kiri.

clip: rect(0px,60px,200px,0px) | auto | inherit;

display: inline | block | list-item | none | inherit;

box | flex | inline-block | inline-flex | inline-table;

Contoh Penggunaan Value inherit:

- box (or flex-box / kotak fleksibel)

Penjelasan value table property display dari Buku:

tepi kotak akan dipindahkan kiri (barat)

width:100px | 10em | 50% | auto | inherit;

height:100px | 50% | auto | inherit;

Tidak ada ketinggian maksimum. Ini adalah default

Kumpulan Kode CSS 1 & 2

Kumpulan Kode CSS 1 & 2