Pengertian dan Definisi CSS
CSS adalah singkatan dari Cascading Style Sheets. CSS adalah sekumpulan kode yang digunakan untuk mendesign atau mempercantik tampilan pada halaman HTML. Pada artikel ini saya sengaja menambahkan Label pada HTML, karena CSS dan HTML tidak terpisahkan dalam membuat sebuah website. Dengan anda belajar CSS maka anda dapat mengubah desain dari text atau font, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.
Apakah dengan HTML saja anda bisa mengubah sebuah Font, Warna, Background ? Jawabannya Ya. Dengan HTML saja anda dapat mengatur tampilan Font, Warna, Background dan lain sebagainya. Namun dengan adanya CSS anda bisa menyiapkan kodingnya terlebih dahulu, nanti jika anda mengingkan atau ingin memanggil koding pada CSS tersebut maka anda cukup memanggilnya. Dengan Adanya CSS ini berarti anda akan lebih mengirit koding pada HTML dan anda dapat mengontrolnya.
Apakah dengan penjelasan CSS diatas anda sudah Faham?
Oke jika anda masih belum Faham saya akan jelaskan secara umum dibawah ini.
CSS Diumpamakan Sebuah Pakaian Untuk Tubuh Kita
Saya analogikan CSS adalah Pakaian atau Baju untuk tubuh kita. Jika anda membangun sebuah website dan tidak menggunakan CSS, saya jamin Tampilannya tidak akan menarik. Jadi untuk membuat tampilan sebuah website agar lebih menarik maka anda harus memberikan Pakaian pada website anda. Pakaian tersebut disebut CSS dalam sebuah Website. Jadi dengan anda memakai pakaian orang lain tidak melihat apakah Banda anda hitam, atau mempunyai Panu, atau badan anda terlalu kurus dan lain sebagainya. Tampilan atau design website anda akan disulap lebih menarik dengan CSS.Cara Menggunakan CSS Pada HTML
Berikut dibawah ini Cara Menggunakan CSS1. Membuat Code CSS langsung didalam halaman HTML
Anda bisa menggunakan langsung pada halaman HTML, dengan menggunakan kode CSS biasanya di tulis di awal Tag HTML, dan dipakai kode CSS tersebut dibawahnya.
2. Membuat Kode CSS di luar Kode HTML ( Menggunakan File .CSS tersendiri )
Selain membuat kode CSS langsung didalam file HTML, anda juga bisa membuat sebuah file CSS tersendiri kemudian anda bisa memanggil ddidalam HTML file CSS tersebut. File tersendiri nantinya anda simpan dengan Extension .css .
Kenapa dipisah? Karena jika dalam membuat website dengan file HTML atau PHP yang banyak, maka untuk menyederhanakannya anda cukup membuat Kode CSS yang terpidah.
Contoh Sederhana :
1. Membuat File HTML tanpa CSS
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS | Javanet Media</title>
</head>
<body>
<h1>Ini adalah judul tulisan</h1>
Ini adalah tulisan pertama website saya
</body>
</html>
Hasil koding diatas adalah :
Dibawah ini saya akan membuat Tag HTML disisipkan dengan CSS
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS | JNM</title>
</head>
<style type="text/css">
body {
background-color: #999;
}
h1 {
color: #FFFFFF;
font-size: 24px;
}
</style>
<body>
<h1>Ini adalah judul tulisan</h1>
Ini adalah tulisan pertama website saya
</body>
</html>
Hasilnya adalah sebagai berikut
Pada HTML 2, saya memberikan kode CSS yaitu untuk mensetting Warna Background dan H1, dimana Judul saya beri warna Putih.
Contoh diatas adalah contoh paling sederhana dalam menerapkan CSS pada HTML, di Artikel selanjutnya saya akan memberikan code CSS yang lebih banyak dan lebih lengkap lagi.
Demikianlah Definisi CSS menurut JNM, untuk praktik membuat website dengan HTML plus CSS akan saya buat setelah artikel ini. Jadi jangan kemana-mana, stay terus di website JNM :)
0 Response to "Pengertian CSS dan Fungsi CSS Pada Sebuah Website"
Post a Comment