CSS SS adalah singkatan dari Cascading Style Sheets, yang berfungsi untuk mengontrol tampilan dari sebuah halaman

website. Cascading Style Sheet (CSS) memberikan kenyamanan mendesain Web seperti apa yang dapat kita lakukan di word processor, yaitu menggunakan style. Kita dapat menentukan CSS dalam satu lokasi yang nantinya dapat mempengaruhi tampilan dari tag HTML tertentu baik dalam satu HTML hingga keseluruhan Web. Walaupun CSS bekerja dalam lingkup HTML, tetapi CSS bukan HTML. CSS merupakan kode terpisah yang dapat mengembangkan kemampuan HTML untuk menampilkan isi dari suatu tag.CSS sangatlah mudah untuk dibuat. Tidak membutuhkan plugin atau software tambahan karena hanya teks biasa dengan aturan yang telah ditentukan.

Tipe Selector Css

Ada tiga selector umum atau cara untuk memilih HTML yang akan menggunakan style, yaitu:

HTML selector. Nama dari element HTML digunakan sebagai selector untuk mendefinisikan tag HTML yang berasosiasi. Misalnya, selector dari < h1 > adalah h1. HTML selector digunakan dalam CSS rule untuk mendefinisikan bagaimana suatu tag akan ditampilkan. Contoh:
h1 { font: bold 12pt times; }

Class selector. Class adalah agen bebas yang dapat diterapkan untuk tag HTML apapun. Kita dapat membuat nama kelas dengan hampir semua nama apapun. Karena class selector dapat diterapkan ke beberapa tag HTML sekaligus, maka class adalah selector yang paling serba guna. Contohnya:
.myClass { font: bold 12pt times; }

Perlu di tekankan sekali lahi, sebuah selector class dapat digunakan pada lebih dari satu tag HTML. Masukkan style CSS dalam selector class jika terdapat 2 atau lebih elemen/tag HTML yang bisa memiliki style yang sama dalam satu halaman.

ID Selector. Hampir sama dengan class, ID dapat diterapkan untuk hampir semua tag HTML, tetapi penggunaanya hanya sekali dalam satu halaman untuk satu tag HTML tertentu. Contohnya:
#myObject1 { position: absolute; top: '10px; }

Sekali lagi di tekankan selector ID digunakan hanya untuk 1 elemen pada satu halaman web. Misalnya saja ID #header diatas hanya digunakan sekali karena dalam satu halaman web hanya ada 1 header.

Pseudo Class
Banyak element HTML yang mempunyai status/keadaan atau fungsi yang spesial yang dapat menggunakan style yang berbeda. Contoh utama adalah tag link < a > yang tidak hanya memiliki keadaan normal tetapi juga keadaan dimana link sudah dikunjungi. Pseudo class merupakan keadaan atau fungsi yang sebelumnya telah ditetapkan untuk suatu element yang dapat menggunakan style berbeda dengan keadaan biasa dari suatu element.

PSEUDO-CLASS

Keterangan

KOMPATIBILITAS

:active

Element yang sedang aktif

IE4[*], FF1, O3.5, S1, CSS1

:first-child

Element yang merupakan anak pertama dari suatu element

IE5/7, FF1, O7, S1, CSS1

:focus

Element yang difokuskan

IE5[*], FF1, O7, S1, CSS2

:hover

Element dengan cursor mouse di atasnya

IE4[*], FF1, O3.5, S1, CSS2

:lang()

Element dengan kode bahasa tertentu

FF1.5, O8.5, S1.5, CSS2

:link

Element yang belum dikunjungi

IE4, FF1, O3.5, S1, CSS1

:visited

Element yang telah dikunjungi

IE4, FF1, O3.5, S1, CSS1

Contoh dari deklarasi pseudo class adalah sebagai berikut:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 a { display: block; font-size: larger; padding: 2px 4px; text-decoration: none; border-bottom: 1px solid #ccc; font: small Arial, Helvetica, sans-serif; } a:link { color: #f00; font-weight: bold; } a:visited { color: #c99; }

Tag link < a > diatas didefinisikan dengan tiga style berbeda untuk tiga keadaan, yaitu keadaan biasa, keadaan dimana link belum dikunjungi, dan keadaan dimana link telah dikunjungi. Pseudo Element Pseudo element merupakan bagian yang unik dari suatu element seperti huruf pertama atau baris pertama dari paragraf yang dapat di-style secara berbeda dengan bagian lainnya dari element yang sama. Berikut ini adalah daftar dari pseudo element:

PSEUDO-ELEMENT

Keterangan

KOMPATIBILITAS

:first-letter

Huruf pertama dari suatu element

IE5[*], FF1, O3.5, S1, CSS1

:first-line

Baris pertama teks dari suatu element

IE5/7, FF1, O7, S1, CSS1

:after

Space sebelum suatu element

IE5[*], FF1, O7, S1, CSS2

:before

Space setelah suatu element

IE4[*], FF1, O3.5, S1, CSS2

Contoh deklarasi dari pseudo element seperti berikut:

1p { line-height: 150%; } 2 3 p.dropCap:first-letter { font: bold 700% 'party let', 'comic sans MS', fantasy; 4 margin-right: 12px; 5 color: red; 6 float: left; 7 8}

dalam tag HTML misalnya: