Pengenalan Dasar Dasar CSS
Definisi CSS
Apa itu CSS?. Css merupakan singkatan dari Cascading Style Sheet. Tujuan pembuatan css adalah untuk memisahkan konten dengan tampilannya sehingga mempermudahkan mengatur website yang berbasis dinamis yang mana memiliki tampilan seperti layout, warna dan font. Pemisahan antara tampilan dan konten sangat membantu didalam sebuah loading website atau blog sehingga bisa cepat menampilkan halaman website kita.. Sebuah web akan selalu membutuhkan CSS yang merupakan bagian yang sangat penting sehingga sangat loading blog atau web akan cepat dan lebih lebih website kita lebih seo friendly karena dengan itu maka lebih betah pengunjung berada didepan monitor bersama blog atau web yang kita buat
Asal Mula CSS
Sejak dahulu, sebelum World Wide Web (WWW) ditemukan, para penemu alat elektronik dan alat pencetak, menyadari betapa pentingnya pemisahan antara konten dokumen dan pemberi struktur (tampilan)pada dokumen . Maka pada saat itu banyak mesin pencetak elektronik mengimplementasikan cara untuk membuat pemisahan arutan pemformatan dokumen dari konten dokumen tersebut sendiri. Hal tersebut berguana untuk membuat dokumen dalam jumlah yang banyak dengan satu pemformatan dokumen yang sama. Tim Berners – Lee (Penemu World Wide Web) sudah memikirkan tentang hal ini untuk diterapkan pada halaman web. Pada awalnya terdapat tag – tag style seperti <font>, <strong> serta beberapa tag style yang lain berupa tag – tag yang langsung terpresentasi pada halaman web itu sendiri. CSS adalah rekomendasi dari W3C (World Wide Web Consortium), dimana W33C merupakan sebuah konsorsium/ gabungan dari pemilik web, universitas, perusahaan seperti Microsoft, Netscape, Apple, Opera, Mozilla dan Macromedia serta juga para ahli dalam bidang web .
Stylesheet adalah sebuah text file yang sederhana(dimana berekstensi .css) ditulis menurut aturan bahasa yang dipaparkan pada rekomendasi CSS. Contoh file berekstensi .css :
body{ font-family: Helvetica, sans-serif; font-size: 1em; text-align:justify
}
h2 { font-family:arial, sans-serif; font-size:1.3em;
}
code { font-family:courierl, sans-serif; font-size:1em;
}
.note { background-color:#0033333; border-width: thin; border-color:black; border-style: ridge;
color :white; font-family:Verdana; font-size: 9em; vertical-align:text bottom;
}
Sama halnya dengan dokumen atau file html tetapi bedanya CSS hanya sebuah teks sederhana tapi tidak seperti HTML yang menggunakan sebuah deklarasi khusus pada awal tag.
Metode Penggunaan CSS
Untuk mengaktifkan file css agar berfungsi maka anda harus membuat file ekstensi html karena css merupakan bagian pelengkap dari html karena tanpa html css tidak berguna sama sekali maka setelah membuat file HTML maka selanjutnya ada beberapa metode untuk memanggil file berekstensi .css yaitu:
1. Internal Style Sheet
2. Eksternal Style Sheet
3. Inline Style Sheet
Internal Style Sheet untuk menggunakan internal style sheet anda harus membuat script css pada halaman html secar langsung yaitu dengan menaruh script seperti ini dibawah tag <head>
<style type=”text/css”>
Body { background:url(images/back40.gif);}
</style>
Eksternal Style sheet yaitu penggunaan file css terpisah dengan file HTML dan kita harus memanggilnya menggunakan link seperti ini <link href=”style.css” type=”text/css” rel=”stylesheet”/> yang diletakan dibawah tag <head> diman Style.css itu adalah file yang kita buat dengan menggunakan Notepad atau text editor lainnya dan menyimpannya dengan ekstensi .css sedangkan type=”text/css” merupakan type dari file yang akan kita panggil yaitu berupa file text atau css dan rel=”stylesheet” merupakan pernyataan bahwa dokumen (style.css) adalah berupa dokumen stylesheet.
Inline Style Sheet yaitu penggunaan file Css yang langsung dikombinasikan dengan konten dan hal ini tidak bagus untuk blog atau web kita karena akan memperlambat loading blog atau web anda. Contohnya seperti ini : <p style=”color:#cccccc;”>Teks yang menggunakan inline style</p>.
Statement
Sekarang kita sudah memahami bagaimana sebuah style sheet bekerja dan kita juaga sudah mengetahui bagaimana seharusnya sebuah style sheet terlihat. Sekarang saatnya kita ke tahap selanjutnya untuk memahami CSS. CSS mempunyai beberapa jenis statement, yaitu :@rules statement. Ada beberapa @rules dari CSS, diantaranya:
1. @import
2. @media
3. @page
@import merupakan @rules yang valid dan sering digunakan diman @import menginstruksikan browser untuk menginput style sheet sebelumnya. Style sheet dengan sebuah aturan @import didalamnya adalah turunan dari style sheet yang diimport. Kita akan mendalami turunan dan pewarisan style sheet (cascade inheritance). Aturan @import mempunyai bentuk seperti berikut:
@import URL(http://www.css.com/styles/style1);
Bentuk lainnya seperti ini @import” http://www.css/styles/style1”;
@media aturan dari @media diperkenalkan pada CSS 2. Aturan @media memperbolehkan sebuah bagian dari style sheet hanya dipergunakan jika dokumen web ditampilkan pada media tertentu, sebagai contohnya, anda bisa membuat sebuah aturan @media yang dapat diaplikasikan ketika sebuah halaman web di print. Aturan @media seperti mengembed sebuah style sheet kedalam style sheet jadi atruan @media dapat diaplikasikan pada halaman web sesuai dengan medium halaman web tersebut itu ditampilkan. Inilah salah satu kelebihan dari @media, aturan @media dapat mengubah tampilan sebuah halaman web sesuai dengan medium yang digunakan untuk menampilkannya. Sebagai contonya aturan @media berikut akan mempunyai efek pada halaman web, sehingga apabila diprint maka halaman web tersebu memiliki background putih walau background pada tampilan web lain misalnya coklat.
@media print{
Body{ background-color:white;}
}
@page aturan @page memperbolehkan kita untuk mengatur dengan baik bagaimana halaman web kita akan diprint. Bentuk dari @page adalah menuliskan @page pada awal style sheet, kemudian diikuti dengan format-format CSS dengan menggunakan kurung kurawal buka dan tutup. Contoh dari Aturan @page seperti ini:
@page{
Margin:5%;
}
