Cascading Style Sheet

Cascading Style Sheet Gufron gufron@gufron.com

Sub Bahasan • Pendahuluan • Konsep Dasar CSS • Syntax/Perintah CSS • Implementasi CSS • Komponen CSS • CSS Properties

Cascading Style Sheet Cascading Style Sheets (CSS atau sering disebut dengan stylesheet) adalah suatu teknologi (file) yang berisi kumpulan kode-kode yang berurutan dan saling berhubungan dan digunakan untuk mengatur format/tampilan halaman website (situs). Dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yang ada di situs sekaligus memformat ulang tampilan situs. CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk digunakan di web browser.

Sejarah Casacading Style Sheet • 1996, W3C merekomendasikan penggunaan CSS dalam dokumen web. Tujuannya untuk mengurangi adanya TAG baru untuk format tampilan web, karena saat itu Netscape dan IE ingin mengembangkan TAG sendiri. • CSS pertama yang muncul adalah CSS level 1, yang mendukung beberapa pengaturan sebagai berikut: • Jenis font dan ketebalan font • Warna, background, dan teks • Posisi teks, gambar, dan lainnya • Margin, border, dan padding • Pertengahan 1998, W3C menyempurnakan CSS awal dengan membuat standar CSS2 yang menjadi standart hingga saat ini. • Saat ini sudah dikembangan CSS level 3.

Fungsi/Keuntungan CSS • Dengan CSS, memungkinkan web developer mendapatkan file web yang lebih kecil. Hal ini karena pengaturan style oleh CSS dibuat secara terpisah dan di import ke dalam file utama. • Kecepatan akses akan lebih cepat. Dengan file web yang lebih kecil, hal ini juga akan berpengaruh terhadap kecepatan akses/membuka halaman situs. • Mempermudah kontrol style dari seluruh halaman website. Dengan menggunakan CSS akan sangat mempermudah mengotrol style dari seluruh halaman web site. Hal ini dikarenakan kita hanya merubah satu halaman untuk merubah seluruh style dari sebuah website.

Fungsi/Keuntungan CSS (Lanjutan) • CSS memungkinkan untuk menyembunyikan content dari browser, tapi masih di index oleh mesin pencari. CSS memungkinkan kita menyembunyikan Content dari halaman website dari browser, tetapi memungkinkan masih dibaca oleh google. Tujuan hal ini, misal kita masih menghendaki sebuah content untuk disembunyikan dari browser, tatapi masih bisa nampak ketika diprint, atau sebaliknnya. • Pengunjung/user yang berbeda dapat memiliki CSS yang berbeda pula. Dengan CSS, kita dapat memberikan tampilan yang berbeda kepada pengunjung/user yang berbeda.

Kekurangan CSS • Tidak semua browser mengartikan kode CSS dengan cara yang sama. Kadang-kadang, tampilan web dengan suatu CSS terlihat baik di browser yang satu, tapi kurang baik di browser yang lain. • Jadi sebagai web developer kita harus memeriksa tampilan situs yang dibuat supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan situs kita terlihat baik di semua browser.

Konsep Dasar CSS Sebuah style sheet terdiri dari beberapa aturan (rules). Masing-masing aturan terdiri dari satu atau lebih selektor (selector) dan sebuah blok deklarasi (declaration block). Dalam satu aturan, dapat ditulis lebih dari satu selector (style group), dan masing-masing selector harus dipisah dengan tanda koma (,). Sebuah blok deklarasi terdiri dari beberapa deklarasi yang dipisahkan oleh titik koma (;). Masing-masing deklarasi terdiri dari property, titik dua (:) dan nilai (value). Style sheet dapat diberi komentar (dengan syntax pembuka (/*) dan penutup (*/) untuk mempermudah koreksi. Segala teks yang ada di dalam komentar tidak akan dibaca sebagai kode.

Syntax CSS <style type=“text/css”> /* komentar */ selector {property: value} /* komentar */ </style> Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat. Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur. Value adalah nilai dari pengaturannya.

Rule Selector Declaration Block Value Property Syntax CSS (Lanjutan) <style type=“text/css”> /* stylesheet pemrograman web oleh Gufron */ I, U {color: red} B {color:green; text-decoration: underline; font-family: Arial} </style>

Implementasi CSS Ada 4 cara memasang kode CSS ke dalam halaman situs, yaitu: • Inline CSS • Embedded (memasang kode ke dalam bagian <head></head> • External (link ke file CSS) • Import CSS file

Inline CSS • Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaiknya hanya digunakan jika ingin memformat suatu elemen satu kali saja. Contoh: <p style="color:blue"> Isi paragraf. </p> • Pada contoh di atas, elemen paragraf <p> di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya. • Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.

Embedded CSS • Kode CSS dapat ditempelkan di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>. Contoh: <head> <style type="text/css" media=“screen”> p {color:#0000ff;} </style> </head> • Dalam contoh di atas semua elemen <p> dalam halaman web tersebut akan diformat menggunakan font berwarna biru.

External CSS Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css. Panggil file CSS tersebut ke dalam semua halaman web yang dibuat. Dengan cara ini, kita hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web yang dibangun. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini: Buat satu file dengan notepad atau teks editor lain dengan nama, misalkan: ptikubh.css, lalu tuliskan kode-kode css di dalam file tersebut. p {font-family: arial; font-size: small; color:#0000ff} h1 {color: red; } Panggil file ptikubh.css dari semua halaman web dengan cara memasukkan kode di bawah ini, di antara tag <head> dan </head> <head> <link rel="stylesheet" href=“ptikubh.css" type="text/css"> </head>

Import CSS • Kita juga bisa meng-import CSS ke dalam suatu halaman website menggunakan tag import. Contoh: @import “ptikubh.css"; atau @import url(“ptikubh.css");

Penggunaan Lebih Dari Satu Kode CSS Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik. Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sbb: h1 { color: red; text-align: left; font-size: 12px; } Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb: h1 { text-align: right; font-size: 20px; } Perhatikan bagaimana pemformatan saling bertabrakan, dari external style sheet, text-align=left dan font-size=12px sementara dari internal style sheet, text-align=right dan font-size=20px.

Penggunaan Lebih Dari Satu Kode CSS Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan external style sheet. Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sbb: color: red; text-align: right; font-size: 20px;

Pada bagian awal, syntax CSS bagian pertama yang di tulis adalah selector. Pada contoh-contoh terlihat penggunaan tag HTML sebagai selector. Contoh kasus: • Kita akan membuat kode CSS untuk tag <h1>. Namun kita ingin memformat memformat tag <h1> dengan warna / property berbeda. Misalkan, tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah berwarna merah. • Untuk kasus seperti ini, kita bisa menggunakan Class selector dan ID selector. Komponen CSS

Komponen CSS (Lanjutan) • Class Selector Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali. Cara penulisan Class Selector: .nama-class {property:value;} • Untuk menempelkan class ke dalam tag HTML: taghtml.nama-class {property:value;} Perhatikan titik di setiap awal nama Class. • Jika ingin menggunakan class selector di luar kode HTML, gunakan tag <div class=nama-class> dan di akhiri dengan tag </div> atau dengan tag <span></span>

Class Selector Contoh penulisan syntax CSS: .tengah {text-align:center;} p.tengah {color:#ff0000;} h1.kiri {color:#0000ff;} h1.tengah {color:#000000;} Contoh pemakaian kode CSS: <div class=tengah> <p>Teks tengah akan berwarna merah.</p> <h1 class=tengah>Tag H1 tengah akan berwarna hitam</h1> </div> <h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>

Class Selector (Lanjutan) • Hasil Teks tengah akan berwarna merah. Tag H1 tengah akan berwarna hitam Tag H1 kiri akan berwarna biru

ID Selector • ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian menu / sidebar. • Cara penulisan ID Selector: #nama-ID {property:value;} • Untuk menempelkan ID selector ke dalam tag HTML: taghtml#nama-ID {Property:value;} Perhatikan tanda # di setiap awal nama ID. • Jika ingin menggunakan class ID selector di luar kode HTML, gunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.

ID Selector Contoh penulisan syntax CSS: #tengah {text-align:center;} p.tengah {color:#ff0000;} h1.kiri {color:#0000ff;} h1.tengah {color:#000000;} Contoh pemakaian kode CSS: <span id=tengah> <p>Teks tengah akan berwarna merah.</p> <h1 class=tengah>Tag H1 tengah akan berwarna hitam</h1> </span> <h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>

CSS Properties • Font CSS dapat memformat font dengan berbagai macam cara mulai dari pengaturan tipe font, ukuran, dll. Properties dari CSS Font: • Font Family • Font Size • Font Style • Font Variant • Font Weight • Font Color • Font • Syntax penggunaan CSS font: { font-properties: value }

CSS Properties: Font • CSS Font Family Dalam CSS, tipe huruf dikenal dengan Font Family. Properties font family digunakan untuk pengaturan jenis huruf yang akan digunakan. Cara penulisan: property -> font-family value -> nama-nama font Contoh penulisan: h1 { font-family: verdana; } h2 { font-family: “times new roman”; }

CSS Properties: Font • CSS Font Size Properti font size digunakan untuk pengaturan ukuran huruf yang digunakan. Syntax: font-size: <absolute-size> | <relative-size> | <length> | <percentage> Contoh penulisan: h1 { font-size: 18px; } h2 { font-size: 14pt; } Nilai untuk size: • Absolute Size xx-small, x-small, small, medium, large, x-large, xx-large • Relative Size larger/smaller, length [pixel (px), point (pt)], persentase

CSS Properties: Font • CSS Font Style Properties font style digunakan untuk pengaturan tampilan (style) kemiringan dari huruf yang digunakan. Ada 3 macam nilai style yaitu: • normal: browser menampilkan huruf secara normal. • Italic: browser menampilkan huruf miring • oblique: browser menampilkan huruf miring (oblique). Perbedaan italic dan oblique: • Jenis font biasanya memiliki font set miring yang disebut italic. Misalkan, untuk font Trebuchet MS, akan terdapat 2 set font yaitu trebuchet MS true type (normal) dan trebuchet MS italic (miring). Sementara pada penggunaan style oblique, yang digunakan adalah Trebuchet MS true type yang di miringkan pada saat ditampilkan. Jadi untuk beberapa font, tidak akan tampak perbedaan nyata antara penggunaan style italic dan oblique.

CSS Properties: Font • Font Variant Properti font variant digunakan untuk menampilkan font dalam huruf kapital kecil. Jadi semua huruf non kapital akan berubah menjadi huruf kapital, tetapi ukurannya tetap sama. Perlu diketahui, tidak semua jenis font dapat menggunakan properti ini. Nilai untuk variant: normal, small-caps

CSS Properties: Font • CSS Font Weight Properti font weight digunakan untuk mengatur ketebalan font. Cara penulisan: property -> font-weight value -> normal, bold (tebal), bolder (lebih tebal), lighter (lebih tipis) 100, 200, 300, 400 (normal), 500, 600, 700 (bold), 800, 900 Contoh penulisan: h1 { font-size: 14px; font-weight: bold; } h2 { font-size: 14px; font-weight:100; }

CSS Properties: Font • CSS Font Color Properti color digunakan untuk menentukan warna huruf. Sebenarnya properti color bukanlah bagian dari properti font. Cara penulisan: property -> color value -> nama warna (red, black, white), hexadesimal (#ff0000), RGB (0, 220, 98) Contoh penulisan: h1 { font-size: 14px; color: red; } h2 { font-size: 14px; color: #0000ff; } Nilai (value) dari color adalah sebuah keyword atau sebuah kode RGB. 16 keyword diambil dari palette Windows VGA: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

CSS Properties: Font Ada 4 cara dalam menuliskan warna menggunakan kode RGB: • #rrggbb (e.g., #00cc00) • #rgb (e.g., #0c0) • rgb(x,x,x) dimana x adalah integer antara 0 dan 255 (e.g., rgb(0,204,0)) • rgb(y%,y%,y%) dimana y adalah nomor antara 0.0 dan 100.0 (e.g., rgb(0%,80%,0%)) Semua contoh di atas digunakan untuk menuliskan warna yang sama.

CSS Properties: Font • CSS Font Digunakan untuk menggabungkan beberapa CSS font menjadi satu. Cara penulisan: property -> font value -> font-size, font-variant, font-weight, font-style, font-family Contoh penulisan: p { font: italic, bold 12pt/14pt Times New Roman }

CSS Properties: Background • Background Color Digunakan khusus untuk pengaturan warna latar halaman. Syntax: background-color: value {warna | transparent }

CSS Properties: Background • Background Digunakan untuk pengaturan latar halaman, baik warna maupun gambar. Syntax: Background: value; Nilai: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> Contoh Penulisan: background: #ffffff url(“gambar.png") left top repeat-x; background: #ffffff url(“gambar.png") no-repeat;

CSS Properties: Text • Text-Alignment Properties Digunakan untuk pengaturan tata letak teks. Cara penulisan: property -> text-align value -> left, right, center, justify Contoh penulisan: h1 { text-align: center }

CSS Properties: Body • Body Properties Digunakan untuk pengaturan tata letak halaman secara keseluruhan. Cara penulisan: property -> body value -> margin, padding, font, color, background Contoh penulisan: body { margin-top: 5px; background: #ffffff url("latar.jpg") left top repeat-x; }

Tugas Mandiri (Personal) Lakukan perubahan terhadap website sederhana yang telah dibuat menggunakan CSS sebagai suplemen. Warna latar untuk halaman pertama menggunakan 6 digit NPM masing-masing. Tugas dikumpul melalui SIPERO FKIP.

Gufron gufron@gufron.com

Cascading Style Sheet