Mengenal CSS

November 24, 2008 at 1:14 am 1 comment

CSS (Cascading Style Sheet) adalah suatu format template yang dapat diciptakan pada setiap halaman dengan sangat mudah dan dinamis atau lebih mudahnya CSS adalah sebuah dokument yang digunakan untuk menangani pengaturan halaman web. Pertama kali CSS dibuat keluar versi 1 dan saat ini sudah menggunakan versi 2 atau sering disebut dengan CSS level 2. Dalam halaman web yang menggunakan HTML maka element-element HTML tersebut bisa dikendalikan oleh CSS, CSS tersebut bisa berada di luar file HTML atau menyatu dengan file HTML. Jadi pada dasarnya CSS adalah sebuah perintah yang mampu berjalan diantara tag HTML, versi HTML juga tentunya akan berpengaruh dengan hasil yang dikeluarkan oleh CSS.

Keuntungan menggunakan CSS

Semakin komplek membangun web, semakin banyak pula file yang ditangani, begitu pula template, baik itu background, jenis font, ukuran font dan lain sebagainya. Sehingga pekerjaan ini akan semakin banyak seiring dengan semakin banyaknya dan berkembangnya website. Dengan hanya mengandalkan HTML saja tentunya pekerjaan ini akan semakin repot, karena HTML hanya bisa melakukan pengaturan perelement saja. Maka dengan CSS pulalah kita dapat menghemat pekerjaan pengaturan web. Dengan menggunakan CSS cukup sekali saja dalam menentukan sebuah bentuk Lay Out halaman web kita yang kemudian bisa dihubungkan dengan HTML sehingga hanya dengan merubah file CSS saja, maka sudah bisa merubah semua tampilan halaman HTML yang sudah dibuat. Hal inilah yang membuat banyak para desainer web suka menggunakan CSS. Nah sebagai latihan mari kita mencoba membuat CSS sederhana.

Latihan membuat CSS

Pertama kita membuat file sederhana saja untuk membandingkan antara HTML dan CSS. Nah untuk membuat file htmlnya bisa menggunakan editor sudah familier dengan yang biasanya digunakan, bisa notepad, wordpad, Microsoft Frontpage, dreamweaver atau yang lain. Nah langsung kita coba saja. Yang pertama buat file pertama.htm dengan script sebagai berikut :

<html>

<head>

<title>BumenNet Online</title>

</head>

<body>

<h4><font face=”Arial, Helvetica, sans-serif”>BumenNet adalah saya satu web developer yang ada diwilayah kebumen. <br>BumenNet beralamat di jalan Mangkusari no 73 Kutosari Kebumen.</font></h4>

</body>

</html>

File berikutnya diberinama kedua.htm yang scriptnya sebagai berikut :

<html>

<head>

<title>BumenNet Online</title>

<style type=”text/css”>

h4 {

font-family:Arial, Helvetica, sans-serif

}

</style>

</head>

<body>

<h4>BumenNet adalah saya satu web developer yang ada diwilayah kebumen. <br>BumenNet beralamat di jalan Mangkusari no 73 Kutosari Kebumen.</h4>

</body>

</html>

Dari kedua file tersebut jika dipangil di browser tentunya hasilnya akan sama, bedanya hanya file kedua.htm didalamnya sudah menggunakan CSS sedangkan file pertama.htm tidak menggunakan CSS.

Lalu apa hebatnya CSS, nah kalau diperhatikan lagi memang kelihatannya file yang kedua.htm lebih banyak jumlah barisnya, namun disitu ada suatu kemudahan, yaitu jika dengan menggunakan CSS maka setiap kali HTML menggunakan tag h4 maka secara otomatis sudah diset font yang digunakan adalah Arial, Helvetica, sans-serif sedangkan di pertama.htm maka setelah h4 harus didefinisikan jenis font yang digunakan, nah kalau setiap kalau menggunakan tag h4 di html harus didefiniskan kan jadi panjang dan tambah repot, apalagi kalau fontnya mau diganti wah bisa berabeh deh kerjaan mengganti font. Nah dengan contoh sederhana diatas diharapkan kita bisa memahami apa dan manfaat dari CSS, sederhana bukan ?

Cara menggunakan CSS

Cara menggunakan CSS ada 3 yaitu External Style Sheet, Internal Style Sheet dan Inline Style Sheet. Untuk lebih jelasnya mari kita bahas satu persatu.

1. External Style Sheet

External Style Sheet, dari kata external saja sudah bisa ditebak artinya, yang berarti di luar, maksudnya file CSS terpisah dengan file HTML istilah ini sering disebut dengan Link Style Sheet. Nah cara memanggil CSSnya adalah

<link rel=”stylesheet” type=”text/css” href=”namafile.css”>

Baris di atas diletakan di dalam tag Head. Maksud dari baris di atas adalah :

<link = merupakan tag pembuka dan diakhiri dengan tanda >

Rel=” stylesheet” fungsinya menyatakan bahwa halaman ini akan dikenai efek stylesheet

Type=”text/css” menunjukkan bahwa file yang akan dipanggil adalah file CSS

Href=” namafile.css” menunjukan alamat dan nama file CSS yang dipanggil.

Nah sebagai latihan mari kita coba membuat CSS sederhana. File CSSnya diberinama body.css

body {

color : black;

background: green;

font-family:Verdana, Arial, Helvetica, sans-serif;

}

Kemudian buat file ketiga.htm

<html>

<head>

<title>BumenNet Online</title>

<link rel=”stylesheet” type=”text/css” href=”body.css”>

</head>

<body>

<h4>BumenNet adalah saya satu web developer yang ada diwilayah kebumen. <br>BumenNet beralamat di jalan Mangkusari no 73 Kutosari Kebumen.</h4>

</body>

</html>

Jika dijalankan di browser maka hasilnya akan tercetak background web berwarna hijau dan text “BumenNet adalah saya satu web developer yang ada diwilayah kebumen. BumenNet beralamat di jalan Mangkusari no 73 Kutosari Kebumen.” Akan tercetak dengan huruf Verdana berwarna hitam.

Nah mudah bukan menggunakan CSS ?

2. Internal Style Sheet

Internal Style Sheet sering disebut juga dengan Embeding Style Sheet adalah sebuah metode penulisan CSS pada halaman HTML. Dokument tersebut diletakkan diantara tag <head>….</head>. Untuk lebih jelasnyamari kita coba latihan berikut :

Beri nama filenya keempat.htm

<html>

<head>

<title>BumenNet Online</title>

<style type=”text/css”>

body {

color : black;

background: green;

font-family:Verdana, Arial, Helvetica, sans-serif;

}

</style>

</head>

<body>

<h4>BumenNet adalah saya satu web developer yang ada diwilayah kebumen. <br>BumenNet beralamat di jalan Mangkusari no 73 Kutosari Kebumen.</h4>

</body>

</html>

Dari contoh script di atas bisa dilihat penulisan Internat Style Sheet CSS dimulai dengan menggunakan <style> dan diakhiri dengan </style>

3. Inline Style Sheet

Inline Style Sheet adalah metode penulisan CSS yang langsung diletakkan pada element HTML. Cara ini termasuk cara yang kurang begitu banyak digunakan, mengingat metode penulisannya yang harus disertakan setiap kali akan menerapkan CSS harus disisipkan di element HTML sehingga semakin banyak elemen HTML yang akan disisipi CSS maka semakin banyak pula pekerjaannya.

Sebagai latihan mari kita coba script di bawah ini dengan nama file kelima.htm

<html>

<head>

<title>BumenNet Online</title>

</head>

<body style=”color:black;background:green;font-family:Verdana, Arial, Helvetica, sans-serif”>

<h4>BumenNet adalah saya satu web developer yang ada diwilayah kebumen. <br>BumenNet beralamat di jalan Mangkusari no 73 Kutosari Kebumen.</h4>

</body>

</html>

Dari ketiga cara di atas akan menghasilkan tampilan yang sama sebagai berikut :

css1

Entry filed under: Web Programming. Tags: .

Transaksi penjualan dengan mysql alat test psikologi

1 Comment Add your own

  • 1. Noe2  |  April 27, 2009 at 10:11 pm

    kalo Css untuk wordpress tu scripnya kayak pa ya? pengen banget belajar theme sendiri

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


November 2008
M T W T F S S
« Oct   Dec »
 12
3456789
10111213141516
17181920212223
24252627282930

%d bloggers like this: