Selain menggunakan selector elemen, class dan id pada CSS kita juga bisa menggunakan selector atribut. Dengan cara ini kita bisa mengatur style hanya pada elemen dengan atribut tertentu yang dipilih pada selector. Untuk menggunakan atribut pada selector kita menempatkan atribut setelah elemen dengan diapit oleh tanda [].

Kita juga bisa menambahkan nilai/value pada selector dengan beberapa operator seperti =, ~=, |= dan lainnya. Dengan cara ini kita bisa mengatur style komponen form tertentu seperti input type=text atau input type=submit.

Berikut ini beberapa cara menggunakan selector atribut pada CSS:

1. selector [atribut]

Digunakan untuk selector elemen dengan atribut tertentu.

Berikut ini contoh selector untuk elemen <a> dengan atribut target :

a[target] {
    background-color: blue;
}

Kita belajar selector [atribut] disini >>

2. selector [atribut=value]

Digunakan untuk selector elemen dengan atribut dan value tertentu.

Berikut ini contoh selector untuk elemen <input> dengan atribut “type” dengan value “text”:

input[type="text"] {
    background-color: green;
}

Kita belajar selector [atribut=value] disini >>

3. selector [atribut~=value]

Digunakan untuk selector elemen dengan atribut yang mempunyai value berisi kata tertentu.

Berikut ini contoh selector untuk elemen <title> yang mempunyai value berisi kata “buku” :

[title~="buku"] {
    border: 3px solid red;
}

Contoh diatas akan mengenai elemen dengan title=”buku”, title=”nulis buku”, title=”buku tulis” namun tidak untuk title=”buku-saya” atau title=”bukuku”.

Kita belajar selector [atribut~=value] disini >>

4. selector [atribut|=value]

Digunakan untuk selector elemen dengan atribut yang mempunyai value dengan kata depan tertentu.

Berikut ini contoh untuk selector elemen <title> dengan value yang diawali dengan kata depan “buku”:

[class|="buku"] {
    background: red;
}

Kita belajar selector [atribut|=value] disini >>

5. selector [atribut^=value]

Digunakan untuk selector elemen dengan atribut yang mempunyai value yang diawali kata tertentu.

Berikut ini contoh untuk selector elemen <title> dengan value yang diawali dengan kata “buku”:

[class^="buku"] {
    background: green;
}

Kita belajar selector [atribut^=value] disini >>

6. selector [atribut$=value]

Digunakan untuk selector elemen dengan atribut yang mempunyai value yang diakhiri kata tertentu.

Berikut ini contoh untuk selector elemen <title> dengan value yang diawali dengan kata “tulis”:

[class$="tulis"] {
    background: blue;
}

Kita belajar selector [atribut$=value] disini >>

7. selector [atribut*=value]

Digunakan untuk selector elemen dengan atribut yang mempunyai value berisi nilai tertentu (tidak harus berupa kata).

Berikut ini contoh selector untuk elemen <title> yang mempunyai value berisi kata “bu”:

[class*="bu"] {
    background: yellow;
}

Kita belajar selector [atribut*=value] disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi:

• //www.w3schools.com/css/css_attribute_selectors.asp

Pseudo elemen adalah elemen semu berupa keyword yang ditambahkan pada selector dengan tujuan untuk mengatur style dari sebagian elemen saja. Beberapa pseudo elemen hanya bisa dipakai pada elemen blok saja, seperti div dan p.

Kegunaan dari pseudo elemen diantaranya adalah untuk mengatur tampilan baris pertama sebuah paragraf atau sekedar menambahkan dekorasi image pada akhir paragraf.

Cara penulisan pseudo elemen

Untuk menuliskan pseudo elemen, kita menggunakan tanda dobel titik dua (::) diantara selector elemen dan pseudo elemen.

selector::pseudo-element {
    property:value;
}

Berikut ini beberapa pseudo elemen dan penjelasannya :

1. ::after

Adalah pseudo elemen yang dipakai untuk menambahkan sesuatu pada akhir elemen.

p::after {
    content: url(splitter.gif);
}

Pada contoh diatas berarti kita menambahkan gambar splitter.gif pada akhir paragraf.

Kita bisa belajar pseudo elemen ::after disini >>.

2. ::before

Adalah pseudo elemen yang dipakai untuk menambahkan sesuatu pada awal elemen.

p::before {
    content: url(heading.gif);
}

Pada contoh diatas berarti kita menambahkan gambar heading.gif pada akhir paragraf.

Kita bisa belajar pseudo elemen ::before disini >>.

3. ::first-letter

Adalah pseudo elemen yang dipakai untuk mengatur style dari huruf pertama dari text sebuah elemen. Pseudo elemen ::first-letter hanya bisa dipakai pada blok elemen saja.

p::first-letter {
    color: #0000FF;
    font-size: 20px;
}

Pada contoh diatas berarti kita menampilkan huruf pertama dari text pada paragraf dengan warna biru dengan ukuran font 20px.

Kita bisa belajar pseudo elemen ::first-letter disini >>.

4. ::first-line

Adalah pseudo elemen yang dipakai untuk mengatur style dari baris pertama pada sebuah elemen. Pseudo elemen ::first-line hanya bisa dipakai pada blok elemen saja.

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

Pada contoh diatas berarti kita menampilkan baris pertama pada paragraf dengan warna hijau dengan varian font small-caps.

Kita bisa belajar pseudo elemen ::first-line disini >>.

5. ::selection

Adalah pseudo elemen yang dipakai untuk mengatur style dari bagian elemen yang diselect oleh user. Properti yang bisa diterapkan pada pseudo elemen ::selection adalah color, background, cursor, dan outline.

::selection {
    color: #FF0000;
    background: yellow;
}

Pada contoh diatas berarti kita mengubah tampilan obyek yang diselect oleh pengguna dengan warna merah dengan background kuning.

Kita bisa belajar pseudo elemen ::selection disini >>.

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi:

• //www.w3schools.com/css/css_pseudo_elements.asp

Pseudo Class adalah keyword yang ditambahkan pada selector untuk mendefinisikan  kondisi kondisi tertentu yang terjadi pada sebuah elemen. Kondisi tersebut misalnya pada link adalah saat dikunjungi, saat ada cursor mouse diatasnya atau saat berada dalam kondisi normal.

Dalam CSS ada banyak sekali pseudo class yang bisa dipilih. Untuk menuliskan pseudo class pada sebuah selector elemen kita menggunakan tanda baca titik dua ( :), contoh a :hover adalah menunjukkans selector untuk elemen link (a) saat ada mouse diatasnya (hover).

Cara penulisan pseudo class :

selector:pseudo-class {
    property: value;
}

Contoh penggunaan pseudo class untuk elemen a :

/* link belum dikunjungi*/
a:link {
    color: #FF0000;
}

/* link sudah dikunjungi */
a:visited {
    color: #00FF00;
}

/* ada cursor mouse diatas link */
a:hover {
    color: #FF00FF;
}

/* link yang terpilih */
a:active {
    color: #0000FF;
}

Berikut ini beberapa pseudo class dan penjelasannya :

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/css/css_pseudo_classes.asp

Dalam menggunakan CSS, kita bisa menggunakan kombinasi beberapa selector yang digabung dengan sebuah combinator CSS. Combinator CSS ini menjelaskan bagaimana hubungan antara beberapa selector tersebut.

Ada empat kombinator CSS yang bisa dipakai, yaitu :

1. descendant selector
2. child selector
3. adjacent sibling selector
4. general sibling selector

Berikut ini penjelasan beberapa combinator tersebut :

1. descendant selector

Adalah kombinasi selector turunan. Artinya selector yang pertama merupakan elemen utama dan selector berikutnya merupakan elemen turunan yang berada dalam blok elemen utama. Jadi deklarasi CSS pada descendant selector berlaku untuk semua elemen turunan yang ada dalam blok elemen utama.

Untuk menggunakan kombinasi descendant selector kita gunakan operator dengan karakter spasi.

Contoh penggunaan descendant selector :

div p {
    background-color: yellow;
}

Untuk lebih jelas, kita bisa berlatih descendant selector disini >>.

2. child selector

Adalah kombinasi selector anak. Artinya selector yang pertama merupakan elemen induk dan selector berikutnya merupakan elemen anak dari elemen utama. Jadi semua deklarasi CSS pada child selector berlaku untuk semua elemen anak yang ada dalam blok elemen induk.

Perbedaan child selector dengan descendant selector adalah:

• kombinasi child selector berlaku pada elemen yang berada secara langsung dibawah elemen induk dan tidak berlaku untuk elemen yang berada dibawah elemen lain walaupun masih didalam blok elemen induk.
• kombinasi descendant selector berlaku untuk semua elemen turunan yang ada dalam elemen induk

Untuk menggunakan kombinasi child selector kita gunakan operator dengan karakter >.

Contoh penggunaan child selector :

div > p {
    background-color: yellow;
}

Untuk lebih jelas, kita bisa berlatih child selector disini >>.

3. adjacent sibling selector

Adalah kombinasi CSS untuk elemen yang berdekatan dan berada tepat setelah blok elemen pertama. Jadi elemen kedua tidak berada didalam elemen pertama.

Untuk menggunakan kombinasi adjacent sibling selector kita gunakan operator dengan karakter +.

Contoh penggunaan adjacent sibling selector :

div + p {
    background-color: yellow;
}

Untuk lebih jelas, kita bisa berlatih adjacent sibling selector disini >>.

4. general sibling selector

Adalah kombinasi CSS untuk elemen yang berdekatan. Deklarasi CSS berlaku untuk semua elemen yang dituju oleh selector kedua yang berada setelah elemen pertama. Seperti adjacent sibling, elemen kedua harus tidak berada didalam elemen pertama.

Untuk menggunakan kombinasi general sibling selector kita gunakan operator dengan karakter ~.

Contoh penggunaan general sibling selector :

div ~ p {
    background-color: yellow;
}

Untuk lebih jelas, kita bisa berlatih general sibling selector disini >>.

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/css/css_combinators.asp

Ada beberapa cara yang bisa dipakai untuk mengatur alignment sebuah elemen blok secara horizontal. Seperti diketahui, untuk mengatur alignment sebuah teks kita bisa menggunakan properti text-align. Namun properti ini tidak bisa diterapkan pada elemen blok. Untuk itu kita bisa menggunakan beberapa kombinasi properti untuk mengatur elemen sebuah elemen blok.

Elemen blok adalah sebuah elemen yang bisa mengambil keseluruhan lebar halaman dan memiliki line break sebelum dan sesudahnya. Beberapa contoh elemen blok diantaranya <h1>, <p> dan <div>.
Untuk mengatur layout halaman kita memerlukan pengaturan alignment pada tiap-tiap elemen blok ini.

Berikut ini akan dijelaskan beberapa cara untuk mengatur elemen blok secara horizontal :

1. Membuat alignment rata tengah dengan properti margin.

Margin adalah area bebas yang berada diantara beberapa elemen pada halaman html. Margin bisa juga diartikan sebagai jarak/spasi antara dua elemen atau lebih. Posisi margin berada diluar border dan merupakan area yang transparan serta tidak bisa diberi warna background.

Kita bisa membuat sebuah elemen blok berada ditengah dengan menetapkan nilai auto pada properti margin atau kombinasi dari margin-left dan margin-right. Syarat yang harus diperhatikan agar cara ini bisa bekerja adalah kita harus menetapkan width dibawah 100%.

Contoh penggunaan properti margin untuk membuat alignment rata tengah :

.center {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

Kita bisa belajar penggunaan properti margin untuk membuat alignment rata tengah disini >>

2. Membuat alignment rata kiri atau rata kanan dengan properti position.

Posisi sebuah elemen dapat diatur menggunakan CSS misalnya kita mau tempatkan diatas, kiri, kanan atau dibawah. Kita juga bisa menempatkan sebuah elemen secara bertumpuk (ovelap) dimana satu elemen berada diatas elemen yang lain. Dengan CSS kita juga bisa membuat aturan posisi saat elemen terlalu besar pada halaman html.

Kita bisa membuat sebuah elemen blok berada di kiri atau di kanan dengan menetapkan nilai absolute pada properti position. Kemudian untuk membuat rata kiri kita tetapkan nilai 0px pada properti left dan untuk membuat rata kanan kita tetapkan nilai 0px pada properti right.

Contoh penggunaan properti position untuk membuat alignment rata kiri :

.left {
    position: absolute;
    left: 0px;
    width: 500px;
}

Contoh penggunaan properti position untuk membuat alignment rata kanan :

.right {
    position: absolute;
    right: 0px;
    width: 500px;
}

Kita bisa belajar penggunaan properti position untuk membuat alignment rata kiri atau kanan disini >>

3. Membuat alignment rata kiri atau rata kanan dengan properti float.

Selain properti position, kita juga bisa menggunakan properti float untuk membuat sebuah blok elemen rata kiri atau rata kanan. Floating elemen adalah menempatkan elemen secara mengambang pada halaman dengan mengacu pada sebuah titik tambatan berada dikiri atau dikanan.

Contoh penggunaan properti float untuk membuat alignment rata kiri :

.left {
    float: left;
    width: 500px;
}

Contoh penggunaan properti float untuk membuat alignment rata kanan :

.right {
    float: right;
    width: 500px;
}

Kita bisa belajar penggunaan properti float untuk membuat alignment rata kiri atau kanan disini >>

Mengatasi perbedaan tampilan pada lain browser

Ketika kita mengatur alignment sebuah blok elemen dengan cara seperti ini, sebaiknya kita tetapkan dulu nilai margin dan padding untuk elemen <body> misal sebesar 0px. Ini mencegah perbedaan tampilan pada beberapa browser yang berbeda.

Contoh penulisan properti margin dan padding pada elemen body :

body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
    width: 500px;
}

Pada browser IE8 dan sebelumnya kita menjumpai saat menggunakan properti position dan float. Masalah tersebut adalah saat sebuah container elemen memiliki lebar tertentu dan deklarasi !DOCTYPE tidak ada maka pada halaman browser IE8 dan sebelumnya akan ditambahkan margin sebesar 17px pada sisi kanan.

Ini terlihat seperti spasi untuk sebuah scrol bar. Untuk mengatasi hal itu pastikan kita deklarasikan !DOCTYPE sebelum menggunakan properti position atau float.

Contoh penulisan DOCTYPE pada halaman HTML :

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
 <html>  
 <head>  
 ... isi head  
 </head>  
 <body>  
 ... isi body  
 </body>  
 </html  

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/css/css_align.asp

Floating elemen adalah menempatkan elemen secara terapung pada halaman dengan mengacu pada sebuah titik tambatan berada dikiri atau dikanan. Untuk membuat floating elemen kita menggunakan propert CSS float. Penggunaan CSS Float biasanya dipakai untuk menampilkan image, namun kadang dipakai juga oleh elemen lain terutama saat membuat layout.

Dengan CSS float, sebuah elemen bisa dipaksa untuk berada dikiri atau berada di kanan. Elemen hanya floating secara horizontal ke kiri atau ke kanan, tidak bisa ke atas atau ke bawah. Elemen yang dikenakan CSS float akan bergerak ke kiri atau kekanan pada suatu area tertentu pada elemen contain.

Elemen sebelum floating elemen tidak terkena efek CSS, namun elemen sesudahnya akan ditampilkan mengikuti alur dari floating elemen. Sebagai contoh jika sebuah image kita float ke kanan maka teks sesudahnya akan mengikutinya disebelah kiri.

Contoh penggunaan CSS float :

img {
    float: right;
}

Kita bisa belajar CSS float disini >>

Merangkai Floating Elemen

Kita bisa menyusun elemen secara rapi dengan memanfaatkan CSS floating. Caranya adalah dengan menetapkan properti width dan height pada tiap elemen yang akan disusun tersebut. Kemudian untuk membuat jarak antar elemen kita gunakan properti margin.

Contoh penggunaan CSS float untuk merangkai elemen:

.preview {
    float: left;
    width: 100px;
    height: 80px;
    margin: 4px;
}

Kita bisa belajar CSS float untuk merangkai disini >>

Menghilangkan efek floating

Untuk menghilangkan efek floating pada elemen sesudah floating elemen kita menggunakan properti CSS clear, seperti contoh berikut ini :

.text_note {
    clear: both;
}

Kita bisa belajar menghilangkan efek CSS float disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/css/css_float.asp