Pengetahuan Bisnis : Chapter 07 – Style Pada Halaman W

 

Pengetahuan Bisnis : Chapter 07 – Style Pada Halaman Web

 

 

CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.

Pengertian CSS

 CSS merupakan singkatan menurut Cascading Style Sheets. Berisi rangkaian instruksi yg memilih bagiamana suatu text akan tertampil pada laman web. Perancangan desain text bisa dilakukan menggunakan mendefinisikan fonts (huruf) , colors (warna), margins (berukuran), latar belakang (background), berukuran font (font sizes) & lain-lain. Elemen-elemen misalnya colors (warna) , fonts (huruf), sizes (berukuran) & spacing (jarak) diklaim jua “styles”. Cascading Style Sheets jua sanggup berarti meletakkan styles yg tidak sama dalam layers (lapisan) yg tidak sama. CSS terdiri menurut style sheet yg memberitahukan browser bagaimana suatu dokumen akan disajikan. Fitur-fitur baru dalam laman web usang bisa dibubuhi menggunakan donasi style sheet. Saat memakai CSS, Anda nir perlu menulis font, color atau size dalam setiap paragraf, atau dalam setiap dokumen. Setelah Anda menciptakan sebuah style sheet, Anda bisa menyimpan kode tadi sekali saja & bisa pulang menggunakannya jika diperlukan

Menulis SS

Dalam hal ini ada beberapa istilah dan kosep dasar dari css. Tapi sebelum menuju pembahasan lebih lanjut, akan lebih baik kita harus membiasakan dengan bagaimana suatu style harus ditulis. Berikut adalah contoh mudah penulisan css pada suatu halaman web

 

Selector

 

Selector biasanya merupakan elemen HTML atau tag dimana berbagai properti diberi suatu nilai. Dalam sebuah selector, setiap properti mempunyai nilai masing-masing dan sejumlah properti dengan nilai-nilai terkait dapat diatur.

 

Seperti pada contoh diatas; body, p, dan h1 adalah suatu selector dimana warna (color), nama font (font-family) dan jenis font (font-weight) diberi nilai untuk tiap propertinya (tahoma, bold, blue, dll).

 

Pengelompokan dalam CSS

 

·         Untuk berbagi style yang sama, bila beberapa elemen mempunyai nilai properti yang sama (misalnya font, ukuran, warna, dll).

 

·         Dengan satu perintah dapat memberikan properti style pada elemen yang berbeda dengan nilai yang sama.

 

·         Untuk menghemat waktu bila terjadi penambahan properti dan juga ketika merubah properti di elemen.

 

Padding, Margin dan Border

 

Padding

 

ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas, kanan, bawah dan kiri, atau Anda bisa menggunakan

 

padding-left:5px; ini adalah untuk pengaturan padding bagian kiri

 

padding-right:5px; ini adalah untuk pengaturan padding kanan

 

padding-top:5px; untuk bagian atas dan

 

padding-bottom:5px; untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti sesuai satuan yang lain yang sesuai

 

 

Border

 

Ditulis dengan CSS border:1px dotted #000000; urutan penggunaanya adalah ukran border, style border dan warna border, atau bisa menggunakan

 

border-width:1px; ini adalah ketebalan border

 

border-style:dotted; ini adalah jenis bordernya bisa kamu ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya

 

border-color:#FFFFFF; ini adalah warna dari border.. kamu bisa menggantin code warnanya (www.colorschemer.com/online)

 

 

Margin

 

Ditulis dengan CSS margin:5px 5px 5px 5px; urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas

 

margin-left:5px;

 

margin-right:5px;

 

margin-top:5px;

 

margin-bottom:5px;

 

keterangan lainya bisa mengikuti keterangan padding diatas

 

Satuan Dalam CSS

 

 

1. Statik

 

 

* in -- satuan inchi

 

* cm -- satuan centimeter

 

* mm -- satuan milimeter

 

* pt -- satuan point (1point = 1/72 inchi)

 

* pc -- satuan pica (1pica = 12 point)

 

* px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)

 

 

2. Relatif

 

 

* % -- satuan persen

 

* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)

 

* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)

 

 

penulisan dasar CSS seperti di bawah ini :

 

Selector {property:value}

 

Selector merupakan tag HTML atau elemen (class/id) yang Di pilih 

 

 

Property adalah atribut yang ingin kalian atur nilai nya

 

Value adalah nilai dari property, bisa berupa angka atau teks.

 

 

 

Untuk lebih jelasnya bisa lihat contoh di bawah ini

 

p {color:blue}

 

Dimana p merupakan selector yang digunakan untuk memunculkan property color dan value blue. Agar lebih mengerti kalian bisa kihat pernulisan HTML nya sebagai berikut :