IT CODE TUTORIAL: CSS

Apa itu CSS ?

CSS yang memiliki kepanjangan Cascading Style Sheet, CSS digunakan untuk mengatur style elemen yang ada dalam halaman, mulai dari mengatur teks, sampai dengan mengatur layout(kerangka tampilan). Tujuan digunakan CSS ini adalah supaya diperoleh suatu kekonsistenan style pada elemen tertentu, artinya dengan menggunakan CSS ini kita lebih hemat dalam pengkodean , karena kita tidak usah menulis ulang jika ada design yang sama , agak rumit? Nanti kita bahas melalui prakteknya :)

Sejarah Dan Perkembangan CSS

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.Namun pada saat ini, hanya CSS2 yang masih didukung oleh kebanyakan web browser,tapi tidak demikian halnya untuk CSS3. Masih sedikit web browser yang mendukung CSS3. Oleh karena itu pada tutorial ini hanya akan dibahas mengenai CSS2 saja dan sedikit mengenai CSS3.

Keuntungan Penggunaan CSS
Dengan menggunakan CSS, Anda 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

CSS diawali dengan tag <style></style>, CSS bisa di buat satu file dengan HTML atau PHP ataupun di simpan terpisah, akan dibahas pada artikel lainnya

css_pertama.html

<html>
<head>
<title>CSS Pertama</title>
<style type="text/css">
h1 {
color: red;
font-family: "arial";
}
</style>
</head>
<body>
<h1>Ini adalah heading 1</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>Ini adalah heading 1</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>Ini adalah heading 1</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>

untuk pembanding jika kita tidak menggunakan CSS maka code nya akan seperti berikut

<html>
<head>
<title>Tanpa Menggunakan CSS</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>

akan lebih memakan banyak code membuat tampilan seperti gambar diatas jika kita tidak menggunakan CSS, itulah testimoni dari CSS.

IT CODE TUTORIAL

Download

Kamis, 16 April 2015

CSS

Tidak ada komentar:

Posting Komentar