Pengertian CSS dan Cara Penerapan CSS pada HTML
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?! Ha... 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 kita buat tag html sebagai berikut :
<!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>
<!-- Conteny 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 web ( 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. Ok sebelum melanjutkan saya disini tidak akan menerangkan kegunaan masing-masing properti CSS seperti padding, color, background dsb, untuk mengetahui kegunaan dari setiap properti CSS silahkan buka link ini Referensi Property CSS
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 tapi tentang class dan id ini sebaiknya kita bahas lebih lanjut lagi di bagian artikel CSS saya yang kedua, supaya kali ini kita lebih fokus ke dasar CSS nya duou. Ok Selanjutnya tambahkan saja kode 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" media="screen">
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>
<!-- Conteny 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
Have a Try, Thanks for Reading and Don't Forget To Write a Comment if You Like it!
