Breaking

Sunday, October 27, 2013

CSS (Cascading Style Sheet)



Pada artikel sebelumnya saya saya telah membahas tentang Pengertian HTML dan Dasar Penggunaan HTML. Dan pada tahap ini saya anggap bahwa Anda telah memahami cara penggunaan HTML sehingga saya akan melanjutkan ke tahap selanjutnya yaitu CSS (Casading Style Sheet).

Pengertian CSS

CSS (Cascading Style Sheet) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading,subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian body pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.
CSS adalah bahasa Style Sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.


Cara Penulisan CSS



Inline style sheet
Penulisan di dalam elemen HTML.

Contoh script 1






Embedded Style Sheet
Penulisan CSS di dalam dokumen HTML dan menggunakan tag <style></style>

Contoh script 2



Linked Style Sheet
Penulisan skrip CSS dihalaman berbeda atau terpisah dari html.

Contoh script 3


Contoh script style1.css




Aturan Penulisan CSS

Selector
Terdiri dari tag,class,ID

Declaration
Mendeskripsikan property dan value
Contoh


H1

{

Color : #0000FF

}


Keterangan :
Selector : H1
Properti : Color
Value : #0000FF

Macam-macam Selector

Tag/Elemen
Setiap tag yang ada pada HTML bisa dijadikan selector

Class
Diawal penulisan menggunakan tanda titik, pada HTML ditambahkan class
style1.css


h1

{

color:red;

}

.isiteks

{

font-family:arial,halvetica;

font-size:24px;

color:#6699FF;

}


contoh script
<html> 

<head>

<link href='style1.css' rel="stylesheet" type='text/css'>

</head>

<body>

<p class='isiteks'>Contoh Class</p>

</body> </html>



Contoh Class


ID
Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain web karena didefiniskan denga ID berbeda.
Misal.

style1.css
 h1 

{

color:red;

}

.isiteks

{

font-family:arial,halvetica;

font-size:24px;

color:#6699FF; }

.judul1 { font-family:arial,halvetica;

font-size:12px; color:#6699FF;

}


contoh script


<html>
<head>
<link href='style1.css' rel="stylesheet" type='text/css'>
</head> <body>
<p id='judul1'>Contoh ID</p>
</body> </html>


Contoh ID