Langsung ke konten utama

Informasi IT


Mari kita belajar, dan berbagi ilmu.. ^_^
Hemm, disini akan di jelaskan tentang apa itu  CSS, keuntungan, kekurangan  CSS, dan masih banyak lain nya tentang CSS,  semoga bermanfaat J


 PENGENALAN CSS

Apa Itu CSS?
CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.
Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.
Keuntungan Penggunaan CSS
Jika anda memiliki beberapa halaman website dimana anda menggunakan fontarial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.
Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.
Jadi, keuntungan menggunakan CSS, lebih praktis!
Kekurangan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.



SYNTAX CSS


Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value.
Format penulisan kalimat CSS:
selector { property: value }
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.
Contoh Syntax:
h1 { color: red }
Contoh di atas menunjukkan
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).
Pengelompokan Selectors
Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3semua menggunakan warna merah, maka kode CSS nya menjadi:
h1,h2,h3 { color: red }
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
Penggunaan Banyak Properties
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3 {color:red; font-family:arial; font-size:150%;}
Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warnamerah, dengan type font arial, dan ukuran font 150%.
Cara Penulisan Yang Baik
Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent. Ya cuma biar rapih dan lebih mudah di baca aja sih, ga harus kok.
h1,h2,h3 {

color:red;
font-family:arial;
font-size:150%;
}

Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.
CSS Comment
Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat.
Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.
/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}



IMPLEMENTASI CSS


Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:
·         Inline CSS
·         Embed atau memasang kode css ke dalam bagian <head>
·         Nge link ke external CSS
·         Import CSS file
Yuk kita bahas satu per satu…

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 anda mau 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

Anda bisa juga menempelkan kode CSS 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:blue;}
</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. Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh:
1.      Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.
2.  p {font-family: arial; font-size: small;}
3.  h1 {color: red; }
4.      Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag <head> dan </head>
<head>

<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>

Import CSS

Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:
@import "style.css";
 
atau
 
@import url("style.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: 8pt
}
Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb:
h1 {
text-align: right;
font-size: 20pt
}
Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left sementara dari internal style sheet, text-align=right.
Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sbb:
color: red;
text-align: right;
font-size: 20pt

CLASS DAN ID SELECTOR

Masih ingat kan pada pelajaran syntax CSS bagian pertama yang di tulis adalah selector. Pada contoh-contoh di pelajaran sebelumnya, anda melihat penggunaan tag HTML sebagai selector.
Misalkan anda membuat kode CSS untuk tag <h1>. Sekarang bagaimana jika anda ingin memformat tag <h1> dengan warna / property berbeda? Misalkan, anda ingin tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah berwarna hitam.
Untuk kasus seperti ini, anda bisa menggunakan Class selector dan ID selector.

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 tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div class=nama-class> dan di akhiri dengan tag </div>.
Contoh:
Penulisan kode CSS:
.tengah {text-align:center;}

p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}

Pemakaian kode CSS
<div class=tengah>

<p>Teks tengah akan berwarna merah.</p>
<h1 > 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 anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.


Komentar

Posting Komentar

Postingan populer dari blog ini

MAKALAH SISTEMATIKA KARYA ILMIAH

SISTEMATIKA KARYA ILMIAH D I S U S U N OLEH : 1. RINI PUSPITA (1130000077) 2. RINA AGUSTINA KOTO  (1130000152) 3. VIKKA ANDRIANI HILWA (1130000084) MI-A MALAM STMIK POTENSI UTAMA MEDAN 2012 – 2013 KATA PENGANTAR Puji syukur kehadirat Tuhan Yang Maha Esa yang telah memberikan rahmat serta karunia-Nya kepada kami sehingga kami berhasil menyelesaikan makalah ini, yang alhamdulillah selesai tepat pada waktunya. Makalah ini berjudul “Sistematika Karya Ilmiah” Diharapkan Makalah ini dapat memberikan informasi kepada kita semua tentang penulisan karya ilmiah yang baik. Kami menyadari bahwa makalah ini masih tidak jauh dari sempurna, oleh karena itu kritik dan saran dari semua pihak yang bersifat membangun selalu kami harapkan demi kesempurnaan makalah ini. Akhir kata kami sampaikan terima kasih kepada semua pihak yang telah berperan serta dalam penyusunan makalah ini dari awal sampai akhir. Semoga
6 komentar
Baca selengkapnya

IMPLEMENTASI STACK PADA STRUKTUR DATA

KATA PENGANTAR Segala puji bagi  Tuhan Yang Maha Esa atas segala berkat, rahmat, taufik, serta hidayah-Nya yang tiada terkira besarnya, sehingga penulis dapat menyelesaikan makalah dengan judul ”IMPLEMENTASI STACK PADA STRUKTUR DATA”. Adapun isi dari makalah yang kami buat terdiri dari empat baba tau bagian. Bab pertama Pendahuluan. Bab kedua berisi Pembahasan, membahas tentang Definisi, Operasi dasar pada stack, deklarasi stack dalam pemrograman, dan implementasi dalam kehidupan sehari-hari, bab ketiga berisi contoh program stack, serta bab empat berisi kesimpulan. Meskipun penulis berharap isi dari makalah ini bebas dari kekurangan dan kesalahan, namun selalu ada yang kurang. Oleh karena itu, penulis mengharapkan kritik dan saran yang membangun agar skripsi ini dapat lebih baik lagi. Akhir kata penulis berharap agar makalah ini bermanfaat bagi semua pembaca. Medan , Mei 2013 Penyusun i DAFTAR ISI KATA PENGANTAR………………………………………………………………
1 komentar
Baca selengkapnya

STATMENT KONDISI PERULANGAN

STATMENT KONDISI PERULANGAN Percabangan adalah suatu proses pemilihan aksi diantara beberapa alternative yang diberikan. LOOP (perulangan) adalah : perulangan statement dengan jumlah tertentu jika kondisi terpenuhi. Bentuk bentuk umum dari kondisi perulangan: PERCABANGAN / KONDISI   Bentuk umum statemen if :If ( cond-exp) statement ; Bentuk umum statement if … else :If ( cond-exp) statement true Else statement false ; Jika ada lebih dari 1 (satu) instruksi yang akan dijalankan maka harus dibuat dalam bentuk blok instruksi dengan menggunakan tanda kurung kurawal { … } Perulangan (loop) Bentuk umum :For ( ; ; ) Statement ; Keterangan : - init-exp : ekspresi yang digunakan untuk melakukan inisialisasi terhadap variable-variabel tertentu, terutama variable yang digunakan untuk melakukan iterasi. Init-exp dapat berupa ekspresi maupun pendefinisian variable. - Test-exp : ekspresi yang memegang control terhadap proses perulangan tersebut, pada bagian ini akan ditentuk
Posting Komentar
Baca selengkapnya