Home » » Pengertian Css Dan Fungsi Css Pada Sebuah Website

Pengertian Css Dan Fungsi Css Pada Sebuah Website

Kembali bersama JNM pada tutorial kali ini aku akan memperlihatkan klarifikasi mengenai CSS. Bagi anda yang ingin membangun sebuah website secara manual ( bukan menggunakan CMS yang sudah jadi ) maka anda harus mengetahui atau paham konsep dari CSS. Dengan adanya CSS maka tampilan website anda akan semakin menarik dan profesional.

Pengertian dan Definisi CSS

CSS yaitu kependekan dari Cascading Style Sheets. CSS yaitu sekumpulan arahan yang digunakan untuk mendesign atau mempercantik tampilan pada halaman HTML. Pada artikel ini aku sengaja menambahkan Label pada HTML, alasannya yaitu CSS dan HTML tidak terpisahkan dalam menciptakan sebuah website. Dengan anda berguru CSS maka anda sanggup mengubah desain dari text atau font, warna, gambar dan latar belakang dari (hampir) semua arahan tag HTML.


Apakah dengan HTML saja anda sanggup mengubah sebuah Font, Warna, Background ? Jawabannya Ya. Dengan HTML saja anda sanggup mengatur tampilan Font, Warna, Background dan lain sebagainya. Namun dengan adanya CSS anda sanggup menyiapkan kodingnya terlebih dahulu, nanti jikalau 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 sanggup mengontrolnya.

Apakah dengan klarifikasi CSS diatas anda sudah Faham?
Oke jikalau anda masih belum Faham aku akan jelaskan secara umum dibawah ini.

CSS Diumpamakan Sebuah Pakaian Untuk Tubuh Kita

Saya analogikan CSS yaitu Pakaian atau Baju untuk tubuh kita. Jika anda membangun sebuah website dan tidak menggunakan CSS, aku jamin Tampilannya tidak akan menarik. Kaprikornus untuk menciptakan tampilan sebuah website semoga lebih menarik maka anda harus memperlihatkan Pakaian pada website anda. Pakaian tersebut disebut CSS dalam sebuah Website. Kaprikornus dengan anda menggunakan pakaian orang lain tidak melihat apakah Banda anda hitam, atau memiliki Panu, atau tubuh 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 CSS
1. Membuat Code CSS eksklusif didalam halaman HTML
Anda sanggup menggunakan eksklusif pada halaman HTML, dengan menggunakan arahan CSS biasanya di tulis di awal Tag HTML, dan digunakan arahan CSS tersebut dibawahnya.

2. Membuat Kode CSS di luar Kode HTML ( Menggunakan File .CSS tersendiri )
Selain menciptakan arahan CSS eksklusif didalam file HTML, anda juga sanggup menciptakan sebuah file CSS tersendiri kemudian anda sanggup memanggil ddidalam HTML file CSS tersebut. File tersendiri nantinya anda simpan dengan Extension .css .
Kenapa dipisah? Karena jikalau dalam menciptakan website dengan file HTML atau PHP yang banyak, maka untuk menyederhanakannya anda cukup menciptakan 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 yaitu judul tulisan</h1>   Ini yaitu goresan pena pertama website aku  </body> </html> 

Hasil koding diatas yaitu :
2. HTML + CSS Sederhana
Dibawah ini aku akan menciptakan 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 yaitu judul tulisan</h1>   Ini yaitu goresan pena pertama website aku  </body> </html> 

Hasilnya yaitu sebagai berikut

Pada HTML 2, aku memperlihatkan arahan CSS yaitu untuk mensetting Warna Background dan H1, dimana Judul aku beri warna Putih.

Contoh diatas yaitu pola paling sederhana dalam menerapkan CSS pada HTML, di Artikel selanjutnya aku akan memperlihatkan code CSS yang lebih banyak dan lebih lengkap lagi.

Demikianlah Definisi CSS berdasarkan JNM, untuk praktik menciptakan website dengan HTML plus CSS akan aku buat sehabis artikel ini. Kaprikornus jangan kemana-mana, stay terus di website JNM :)

0 comments:

Post a Comment

Search

Blog Archive