Menurut sumber wikipedia.org CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk memformat tampilan html, bahasa yang direkomendasikan W3C (World Wide Web Consortium) untuk melukiskan gaya seperti font, warna, ukuran, jarak, posisi pada dokumen-dokumen web. CSS sangat membantu para web designer untuk memperindah halaman web templatesnya.
Sebenarnya dengan format HTML biasa saja kita sudah bisa membentuk suatu halaman web karena format HTML memiliki fungsi yang sama CSS. Namun bedanya CSS memiliki lebih banyak element. Sehingga seorang programmer atau web designer lebih leluasa memformat dan memperindah suatu halaman web.
Dimana Kode CSS dapat diletakkan?
Ada 3 tempat untuk meletakkan kode-kode CSS antara lain :
1. Tag <HEAD> document HTML
Contoh :
<HTML><head>
<title>page title</title>
//MULAI KODE CSS
<style type="text/css">
body{
background-color:#FFFFFF;
margin:1px,1px;
}
</style>
//AKHIR KODE CSS
</head>
<body></body>
</HTML>
Kode diatas termasuk yang dengan mudah dapat dilihat oleh siapa saja yang ingin mengetahui kode CSSnya. Karena kodenya terletak bersamaan dengan kode HTML tepatnya di Tag <Head>. Sehingga apabila kita tekan Ctrl+U pada browser kode CSS akan dapat ditemukan. Cirinya selalu diawali dengan kode .
2. Di Tag Element-element HTML
Kita juga bisa meletakkan kode-kode css kita di dalam tag-tag html
contoh:
<p style="font-size:12px;color:#000"> text-text content yang akan diformat </p>
Tag HTML contoh diatas adalah
. Untuk menambahkan kode CSS dengan mengawali kode style kemudian menambahkan kode properties CSS sama seperti tag-tag HTML lainnya seperti <body>, <div>, <table>,<p>,<h1>,<font>, dll. Jadi tidak terbatas pada tag <DIV> saja seperti yang biasanya kita lihat. Tapi tag-tag lain juga dapat di aplikasikan dengan kode CSS.
3. Ekternal File
Sesuai dengan namanya eksternal berarti menuliskan kode-kode CSS diluar file HTML yang terdapat di file tersendiri berformat .css. File berformat ini dalam sebuah file web biasanya terdapat di dalam folder bernama css. Kemudian file *.css ini disertakan (include) kedalam document HTML tepatnya pada tag head. Berikut ini contoh include CSS dalam document HTML.
<head>
<title>page title</title>
<link rel="stylesheet" href="eksternal_file_css.css " type="text/css">
</head>
Selector Class
Untuk menuliskan kode CSS menggunakan selector class, pada nama class harus diawali karakter “.” (titik). Sebagai contoh berikut ini deklarasi selector class :
<div class="ClassDenis">Ini contoh CSS</div>
Sedangkan kode CSS-nya :
. ClassDenis {
font-size:12px;color:#0000DD
width:200px;
height:100px;
}
Semua tag html yang mempunyai nama class Denis maka akan diformat sesuai dengan format yang ditulis di kode CSS .ClassDenis.
Selector ID
Untuk menuliskan kode CSS menggunakan selector class, pada nama class harus diawali karakter “.” (titik). Sebagai contoh berikut ini deklarasi selector class :
<div id=" IdDenis ">content</div>
kode css:
# IdDenis{
width:200px;
height:100px;
}
Dengan menambahkan karakter # di awal nama ID nya, berarti format itu adalah format untuk tag html yang berselector ID.
Selamat belajar…
Postingan
Tidak ada komentar:
Posting Komentar