Saya yakin pasti para master sudah tidak asing lagi dengan CSS alat pembantu html, tapi saya hanya ingin berbagi saja dengan pengalaman saya saat di sekolah dan ini adalah salah satunya, ilmu itu tidak ada yang sia-sia jika kita mengamalkannya betul tidak? kurasa betul karena saya yang mengatakannya. hehe :D Baiklah silahkan baca-baca ke bawah dengan teliti.
Apa itu CSS?
CSS (Cascoding Style Sheets) adalah sebuah cara untuk memisahkan isi dengan layout dalam halaman-halaman web yang di buat. Css memperkenalkan template yang berupa style untuk membuat dan mempermudah penulisan dari halaman-halaman yang di rancang.
Hal ini sangat penting karena halaman yang menggunakan css dapat di baca secara bolak-balik dan isinya dapat di lihat oleh pengunjung dari manapun. CSS mampu menciptakan halaman yang tampak sama pada resolusi lauar daro pengunjung yang berbeda tanpa memerlukan suatu tabel.
Dengan CSS, anda akan lebih mudah melakukang setting tampilan keseluruhan web hanya dengan menggantikan atribut-atribut atau perintah dalam style CSS. Dengan atribut yang di inginkan tanpa harus mengubah satu per satu atribut tiap elemen yang ada dalam situs yang di buat.
Saat ini CSS merupakan style yang banyak di gunakan karena berbagai CSS dalam web akan lebih efisien karena CSS dapat di gunakan untuk penggunaan secara berulang pada tag-tag tertentu sehingga tidak usah mengetikkan ulang seluruh perintah pemformatan seperti halnya HTML klasik.
CSS akan lebih mudah di pelajari jika telah mengetahui struktur pembuatan dokumen web dengan bahasa HTML.
Bagaimana cara Kerja CSS?
Cara kerja CSS sangatlah mudah, karena CSS hanya membutuhkan style sebagai penentu dari font, warna, dan format-format lain untuk memformat atribut sebuah halaman web yang kita buat. Tiap style memiliki dua buah elemen dasat, yaitu "selector" dan "deciaration".
Sebuah "Selector" biasanya adalah tag HTML, sementara "declaration" adalah satu atau beberapa perintah/nilai dari css yang menunjukan tipe bentuk yang di aplikasikan pada selector. Declaraton ini biasanya di tandai dengan kurung kurawal {}.
Perintah atau nilai CSS yang berbeda di pisahkan satu dengan yang lain dengan menggunakan titik koma (;) seperti terlihat pada contoh di bawah ini :
- <style type="text/css">
- .format {font-family:verdana; color:blue;}
- </style>
Kode di atas telihat bahwa :
.Format adalah selector, dan {font-family:verdana; color:blue;} adalah declaration.
Selector-selector dan style dalam CSS akan di masukan dalam sebuah tempat yang sama dalam isi dokumen HTML atau di buat di luar dokumen HTML yang nantinya akan di panggil untuk menentukan isi tampilan dokumen HTML. Kita hanya menunjuk pada selector-selector di mana akan mengaktifkan sebuah style yang anda inginkan.
Hal paling umum dalam memasukan kode style sheet dengan menggunakan tag <style>, tag </style> ini selalu tamil dalam bagian <head> dan sebelum </head> dari dokumen anda.
Di bawah ini adalah contoh penempatan CSS di dalam kode HTML:
- <html>
- <head>
- <style type="text/css">
- (Aturan-aturan CSS)
- </style>
- </head>
- <body>
- (Dokumen html yang akan di berikan aturan)
- </body>
- </html>
Untuk menentukan font dan warna-warna tiap anda memulai sebuah cell table, anda dapat menentukan sebuah style dan kemudian anda tinggal menunjuk ke style dalam cell table anda. Di bawah ini contoh perbandingan dari sebuah tabel berikut yang di buat menggunakan html sederhana :
- <html>
- <head>
- <title> Belajar CSS </title>
- </head>
- <body>
- <table>
- <tr>
- <td bgcolor="red" align="center"><font face="verdana" color="blue">Belajar CSS1</font></td>
- </tr>
- </table>
- </body>
- </html>
Jika di browser maka tampilan kode html di atas akan seperti di bawah ini :
Bandingkan jika dokumen tersebut di buat dengan menggunakan CSS (dengan menganggap bahwa sebuah selector yang di panggil "format" telah di tetapkan yang akan mengatur format teks dokumen HTML tersebut).
- <html>
- <head>
- <title> Belajar CSS </title>
- <style type="text/css">
- .format {background-color:red; color:blue; font- family:verdana;}
- </style>
- </head>
- <body>
- <table>
- <tr>
- <td class="format">Belajar CSS1</font></td>
- </tr>
- </table>
- </body>
- </html>
Jika di browser maka tampilan kode html di atas akan seperti di bawah ini :
Dengan menggunakan CSS, dokumen yang di buat menggunakan HTML murni akan dapat lebih di singkat dan akan lebih mengefisienkan waktu yang di butuhkan. Bayangkan jika anda membuat sebuah situs yang kompleks dengan banyak atribut untuk halam dalam situs anda, Tentunya anda harus menentukan tiap atribut untuk tiap halaman tersebut satu per satu.
Bagaimana jika terdapat seratus halam dalam situs tersebut? Bayangkan beberapa waktu yang anda habiskan hanya untuk memformat tiap halaman jika terdapat kesalahan dalam halaman-halaman tersebut? Namun masalah tersebut dapat lebih diminimalisasi menggunakan CSS karena anda hanya akan membuat style yang akan memformat keseluruhan halaman dalam situs yang di buat dan kita cukup menentukan selector dalam style yang akan di gunakan dalam halaman tersebut.
Catatan : Terimakasih sudah membaca sampai akhir :D
Nah itulah penjelasan apa yang di maksud dengan CSS, terus bagaimana cara kerjanya, saya sudah jelaskan, semoga dengan penjelasan saya di atas bisa membuat anda mengerti, okeh sampai di sini dulu, sampai jumpa. Salam Sukai Penulis
0 Komentar