Pembuatan CSS Dasar dalam html

Pembuatan CSS Dasar

            Sebelum kita membuat file html dengan mengguakan CSS ada baiknya kita terlebih dahulu mengetahui bagaimana penulisan atau memasang CSS pada dokumen html

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:

1. Internal Style Sheet (file CSS berbeda dari file HTML),
2. External Style Sheet (Kode CSS dipasang di dalam tag head HTML)
3. Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).

1.a Internal CSS
Yaitu menuliskan secara langsung script CSS kedalam file HTML 

1.b External CSS

            External CSS adalah kita membuat file CSS tersendiri dengan eksistensi *.css dan terpisah dari file html dan ditempatkan di folder lain atau di folder yang sama dengan file html tersebut. browser akan membaca file tersebut dan akan menampilkan file html sesuai dengan format yang telah kita atur dalam file, namun dalam external CSS karena memakai 2 notepad ada baiknya di masukkan terlebih dahulu ke folder yang kosong sehingga agar dapat lebih mudah dalam pembacaannya...

II.2 Inline Styles

Inline Style adalah pemformatan pada sebagian kecil saja dari web anda, anda dapat menggunakan inline style.Definisi style pada inline style hanya berpengaruh pada tag dimana inline style tersebut berada.Ada dua cara untuk merubah style dari web page anda yaitu dengan :

- Merubah inline style
-Menulis script untuk merubah style anda.

Dengan menggunakan inline style anda dapat membuat dynamic style

tanpa harus menambahkan script ke web anda. Inline styles merupakan

style yang bisa kita pasang pada element web tertentu saja.

Contoh:

Jika anda ingin menambahkan style pada

dengan warna merah,

anda harus mengeset attribut STYLE dari tag

.

Jika anda ingin menggunakan script untuk memodifikasi inline style,

anda dapat menggunakan Style Object. Style Object mensupport semua

property yang di support CSS untuk style. Untuk menggunakan property

pada script :

1. Hilangkan tanda hubung “-” dari property CSS Style

2. Ganti huruf setelah tanda hubung menjadi Capital

II. 3 ISTILAH-ISTILAH DALAM CSS

1. Style rule

Cascading style sheet merupakan kumpulan aturan yang mendefinisikan

style dari document. Sebagai contoh kita bisa membuat aturan style yang

menentukan bahwa semua

di tampilkan dengan warna orange.

2. Style sheet

Style sheet dapat dapat di embedded ke HTML document. Atau disebut

embedded style sheet. Style sheet juga bisa dibuat sebagai external file

dan di link ke document HTML. Style role bisa di kenakan pada bagian

tertentu dari web page. Sebagai contoh anda bisa menentukan

paragraph tertentu di tampilkan dengan style bold dan italic sementara

yang lain tetap seperti biasa

3. Selector

selector { property1: value; property2:value, . . .}

H1{ color:green; background-color:orange}

Style sheets terdiri dari dua bagian:

1. Selector

Bagian pertama sebelum tanda “{}” disebut selector.

2. Declaration

Terdiri dari property dan nilainya.

 

Contoh:  Istilah-istilah dari CSS

 II.4  Mengatur Format Font

a. Model huruf

Model yang umum dipakai adalah teks miring (italik) atau tebal (bold).

Umumnya program browser mempergunakan tag em untuk huruf italik

dan tag strong untuk huruf tebal. Misalnya anda ingin menuliskan kode

em agar huruf tampil berbentuk italik dan tebal dan menuliskan kode

strong untuk huruf tebal uppercase, perintahnya dituliskan sebagai

berikut :

Contoh: em { font-style: italic; font-weight: bold; }

  strong { text-transform: uppercase; font-weight:bold; }

bila gagal dapat ditambahkan perintah ini :h2 { text-transform: lowercase; }

b. Mengatur ukuran huruf

Kebanyakan program browser mempergunakan huruf yang lebih besar

untuk heading yang penting sifatnya. Bila anda menimpa ukuran

defaultnya, anda menempuh resiko yaitu huruf menjadi tampak lebih

kecil khususnya bila anda mempergunakan ukuran yang anda tambahkan

tersebut dengan ukuran titik (point). Karenanya anda disarankan untuk

melakukan pengaturan ukuran huruf dengan ukuran yang sama.

Contoh berikut mengatur ukuran heading dalam persen relatif terhadap

ukuran teks normal.

h1 { font-size: 200%; }

h2 { font-size: 150%; }

h3 { font-size: 100%; }

c.       Mengatur jenis huruf

Bisa saja jenis huruf favorit anda tidak bisa ditampilkan oleh berbagai jenis browser.Untuk mengatasi hal ini anda dapat menuliskan beberapa jenis huruf  yang tidak dapat ditampilkan oleh hampir semua browser.

Ada beberapa jenis huruf generik yang dijamin cocok, sehingga anda

kami sarankan untuk mengakhiri daftar perintah HTML anda dengan

salah satu jenis huruf berikut : serif, sans-serif, cursive, fantasy, atau

monospace, contoh :body { font-family: Verdana, sans-serif; }

h1,h2 { font-family: Garamond, Times New Roman,serif; }

Dalam contoh ini heading penting akan ditampilkan dalam bentuk huruf

Garamond, bila gagal maka akan ditampilkan dalam bentuk Times New

Roman, dan bila juga masih tidak dapat tampil, maka akan tampil

sebagai huruf serif. Teks paragraf akan ditampilkan dengan huruf

Verdana atau bila masih tidak tampil juga, maka browser masih dapat

menampilkannya dengan jenis huruf standar sans-serif.

 kesimpulan: dari artikel diatas ternyata pembuatan css dalam program html tidaklah sulit, hanya      saja kita harus memperhatikan Syntax CSS yang External dan Internal,,,, 

untuk itu silakan mencoba n pasti berhasil.............