Zona Software: Pengertian dasar CSS

PENGERTIAN CSS DAN CARA PENERAPAN CSS PADA HTML

Pada artikel ini saya akan menjelaskan sedikit tentang CSS.
Apa yang dimaksud dengan CSS?! CSS adalah singkatan dari Cascading Style Sheet,digunakan untuk mengatur style atau tampilan dari dokumen HTML. Menurut wikipedia, CSS adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu website, baik tata letak, jenis huruf, warna, dan semua yang berhubungan dengan tampilan atau gaya suatu web.
sebenarnya saya bukan tukang CSS,atau orang yang ahli dalam bidang CSS..tapi dalam tahap pembelajaran juga,nah kalau ingin mendalami tentang CSS,mulailah dengan menulis,jangan asal COPAS aja...copas pisang,copas mangga,dll..hahaha...,intinya begini,kalau ingin mendalami sesuatu,mulailah dengan belajar,jangan terima instant,it menurut saya lho...
oke di lanjut gan (emangnya degan)

Kok harus CSS sih?

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.

Penerapan 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 :

Internal Style Sheet
Cara membuat internal Style Sheet adalah dengan menambahkan tag sehingga kode HTML menjadi sebagai berikut

<html>
<head>
<title>Latihan CSS</title>
<style type="text/css">

</style>
</head>
<body>

</body>
</html>

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

Langkah pembuatannya
Pertama-tama kita buat tag html sebagai berikut :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Latihan CSS</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>

<ul class="navbar">
<li><a href="index.html">Home</a>
</li><li><a href="about.html">About</a>
</li><li><a href="gallery.html">Gallery</a>
</li><li><a href="links.html">Links</a>
</li></ul>

<h1>Latihan CSS</h1>

<p>belum ada gambar,masih taraf latihan,hehe..</p>
<p>dapat juga di tulis area teks di sini.....sesuka kamu....</p>

<address>Buat latihan by:gspl</address>

</body>
</html>

Dan akan menghasilkan gambar seperti di bawah ini

hehe...jadul bukan???
maka dari itu sekarang mari kita tambahkan gaya untuk tag HTML tersebut dan menambahkan mark up CSS pada tag HTML, ganti tulisan 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 bila belum mengetahui kegunaan masing-masing properti CSS seperti padding, color, background dsb.

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.
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>latihan css</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>

<ul class="navbar">
<li><a href="index.html">Home</a>
</li><li><a href="about.html">About</a>
</li><li><a href="gallery.html">Gallery</a>
</li><li><a href="links.html">Links</a>
</li></ul>

<h1>Latihan CSS</h1>

<p>belum ada gambar,masih taraf latihan,hehe..</p>
<p>dapat juga di tulis area teks di sini.....sesuka kamu....</p>

<address>Buat latihan by:gspl</address>

</body>
</html>

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>Latihan css</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
</head>

penerapan external maupun internal CSS yang dijelaskan diatas akan menghasilkan dokumen web dengan gaya yang sama dengan gmbar di bawah ini :

Nah demikian sekelumit penerapan CSS pada html...selamat mencoba.

inspirator : w3function

Zona Software

Pengertian dasar CSS

Artikel Terkait