Breaking News

Mempelajari CSS

Januari 15, 2018
Assalamu'alaikum wr. wb.
   A.      Pendahuluan
1.       Pengertian
CSS yang memiliki kepanjangan Cascade Style Sheet ini digunakan para web designer untuk mengatur style elemen yang ada dalam halaman web mereka, mulai dari memformat text, sampai pada memformat layout.
2.       Latar Belakang
Perkembangan CSS sendiri diawali pada tahun 1996, dimana W3C (World Wide Web Consortium), sebuah konsorsium untuk standarisasi web, menyusun draft proposal untuk membuat CSS ini dan akhirnya dapat berjalan. Selanjutnya pada pertengahan tahun 1998, W3C mengembangkan CSS2 yang diperbarui untuk kepentingan media lain (tidak hanya untuk PC web browser). Akhirnya mulai pada tahun 2000, telah dikembangkan CSS3 oleh W3C yang sampai saat ini masih terus diperbarui lagi
3.       Maksud dan Tujuan
              Tujuan dari penggunaan CSS ini adalah supaya diperoleh suatu
              kekonsistenan style pada elemen tertentu.
4.       Hasil yang Didapatkan
Dengan menggunakan CSS, Anda (sebagai webmaster) akan lebih mudah untuk mengatur style elemen dalam halaman web Anda. Sebagai contoh, misalnya untuk mengatur style elemen heading, Anda menginginkan jenis font nya adalah Arial, 20 pixel dan berwarna merah. Dengan CSS, Anda cukup menuliskan properti dari elemen heading tersebut sekali saja, dan Anda akan memperoleh hasil yang diinginkan. Bandingkan apabila tidak menggunakan CSS, Anda akan mengatur style pada setiap elemen heading yang ada. Tentu saja hal ini akan sangat merepotkan. Perhatikan contoh berikut ini
               


Hasilnya :
               

Perhatikan code sebelumnya! Untuk mengatur style elemen heading 1 (h1) cukup menuliskannya pada CSS sekali saja. Bandingkan apabila Anda tidak menggunakan CSS, maka codenya akan berbentuk seperti berikut untuk mendapatkan hasil yang sama.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>CSS Guide</title>

</head>

<body>

<h1><font face="arial" color="red">Ini adalah heading 1</font></h1> <p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. </p>

<h1><font face="arial" color="red">Ini adalah heading 1</font></h1> <p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. </p>

<h1><font face="arial" color="red">Ini adalah heading 1</font></h1> <p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. </p>

</body>
</html>

Mungkin Anda bertanya, bagaimana jika kita akan membuat style untuk beberapa elemen yang berbeda namun stylenya sama? Misalkan kita akan membuat style untuk elemen h1, h2, h3 namun memiliki style yang sama. Berikut ini adalah sintaksnya:

h1, h2, h3 { properti1 : value1;
                properti2 : value2;
              properti3 : value3;
               .              .              .
           }




   B.      Alat dan Bahan
1)      Laptop
2)      Items file
3)      Text editor

   C.      Kesimpulan
Pada dasarnya mempelajari CSS itu mudah kita hanya menggunakan  masukkan seperti dibahwah ini yang bercetakkan warna merah :
<head>
 <title>CSS Guide</title>

<style type="text/css">
 h1 {
       color: red;
       font-family: "arial";
      }
</style>

              </head>

   D.      Referensi : eBook tentang CSS 

Tidak ada komentar

Langganan: Posting Komentar ( Atom )