• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Pengertian CSS dan Cara Penerapan CSS pada HTML

12‘09
June

noimg.jpg

Pada artikel saya kali ini saya akan menjelaskan pertanyaan rekan pixar ataupun yang lainnya tentang CSS. Apa yang dimaksud dengan CSS dan bagaimana cara menerapkannya pada website?! CSS adalah singkatan dari Cascading Style Sheet, digunakan untuk mengatur style atau tampilan dari dokumen HTML.

CSS (Cascading Style Sheet) dibuat oleh World Wide Web Consortium (W3C) untuk menyelesaikan masalah yang timbul pada saat dokumen HTML masih versi 3.2. HTML versi 3.2 ini merupakan mimpi buruk untuk para Pengembang Web karena untuk memberi style pada document HTML para pengembang harus membuat tag-tag tersendiri misalkan tag <font>, tag atribut warna <color> dan lain sebagainya pada setiap dokumen HTML yang akhirnya membuat pengembangan web dengan skala besar menjadi lebih kompleks, rumit dan mahal.

Mengapa harus memakai CSS?!

Penggunaan CSS merupakan standar untuk web-web modern (Web 2.0). Sebagian pembaca mungkin sudah tau bahwa implementasi CSS, Table Less dan Semantik tapi tidak Divitis (maniak div) merupakan standarisasi web yang baik. Saya sendiri sebetulnya tidak peduli apakah CSS adalah Standar Web ataupun Bukan, menurut saya kita memang harus melakukan implementasi CSS untuk setiap perancangan website kita karena dengan CSS kita tidak akan melakukan hal-hal yang terus diulangi dalam menerapkan suatu gaya pada tag HTML yang kita buat, cukup satu kode untuk semua mark up yang sama.

Lalu bagaimana teknik implementasi CSS pada tag HTML yang kita buat?!

Ada dua cara yang bisa diterapkan untuk menggunakan CSS pada web. Cara yang pertama adalah dengan membuat CSS langsung didalam satu file HTML kita (internal / inline style sheet). Cara yang kedua adalah dengan cara memanggil CSS tersebut dari file CSS tersendiri (external style sheet). selanjutnya mari kita langsung praktek silahkan buka dreamweaver anda atau text editor, dsb :

1. Internal Style Sheet

Cara membuat internal Style Sheet adalah dengan menambahkan tag <style type="text/css" media="screen"> pada bagian header tag HTML kita. Setelah selesai menambahkan tag maka selanjutnya tag tersebut kita tutup lagi dengan </style> sehingga kode HTML menjadi sebagai berikut

<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
<!-- disini kode CSS -->
</style>
</head>
<body>
<!-- disini content HTML -->
</body>
</html>

Ok, sekarang anda paham kan dimana kita harus menerapkan CSS dengan cara internal Style Sheet. Tapi saya tau anda tidak puas kalau saya hanya menerangkan dimana saya harus meletakan CSS nya. kurang seru tanpa praktek membuat web CSS, betul tidak?! Karena itu mari kita mulai membuat website dengan teknik CSS. berikut gambar proyek web table less dengan penerapan CSS kita kali ini

Bagaimana cara membuatnya ?!

Pertama-tama anda harus punya dasar yang cukup tentang CSS silahkan buka link-link berikut untuk menambah pengetahuan anda tentang CSS

Apabila anda sudah mempunyai pemahaman yang cukup silahkan menuju tag dibawah :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Pertamaku</title>
<style type="text/css">
  <!-- disini kode CSS -->
</style>
</head>
<body>
 
<!-- Navigasi Menu -->
<ul class="navbar">
	<li><a href="index.html">Home</a>
	<li><a href="about.html">About</a>
	<li><a href="gallery.html">Gallery</a>
	<li><a href="links.html">Links</a>
</ul>
  
<!-- Content Utama -->
<h1>CSS Pertamaku</h1>

<p>Selamat datang di Web CSS ku</p>

<p>Halo ini website CSS ku, mungkin tidak ada gambar
  disini tapi setidaknya ini punya gaya</p>

<p>Harusnya ada lebih gaya markup disini tapi saya tidak 
  tahu bagaimana membuatnya, 
  apakah ada yang bisa memberitahu?!</p>
  
<p>hubungi saya kalo ada yang bisa karena 
saya sedang mati gaya</p>

<address>Made 12 Juni 2009<br> by myself.</address>

</body>
</html>

Tag HTML tersebut akan menghasilkan document website yang dapat dilihat pada gambar sebagai berikut

Uek, jelek bukan hasilnya, maka dari itu sekarang mari kita tambahkan gaya untuk tag HTML tersebut dan menambahkan mark up CSS pada tag HTML, ganti tulisan <!-- disini kode CSS --> dengan markup sebagai berikut

body {
	padding-left: 11em;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: white;
	background-color: #555555 
}

Kegunaan dari tag diatas adalah untuk memberi jarak lapisan (padding), warna dan jenis font yang kita gunakan serta warna latar dari website ( body HTML ). Untuk Warna anda bisa dengan langsung menambahkan jenis warna seperti black, white, purple, yellow, red, dsb, atau jika warnanya unik anda bisa menambahkan kode warna seperti #8c1f1f ( untuk merah tua ). Kode warna ini bisa anda dapatkan dari photoshop.

Sekarang kita mark up CSS untuk tag HTML ul. bila anda perhatikan tag UL mengandung class : <ul class="navbar">, class merupakan atribut tag html yang bisa kita didefinisikan nama-namanya untuk dihubungkan dengan mark up CSS, selain class ada juga atribut yang bernama id. Selanjutnya tambahkan saja kode mark up berikut :

ul.navbar {
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 2em;
	left: 1em;
	width: 9em 
}
ul.navbar li {
	background: white;
	margin: 0.5em 0;
	padding: 0.3em;
	border-right: 1em solid #FF6600 
}
ul.navbar a {
	text-decoration: none 
}
ul.navbar a:hover {
	color: #FF0000 
}

Selanjutnya mark up juga tag h1 (heading ), p (paragraph), addres (alamat), a (text yang mengandung link ), a:hover (text yang mengandung link dan sedang ditunjuk mouse), a:visited (text yang mengandung link dan linknya telah dikunjungi ). tambahkan kode dibawah :

h1 {
	font-family: Helvetica, Geneva, Arial,
	Sans-Regular, sans-serif;
}
a:link {
	color: #00CC66 
}
a:visited {
	color: purple;
}
address {
	margin-top: 1em;
	padding-top: 1em;
	border-top: thin dotted;
}

Dengan demikian markup CSS dengan cara inline style sheet untuk semua Tag HTML telah selesai, Hasil akhir tag adalah sebagai berikut

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Pertamaku</title>
<style type="text/css">
   body {
		padding-left: 11em;
		font-family: Georgia, "Times New Roman", Times, serif;
		color: white;
		background-color: #555555 
	}
   ul.navbar {
		list-style-type: none;
		padding: 0;
		margin: 0;
		position: absolute;
		top: 2em;
		left: 1em;
		width: 9em;
	}
   ul.navbar li {
		background: white;
		margin: 0.5em 0;
		padding: 0.3em;
		border-right: 1em solid #FF6600;
	}
   ul.navbar a {
		text-decoration: none;
	}
   h1 {
		font-family: Helvetica, Geneva, Arial,
		Sans-Regular, sans-serif 
	}
   a:link {
		color: #00CC66 
	}
   a:visited {
		color: purple 
	}
   address {
		margin-top: 1em;
		padding-top: 1em;
		border-top: thin dotted 
	}
</style>
</head>
<body>
<!-- Navigasi Menu -->
<ul class="navbar">
	<li><a href="index.html">Home</a>
	<li><a href="about.html">About</a>
	<li><a href="gallery.html">Gallery</a>
	<li><a href="links.html">Links</a>
</ul>
  
<!-- Content Utama -->
<h1>CSS Pertamaku</h1>

<p>Selamat datang di Web CSS ku</p>

<p>Halo ini website CSS ku, mungkin tidak ada gambar
  disini tapi setidaknya ini punya gaya</p>

<p>Harusnya ada lebih gaya markup disini tapi saya tidak 
  tahu bagaimana membuatnya, 
  apakah ada yang bisa memberitahu?!</p>
  
<p>hubungi saya kalo ada yang bisa karena 
saya sedang mati gaya</p>

<address>Made 12 Juni 2009<br> by myself.</address>

</body>
</html>

2. External Style Sheet

Menuliskan Mark up CSS untuk external Style Sheet sama saja dengan cara diatas, bedanya penulisan Markup tidak ditempatkan didalam HTML melainkan dibuat file sendiri dengan ekstensi .css, Silahkan buat file text baru kemudian save as style.css dan simpan di direktori yang sama.

Langkah selanjutnya buat markup sebagai berikut pada file style.css yang baru kita buat

body {
	padding-left: 11em;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: white;
	background-color: #555555 }
ul.navbar {
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 2em;
	left: 1em;
	width: 9em }
ul.navbar li {
	background: white;
	margin: 0.5em 0;
	padding: 0.3em;
	border-right: 1em solid #FF6600 }
ul.navbar a {
	text-decoration: none }
h1 {
	font-family: Helvetica, Geneva, Arial,
	Sans-Regular, sans-serif }
a:link {
	color: #00CC66 }
a:visited {
	color: purple }
address {
	margin-top: 1em;
	padding-top: 1em;
	border-top: thin dotted }

Untuk menghubungkan file HTML dengan CSS maka pada tag header HTML diganti menjadi sebagai berikut :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Pertamaku</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
</head>

penerapan external maupun internal CSS yang saya jelaskan diatas akan menghasilkan dokumen web dengan gaya yang sama

Sampai Jumpa Lagi di Mark Up CSS bagian Selanjutnya
Selamat mencoba

Anda juga mungkin suka dengan artikel ini :

  1. Tahapan Membuat Template Design Website Semantic dengan Menggunakan HTML 5
  2. Pengertian dan Tutorial Dasar CSS untuk Pemula (Newbie)
  3. Tutorial dan Penjelasan menggunakan Styling CSS ( Cascading Style Sheet) untuk Text, Fonts, Links, List dan Table
  4. Tutorial Membuat Desain Website Responsif Bagian 2 - Content Website dan Tampilan Iklan Responsif
  5. Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 3

Komentar

  • endik (22 May 2014 01:16:20)

    sy awam masalah web, stlh baca tutorialny sangat bermanfaat bagi sy yg pemula. Sy mau tanya gan, stlh kita selesai buat web, bgmn cara mengaktifkanny diinternet...? trm ksh gan atas infonya...

  • Sharkame (24 Feb 2014 08:05:59)

    makasih infonya membantu sekali. perbanyak lagi yaa materinya biar kia2 tambah jago. hehe
    http://sharkame.blogspot.com/

  • Belajar sejarah (08 Feb 2014 11:54:00)

    Good atas ilmunya, walaupun memang belum terlalu bisa CSS dan HTML.

  • Jumik Setiyanto (03 Jan 2014 02:33:59)

    Woooow,, Amazing untuk pemula seperti saya,, gara2 web ini ane gak males ngetik gan,, hahaha kan biasanya ane Copas..

  • szemaon (27 Dec 2013 07:27:45)

    makasih banyak gan artikelnya sangat bermanfaat

» Muat Komentar Sebelumnya (48 komentar) loading

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff