[ Desain Web ] Pengenalan CSS, Selektor, dan Penempatan Code CSS

Cascading Style Sheet (CSS)

CSS dirancang untuk mengatur tampilan (style dan layout) halaman web. Banyak hal yang bisa dibuat oleh css, dari mengatur bingkai element, pewarnaan latar belakang (background) yang bergradiasi, pembuatan bayangan (shadow) pada element HTML, pengaturan teks, bahkan bisa membuat menu. Akan tetapi halaman web yang menarik bukan sepenuhnya peran dari CSS, namu dipadukan juga dengan Javascript/Jquery untuk mendapatkan efek - efek yang luar biasa.
Hampir semua halaman turut web melibatkan CSS, oleh karena itu pemahaman terhadap CSS sangat dibutuhkan.

Selektor Pada CSS

Pelajaran dasar yang perlu kamu ketahui adalah selektor. Selektor berguna untuk memilih element - element yang menjadi target untuk kamu atur dengan efek tertentu. Sebagai Contoh,
div{background:#000};
diatas adalah contoh selektor yang menyatakan "elemen div akan diberikan background hitam (#000)".
Berikut adalah beberapa selektor pada CSS

Selektor	Keterangan
#namaID	Memilih Elemen yang nilai atribut yang ID-nya berupa "namaID", contoh lain "#menu" untuk memilih elemen yang ID-nya "menu"
.namaClass	Memilih Elemen yang nilai atribut yang Class-nya berupa "namaClass", contoh lain ".box" untuk memilih elemen yang memilik Class "box"
namaElement	Memilih Elemen yang nama elementnya adalah "namaElement", contoh lain "table" untuk memilih element "table"
namaElement namaKeturunannya	Memilih Elemen "elementKeturunan" yang merupakan keturunan dari "namaElement", contoh lain "table tr" untuk memilih element "tr" yang berada dalam element "table"
namaElement > elementAnak	Memilih Elemen "elementAnak" yang merupakan anak dari element "namaElement", contoh lain "table > tr" untuk memilih "tr" yang merupakan anak dari "table"
elementA + elementB	Memilih Elemen "elementB" yang terletak tepat setelah "elemenA"
selektorA, selektorB	Memilih "selektorA" dan "selektorB", contoh lain "#menu, .#submenu, .list" artinya memilih "#menu", "#submenu", dan ".list" sekaligus
selektorA:first-child	Memilih elemen dengan selektor "selektorA" yang merupakan anak pertama, contoh lain "tr td:first-child" artinya memilih elemen "td" yang pertama didalam elemen "tr"
selektorA:last-child	Memilih elemen dengan selektor "selektorA" yang merupakan anak terakhir, contoh lain "tr td:first-child" artinya memilih elemen "td" yang terakhir didalam elemen "tr"
selektorA:nth-child(x)	Memilih elemen dengan selektor "selektorA" yang merupakan anak ke-X, contoh lain "tr td:nth-child(2)" artinya memilih elemen "td" yang ke-2 didalam elemen "tr", nilai didalam kurung dapat di ganti [even=untuk nilai genap][odd=untuk nilai ganjil][angka = untuk nilai yang ditentukan]
namaElement[atrib]	Memilih "namaElement" yang memiliki atribut "atrib", contoh lain "input[type]" artinya memilih element "input" yang memiliki atribut "type"
namaElement[atrib="x"]	Memilih "namaElement" yang memiliki atribut "atrib" dengan nilai "x", contoh lain 'input[type="text"]' artinya memilih element "input" yang memiliki atribut "type" dengan nilai "text"
namaElement[atrib^="x"]	Memilih "namaElement" yang memiliki atribut "atrib" dengan nilai diawali oleh "x", contoh lain 'input[type="te"]' artinya memilih element "input" yang memiliki atribut "type" dengan nilai diawali oleh "te"
namaElement[atrib$="x"]	Memilih "namaElement" yang memiliki atribut "atrib" dengan nilai diakhiri"x", contoh lain 'input[type="xt"]' artinya memilih element "input" yang memiliki atribut "type" dengan nilai diakhiri dengan "xt"

Cara Penulisan Script CSS (Cascading Style Sheets)

Akan penulis jelaskan tata cara penulsan scrip CSS, sebagai contoh :


.box {

background:#000;

color:#fff;

}

Script diatas menyatakan bahwa semua elemen yang ber-kelas "box" akan memilik background (latar belakang) hitam "#000" dan "color" diwarnai dengan putih "#FFF". Untuk penjelasan secara visual lihat gambar berikut,

Meletakkan Script CSS

Untuk meletakkan script css ini bisa dimana saja, ada 3 opsi yaitu, langsung di dalam element/tag html, di dalam tag <head>, bahkan bisa di file yang terpisah.

1. Peletakkan Script CSS di dalam Tag HTML

Script CSS bisa langsung ditulis di tag html, sebagai contoh
<div style="background:#333; color:#fff; padding:10px; width:200px;">Contoh Memasukkan CSS di dalam tag html</div>

2. Peletakkan Script CSS di dalam Tag Head

Script CSS juga bisa ditulis di tag head, sebagai contoh


<html>

<head>

<style>

.contoh {

background:#333;

color:#fff; 

padding:10px; 

width:200px;

} 

</style>

</head>

<body>

<div class="contoh">Contoh menulis script css di tag head</div> 

</body>

</html>

3. Penulisan Script CSS di File Terpisah

Untuk membuat file terpisah antara HTML dan CSS kita harus membuat file .css setelah itu dimasukkan ke dalam file html, sebagai contoh
file style.css
background:#333;
color:#fff;
padding:10px;
width:200px; s

file contoh.html


<html>

<head>

<link rel="stylesheet" href="style.css"> 

</head>

<body>

<div class="contoh">Contoh menulis script css dalam file yang terpisah</div>

</body>

</head>

Sabtu, 25 Oktober 2014