panduann lengkap html dan css bagian 2

Panduan HTML dan CSS bagian 2

A. Apa itu CSS

CSS (Cascading Style Sheets) merupakan kode pemrograman untuk membuat tampilan pada

HTML. Selain menggunakan HTML para programer website sering menggunakan kode CSS

untuk mengedit sebuah halaman website. Faktor kemudahanlah yang di gunakan para

programer. Hanya mengedit CSS pada satu file maka seluruh konten yang ditampilkan akan

berubah.

CSS digunakan untuk mendefinisikan tampilan HTML di layar monitor. Dari konten

gambar, teks, bilah sisi, warna, backgorund, spasi penulisan, dan lain-lain. Pembuatan

CSS ini mendukung semua browser.

B. Struktur Kode CSS

Kode CSS dituliskan dengan struktur sebagai berikut:

menggunakan variable

body{ isi kode css}

konten { isi kode css}

nilai properti tidak menggunakan tanda petik

body{

background:#eee;

font-family:Arial Arial Arial;

color:#fff;

margin:0 auto;

}

nama properti bersifat cas atau sensitif

Penjelasan kode CSS di atas:

variable/selector : body

properti : background, font-family, margin, color

value : #eee, Arial, #fff, 0 auto

C. Cara Memanggil CSS

Untuk membuat halaman HTML agar tersusun rapih dan tidak terlalu panjang, simpan

kode/script yang telah dibuat dalam satu folder yang sama dengan file HTML tersebut. Hal

ini memudahkan untuk pemanggilan kode CSS pada halaman HTML. Kode yang digunakan

adalah sebagai berikut:

Panduan Lengkapp HTML dan CSS bagian 2 | Wahyu Setiyono

Penempatann kode pemanggila CSS diantara kode dan . Ada cara lain

untuk memanggil kode CSS pada HTML yakni:

Belajar CSS

body{

background:#eee;

font-family:Geneva, Arial;

dont-size:12px;

color:#fff;

}

Isi Konten

D. Beberepa Penulisan CSS

Ada beberapa cara penulisan CSS pada dokumen HTML, antara lin sebagai berikut:

1. Penulisan CSS bebas

Maksud dari penulisan bebas adalah penempatan CSS berada di antara berbagai kode tag

yang diinginkan. Sebagai contoh, perhatikan penulisan CSS di bawah ini.

Belajar CSS

body{

background:#eee;


dont-size:12px;

color:#fff;}

gbawah{

text-decoration:underline;}

Isi Konten yang bergaris bawah


2. Penggunaan CLASS pada CSS

Belajar CSS

body{

background:#eee;


dont-size:12px;

color:#fff;}

.paragraf{

text-align:center;

color:#ffae00;

}

Isi Konten rata tengah dan

berwarna

3. Penggunaan ID pada CSS

Belajar CSS

body{

background:#eee;


font-size:12px;

color:#fff;}

#content{

widht:970px;

background:#fff;

border:4px solid #2b2b2b;

margin:0 auto;

color:#ffa000;


}

Isi Konten rata tengah dan berwarna

Apabila file CSS terpisah dengan kode HTML maka perlu kode untuk memanggil script

CSS tersebut. Sebagai contoh perhatiakan script di bawah ini.

Belajar CSS

Isi Konten rata tengah dan berwarna

Simpan script di atas dengan nama file index.html dan buat dokumen baru seperti

berikut.body{

background:#eee;


font-size:12px;

color:#fff;}

#content{

widht:970px;

background:#fff;

border:4px solid #2b2b2b;

margin:0 auto;

color:#ffa000;

}

Simpan kode CSS di atas dengan nama file style.css. File ini di simpan/berlokasi pada

satu folder dengan dokumen HTML yang telah dibuat.


4. Format margin untuk mengatur tata letak halaman web

Untuk mengatur tata letak web dapat menggunakan margin dalam pixel maupun em.

Penggunaan masing-masing ukuran margin maupun yang lainnya tergantung pada si

pembuat halaman website.

Penggunaan pixel sering digunakan untuk pembuatan halaman web. Pixel merupakan

ukuran dari panjang dan lebar 1 pixe layar. Keakuratan ini membuat bentuk dan ukuran

yang tetap saat merubah ukuran halaman web. Namun untuk pengaturan teks,

penggunaan pixel tidak akurat. Ketika spasi yang dibuat untuk memisahkan paragraf

pertama dan kedua tetapi akan ada perubahan ukuran huruf seperti dari 8px ke 14px.

Secara otomatis huruf berganti ukuran namun pemisah paragraf tetap pada ukurannya.

Penggunaan em ini adalah ukuran yang dipengaruhi oleh ukuran sekitar. Ukuran em

pada umumnya 1 em adalah 16 pixel. Peruntukan ukuran ini bisa dirubah ketika default

ukuran juga diganti. Sebagai contoh ukuran default pemisah antar baris teks adalah

30px, secara otomatis 1 em juga bernilai 30 pixel. Keuntungan penggunaan em pada

aturan teks sangat baik. Perubahan ukuran huruf yang dirubah dan spasi antar paragraf

yang diatur pada ukuran em akan mengikuti secara default. Sehingga spasi antar

paragraf berubah tidak tetap seperti penggunaan ukuran pixel.

E. Latihan

Untuk memperlancar dan paham tentang kode CSS, seringlah membuat dan eksperimen

untuk menghasilkan tampilan pada halaman web. Jangan menghafalkan kode CSS karena

akan menjadi beban, biarkanlah mngalir dengan sendirinya.

Buatlah menu sebuat halaman web.

Belajar Membuat Web

Home

Blog


Tentang

Kontak

Dari gambar di atas akan dibuat kode CSS untuk merubah tampilan agar lebih menarik pada

halaman web. Simpan dengan file nama style.css.menu_nav {

background: #1b1b1b;

margin:0 auto;

float: left;

padding:0 0 0 20px;

height: 200px;

width:200px;

overflow: hidden;

}

.menu_nav ul {

list-style:none;

width:50px;

float:left;

padding:0 10px 10px 10px;


}.menu_nav ul li {

margin:0;

padding:0 0 0 0;

float:none;

}

.menu_nav ul li a {

display:block;

margin:0;

padding:10px 15px;

color:#ffffff;

text-decoration:none;

font:normal 13px Arial, Helvetica, sans-serif;

}

.menu_nav ul li.active a, .menu_nav ul li a:hover {

display: block;

height: 10px;

width: 200px;

color:#1b1b1b;

text-decoration:none;

}

.menu_nav ul li a:hover {

background: #23aef3;

height: 15px;

}

Hasil dari tampilan yang telah di buah dengan kode CSS di atas adalah:


Tentang Penulis

Nama : WAHYU SETIYONO

Kelahiran tahun : 1993

Bidang pekerjaan : Desain Grafis

Facebook : www.facebook.com/wahyuninggusti

Twitter : www.twitter.com/why_usetiyono

Website : http://www.webwahyu.web.id

http://webwahyu.wordpress.com

Deskripsi lain : Kesukaan dan hobi pada pemrograman website membuat saya bisa

mengutak-atik. Bukannya saya bisa namun karena suka.


panduann lengkap html dan css bagian 2

Documents