MATERI RPL(KELAS 11PWPB)
Cascading Style Sheet (CSS)
Pengertian Cascading Style Sheet (CSS)
- 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.
- Dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yang ada di situs sekaligus memformat ulang tampilan situs.
Sejarah CSS
• 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
1. 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.
2. Kecepatan akses akan lebih cepat.
Dengan file web yang lebih kecil, hal ini juga akan berpengaruh terhadap kecepatan akses/membuka halaman situs.
3. 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.
4. 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 sebaliknya.
5. 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/Bentuk Umum Penulisan 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.
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
1. 1. 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.
1. 2. 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
1. 3. 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: proyek.css, lalu tuliskan kode-kode css di dalam file tersebut.
p {font-family: arial; font-size: small; color:#0000ff}
h1 {color: red; }
- Panggil file proyek.css dari semua halaman web dengan cara memasukkan kode di bawah ini, di antara tag <head> dan </head>
<head>
<link rel="stylesheet" href=“proyek.css" type="text/css">
</head>
1. Import CSS
Kita juga bisa meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:
@import “proyek.css";
atau
@import url(“proyek.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>(embed) 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 (embed) 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;
Komponen CSS
• 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 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 (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>
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>.
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 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 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.
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 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 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.
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 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 }
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;
}
Tidak ada komentar: