CSS

PENGERTIAN CSS
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang
menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text
dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar
belakang (background), ukuran font (font sizes) dan lain-lain.
Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing
(jarak) disebut juga “styles”.  Cascading Style Sheets juga bisa berarti meletakkan styles yang
berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang
memberitahukan browser bagaimana suatu dokumen akan disajikan.  
Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style
sheet.  Saat menggunakan CSS, Kita tidak perlu menulis font, color atau size pada setiap
paragraf, atau pada setiap dokumen. Setelah Kita membuat sebuah style sheet, Kita dapat
menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan

APA ITU CSS?

CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language)
yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan
penanda (markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman
HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML,
termasuk SVG dan XUL bahkan ANDROID.
CSS dibuat untuk memisahkan konten utamadengan tampilan dokumen yang meliputi
layout, warna da font. Pemisahan ini dapat meningkatkann daya akses konten pada web,
menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi darisebuah karakteristik
dari sebuah tampilan, memungkinkan untuk membagi halaman untuk sebuah formatting dan
mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya
teknik tableless pada desain web.
CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style dengan
menggunakan metode pembawaan yang berbeda pula, seperti on-screen, in-print, by voice,
dan lain-lain. Sementaraitu, pemilik konten web bisa menentukan link yang menghubungkan
konten dengan file CSS.
Tujuan utama CSS diciptakan untuk membedakan konten dari dokumen dan dari tampilan
dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan lebih mudah
dilakukan. Hal yang termasuk dalam desain web diantaranya adalah warna, ukura dan
formatting. Dengan adanya CSS, konten dan desain web akan mudah dibedakan, jadi
memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu
web, sehingga akan memudahkan dalam membuat halaman web yang banyak, yang pada
akhirnya dapat memangkas waktu pembuatan web. 
FUNGSI CSS
Fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman
wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu
dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.

1. CONTOH FUNGSI - FUNGSI CSS

Syntax

Pointer menunjuk ke elemen HTML yang ingin Kita ubah.

Blok deklarasi berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma.
Setiap deklarasi mencakup nama properti CSS dan nilai, dipisahkan oleh titik dua.
Deklarasi CSS selalu berakhir dengan titik koma, dan blok deklarasi dikelilingi oleh kurung
kurawal.
Dalam contoh berikut semua elemen <p> akan berada di tengah-tengah, dengan warna teks
merah:

COLOR
Menentukan warna untuk satu elemen
Contoh :
{ color : red}
{color : #DDEEA1}

BACKGROUND
 Menentukan metode untuk peletakan gambar suatu elemen
Contoh:
{width:720px; height:960px; background : url (“namafile.jpg”) }

BORDER
Border/garis tepi dapat digunakan untuk banyak hal, misalnya sebagai elemen dekoratif atau
untuk memberi garis batas pemisah dari dua hal. Border properti mendefinisikan width, color,
and style dari batas area pada box/kotak.

CSS memberi Kita pilihan dalam menggunakan border antara lain :

 border-style
 border-width
 border-color
 border-individual

Border Style
Properti border-style untuk menentukan bentuk (style) dari tampilan border.
Tak satu pun dari properti border memiliki efek APAPUN kecuali telah menempatkan
properti border-style dahulu!
Ada 9 type border-style values yang umum digunakan dalam CSS :
1. None : mendefinisikan tidak ada border
p{border-style:none;}
2. Dotted : Berarti border berupa (titik)
p{border-style:dotted;}
3. Dashed : Border berupa dashed (garis putus-putus)
P{border-style:dashed;}
4. Solid : Border yang solid
p{border-style:solid;}
5. Double : Mendefinisikan double border, lebar double adalah sama dengan nilai
border-width
P{border-style:double;}
6. Groove : Mendefiniskan sebuah border groove (beralur) 3D, efeknya tergantung pada
nilai border-color
P{border-style:groove;}
7. Ridge : Mendefinisikan sebuah border bergigi (ridge) 3D, efeknya tergantung pada
nilai border-color
P{border-style:ridge;}
8. Inset : Mendefinisikan sebuah border inset 3D,efeknya tergantung pada nilai border-
color
P{border-style:inset;}
9. Outset : Mendefisikan sebuah border outset 3D, efeknya tergantung pada nilai
border-color
P{border-style:outset;}
 Margin
Margin (dalam pengertian CSS) adalah ruang disekitar elemen/konten. Margin akan
membentuk daerah (ruang) vertikal dan horizontal antara elemen. Jika elemen/konten tidak
memilki margin, maka elemen-elemen tersebut akan rapat bertemu terhadap satu sama lain.
Agar margin bekerja dengan baik, elemen biasanya diikuti oleh posisi float atau diposisikan
relative. Style ini sering diterapkan untuk dapat memindahkan elemen lain di sekitarnya.
Secara visual akan lebih mudah memahami definisi dari margin ini

Margin dapat diatur menggunakan properti margin "shorthand" (yaitu istilah, yang

mewakili empat nilai marjin untuk elemen) atau dengan penulisan stye "longhand". Untuk itu
dibawah saya beri contoh beberapa penulisan margin dalam css.
Contoh penulisan margin pada suatu elemen ("shorthand")

#element { margin: 10px;}

 
Ini berarti elemen memilki margin yang sama "10px" untuk setiap sisi elemen

#element { margin: 10px 20px; }

 
Ini berarti elemen memiliki:
-margin-top, margin-bottom : "10px"
-margin-left, margin-right : "20px"
#element { margin: 10px 20px 5px 15px; }
 
Elemen ini memiliki -margin-top : 10px, margin-right: 20px,  margin-bottom : 5px, margin-
left: 15px

Berikut penulisan margin style "longhand":

#element { margin-top: 10px; margin-right: 5px; margin-bottom:

5px; margin-left: 10px;}

PADDING
Padding adalah sebutan untuk spasi atau ruang diantara konten dan border.
Gambar CSS Box Model berikut bisa menjelaskan dimana letak padding ini.

Seperti yang terlihat, padding berada diantara konten utama dengan border. Jadi, kenapa saya
membahas border dulu sebelum padding?
Ini karena untuk dapat melihat efek padding, kita harus menggunakan border. Tanpa border,
padding akan susah untuk dilihat.
Property padding bisa diisi dengan satuan panjang seperti pixel, persen, em, dll. Sebagai
contoh, untuk membuat padding sebesar 10 pixel, saya bisa menggunakan kode berikut:
<div style="padding: 10px"></div>
 HEIGHT DAN WIDTH

 Width : untuk menentukan lebar kotak/bidang HTML

contoh : { width:300px; }
 Height: untuk menentukan tinggi kotak/bidang HTML
contoh : { width:100px; }
hasil running : dengan width:300px dan height:100px;

BOX MODEL
 Sebuah elemen HTML dapat kita anggap sebagai sebuah box/ kotak.
 Digunakan pada saat kita akan merancang tampilan sebuah website.
 Pada dasarnya berfungsi sebagai tempat yang membungkus isi dari elemen‐elemen
HTML.
 Tag yang biasanya digunakan untuk merancang tampilan adalah <div>, walaupun tag
lain juga bisa menerapkan box model.
 Terdiri atas 4 bagian: Margin, Border, Padding, Content.
 OUTLINE
Outline:value; fungsinya untuk membuat sekeliling bidang/tag/box memiliki style garis
pinggir, sedangkan value masing-masing sisi akan bernilai sama!
contoh kode ini1
<div style="background-
color:blue;width:300px;height:300px;outline-
style:solid;outline-color:red;outline-width:5px;">
anggap
disini
adalah
kontent/isi
</div>
 TEXT
1. Text Color
Properti warna yang digunakan untuk mengatur warna teks.
Dengan CSS, warna yang paling sering ditentukan oleh:

nilai HEX – seperti “# ff0000″

sebuah nilai RGB – seperti “rgb (255,0,0)”
nama warna – seperti “merah”
Warna default untuk halaman didefinisikan dalam pemilih tubuh / body.
contoh :

h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

2. Text Alignment
Properti text-align digunakan untuk mengatur alignment horizontal dari sebuah teks.
Teks dapat terpusat, atau berpihak ke kiri atau kanan, atau dibenarkan. Ketika text-
align diatur untuk “membenarkan”, setiap baris ditarik sehingga setiap baris
memiliki lebar yang sama, dan margin kiri dan kanan lurus (seperti di majalah dan surat
kabar).
contoh :
h1 {text-align: center;}
 3. Text Decoration
Properti text-decoration digunakan untuk membuat atau menghapus dekorasi dari teks.
Properti text-decoration banyak digunakan untuk menghapus menggaris bawahi dari link
untuk tujuan desain:
contoh :
a {text-decoration: none;}

Hal ininjuga dapat digunakan untuk menghias text :

contoh :
h1 {text-decoration: overline;}
h2 {text-decoration: line-melalui;}
h3 {text-decoration: underline;}
h4 {text-decoration: blink;}

4. Text Transformation
Properti teks transform digunakan untuk menentukan huruf besar dan huruf kecil dalam
sebuah teks.
Hal ini dapat digunakan untuk mengubah segalanya menjadi huruf besar atau huruf kecil,
atau memanfaatkan huruf pertama dari setiap kata.
contoh :
p.uppercase {text-transform: uppercase;}
p.lowercase {text-transform: lowercase;}
 5. Text Identation
Properti teks lekukan digunakan untuk menentukan indentasi dari baris pertama dari teks.
contoh :
p {text-indent: 50px;}

FONT
CSS properti font menentukan Font family, keberanian, ukuran, dan gaya text 

Dalam CSS, ada

 Generik Family – sebuah kelompok font family dengan tampilan yang sama (seperti
“Serif” atau “Monospace”)

 Font family – Font family tertentu (seperti “Times New Roman” atau “Arial”)

Generik family Font family Deskripsi

Serif Times New Roman Font serif memiliki garis-garis
Georgia kecil dibagian akhir pada
beberapa karakter
Sans-serif Arial “sans” berarti tanpa-font-font
Verdana ini tidak memiliki garis diujung
karakter
Monospace Courier New Semua karakter huruf
Lucida Console monospace memiliki lebar
yang sama
 ICONS
Cara Menambahkan Ikon
Cara termudah untuk menambahkan ikon ke halaman HTML Kita, adalah dengan
perpustakaan ikon, seperti Font Awesome.
Tambahkan nama kelas ikon yang ditentukan ke elemen HTML sebaris (seperti <i> atau
<span>).
Semua ikon di perpustakaan ikon di bawah ini, adalah vektor terukur yang dapat disesuaikan
dengan CSS (ukuran, warna, bayangan, dll.)
Contoh:
 LINK

Link adalah sebuah acuan dalam dokumen hiperteks (hypertext) ke dokumen yang lain atau
sumber lain, seperti halnya suatu kutipan didalam literatur

Contoh syntak untuk membuat link

<html>
<head>
<style>
a{
color:hotpink;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank"> This is
alink </a></b></p>
</body>
</html>

LIST
List adalahbagian teks didalam dokumen yang berisi daftar item dari suatu kelompok atau
group tertentu, sebagai contoh, didalam situs web yang bertema kuliner, list dapat berupa
daftar dari makanan dan minuman beserta harganya.

List dapat juga berupa prosedur (urutan langkah-langkah) dari suatu pekerjaan tertentu, yag
sifatnya harus dilakukan secara berurutan dari langkah pertama sampai langkah terakhir.

Contoh:
 <!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>

<p>Example of unordered lists:</p>

<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>

<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>

Hasil running.
 TABLE
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris
dan kolom. Tabel dibuat dengan menggunakan tag <table>. Sebuah tabel dibagi menjadi
baris-baris, dan tiap baris dibagi ke dalam cell-cell. 

Baris dibuat dengan tag <tr>, dan cell-cell yang akan membentuk kolom dibuat dengan tag
<td>.
Berikut saya berikan contoh penerapan tag table:

<table border="1">
<tr>
<td> Baris 1 kolom 1 </td>
<td> Baris 1 kolom 2 </td>
<td> Baris 1 kolom 3 </td>
</tr>

<tr>
<td> Baris 2 kolom 1 </td>
<td> Baris 2 kolom 2 </td>
<td> Baris 2 kolom 3 </td>
</tr>

</table>
 DISPLAY
Didalam CSS terdapat banyak beberapa kode, tentunya anda tidak mungkin menghafal satu
persatu, untuk demikian supaya anda mudah mengerti, lebih baik kita mencoba

Display : Inline
Mendefinisikan elemen dalam baris yang sama dengan elemen lain.

Li{ Display:inline; }
Html:
<ul>
<li> CSS </li>
<li> php </li>
<li> Mysql </li>
</ul>

Display:Block
Seperti halnya membuat baris baru pada elemen
Contoh:
.bl{Display:block; Html:
<span class=”bl”>elemen block</span>
<span class=”bl”>ended example</span>
<span class=”bl”>berbagi</span>
Display None
Tidak menampilkan elemen/html akan dianggap hilang.
Contoh:
H2.hide{Display:none;}
Html:
<h2 class=”hide”>
Elemen hide </h2>

MAX-WIDTH
Berfungsi untuk menentukan (mengatur) batas lebar (width) maksimal sebuah elemen yang
ukurannya ditentukan dalam nilai tertentu.
Contoh:

max-width: value;
max-width: 100px;
max-width: 20em;
max-width: 10%;

 
 POSITION
Dalam membuat layout website CSS position property punya peran penting untuk merancang
layout seperti yang kita inginkan, kombinasi antara CSS position property dengan kode CSS
lainnya dimanfaatkan untuk menempatkan elemen tertentu didalam layout.
Sekilas konsep dari CSS position tampak sederhana dan mudah untuk dimengerti bagi
pemula namun faktanya justru sebaliknya menjadi hal yang rumit, padahal keberhasilan
memahaminya sangat membantu si designer, namun untuk membantu memahami CSS
position property ini sebelumnya perlu memahami CSS box model.
CSS position dibagi menjadi 4 property:

 Static
 Relative
 Absolute
 Fixed

Static
Nilai static adalah nilai titik tetap (default).

<div style="width:300px; height: 100px; border: yellow solid

1px"></div>
<div style="width:300px; height: 300px; border: 1px solid black;">
<div style="width:200px; height: 200px; border: 1px solid
red;"></div>   
</div>
Position: absolute;
Nilai absolute memungkinkan untuk menghapus elemen dari wadah div dengan deklarasi top,
bottom, left, right.
Hubungan dengan wadah div nya hanya jika posisi div terakhir memiliki nilai, jika tidak
maka posisinya berhubungan dengan elemen html dengan titik tetapnya pojok kiri atas
terhadap area jendela browser.

div "red" diposisikan di kanan jendela browser (lihat kotak merah di sebelah kanan atas) tidak berada di
dalam div "hitam" karena tidak ada penentuan posisi terakhir sehingga secara defaultnya titik posisi di
tentukan terhadap body.

<div style="width:300px; height: 100px; border: yellow solid

1px"></div>
<div style="width:300px; height: 300px; border: 1px solid black;">
 <div style="width:300px; padding: 10px; border: 1px solid red;
position: absolute; top: 0; right: 50px; text-align: center;"> 
position: absolute; top: 0; right: 50px;
    <div>
</div>
Position: relative;
Nilai relative memungkinkan posisi elemen berhubungan dengan wadah div nya.
Contoh 1:
<div style="width:300px; height: 100px; border: yellow solid
1px"></div>
<div style="width:300px; height: 300px; border: 1px solid black;">
div style="width:200px; height: 200px; padding: 10px; border: 1px
solid red; position: relative; top: 20px; left: 20px;">
position: relative; top: 20px; left: 20px;
</div>
</div>
Position: Fixed;
Elemen yang ada di dalamnya berhubungan dengan elemen html. Titik tetap (default)nya
adalah pojok kiri atas dan tidak pernah berkaitan dengan elemen wadah divnya
<body style="height:900px;">
<p>&nbsp;</p><p>&nbsp;</p>
Position: fixed;<br />
Sampel 1
<div style="width:300px; height: 100px; border: yellow solid
1px"></div>
<div style="width:300px; height: 300px; border: 1px solid black;">
<div style="width:200px; padding: 10px; border: 1px solid
red; position: fixed; top: 20px; left: 0; text-align:
center;">position: fixed; top: 20px; left: 0;
</div>
</div>
 OVERFLOW
Secara sederhana fungsi dari CSS overflow adalah untuk menyembunyikan, menampakkan,
atau membuat scroll. Dimana fungsi ini bisa diterapkan dalam objek teks ataupun gambar.

Pada objek tertentu, baik posting maupun widget, terkadang ada bagian yang melewati
tempat yang sudah kita tentukan, biasanya kebagian pinggir atau ke bawah. Nah supaya objek
tersebut muncul sesuai dengan yang kita kehendaki, maka digunakanlah syntax overerflow
sebagai solusinya. Mudah-mudahan sobat mengerti apa yang saya maksud pada penjelasan
sederhana ini.

Pada penggunaan fungsi overflow biasanya ada 4 alternatif yang bisa kita gunakan :

 overflow:auto
 overflow:scroll
 overflow:hidden
 overflow:display

Contoh:
Overflow:auto
<div style="background-color:#FBFBFB; border:1px solid #D2D2D2;
padding:10px; width:400px; height:100px; overflow:auto;"> letakkan teks
atau gambar di sini</div>
 FLOAT
 Berfungsi untuk memaksa sebuah elemen menjadi berada di kiri atau
dikanan halaman.
 Elemen yang berada setelah elemen yang diberi float akan terpengaruh fungsi float
tersebut.
 Elemen yang berada sebelum elemen yang diberi float tidak akan terpengaruh.
 Property:
float:left;
float:right;
Contoh kode css :
#wadah{
height:500px;
width:500px;
float:right;
background-color:#00CC99;
}

 Untuk me‐nonaktifkan fungsi float gunakan:

clear:both;
 INLINE-BLOCK

Tipe display ini sering membingungkan bagi para webmaster tentang penggunaannya. Pada
intinya display inline-block itu adalah jenis display yang mirip dengan display inline. Hanya
saja pada display inline-block kita bisa mengatur tinggi dan lebar seleksinya
<html>
<head>
<style>
.gaya-inline {display:inline; background-color:#00CCCC;
width:400px; height:100px;}
.gaya-block {display:block; background-color:#003333;
height:50px;}
.gaya-inline-block {display:inline-block; background-
color:aqua; width:400px; height:40px;}
</style>
</head>
<body>
<section class="gaya-inline"> ini contoh display
inline.</section>
setelah bagian objek yang diberi display inline maka teks
tetap tampil apa adanya. cuma diseleksi saja teksnya.
<br/>

<section class="gaya-block"> ini contoh display

block.</section>
maka bagia ini akan full satu baris digunakan dan yang
diseleksi buka cuma teks saja,tapi satu baris full<br/>

<section class="gaya-inline-block"> ini contoh display inline

block.</section>
bagian yang diseleksi hanya pada teks saja, tapi kita bisa
menambah tinggi dan lebar ke area yang diseleksi.
<br/>
</body>
</html>
 ALIGN
Attribute align adalah attribute dalam kode html yang fungsinya berkaitan dengan pengaturan
perataan teks dan pengaturan posisi image. Untuk perataan teks, attribute align dapat
digunakan pada semua blok elemen html yang bermuatan teks. Kita bisa menggunakan
attribute ini pada tag DIV, tag p dan elemen heading (h1 s/d h6).
Attribute align pada teks

 align="right" » Membuat teks rata kanan.

 align="left"  »  Membuat teks rata kiri.
 align="justify" » Membuat teks rata kanan-kiri.
 align="center" » Membuat teks rata tengah.

Attribute align pada image

Penggunaan attribute align pada image tak hanya sekedar mengatur posisi image, namun juga
berkaitan dengan posisi teks yang digunakan bersama image. Beberapa posisi teks akan
menyertai perubahan posisi image.

 align="right" » Membuat image diposisi kanan dan teks di sebelah kiri.

 align="left" »  Membuat image di posisi sebelah kiri dan teks disisi
sebelah kanan.
 align="top" » Image disisi sebelah kiri dan teks disebelah kanan
sejajar
dengan terluar bagian atas image.
 align="bottom" » Image disisi sebelah kiri sementara teks disebelah kanan
sejajar dengan sisi terluar bagian bawah image.

 align="middle" » Image disisi sebelah kiri sementara teks disebelah kanan

image sejajar garis tengah horizontal image.
 COMBINATORS
div{
background-color: red;
}

Div dalam sintaks css di atas merupakan selector. Sebuah selector dapat memiliki sebih dari
satu selector sederhana. Kita dapat memasukkan combinator pada selector yang sederhana.

Terdapat 4 combinators berbeda dalam css, khususnya css3 :

 Descendant selector
 Child selector
 Adjacent sibling selector
 General sibling selector

Jika kalian pernah belajar css, kalian pasti sudah pernah menggunakan descendant selector.
Karena, descendant selector merupakan combinators yang paling sering digunakan (menurut
saya).

Descendant Selector

Descendant selector akan memilih semua elemen yang cocok berdasarkan keturunan dari
elemen tertentu.
Contoh:
div p{
background-color: red;
}

Jika sintaks html-nya seperti di bawah ini :

<div>
<p>Paragraf pertama di dalam div</p>
<span>
<p>Paragraf kedua di dalam div, dan juga di dalam span</p>
</span>
<p>Paragraf ketiga di dalam div</p>
</div>
<p>Paragraf keempat di luar div</p>
<p>Paragraf kelima di luar div</p>

Css di atas akan membuat semua <p> atau paragraf yang merupakan keturunan dari div
memiliki background berwarna merah, termasuk yang berada di dalam tag <span>. Karena
tag <span> juga masih berada di dalam div.

Jadi, paragraf pertama, kedua dan ketiga akan memilik background berwarna merah karena
berada di dalam div. Sedangkan paragraf keempat dan kelima tidak, karena berada di luar
div.

Child Selector 

Child selector akan memilih semua elemen yang merupakan anak langsung dari elemen
teretentu.
div > p{
background-color: red;
}

Jika sintaks html-nya seperti di bawah ini :

<div>
<p>Paragraf pertama di dalam div</p>
<span>
<p>Paragraf kedua di dalam div, dan juga di dalam span</p>
</span>
<p>Paragraf ketiga di dalam div</p>
</div>
<p>Paragraf keempat di luar div</p>
<p>Paragraf kelima di luar div</p>

Maka, hanya paragraf pertama dan ketiga saja yang memiliki background berwarna merah.
Paragraf kedua tidak memiliki background berwarna merah karena paragraf kedua bukan
keturunan langsung dari div. Akan tetapi keturunan langsung dari <span> atau bisa dibilang
cucu dari div.

Adjacent Sibling Selector

 
Adjacent sibling selector akan memilih semua elemen yang  merupakan saudara kandung (atau setingkat)
dan berdekatan dengan elemen tertentu.
div + p{
background-color: red;
}

Jika sintaks html-nya seperti di bawah ini :

<div>
<p>Paragraf pertama di dalam div</p>
<span>
<p>Paragraf kedua di dalam div, dan juga di dalam span</p>
</span>
<p>Paragraf ketiga di dalam div</p>
</div>
<p>Paragraf keempat di luar div</p>
<p>Paragraf kelima di luar div</p>
Maka, hanya paragraf keempat yang memiliki background berwarna merah. Paragraf
pertama, kedua dan ketiga berada di dalam div, sehingga tidak satingkat dengan div dan
merupakan turunan dari div. Sedangkan paragraf kelima, meskipun saudara (atau setingkat)
dengan div namun tidak berdekatan dengan div. hanya paragraf keempat yang merupakan
saudara dari div, dan letaknya berdekatan dengan div.
General Sibling Selector

General sibling selector akan memilih semua elemen yang merupakan saudara kandung dari
elemen tertentu.
div ~ p{
background-color: red;
}

Jika sintaks html-nya seperti di bawah ini :

<div>
<p>Paragraf pertama di dalam div</p>
<span>
<p>Paragraf kedua di dalam div, dan juga di dalam span</p>
</span>
<p>Paragraf ketiga di dalam div</p>
</div>
<p>Paragraf keempat di luar div</p>
<p>Paragraf kelima di luar div</p>

Maka, paragraf keempat dan kelima memiliki background berwarna merah. Karena paragraf
keempat dan kelima merupakan saudara dari div.
 PSEUDO-CLASS

Pseudo Class Selector adalah selector CSS yang digunakan untuk mengakses bagian tertentu
dalam HTML yang tidak ‘terlihat’ (tidak tertulis di dalam HTML) atau bagian dari HTML
yang tidak bisa diakses dengan selector sederhana lain.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link
a:link {
color: red;
}

/* visited link *
a:visited {
color: green;
}

/* mouse over lin

a:hover {
color: hotpin
}

/* selected link
a:active {
color: blue;
}
</style>
</head>
<body>

<p><b><a href="de
link</a></b></p>
<p><b>Note:</b> a
in the CSS defini
<p><b>Note:</b> a
definition in ord

</body>
</html>
 PSEUDO-ELEMEN
CSS pseudo-elemen yang digunakan untuk menambahkan efek khusus untuk beberapa
penyeleksi.
Syntax.
Syntax dari pseudo-elemen:
selector:pseudo-element {property:value;}

Class CSS juga dapat digunakan dengan pseudo-elemen:

selector.class: pseudo-elemen {properti: nilai;}
lini pertama Pseudo-elemen.

“line-pertama” pseudo-elemen yang digunakan untuk menambah gaya khusus untuk baris
pertama dari teks.

Pada contoh berikut browser format baris pertama dari teks dalam elemen ap sesuai dengan
gaya dalam “line pertama” pseudo-elemen (di mana browser istirahat garis, tergantung pada
ukuran jendela browser):

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

OPACITY
Opacity effect atau efek transparansi (sering juga disebut blur efect) diciptakan melalui
opacity property. Penyebutan sebagai efek transparansi atau blur effect disebabkan
transparansi yang tercipta ketika opacity property digunakan, Anda bisa menggunakan efek
opacity pada box, image atau obyek lain seperti teks.

Meskipun opacity effect dapat digunakan tanpa melibatkan hover effect, namun pada
kenyataannya lebih banyak desain blog/web yang menggabungkan fungsi css opacity
property dan hover effect secara bersamaan. Dalam perkembangan terakhir, setelah css3
mendapat dukungan penuh dari beberapa browser besar, bahkan efek transparansi
(transparency effect) ini bisa dibuat lebih atraktif dengan menambahkan css3 transition
property, css3 animation property dan css3 transform property. Yang sangat perlu
diperhatikan ketika menggunakan opacity property adalah "penggunaan kode (deklarasi css)
yang berbeda untuk Internet Explorer (IE).

opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}.

Contoh 1 – Transparansi Gambar

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
 Navigation Bar
Memiliki mudah menggunakan navigasi adalah penting untuk setiap situs web.
Dengan CSS Kita dapat mengubah menu HTML membosankan menjadi tampan bar navigasi.

Navigation Bar = Daftar Link.

Sebuah bar navigasi yang stkitar HTML sebagai dasar.

Dalam contoh kita, kita akan membangun panel navigasi dari daftar HTML stkitar.
Sebuah bar navigasi pada dasarnya adalah daftar link, sehingga menggunakan <ul> dan
elemen <li> masuk akal:

<ul>
<li><a href=”default.asp”>Home</a></li>
<li><a href=”news.asp”>News</a></li>
<li><a href=”contact.asp”>Contact</a></li>
<li><a href=”about.asp”>About</a></li>
</ul>
Navigation Bar Vertikal.

Untuk membangun sebuah bar navigasi vertikal kita hanya perlu gaya elemen <a>, selain
kode di atas:

a
{
display:block;
width:60px;
}

Penjelasan:
-display: block – Menampilkan link sebagai elemen blok membuat daerah seluruh link diklik
(tidak hanya teks), dan memungkinkan kita untuk menentukan lebar.
-Lebar: 60px – elemen Blok mengambil lebar penuh yang tersedia secara default. Kami ingin
menentukan lebar 60 px.

Catatan : Selalu tentukan lebar untuk elemen <a> di sebuah bar navigasi vertikal. Jika Kita
menghilangkan lebar, IE6 dapat menghasilkan hasil yang tidak diharapkan.

Inline Daftar Produk.

Salah satu cara untuk membangun sebuah bar navigasi horizontal untuk menentukan unsur-
unsur <li> sebagai inline, di samping kode “stkitar” di atas:

li
{
display:inline;
}
 DROPDOWN
Menu web/blog sangat bervariasi salah satunya dibuat dengan css, ada bentuk menu
berupa text maupun gambar biasa, dan ada juga bentuk-bentuk menu dropdown/menu
bercabang secara horizontal atau vertikal. Pembuatanya juga bervariasi, ada yang
menggunakan javascript, ada juga menggunakan jquery, bahkan ada yang membuat menu
dari flash. Pada artikel kali ini kita akan mengetahui bagaimana cara membuat menu
dropdown horizontal murni dibuat dengan css.

Langkah-langkanya sebagai berikut :

Membuat susunan list menu untuk dropdown dalam html, kodenya berikut ini :

<ul class="dropmenu">
<li><a href="#1">Menu 1</a>
   <ul>
    <li><a href="#11">Sub Menu 1</a></li>
    <li><a href="#22">Sub Menu 2</a></li>
    </ul>
</li>
<li><a href="#2">Menu 2</a>
    <ul>
    <li><a href="#21">Sub Menu 1</a></li>
    <li><a href="#22">Sub Menu 2</a></li>
    <li><a href="#23">Sub Menu 3</a></li>
    <li><a href="#24">Sub Menu 4</a></li>
    </ul>
</li>
<li><a href="#3">Menu 3</a>
    <ul>
    <li><a href="#31">Sub Menu 1</a></li>
    <li><a href="#32">Sub Menu 2</a></li>
     <li><a href="#33">Sub Menu 3</a></li>
    <li><a href="#34">Sub Menu 4</a></li>
    </ul>
</li>
</ul>

Hasil running Dropdowns

TOOLTIPS
Tooltips merupakan tampilan informasi berupa teks maupun gambar yang tampil saat cursor
di arahkan (mouse over) pada sebuah item (biasanya pada link) dalam sebuah website.
Tujuan dari menggunakan tooltip ini bisa dibilang untuk menghemat waktu si pengunjung
website. Dari tooltip pengunjung bisa mendapatkan penjelasan singkat dari link yang ingin
dibaca. Apabila dari penjelasan singkat itu tidak membuat pengunjung merasa ingin lebih
tahu, maka pengunjung cukup mengabaikan link tersebut. Begitu sebaliknya, apabila
pengunjung dibuat merasa ingin lebih tahu, barulah link tersebut diklik.

Jadi, bagaimana caranya membuat tooltip?

Membuat tooltip bisa dengan menggunakan javascript atau dengan jQuery. Disini kita akan
membuat satu contoh tooltip sederhana dengan menggunakan javascript.

Pertama: Pilih editor yang akan kita gunakan (notepad, notepad++, dreamweaver, dll)

Struktur dasar file html

<html>
<head>
<title>contoh tooltip</title>
</head>
<body>

</body>
</html>

Kemudian setelah tag </title>, tambahkan script css di bawah ini

<style type="text/css">

#tooltip{
position: absolute;
left: -300px;
width: 250px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always
appear last within this CSS*/
filter:
progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=13
5);
}

#pointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}

</style>

Pada bagian <body>, tambahkan javascript di bawah ini.

<script type="text/javascript">

var cursorX=12 //Customize x offset of tooltip

var cursorY=10 //Customize y offset of tooltip

var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV

relative to pointer image
var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV
relative to pointer image. Tip: Set it to (height_of_pointer_image-1).

document.write('<div id="tooltip"></div>') //write out tooltip DIV

document.write('<img id="pointer" src="arrow2.gif">') //write out
pointer image

var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["tooltip"] :
document.getElementById? document.getElementById("tooltip") : ""

var pointerobj=document.all? document.all["pointer"] :

document.getElementById? document.getElementById("pointer") : ""

function ietruebody(){
return (document.compatMode && document.compatMode!
="BackCompat")? document.documentElement : document.body
}

function ddrivetip(thetext, thewidth, thecolor){

if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="")
tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}

function positiontip(e){
if (enabletip){
var nondefaultpos=false
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var winwidth=ie&&!window.opera? ietruebody().clientWidth :
window.innerWidth-20
var winheight=ie&&!window.opera? ietruebody().clientHeight :
window.innerHeight-20

var rightedge=ie&&!window.opera? winwidth-event.clientX-cursorX :

winwidth-e.clientX-cursorX
var bottomedge=ie&&!window.opera? winheight-event.clientY-cursorY
: winheight-e.clientY-cursorY

var leftedge=(cursorX<0)? cursorX*(-1) : -1000

//if the horizontal distance isn't enough to accomodate the width of the
context menu
if (rightedge<tipobj.offsetWidth){
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=curX-tipobj.offsetWidth+"px"
nondefaultpos=true
}
else if (curX<leftedge)
tipobj.style.left="5px"
else{
//position the horizontal position of the menu where the mouse is
positioned
tipobj.style.left=curX+cursorX-offsetdivfrompointerX+"px"
pointerobj.style.left=curX+cursorX+"px"
}

//same concept with the vertical position

if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=curY-tipobj.offsetHeight-cursorY+"px"
nondefaultpos=true
}
else{
tipobj.style.top=curY+cursorY+offsetdivfrompointerY+"px"
pointerobj.style.top=curY+cursorY+"px"
}
tipobj.style.visibility="visible"
if (!nondefaultpos)
pointerobj.style.visibility="visible"
else
pointerobj.style.visibility="hidden"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
pointerobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

document.onmousemove=positiontip

</script>

Setelah itu tambahkan tag html berikut ini.

<a href="http://www.proweb.co.id" onMouseover="ddrivetip('Corporate

Web Design')";
onMouseout="hideddrivetip()">Proweb</a>

Sekarang simpan file tersebut dengan format .html dan kemudian jalankan pada browser.
Maka akan terlihat seperti gambar di bawah ini hasilnya.

IMAGE GALERY
Galeri foto berikut ini dibuat dengan CSS:

<html>
<head>
<style type=”text/css”>
div.img
{
margin: 2px;
border: 1px solid # 0000FF;
tinggi: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid # ffffff;
}
div.img a: hover img
{
border: 1px solid # 0000FF;
}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</ style>
</ head>
<body>

<div class=”img”>
<a target=”_blank” href=”klematis_big.htm”>
<img src=”klematis_small.jpg” alt=”Klematis” width=”110″
height=”90″ />
</ a>
<div class=”desc”> Tambahkan deskripsi dari gambar di sini </
div>
</ div>
<div class=”img”>
<a target=”_blank” href=”klematis2_big.htm”>
<img src=”klematis2_small.jpg” alt=”Klematis” width=”110″
height=”90″ />
</ a>
<div class=”desc”> Tambahkan deskripsi dari gambar di sini </
div>
</ div>
<div class=”img”>
<a target=”_blank” href=”klematis3_big.htm”>
<img src=”klematis3_small.jpg” alt=”Klematis” width=”110″
height=”90″ />
</ a>
<div class=”desc”> Tambahkan deskripsi dari gambar di sini </
div>
</ div>
<div class=”img”>
<a target=”_blank” href=”klematis4_big.htm”>
<img src=”klematis4_small.jpg” alt=”Klematis” width=”110″
height=”90″ />
</ a>
<div class=”desc”> Tambahkan deskripsi dari gambar di sini
</div></ div></ body>
</ html>
 IMAGE-SPIRIT
Image-sprite adalah koleksi gambar dimasukkan ke dalam satu gambar.
Sebuah halaman web dengan banyak gambar dapat mengambil waktu yang lama untuk
memuat dan menghasilkan permintaan beberapa server.
Menggunakan gambar sprite akan mengurangi jumlah permintaan server dan menghemat
bandwidth.
Contoh:
<html>
<head>
<title>Untitled Document</title>
<style>
#home {
width:46px;
height:44px;
background:url(23319487_415779958819951_724277381926110592_n.jpg)
0 0;
}
#next{ width:43px; height:44px;
background:url(23319487_415779958819951_724277381926110592_n.jpg)
-91px 0; }
</style>
</head>
<body>
<img id="home" src="logo-medium.png" /><br><br>
<img id="next" src="logo-medium.png" />

</body>
</html>

Running Program: localhost/css

 ATTRIBUTE SELECTORS

Attribute Selector atau Atribut Selector adalah selector CSS yang digunakan untuk

‘mencari’elemen HTML dengan menggunakan nilai attribut dari tag HTML. Untuk
menggunakan attribute selector, kita menulisnya di dalam tkita kurung siku, seperti contoh
berikut ini: [href], img[width=”200px”] atau [href$=”.pdf”].

Atribut selector memiliki beberapa fitur yang dibedakan berdasarkan apakah atribut tersebut
berisi nilai tertentu, diawali nilai tertentu, diakhiri nilai tertentu atau mengandung nilai
tertentu.

Attribute Selector: [attr]

Aturan penulisan atribut selector pertama kita adalah: [attr] (attr merupakan singkatan

dariattribute). Nilai attr disini dapat diganti dengan atribut HTML yang ingin di cari

Sebagai contoh, untuk membuat warna text menjadi hijau pada seluruh tag
HTML yang memiliki atribut href, maka kode CSSnya adalah sebagai berikut:
[href] {
color:green;
}

Contoh:
<!DOCTYPE html>
<html>
<head>
   <title>Belajar Attribut Selector CSS</title>
<style type="text/css">
   a[href] {
     text-decoration:none;             
     font-size:24px;
     color:blue;
   }
               
   a[href^="http://"] {
     font-weight: bold;
   }
               
   a[href$=".pdf"] {
     color:brown;
   }
               
   a[title~="link"] {
     color:green;
   }          
               
   a[title|="situs"] {
     color:red;
   }          
               
   a[href*="halaman"] {
     font-style: italic;
   }
</style>
</head>
<body>
   <h2>Belajar Attribut Selector CSS</h2>
   <br />
  
   <a href="halaman_saja.html">
     1. Link ke halaman_saja.html
   </a>
   <br />
  
   <a href="http://www.duniailkom.com">
     2. Link ke http://www.duniailkom.com
   </a>
   <br />
  
   <a href="halaman_unik.html">
     3. Link ke halaman_unik.html
   </a>
   <br />
  
   <a href="http://www.google.com" >
     4. Link ke http://www.google.com
   </a>
   <br />
  
   <a href="halaman_lain.html">
     5. Link ke halaman_lain.html
   </a>
   <br />
  
   <a href="halaman_buku/belajar_css.pdf">
     6. Link ke halaman_buku/belajar_css.pdf
   </a>
   <br />
  
   <a title="link ke kaskus, gan!" href="http://www.kaskus.com">
     7. Link ke http://www.kaskus.com
   </a>
  
   <br />
  
   <a title="situs-berita" href="http://www.kompas.com">
     8. Link ke http://www.kompas.com
   </a>
  
</body>
</html>
 FORM
Form digunakan untuk menerima inputan dari user dan memproses hasil inputan tersebut ke
server. Penggunakan form yang hanya menggunakan HTML saja tidak akan terlalu berguna.
From biasanya hanya berupa interface yang disediakan untuk mengumpulkan data dari user,
dan akan diproses dengan bahasa pemograman seperti JavaScript atau PHP, dan disimpan di
dalam database MySQL

Perintah atau tag yang digunakan adalah <FORM> dan diakhiri dengan tag </FORM>.

Field-field yang berada diantaranya digunakan untuk menentukan ukuran jenis dari masing-
masing input field. Berikut ini dibahas beberapa elemen yang dapat disertakan dalam suatu
form.
Contoh:
Sintak penulisan form :  
<form method=”(post) atau get” action=”program_pemroses”>
<!—elemen-elemen from 
</form>

COUNTERS
Counters CSS adalah "variabel" yang dikelola oleh CSS yang nilainya dapat ditambahkan
oleh aturan CSS (untuk melacak berapa kali penggunaannya). Penghitung membiarkan Kita
menyesuaikan tampilan konten berdasarkan penempatannya di dokumen.

Penomoran Otomatis dengan Penghitung

Penghitung CSS seperti "variabel". Nilai variabel dapat bertambah dengan aturan CSS (yang
akan melacak berapa kali penggunaannya).

Untuk bekerja dengan counter CSS kita akan menggunakan properti berikut:

 counter-reset - Membuat atau me-reset sebuah counter

 counter-increment - Menambah nilai counter
 konten - Sisipan konten yang dihasilkan
 counter () atau counter () - Menambahkan nilai penghitung ke elemen
Untuk menggunakan penghitung CSS, pertama-tama harus dibuat dengan counter-reset.
Contoh berikut membuat penghitung untuk halaman (di dalam body selector), lalu
menambahkan nilai counter untuk setiap elemen <h2> dan menambahkan "Section <value of
the counter>:" ke awal setiap elemen
<html>
<head>
<style>
body {
counter-reset:section;
}

h2::before {
counter-increment:section;
content: "section" counter(section) ": ";
}
</style>
</head>
<body>

<h1> Using css counter :</h1>

<h2> HTML tutorial </h2>
<h2> CSS tutorial </h2>
<h2> JavaScript tutorial </h2>

<p><b>Note:</b> IEB support properties only if a !doctype is

specified.</p>
</body>
</html>