CSS memiliki fungsi sebagaimana halnya dalam sebuah styles yang ada dalam sebuah aplikasi pengolahan kata seperti halnya Microsoft Word. Dalam Micosoft Word kita bisa menggunakan styles nya seperti heading, subbab, footer, bodytext, image, dan beberapa styles lainnya yang disediakan oleh Microsoft Word. Maka dari itu CSS bisa dikatakan memiliki fungsi menentukan styles pada pemograman web yang bisa difungsikan dalam beberapa berkas secara bersamaan.
Dengan menggunakan CSS, maka komponen-komponen HTML akan bisa menyajikan sebuah tampilan yang sangat menarik ke dalam front page sebuah web karena bisa mengendalikan ukuran gambar, warna text, bagian-bagian tambahan pada gambar seperti halnya border, ukuran border, warna border, warna table, warna pada hyperlink, over mouse, pemanggilan sebuah object grafik, spasi atar paragraf, dan beberapa styles lainnya.
Jadi dengan CSS memungkinkan kita untuk bisa membuat tampilan website yang sama dengan format yang berbeda-beda.
Cara pembuatan script CSS ini ada beberapa alternatif pilihan, kita bisa memasang script CSS ini dalam satu page script HTML atau kita bisa membuatnya dalam page yang berbeda.
1. Membuat script CSS dalam satu page script HTML.
Jika kita ingin membuat script CSS dalam satu page pada script HTML, maka kita menggunakan tag atau atribut <style> sebagai tag pembuka, dan </style> sebagai tag penutup.
Example :
<style language="text/css">
#kotak1{
background-color: red;
width: 123px;
height: 111px;
}
.kotak2{
background-color: yellow;
width: 123px;
height: 111px;
}
h1{
font-family: verdana, arial, time_new_rowman;
color: white;
font-size: 14px
}
</style>
Keterangan :
Dalam script CSS ini saya telah mendeklarasikan beberapa variable.
1. Variable pertama adalah dengan nama Kotak1 yang menggunakan tanda "#" di awalnya. Ini menerangkan bahwa variable Kotak1 bisa saya panggil dengan menggunakan "ID".
2. Variable ke dua adalah dengan nama Kotak2 yang menggunakan tanda "." di awalnya. Ini menerangkan bahwa variable Kotak2 bisa saya panggil dengan menggunakan "Class".
2. Variable ke tiga adalah dengan nama h1 yang tanpa menggunakan "#" maupun ".". Ini menerangkan pemanggilan variable ini adalah dengan cukup memakai tag.
Contoh pemanggilan variable CSS pada script HTML.
2. Membuat script CSS berbeda page dengan HTML.
Pada dasarnya adalah sama dengan pembuatan script CSS seperti yang diterangkan pada nomor 1. Namun berbedanya adalah, jika script CSS ditulis pada page yang berbeda, maka tage <style>....</style> ditiadakan. Dengan memanfaatkan aplikasi text editor seperti Notepad atau Notepad++, tuliskan variabel dan deklarasi CSS yang ada dibawah tag <style> hingga variable dan deklarasi di atas tag </style>, kemudian file disimpan dalam format NamaFile.css.
Pemanggilan script CSS pada pada kode HTML cukup simple karena kita cukup menambahkan script sebagai berikut pada page kode HTML anda:
Example :
Mohon kritik dan sarannya demi pengembangan yang lebih baik lagi.
Selamat Belajar!
Dalam script CSS ini saya telah mendeklarasikan beberapa variable.
1. Variable pertama adalah dengan nama Kotak1 yang menggunakan tanda "#" di awalnya. Ini menerangkan bahwa variable Kotak1 bisa saya panggil dengan menggunakan "ID".
2. Variable ke dua adalah dengan nama Kotak2 yang menggunakan tanda "." di awalnya. Ini menerangkan bahwa variable Kotak2 bisa saya panggil dengan menggunakan "Class".
2. Variable ke tiga adalah dengan nama h1 yang tanpa menggunakan "#" maupun ".". Ini menerangkan pemanggilan variable ini adalah dengan cukup memakai tag.
Contoh pemanggilan variable CSS pada script HTML.
<html>
<title> Pemanggilan Variable CSS pada HTML </title>
<style language="text/css">
#kotak1{
background-color: red;
width: 123px;
height: 111px;
}
.kotak2{
background-color: yellow;
width: 123px;
height: 111px;
}
h1{
font-family: verdana, arial, time_new_rowman;
color: white;
font-size: 14px
}
</style>
<body>
<h1>
<div id="kotak1"> ini adalah kotak 1 </div>
<div class="kotak2"> ini adalah kitak 2 </div>
</h1>
</body>
</html>
2. Membuat script CSS berbeda page dengan HTML.
Pada dasarnya adalah sama dengan pembuatan script CSS seperti yang diterangkan pada nomor 1. Namun berbedanya adalah, jika script CSS ditulis pada page yang berbeda, maka tage <style>....</style> ditiadakan. Dengan memanfaatkan aplikasi text editor seperti Notepad atau Notepad++, tuliskan variabel dan deklarasi CSS yang ada dibawah tag <style> hingga variable dan deklarasi di atas tag </style>, kemudian file disimpan dalam format NamaFile.css.
Pemanggilan script CSS pada pada kode HTML cukup simple karena kita cukup menambahkan script sebagai berikut pada page kode HTML anda:
<link rel="stylesheet" href="Location_NamaFile.css" type="text/css" />
Example :
<html>Nah. Jadi jelas sekarang fungsi atau peran CSS pada pemograman web seperti apa. Semoga ini bermanfaat dan menjadikan wawasan anda lebih banyak lagi.
<title> Cara Memasukkan Script CSS Pada Page HTML </title>
<link rel="stylesheet" href="Location_NamaFile.css" type="text/css" /><body>
<h1>
<div id="Kotak1"></div>
<div class="Kotak2"></div>
</h1>
</body>
</html>
Mohon kritik dan sarannya demi pengembangan yang lebih baik lagi.
Selamat Belajar!
Website CSS : http://www.w3.org/Style/CSS/
0899 379 600 2 
blacknodx@gmail.com 
Jl. Pancoran Barat 4D No. 36 Jakarta Selatan.
sangat bermanfaat. cara menerangkannya juga simple dan mudah di mengerti. makasih mas, ini sangat membantu sekali bagi saya. semoga bermanfaat juga bagi yang lain. salam persahabatan blogger dan ditunggu kunjungan baliknya. mahesa
ReplyDeletebagaimana kalau 2css dalam pemanggilanya
ReplyDeleteCUkup meletakkan dalam 2 div. Misalnya :
Delete#menu { deskripsi ;}
.li { deskripsi ;}
<div id="menu">
<div class="li">
</div>
</div>