Standar Kompetensi Memahami Pengertian Cascading Style Sheets (CSS), Struktur CSS, Cara kerja CSS, menempatkan CSS dalam HTML

Transkripsi

1 Pengenalan CSS Standar Kompetensi Memahami Pengertian Cascading Style Sheets (CSS), Struktur CSS, Cara kerja CSS, menempatkan CSS dalam HTML Indikator Hasil Belajar Dapat menjelaskan pengertian CSS. Dapat menjelaskan struktur CSS Dapat menjelaskan Cara kerja CSS Dapat menggunakan style CSS dalam dokumen web Petunjuk Pelajari materi dengan teliti Penyajian meliputi: judul bab, standar kompetensi, indikator hasil belajar, petunjuk, paparan materi, Latihan, dan Evaluasi Ikutilah urutan penyajian secara bertahap Untuk memperdalam pengetahuan bacalah sumber rujukan Kerjakanlah soal-soal latihan dan evaluai Materi 1. Apa yang dimaksud CSS Cascading Style Sheets adalah sebuah dokumen yang berisi aturan yang digunakan untuk memisahkan isi dengan layout dalam halaman-halarnan web yang dibuat. CSS memperkenalkan "template" berupa. style untuk dibuat dan mengizinkan penulisan kode yang lebih mudah dari halaman-halaman web yang dirancang. CSS mampu menciptakan halaman yang tampak sama pada resolusi layar yang berbeda dari pengunjung berbeda tanpa memerlukan penggunaan label seperti pada html klasik. Dengan CSS Anda akan lebih mudah dalam melakukan setting tampilan keseluruhan tampilan web hanya dengan menggantikan atribut-atribut atau perintah dalam style CSS dengan atribut yang diinginkan. Anda tidak perlu repot mengubah satu per satu atribut tiap elemen yang ada dalam halaman web jika Anda menggunakan style CSS. Dengan menggunakan CSS, maka dokumen yang dibuat menggunakan HTML murni akan dapat lebih disingkat dan akan lebih mengefisienkan waktu yang dibutuhkan. Saat ini CSS merupakan style yang banyak digunakan dikarenakan berbagai kemudahan dan lengkapnya atribut yang dimilikinya, disamping berbagai kemudahan lain yang ditawarkannya. Penggunaan CSS dalam web akan Iebih efisien dikarenakan CSS dapat digunakan secara berulang pada tag-tag tertentu, sehingga kita tidak usah mengetikkan ulang seluruh perintah pemformatan seperti halnya dalam HTML klasik.

2 2. Struktur CSS Dalam pembuatan dokumen web menggunakan style CSS, dikenal adanya aturan atau struktur penulisan baku agar style CSS yang kita buat tersebut dapat ditampilkan dengan baik dalam dokumen web yang dibuat. Contoh: <title>html selector</title> <style type= text/css >  <p>penggunaan html selector dalam css</p> </html> Pada contoh di atas dipergunakan tag HTML <p> sebagai selector dan setiap huruf yang berada di antara tag <p> dan </p> akan memiliki jenis font Verdana sesuai dengan value atau nilai yang diberikan dalam property style tersebut. Perhatikan gamber berikut: 3. Cara Keria Cara kerja CSS sangatlah mudah, karena CSS hanya membutuhkan style sebagai penentu dari font, warnah, dan format-format lain untuk memformat atribut sebuah halaman web yang dibuat. Tiap style memiliki dua buah elemen dasar, yaitu "selector" dan "declaration". Sebuah selector biasanya adalah tag HTMLL, sementara declaration adalah satu atau beberapa perintah /nilai dari CSS yang menunjukkan type bentuk yang diaplikasikan pada selector. Declaration ini biasanya ditandai dengan tanda kurung kurawal "{ dan perintah atau nilai CSS yang berbeda dipisahkan satu dengan yang lain dengan menggunakan titik-koma seperti terlihat pada contoh berikut: <style type="text/css >.teks (font-tamily:verdana; color:blue) Disini terlihat bahwa.teks adalah selector, dan (font-family: veralana; color:blue;)adalah declaration,

3 Selector-selector dan style dalam CSS akan dimasukkan dalam sebuah tempat yang sama dalam isi dokumen HTML atau dibuat di luar dokumen HTML yang nantinya akan dipanggil untuk menentukan isi tampilan dokumen HTML, Anda hanya menunjuk pada selector-selector dimana akan mengaktifkan sebuah style yang Anda inginkan. Hal yang paling umum dalam memasukkan kode Style CSS adalah menggunakan tag<style type=text/css. Ini selalu tampil dalam bagian dan sebelum dari dokumen anda seperti terlihat pada contoh berikut: <style type= text/css > aturan-aturan css Dokumen html yang akan diberikan aturan css </html> Untuk menentukan font dan warna-warna tiap kali anda memulai sebuah cell table, anda dapat menentukan sebuah style dan kemudian anda tinggal menunjuk ke style dalam cell table anda. Contoh dari sebuah table berikut yang dibuat menggunakan HTML sederhana: <title>belajar CSS</title> <table> <tr><td bgcolor="yellow" align=center> <font face="verdana" color= black >belajar css tidak sulit </font></td></tr> </table> </html> Bandingkan jika dokumen tersebut dibuat dengan menggunakan CSS (dengan menganggap bahwa sebuah selector yang dipanggil "teks" telah ditetapkan yang akan mengatur format teks dokumen html tersebut). <title>belajar css</title> <style type="text/css">.text {background-color:yellow;color:black; font-family:verdana; <table>

4 <tr><td class= teks >belajar css tidak sulit</td></tr> </table> </html> Tampilan kedua contoh kode tersebut dalam browser akan terlihat sama seperti gambar berikut: 4. Penempatan CSS Menempatkan style CSS dalam dokumen web yang kita buat dalam Bahasa HTML dapat dilakukan dengan beberapa cara dan tingkatan yang berbeda sesuai dengan keinginan kita. Cara penempatan dalam HTML adalah menggunakan beberapa cara, diantaranya adalah menggunakan Inline Style, Internal Style, External style, dan juga teknik Importing Logan Internal Style. Ada empat cara memasang kode CSS ke dalam kode HTML yaitu: Inline style sheet (Memasukkan kode CSS langsung pada tag HTML) Internal style sheet (Embed atau memasang kode CSS kedalam bagian ) External style Importing Logan Internal Style 1. Inline style sheet (Memasukkan kode CSS langsung pada tag HTML) Cara ini sebaiknya digunakan jika mau memformat suatu elemen satu kali saja. Contoh <p style ="color:blue"> Ini contoh paragraf berwarna biru </p> Kode tersebut akan memformat paragraph (tag<p>) berwarnah biru. Penulisan dengan cara ini dimualai dengan kata style; lalu diiukti dengan syntax property:value. Contoh berikut, tuliskan kode berikut menggunakan Notepad++ dan simpan dengan nama lcss1.html.

5 <html <p style ="color:blue"> Ini contoh paragraf berwarna biru </p> <p style ="color:blue"> Ini contoh paragraf berwarna biru </p> <p style ="color:blue"> Ini contoh paragraf berwarna biru </p> 2. Internal style sheet (Embed atau memasang kode CSS kedalam bagian ) style sheet berada pada file html dan diletakkan pada suatu tempat khusus yaitu diantara tag dan. Penulisan CSS dengan cara ini diawali dengan tag<style> dan diakhiri dengan tag. Contoh <style type="text/css" media=screen> p {color:blue; <P> Ini contoh paragraph berwarna biru </p> </html Contoh diatas semua elemen <p> dalam halaman web akan diformat menggunakan font berwarnah biru. Simpan menggunakan nama lcss2.html. Setelah tersimpan buka dengan menggunakan browser. Selanjutnya ketikkan kode berikut ini menggunakan Notepad++ <style> h3 {font-family:arial

6 <h3> Judul Artikel </h3> <p style ="color:blue"> Ini contoh paragraf berwarna biru </p> <p style ="color:blue"> Ini contoh paragraf berwarna biru </p> <p style ="color:blue"> Ini contoh paragraf berwarna biru</p> Simpan dengan nama file Lcss3.html. Kemudian buka menggunakan browser. Hasil tampilan pada bagian <p>nya mirip dengan Icss1.html. <style> h3 {font-family:arial; font-style:italic p { <h3> Judul Artikel </h3> <p>ini contoh paragraf berwarna merah </p> <p>ini contoh paragraf berwarna merah </p> <p>ini contoh paragraf berwarna merah </p> Simpan dengan nama file Icss4.html. kemudian buka dengan broser. Hasil tampilan dibagian <p>nya mirip dengan Icss1.html. Dari contoh ini dapat disimpulkan bahwa dengan internal style bisa lebih praktis dibandingkan denganninline style karena kode css tidak harus berulangkali dituliskan disetiap tag html yang memerlukan.

7 <style> body {font-family:verdana h3 { font-style:italic p { font-size:12px <h2> Judul Bab </h2> <h3> Judul Artikel </h3> <p> Ini contoh paragraf berwarna merah </p> <p> Ini contoh paragraf berwarna merah </p> <p style="font-family:times">ini contoh paragraf times berwarna merah </p> Simpan dengan nama file Icss5.html. kemudian buka menggunakan browser. 3. External style Ada dua langkah dalam mengimplementasikan css cara ini. Kode css external ditulis dalam satu file terpisah yang disimpan dengan extensi.css. Anda harus memanggil file css tersebut pada semua halaman web yang memerlukannya. Dengan cara ini hanya perlu memiliki satu set kode css yang digunakan untuk semua halaman web anda. Contoh. Langkah pertama, anda membuat satu file dengan notepad++ dan dibei nama, misalnya style.css, kemudian tuliskan kode-kode css didalam file tersebut.

8 @import url('style2.css'); p {font-family: arial; font-size: small; h1 {color: red; Langkah kedua adalah memanggil file style.css pada semua halaman web yang memerlukannya. Caranya dengan memasukkan kode berikut ini, diantara tag dan. Simpan file tersebut dengan nama Ecss.html. <link rel="stylesheet" href="css/style.css" type="text/css"> <h1> Heading 1 </h1> <p> Paragraf. </p> </html> Contoh lain. Tuliskan kode berikut ini. body {font-family:verdana; h3 { font-style:italic; p { color:blue; font-size:12px; Kemudian simpan dengan nama file format1.css <link rel="stylesheet" href="css/format1.css" type="text/css"> <h2> Judul Bab </h2> <h3> Judul Artikel </h3> <p> Ini contoh paragraf berwarna biru </p> <p> Ini contoh paragraf berwarna biru </p> <p style="font-family:times">ini contoh paragraf times berwarna biru </p> Simpan dengan nama file Ecss2.html selanjutnya buka dengan browser.

9 p { h2 { h1 { color: blue; font-family:times color: blue; font-family:times font-family:verdana Simpan dengan nama file ungroup1.css p,h2 { color: blue; font-family:times

10 h1 { font-family:verdana Simpan dengan nama group.css <link rel="stylesheet" href = "css/group.css" Type = "text/css"> <h1> Judul Buku </h1> <h2> Judul Bab </h2> <h3> Judul Artikel </h3> <p> Ini contoh paragraf berwarna biru </p> <ht Simpan dengan nama file group1css.html selanjutnya buka dengan browser 4. Import CSS file Anda dapat juga meng-inport css kedalam suatu file css yang lain menggunakan tag import. Contoh H2(color:blue) Simpan dengan nama file style2.css Sekarang edit style.css url('style2.css');

11 p {font-family: arial; font-size: small; h1 {color: red; <link rel="stylesheet" href="css/style.css" type="text/css"> <h1> Heading 1 </h1> <h2> Heading 2 </h2> <p> Paragraf. </p> </htm Simpan kode diatas dengan nama file import1css.html kemudian buka menggunakan browser.