Kode CSS

Kode css adalah salah satu elemen penting dalam desain web/blog. Melalui kode inilah segala sesuatu yang berkaitan dengan desain web/blog diatur. Pengembangan yang dilakukan terhadap kode css berlangsung secara terus-menerus dan dilakukan secara intensif sehingga pada perkembangannya kode css ini mempunyai peran yang sangat vital atau bahkan bisa dikatakan sebagai "soko guru" perkembangan dan pengembangan desin web/blog. Hasil pengembangan kode css menciptakan hasil nyata yang membuat kode ini berkembang dalam 3 versi, dimana versi terakhir yang disebut sebagai css3 mampu menggantikan berbagai fungsi yang pada masa sebelumnya hanya dapat dibuat menggunakan javascript. Melihat pesatnya perkembangan kode css3, bukan tak mungkin jika pada masa ke depan desain web/blog akan lebih banyak menyingkirkan peran javascript. Perkembangan terkini dari css3 adalah penggunaan css3 transition property, css3 transform property dan css3 animation property yang bahkan mampu menciptakan berbagai animasi dalam rupa 3 dimensi (3D).

Pengertian kode CSS

Dalam pengertian secara umum, kode css merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sekumpulan kode css membentuk sebuah fungsi dalam bentuk syntax.
Contoh syntax
div{
      width:400px;
      height:200px;
      border:2px solid blue;
      padding:20px;
      margin:20px 0 10px 0;
}

Sejarah CSS

Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.

Versi Kode CSS

Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama. CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.

Menempatkan Kode CSS dl template

Kode css disimpan ditemplate (desain dasar blog/web) dalam sebuah attribute "style", diantara tag pembuka dan penutupnya. 
<style type="text/css">
div{
      width:400px;
      height:200px;
      border:2px solid blue;
      padding:20px;
      margin:20px 0 10px 0;
}
</style>
Meskipun secara umum lebih banyak ditempatkan diantara tag pembuka dan penutup "head", namun kode css tetap dapat berfungsi dengan baik sekalipun disimpan diantara tag pembuka dan penutup "body". Kasus seperti ini sering dijumpai jika seorang blogger menggunakan "gadget/widget" sebagai media penyimpan kode html (xHTML, kode css & javascript). 
<!DOCTYPE html>
<html>
<title>Kode CSS</title>
<head>
  
<style type="text/css">
body{ 
      color:#000;
      font-family:Arial;
      font-size:12px;
      padding:0;
      margin:0;
      background:#ccc; 
}
h1{
      font-size:33px;
      margin:20px 0;
      color:#000;
}
#main-wrapper{
      margin:20px 0;
      width:65%;
      padding:20px;
      border:2px solid #aaa;
}
</style>

</head>
<body>

<header> <h1>Kode CSS</h1></header>

<div id="main-wrapper>
<p>Kode css dapat disimpan diantara tag pembuka dan penutup "head" ataupun di antara tag pembuka dan penutup "body". Dalam sebuah desain blog yang masih murni atau belum dilakukan penambahan kode baru, hampir semua kode css selalu disimpan di antara tag pembuka dan penutup "head". Penyimpanan kode css di antara tag pembuka dan penutup "body" biasanya terjadi ketika seorang blogger menambahkan sebuah fungsi baru di blog yang berupa widget/gadget. Penambahan kode css baru di bagian ini juga sering dimanfaatkan untuk demo sebuah tutorial desain blog atau tutorial web lainnya.</p>
</div>

</body> 
</html>
Di bawah ini disertakan sebuah demo untuk melihat bagaimana sekumpulan kode css dalam sebuah syntax mampu membentuk sebuah fungsi tertentu berupa box dan teks dengan kelngkapanm warna serta ukuran.
Please click the button to display. Continue with editing code and click to see the results!
Diposting oleh di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

My ProfileC l o s e

FollowerC l o s e