Langsung ke konten utama

Belajar CSS - Membuat Desain Website

Sebelum mempelajari Belajar Membuat Desain Website Dengan CSS pada tahap ketiga ini. Tahap design di website ada baiknya kita mengenal dulu apa itu Cascading Style Sheet (CSS).

Apa itu Cascading Style Sheet (CSS) ?

Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
Bagaimana Cara Penulisannya ?

Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:

  • .nama {}
  • #nama {}
  • nama {}
  • nama:hover {}
  • nama:visit {}
  • .nama nama nama nama {}
  • #nama nama nama nama {}
  • nama nama nama nama {}

Dari tag css di atas coba kita artikan satu persatu untuk mempermudah mempelajarinya.

Jika, .nama {} disebut dengan Class pada css. Untuk penggunaan class di tag css maka menggunakan tanda (.) titik :
.nama_class {

color: #333 /* untuk warna teks*/

background-color: #333 /* untuk warna background*/

}
Dan, jika menggunakan tag html untuk class maka, misal :
<div class="nama_class">



</div>

Selanjutnya, jika #nama {} disebut dengan Id pada class. Untuk penggunaan id di tag css maka menggunakan tanda (#) pagar :
#nama_id {

color: #333 /* untuk warna teks*/

background-color: #333 /* untuk warna background*/

}
Dan, jika menggunakan tag html untuk class maka, misal :
<div id="nama_id">



</div>
Jika hanya nama saja di dalam css. Maka, itu diperuntukkan untuk tag dalam html, misalnya :
a {

     color: red;


}
Maka jika tag <a href="#"> Link </a> ada didalam index.html otomatis berubah warnanya menjadi "merah" sesuai dengan kode css diatas.

Lalu bagaimana dengan .nama nama atau #nama nama atau nama nama ?

Itu juga bisa disebut dengan class didalam class. contohnya "#class_sidebar a" atau ".class_sidebar a" atau "span a", maka tag <a> yang berada dalam #class_sidebar atau .class_sidebar atau span a berubah stylenya sesuai dengan kode yang ditulis di dalam css tersebut

Oke, jika sudah mengerti dalam tahap koding untuk css. Selanjutnya, kita akan menggunakan file "styles.css" taruh di folder study-newbie tadi berdampingan dengan file "index.html".

Dalam file "index.html" kita tambahkan script berikut di atas tag "</head>" :
<link href="styles.css" rel="stylesheet">
Fungsi dari script di atas adalah memasukkan file "styles.css" kedalam file "index.html" agar file css tidak tercampur dalam file "index.html" yang mengakibatkan kita susah untuk mengkoding ulang "index.html" kita tadi.

Setelah kita selesai menaruh tag di atas sekarang kita bekerja di file "styles.css". pertama-tama kita edit dulu tag "<body>.....</body>" dan isi teks yang ada di dalamnya.

Tambahkan script berikut di dalam "styles.css".
body{

font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; /*Merubah jenis font yang ada didalam body */

font-size:14px; /*Merubah ukuran font yang ada didalam body */

line-height:1.42857143; /*Merubah jarak enter text yang ada didalam body */

color:#333; /*Merubah warna yang ada didalam body */

background-color:#fff; /*Merubah background body */

margin: 0 auto; /*Menentukan jarak antar body dengan sisi atas dan bawah menjadi 0px dan sisi kiri dan kanan menjadi disesuaikan*/

}


/*merubah tag <a href="#"></a>*/

a {

color: #2980b9;

text-decoration: none;

}


/*hover adalah script yang berfungsi jika si cursor / pointer menyentuk tag yang diberi hover tersebut*/

/*merubah tag <a href="#"></a> jika corsur ke link tersebut*/

a:hover {

text-decoration: underline;

}
Nah, setelah memasukkan koding di atas ke dalam "styles.css" maka selanjutnya kita mendandani si "index.html". coba tambahkan tag a (link) di bawah <p>...</p> dalam "index.html" :
<a href="#"> Tes pointer </a>

Maka index.html lengkapnya sebagai berikut :


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ayo Membuat website Study-newbie.blogspot.com</title>

<link href="styles.css" rel="stylesheet">

</head>

<body>
<p> Hello world</p>

<a href="#"> Tes pointer </a>

</body>
</html>

jalankan browser dan buka ke alamat "localhost/study-newbie" (ingat xampp harus start ya :) )

Penampakannya :



Coba arahkan pointer Anda ke link "tes pointer" maka lihat fungsi :hover di css tersebut :). Anda bisa menambahkan kode lain di css dan mendapatkannya di sini :
www.academia.edu

Selanjutnya Anda bisa membaca di "Cara Membuat Website Localhost Menggunakan HTML / PHP - part 4"

Komentar

Postingan populer dari blog ini

Tutorial Lengkap Membuat Short Link Sendiri Dengan PHP Mysql

Hallo kawan, berjumpa lagi nih sama toturial www.pemulabelajar.com. Kali ini kita akan membahas cara membuat short link sendiri . Pernah dong kawan menjumpai namanya short link, contoh sederhananya saja goo.gl . goo.gl akan membuat url site kita menjadi lebih pendek misalnya saja : http://www.pemulabelajar.com bisa menjadi goo.gl/Jiahs . Begitu juga tutorial kita membuat short link kali ini. Karena membuat short link kita sekarang menggunakan PHP Mysql maka kawan disarankan untuk membuat hosting untuk website yang akan dijadikan website short link kita sendiri, kawan bisa menggunakan layanan gratis seperti 000webhosting.com atapun idhostinger.com (recomended) selain gratis, pembuatan databasenya juga termasuk mudah dan juga tutorialnya sangat banyak digoogle kalau ada waktu saya akan membuatkan tutorial membuat hosting gratis untuk kawan. Membuat Short Link Saya anggap saja kawan sudah membuat hosting disalah satu tempat hosting diatas. Maka langkah a...

Belajar Power Design - Cara Membuat Project Menjadi Gambar

Cara Membuat Project Menjadi Gambar - Artikel ini akan membahas sedikit tentang Power Design dan Bagaimana merubah project power design menjadi sebuah gambar . Masalah ini sering dialami oleh pemula khususnya saya yang bingung bagaimana merubah sebuah project power design menjadi berupa gambar agar mudah dimuat ke sebuah karya tulis. Baca juga : Membuat Teks Rotasi Dengan Photoshop Apa itu Power Design ? Power design adalah sebuah paket program desain tools yang digunakan untuk membuat Visualisasi, dokumentasi dan mendesain suatu sistem perangkat lunak. Paket ini meliputi Process analyst Model (PAM), Data architect tools, Aplication modeler tools, dan Metawork tools. Power Design ini juga sering digunakan menjadi software untuk membuat Diagram Flow Diagram atau DFD . Bagaimana Merubah Project Menjadi Gambar ? Untuk merubah sebuah project pada power design menjadi sebuah gambar cukup mudah. Secara singkatnya kawan cukup memilih semua object yang akan dijadikan sebuah gambar, s...

Belajar Web - Membuat Website Responsive CSS

Sebelum kita meneruskan tutorial selanjutnya yaitu Belajar Membuat Website Responsive baiknya kita pelajari terlebuh dahulu apa aja yang akan kita bahas. Karena yang akan kita bahas selanjutnya adalah responsive web, maka diwajibkan mengerti fungsi script css yang ada di Belajar Desajn Website di html / php toturial sebelumnya. Apa itu float ? Apa itu width ? Apa itu height ? Apa itu clear: both ? Responsive ini memakai @media(max-width) atau @media(min-width) yang memiliki arti lebar maximal style dan lebar minimal yang kita masukkan di dalam @media tersebut. Sebelum memperlajari responsive menu sebaiknya lita pelajari dulu float, clear dan lain-lain. Karena @media tersebut hanya mengganti script css dari css global. Apa itu css global ? Nanti anda penjelasannya masing-masing. Apakah anda sudah ngerti dengan coding css diatas ? Jika belum, ada baiknya anda harus pelajari dulu scriptnya di toturial sebelumnya. Cara memperbaiki jika terjadi error atau kesalahan penulidan pada d...